@motir/design-system 0.2.0 → 0.3.0

package/dist/components/ui/Pill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Pill.tsx"],"names":["Pill"],"mappings":";;;;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACsBA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,EAAA;AAAA,IACE,gCAAA;AAAA,IACA,0BAAA;AAAA,IACA,6CAAA;AAAA,IACA,+BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMR,MAAA,EAAQ;AAAA,QACN,OAAA,EAAS,oEAAA;AAAA,QACT,aAAA,EAAe,+DAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAcf,WAAA,EACE,uHAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,+DAAA;AAAA,QACN,OAAA,EAAS,gEAAA;AAAA,QACT,OAAA,EAAS,iEAAA;AAAA,QACT,MAAA,EAAQ;AAAA,OACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQA,QAAA,EAAU;AAAA,QACR,OAAA,EACE,qHAAA;AAAA,QACF,IAAA,EAAM,kHAAA;AAAA,QACN,MAAA,EACE,oHAAA;AAAA,QACF,GAAA,EAAK,iHAAA;AAAA,QACL,MAAA,EACE;AAAA,OACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYA,UAAA,EAAY;AAAA,QACV,KAAA,EAAO,iEAAA;AAAA,QACP,MAAA,EAAQ,kEAAA;AAAA,QACR,MAAA,EAAQ,kEAAA;AAAA,QACR,MAAA,EAAQ;AAAA,OACV;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,qEAAA;AAAA,QACP,KAAA,EAAO,qEAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,wEAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT,OAAA,EAAS,sEAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,iBAAiB;AAAC;AAEtB,CAAA;AAKO,IAAM,OAAO,UAAA,CAAuC,SAASA,KAAAA,CAClE,EAAE,QAAQ,QAAA,EAAU,QAAA,EAAU,UAAA,EAAY,OAAA,EAAS,MAAM,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,IACjF,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,YAAA,CAAa,EAAE,MAAA,EAAQ,QAAA,EAAU,UAAU,UAAA,EAAY,OAAA,EAAS,MAAM,CAAA;AAAA,QACtE;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC","file":"Pill.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Pill — compact status or severity label. Pure span, no interaction.\n *\n * Variant axes (use exactly one):\n *  - `status`: planned | in-progress | implemented | done — Motir's Subtask\n *    lifecycle states. The first three are per-CATEGORY tones; `implemented` is\n *    the one PER-STATUS tone (MOTIR-3103), because it shares a category with\n *    In Progress / Planning / In Review and must not share their chip.\n *  - `severity`: info | success | warning | danger — semantic UI states.\n *  - `priority`: highest | high | medium | low | lowest — work-item priority, a\n *    5-step diverging ramp (`--el-priority-*` hue tinted over the surface, plus a\n *    redundant direction icon). The single source of truth is `PRIORITY_META`.\n *  - `memberRole`: admin | member | viewer | custom — a project membership role\n *    (Story 6.4), one hued tint per role. (Named `memberRole`, not `role`, so\n *    it can't collide with the DOM `role` ARIA attribute on the span.)\n *  - `orgRole`: owner | admin | member — an ORGANIZATION role (Story 6.10),\n *    sitting above the workspace `memberRole`. owner → lavender (the highest,\n *    brand-purple tier), admin → sky, member → mint — per the org-admin design.\n *  - `tone`: neutral — a non-semantic chip (counts, metadata). Dark text on a\n *    neutral surface. `private` — the epic-level-privacy \"Not public\" badge\n *    (Story 6.14 · design epic-privacy panels 1/2/6b): lavender tint + charcoal\n *    text, the same AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"`.\n *\n * All tones use adaptive dark/light text (`--color-charcoal`) on a hued tint,\n * so every variant clears WCAG AA contrast in both light and dark modes\n * (the hue lives in the background, not the text — PRODECT_FINDINGS #35).\n *\n * Always uses `--radius-badge` for fully rounded ends regardless of display style.\n *\n * @example\n * <Pill status=\"in-progress\">In progress</Pill>\n * <Pill severity=\"danger\">Validation failed</Pill>\n * <Pill tone=\"neutral\">3 members</Pill>\n */\nconst pillVariants = cva(\n  cn(\n    'inline-flex items-center gap-1',\n    'rounded-(--radius-badge)',\n    'px-(--spacing-chip-x) py-(--spacing-chip-y)',\n    'font-sans text-xs font-medium',\n    'border',\n  ),\n  {\n    variants: {\n      // All colored tones carry the semantic hue in the TINT BACKGROUND and use\n      // adaptive dark/light TEXT (`--color-charcoal`: #37352f light, #e5e5e5\n      // dark) — the same pattern `planned` always used. The previous saturated\n      // hue-on-tint TEXT failed WCAG AA (≈2.5–3.8:1 light, 3.2–4.0:1 dark);\n      // charcoal-on-tint clears ~10:1 in both modes (PRODECT_FINDINGS #35).\n      status: {\n        planned: 'bg-(--el-tint-lavender) text-(--el-text-strong) border-transparent',\n        'in-progress': 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        // BUILT, waiting on checks (MOTIR-3103). The first PER-STATUS tone on\n        // this axis — the other three are per-CATEGORY, and `implemented` sits in\n        // the same `in_progress` category as In Progress, Planning and In Review,\n        // so without its own tone four statuses render one chip.\n        //\n        // It uses the recipe theme.css's own `--el-status-*` header prescribes —\n        // \"a status CHIP bg = color-mix(var(--el-status-X) 14%, var(--el-surface))\n        // with --el-text-strong\" — which is the same dilution the `priority`\n        // variant below already renders. The hue is not spent by any other\n        // status in any palette (measured at ΔE2000 >= 10 across all ten by\n        // tests/theme/statusHueSeparation.test.ts), and the chip additionally\n        // carries a GLYPH, because a 14% tint is a subtle mark by construction\n        // and finding #35 forbids resting a state on colour alone.\n        implemented:\n          'bg-[color-mix(in_srgb,var(--el-status-implemented)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        done: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n      },\n      severity: {\n        info: 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        success: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n        warning: 'bg-(--el-tint-peach) text-(--el-text-strong) border-transparent',\n        danger: 'bg-(--el-tint-rose) text-(--el-text-strong) border-transparent',\n      },\n      // Priority chips (MOTIR-1273 · 1266.2) — a 5-step diverging ramp keyed off\n      // the `--el-priority-*` hues, un-collapsing `medium` and `lowest` (both\n      // were `tone=\"neutral\"` grey). Each hue is diluted to a 14% tint over\n      // `--el-surface` so charcoal `--el-text-strong` clears AA in both themes\n      // (the hue lives in the background — finding #35); the redundant direction\n      // icon (PRIORITY_META) is the non-colour cue. `medium` (slate) and\n      // `lowest` (stone) resolve to two distinct greys in every palette.\n      priority: {\n        highest:\n          'bg-[color-mix(in_srgb,var(--el-priority-highest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        high: 'bg-[color-mix(in_srgb,var(--el-priority-high)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        medium:\n          'bg-[color-mix(in_srgb,var(--el-priority-medium)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        low: 'bg-[color-mix(in_srgb,var(--el-priority-low)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        lowest:\n          'bg-[color-mix(in_srgb,var(--el-priority-lowest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n      },\n      // Project membership roles (Story 6.4 · design/projects access-members):\n      // admin → lavender, member → sky, viewer → mint — the hue in the tint,\n      // charcoal text (AA-safe, finding #35), same recipe as `status`. Routed\n      // through the DEDICATED `--el-role-*` tokens (MOTIR-1274 · 1266.3) so a\n      // palette can tune roles apart from the other --el-tint-* meanings; each\n      // defaults to its prior tint (zero visual change).\n      // `custom` (MOTIR-2257 · MOTIR-2485) is a project's OWN role, which has no\n      // enum value — it takes the next free tint slot (peach) because this\n      // surface had already spent lavender / sky / mint on the built-ins, so a\n      // custom chip in any of those would read as one of them. The KIND is\n      // carried in WORDS by the chip's accessible name; nothing rests on the hue.\n      memberRole: {\n        admin: 'bg-(--el-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-role-member) text-(--el-text-strong) border-transparent',\n        viewer: 'bg-(--el-role-viewer) text-(--el-text-strong) border-transparent',\n        custom: 'bg-(--el-role-custom) text-(--el-text-strong) border-transparent',\n      },\n      // Organization roles (Story 6.10 · design/org-admin): owner → lavender\n      // (the highest, brand-purple tier), admin → sky, member → mint — the hue\n      // in the tint, charcoal text (AA-safe, finding #35), same recipe as above.\n      // Dedicated `--el-org-role-*` tokens (MOTIR-1274 · 1266.3); zero change.\n      orgRole: {\n        owner: 'bg-(--el-org-role-owner) text-(--el-text-strong) border-transparent',\n        admin: 'bg-(--el-org-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-org-role-member) text-(--el-text-strong) border-transparent',\n      },\n      tone: {\n        neutral: 'bg-(--el-chip-bg) text-(--el-text-secondary) border-(--el-chip-border)',\n        // Epic-level privacy \"Not public\" badge (Story 6.14 · design\n        // epic-privacy panels 1/2/6b) — lavender tint, charcoal text, the same\n        // AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"` (≈9.7:1).\n        // Dedicated `--el-privacy-private` token (MOTIR-1274 · 1266.3); the\n        // matching `--el-privacy-public` is defined ahead of a \"public\" badge.\n        private: 'bg-(--el-privacy-private) text-(--el-text-strong) border-transparent',\n        // Inactive \"Archived\" badge (MOTIR-1276 · 1266.5) — a QUIET muted fill\n        // with slate ink, not a hued tint: archived is an inactive state, not a\n        // severity. Dedicated `--el-archived-pill-*` tokens so a palette can tune\n        // the inactive badge apart from the neutral chip; AA-safe (slate on muted\n        // clears AA both themes).\n        archived: 'bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent',\n      },\n    },\n    defaultVariants: {},\n  },\n);\n\nexport interface PillProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {}\n\nexport const Pill = forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  { status, severity, priority, memberRole, orgRole, tone, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        pillVariants({ status, severity, priority, memberRole, orgRole, tone }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n});\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Pill.tsx"],"names":["Pill"],"mappings":";;;;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACsBA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,EAAA;AAAA,IACE,gCAAA;AAAA,IACA,0BAAA;AAAA,IACA,6CAAA;AAAA,IACA,+BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMR,MAAA,EAAQ;AAAA,QACN,OAAA,EAAS,oEAAA;AAAA,QACT,aAAA,EAAe,+DAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAcf,WAAA,EACE,uHAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUF,QAAA,EACE,oHAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,+DAAA;AAAA,QACN,OAAA,EAAS,gEAAA;AAAA,QACT,OAAA,EAAS,iEAAA;AAAA,QACT,MAAA,EAAQ;AAAA,OACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQA,QAAA,EAAU;AAAA,QACR,OAAA,EACE,qHAAA;AAAA,QACF,IAAA,EAAM,kHAAA;AAAA,QACN,MAAA,EACE,oHAAA;AAAA,QACF,GAAA,EAAK,iHAAA;AAAA,QACL,MAAA,EACE;AAAA,OACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYA,UAAA,EAAY;AAAA,QACV,KAAA,EAAO,iEAAA;AAAA,QACP,MAAA,EAAQ,kEAAA;AAAA,QACR,MAAA,EAAQ,kEAAA;AAAA,QACR,MAAA,EAAQ;AAAA,OACV;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,qEAAA;AAAA,QACP,KAAA,EAAO,qEAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,wEAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT,OAAA,EAAS,sEAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT,QAAA,EAAU,8EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWV,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,iBAAiB;AAAC;AAEtB,CAAA;AAKO,IAAM,OAAO,UAAA,CAAuC,SAASA,KAAAA,CAClE,EAAE,QAAQ,QAAA,EAAU,QAAA,EAAU,UAAA,EAAY,OAAA,EAAS,MAAM,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,IACjF,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,YAAA,CAAa,EAAE,MAAA,EAAQ,QAAA,EAAU,UAAU,UAAA,EAAY,OAAA,EAAS,MAAM,CAAA;AAAA,QACtE;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC","file":"Pill.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Pill — compact status or severity label. Pure span, no interaction.\n *\n * Variant axes (use exactly one):\n *  - `status`: planned | in-progress | implemented | done — Motir's Subtask\n *    lifecycle states. The first three are per-CATEGORY tones; `implemented` is\n *    the one PER-STATUS tone (MOTIR-3103), because it shares a category with\n *    In Progress / Planning / In Review and must not share their chip.\n *  - `severity`: info | success | warning | danger — semantic UI states.\n *  - `priority`: highest | high | medium | low | lowest — work-item priority, a\n *    5-step diverging ramp (`--el-priority-*` hue tinted over the surface, plus a\n *    redundant direction icon). The single source of truth is `PRIORITY_META`.\n *  - `memberRole`: admin | member | viewer | custom — a project membership role\n *    (Story 6.4), one hued tint per role. (Named `memberRole`, not `role`, so\n *    it can't collide with the DOM `role` ARIA attribute on the span.)\n *  - `orgRole`: owner | admin | member — an ORGANIZATION role (Story 6.10),\n *    sitting above the workspace `memberRole`. owner → lavender (the highest,\n *    brand-purple tier), admin → sky, member → mint — per the org-admin design.\n *  - `tone`: neutral — a non-semantic chip (counts, metadata). Dark text on a\n *    neutral surface. `private` — the epic-level-privacy \"Not public\" badge\n *    (Story 6.14 · design epic-privacy panels 1/2/6b): lavender tint + charcoal\n *    text, the same AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"`.\n *\n * All tones use adaptive dark/light text (`--color-charcoal`) on a hued tint,\n * so every variant clears WCAG AA contrast in both light and dark modes\n * (the hue lives in the background, not the text — PRODECT_FINDINGS #35).\n *\n * Always uses `--radius-badge` for fully rounded ends regardless of display style.\n *\n * @example\n * <Pill status=\"in-progress\">In progress</Pill>\n * <Pill severity=\"danger\">Validation failed</Pill>\n * <Pill tone=\"neutral\">3 members</Pill>\n */\nconst pillVariants = cva(\n  cn(\n    'inline-flex items-center gap-1',\n    'rounded-(--radius-badge)',\n    'px-(--spacing-chip-x) py-(--spacing-chip-y)',\n    'font-sans text-xs font-medium',\n    'border',\n  ),\n  {\n    variants: {\n      // All colored tones carry the semantic hue in the TINT BACKGROUND and use\n      // adaptive dark/light TEXT (`--color-charcoal`: #37352f light, #e5e5e5\n      // dark) — the same pattern `planned` always used. The previous saturated\n      // hue-on-tint TEXT failed WCAG AA (≈2.5–3.8:1 light, 3.2–4.0:1 dark);\n      // charcoal-on-tint clears ~10:1 in both modes (PRODECT_FINDINGS #35).\n      status: {\n        planned: 'bg-(--el-tint-lavender) text-(--el-text-strong) border-transparent',\n        'in-progress': 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        // BUILT, waiting on checks (MOTIR-3103). The first PER-STATUS tone on\n        // this axis — the other three are per-CATEGORY, and `implemented` sits in\n        // the same `in_progress` category as In Progress, Planning and In Review,\n        // so without its own tone four statuses render one chip.\n        //\n        // It uses the recipe theme.css's own `--el-status-*` header prescribes —\n        // \"a status CHIP bg = color-mix(var(--el-status-X) 14%, var(--el-surface))\n        // with --el-text-strong\" — which is the same dilution the `priority`\n        // variant below already renders. The hue is not spent by any other\n        // status in any palette (measured at ΔE2000 >= 10 across all ten by\n        // tests/theme/statusHueSeparation.test.ts), and the chip additionally\n        // carries a GLYPH, because a 14% tint is a subtle mark by construction\n        // and finding #35 forbids resting a state on colour alone.\n        implemented:\n          'bg-[color-mix(in_srgb,var(--el-status-implemented)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        // A person's YES, and not yet shipped (MOTIR-5141). The SECOND\n        // per-status tone, on the same documented recipe `implemented` uses\n        // rather than a second one — `--el-status-approved` is the `done` green\n        // one ink step deeper, measured at ΔE2000 >= 10 against every other\n        // status hue in all ten palettes. Like `implemented` it carries a GLYPH\n        // (`CircleCheck`, in `StatusPill`), because a 14% tint is a subtle mark\n        // and finding #35 forbids resting a state on colour alone — and here it\n        // does more work than usual: at 14% the whole ramp compresses, and this\n        // chip's nearest neighbour is `done`'s.\n        approved:\n          'bg-[color-mix(in_srgb,var(--el-status-approved)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        done: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n      },\n      severity: {\n        info: 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        success: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n        warning: 'bg-(--el-tint-peach) text-(--el-text-strong) border-transparent',\n        danger: 'bg-(--el-tint-rose) text-(--el-text-strong) border-transparent',\n      },\n      // Priority chips (MOTIR-1273 · 1266.2) — a 5-step diverging ramp keyed off\n      // the `--el-priority-*` hues, un-collapsing `medium` and `lowest` (both\n      // were `tone=\"neutral\"` grey). Each hue is diluted to a 14% tint over\n      // `--el-surface` so charcoal `--el-text-strong` clears AA in both themes\n      // (the hue lives in the background — finding #35); the redundant direction\n      // icon (PRIORITY_META) is the non-colour cue. `medium` (slate) and\n      // `lowest` (stone) resolve to two distinct greys in every palette.\n      priority: {\n        highest:\n          'bg-[color-mix(in_srgb,var(--el-priority-highest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        high: 'bg-[color-mix(in_srgb,var(--el-priority-high)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        medium:\n          'bg-[color-mix(in_srgb,var(--el-priority-medium)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        low: 'bg-[color-mix(in_srgb,var(--el-priority-low)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        lowest:\n          'bg-[color-mix(in_srgb,var(--el-priority-lowest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n      },\n      // Project membership roles (Story 6.4 · design/projects access-members):\n      // admin → lavender, member → sky, viewer → mint — the hue in the tint,\n      // charcoal text (AA-safe, finding #35), same recipe as `status`. Routed\n      // through the DEDICATED `--el-role-*` tokens (MOTIR-1274 · 1266.3) so a\n      // palette can tune roles apart from the other --el-tint-* meanings; each\n      // defaults to its prior tint (zero visual change).\n      // `custom` (MOTIR-2257 · MOTIR-2485) is a project's OWN role, which has no\n      // enum value — it takes the next free tint slot (peach) because this\n      // surface had already spent lavender / sky / mint on the built-ins, so a\n      // custom chip in any of those would read as one of them. The KIND is\n      // carried in WORDS by the chip's accessible name; nothing rests on the hue.\n      memberRole: {\n        admin: 'bg-(--el-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-role-member) text-(--el-text-strong) border-transparent',\n        viewer: 'bg-(--el-role-viewer) text-(--el-text-strong) border-transparent',\n        custom: 'bg-(--el-role-custom) text-(--el-text-strong) border-transparent',\n      },\n      // Organization roles (Story 6.10 · design/org-admin): owner → lavender\n      // (the highest, brand-purple tier), admin → sky, member → mint — the hue\n      // in the tint, charcoal text (AA-safe, finding #35), same recipe as above.\n      // Dedicated `--el-org-role-*` tokens (MOTIR-1274 · 1266.3); zero change.\n      orgRole: {\n        owner: 'bg-(--el-org-role-owner) text-(--el-text-strong) border-transparent',\n        admin: 'bg-(--el-org-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-org-role-member) text-(--el-text-strong) border-transparent',\n      },\n      tone: {\n        neutral: 'bg-(--el-chip-bg) text-(--el-text-secondary) border-(--el-chip-border)',\n        // Epic-level privacy \"Not public\" badge (Story 6.14 · design\n        // epic-privacy panels 1/2/6b) — lavender tint, charcoal text, the same\n        // AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"` (≈9.7:1).\n        // Dedicated `--el-privacy-private` token (MOTIR-1274 · 1266.3); the\n        // matching `--el-privacy-public` is defined ahead of a \"public\" badge.\n        private: 'bg-(--el-privacy-private) text-(--el-text-strong) border-transparent',\n        // Inactive \"Archived\" badge (MOTIR-1276 · 1266.5) — a QUIET muted fill\n        // with slate ink, not a hued tint: archived is an inactive state, not a\n        // severity. Dedicated `--el-archived-pill-*` tokens so a palette can tune\n        // the inactive badge apart from the neutral chip; AA-safe (slate on muted\n        // clears AA both themes).\n        archived: 'bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent',\n        // A decision is WAITING on somebody (Story MOTIR-4778 · MOTIR-4792,\n        // design `design/work-items/approval-control.mock.html` — the approval\n        // frame's `pill-await`). Yellow, and the tint is chosen for DISTINCTNESS\n        // rather than for mood: the frame renders four chips a reader must tell\n        // apart at a glance — awaiting, recording (`severity=\"info\"`, sky),\n        // approved (`severity=\"success\"`, mint) and changes-requested\n        // (`severity=\"warning\"`, peach) — and `--el-tint-yellow` was the only\n        // slot none of the other three had spent. `tone` rather than `severity`\n        // because waiting is not a severity; it sits beside `private` and\n        // `archived`, which are states rather than judgements.\n        awaiting: 'bg-(--el-tint-yellow) text-(--el-text-strong) border-transparent',\n      },\n    },\n    defaultVariants: {},\n  },\n);\n\nexport interface PillProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {}\n\nexport const Pill = forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  { status, severity, priority, memberRole, orgRole, tone, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        pillVariants({ status, severity, priority, memberRole, orgRole, tone }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n});\n"]}

package/dist/specimen/TokensSpecimen.js

@@ -816,6 +816,16 @@ var pillVariants = cva(
         // carries a GLYPH, because a 14% tint is a subtle mark by construction
         // and finding #35 forbids resting a state on colour alone.
         implemented: "bg-[color-mix(in_srgb,var(--el-status-implemented)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent",
+        // A person's YES, and not yet shipped (MOTIR-5141). The SECOND
+        // per-status tone, on the same documented recipe `implemented` uses
+        // rather than a second one — `--el-status-approved` is the `done` green
+        // one ink step deeper, measured at ΔE2000 >= 10 against every other
+        // status hue in all ten palettes. Like `implemented` it carries a GLYPH
+        // (`CircleCheck`, in `StatusPill`), because a 14% tint is a subtle mark
+        // and finding #35 forbids resting a state on colour alone — and here it
+        // does more work than usual: at 14% the whole ramp compresses, and this
+        // chip's nearest neighbour is `done`'s.
+        approved: "bg-[color-mix(in_srgb,var(--el-status-approved)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent",
         done: "bg-(--el-tint-mint) text-(--el-text-strong) border-transparent"
       },
       severity: {
@@ -877,7 +887,18 @@ var pillVariants = cva(
         // severity. Dedicated `--el-archived-pill-*` tokens so a palette can tune
         // the inactive badge apart from the neutral chip; AA-safe (slate on muted
         // clears AA both themes).
-        archived: "bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent"
+        archived: "bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent",
+        // A decision is WAITING on somebody (Story MOTIR-4778 · MOTIR-4792,
+        // design `design/work-items/approval-control.mock.html` — the approval
+        // frame's `pill-await`). Yellow, and the tint is chosen for DISTINCTNESS
+        // rather than for mood: the frame renders four chips a reader must tell
+        // apart at a glance — awaiting, recording (`severity="info"`, sky),
+        // approved (`severity="success"`, mint) and changes-requested
+        // (`severity="warning"`, peach) — and `--el-tint-yellow` was the only
+        // slot none of the other three had spent. `tone` rather than `severity`
+        // because waiting is not a severity; it sits beside `private` and
+        // `archived`, which are states rather than judgements.
+        awaiting: "bg-(--el-tint-yellow) text-(--el-text-strong) border-transparent"
       }
     },
     defaultVariants: {}