Pillar Priority Rank Chip

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 423,
  slug: 'pillar-priority-rank-chip',
  name: 'Pillar Priority Rank Chip',
  category: 'pillars-roles',
  subcategory: 'comparison',
  pillar: 'do',
  description: 'A pip displaying pillar priority order — e.g. DO > CO > DE > GO — as a chained chip.',
  spec: `## Intent
Different teams weight the pillars differently; this chip records the ordering as a sentence the eye can parse instantly.

## Acceptance Criteria
- [ ] Four pillar tokens in left-to-right order separated by chevrons
- [ ] Each token uses its own brand colour
- [ ] Chip is a single inline unit (does not wrap mid-chain)
- [ ] Negative: does NOT suggest later pillars are unimportant

## Constraints
- Pure CSS
- Theme-aware via tokens`,
  tags: ['badge', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 84, a11y: 'aa', themed: true, animated: false },
};

const order: { k: string; cls: string }[] = [
  { k: 'DO', cls: 'bg-do' },
  { k: 'CO', cls: 'bg-co' },
  { k: 'DE', cls: 'bg-de' },
  { k: 'GO', cls: 'bg-go' },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-3 overflow-hidden">
  <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 mb-2">Priority Order</div>
  <div class="inline-flex items-stretch border-2 border-black max-w-full overflow-hidden">
    {order.map((p, i) => (
      <Fragment>
        <span class={`${p.cls} font-black text-[11px] leading-none px-2 py-1.5 flex items-center justify-center min-w-[28px]`}>{p.k}</span>
        {i < order.length - 1 && <span class="bg-paper border-s-2 border-e-2 border-black font-mono text-[10px] leading-none px-1 flex items-center">&gt;</span>}
      </Fragment>
    ))}
  </div>
  <div class="mt-2 font-mono text-[9px] uppercase tracking-widest opacity-60">descending emphasis</div>
</div>