@common-origin/design-system 2.21.0 → 2.22.0

package/dist/components/atoms/Badge/Badge.d.mts

@@ -1,4 +1,13 @@
 import React from 'react';
+/**
+ * Badge variants: `default` and `accent`, plus deprecated aliases of `accent` kept until 3.0.
+ */
+export type BadgeVariant = 'default' | 'accent' | DeprecatedBadgeVariant;
+/**
+ * Deprecated Badge variants, each rendered as `accent` until 3.0 (decisions 0029, 0045).
+ * @deprecated Use `accent`. For a count of items with a status, use StatusLabel.
+ */
+export type DeprecatedBadgeVariant = 'primary' | 'error' | 'warning' | 'success';
 export interface BadgeProps {
     /** Content to wrap with the badge */
     children: React.ReactNode;
@@ -7,12 +16,15 @@ export interface BadgeProps {
     /** Maximum number to display before showing "99+" */
     max?: number;
     /**
-     * Visual variant of the badge. `accent` is the blue highlight. `primary` is a deprecated alias
-     * for `accent`, because Button's `primary` is near-black (decision 0029). It keeps working
-     * until it is removed in 3.0.
+     * Visual variant of the badge. A badge means new or unread items (decision 0045): `accent` is
+     * the blue highlight, and `default` the near-black count. `primary` is a deprecated alias for
+     * `accent`, because Button's `primary` is near-black (decision 0029). `error`, `warning` and
+     * `success` are deprecated aliases for `accent`: a badge's colour alone can't carry a status, so
+     * a count of items with a status uses the status pattern instead ("3 failed" with StatusLabel).
+     * All four keep working until they are removed in 3.0.
      * @default 'default'
      */
-    variant?: 'default' | 'accent' | 'primary' | 'error' | 'warning' | 'success';
+    variant?: BadgeVariant;
     /** Show only a dot indicator instead of count */
     dot?: boolean;
     /** Screen reader label for the badge */

package/dist/components/atoms/Badge/Badge.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
+/**
+ * Badge variants: `default` and `accent`, plus deprecated aliases of `accent` kept until 3.0.
+ */
+export type BadgeVariant = 'default' | 'accent' | DeprecatedBadgeVariant;
+/**
+ * Deprecated Badge variants, each rendered as `accent` until 3.0 (decisions 0029, 0045).
+ * @deprecated Use `accent`. For a count of items with a status, use StatusLabel.
+ */
+export type DeprecatedBadgeVariant = 'primary' | 'error' | 'warning' | 'success';
 export interface BadgeProps {
     /** Content to wrap with the badge */
     children: React.ReactNode;
@@ -7,12 +16,15 @@ export interface BadgeProps {
     /** Maximum number to display before showing "99+" */
     max?: number;
     /**
-     * Visual variant of the badge. `accent` is the blue highlight. `primary` is a deprecated alias
-     * for `accent`, because Button's `primary` is near-black (decision 0029). It keeps working
-     * until it is removed in 3.0.
+     * Visual variant of the badge. A badge means new or unread items (decision 0045): `accent` is
+     * the blue highlight, and `default` the near-black count. `primary` is a deprecated alias for
+     * `accent`, because Button's `primary` is near-black (decision 0029). `error`, `warning` and
+     * `success` are deprecated aliases for `accent`: a badge's colour alone can't carry a status, so
+     * a count of items with a status uses the status pattern instead ("3 failed" with StatusLabel).
+     * All four keep working until they are removed in 3.0.
      * @default 'default'
      */
-    variant?: 'default' | 'accent' | 'primary' | 'error' | 'warning' | 'success';
+    variant?: BadgeVariant;
     /** Show only a dot indicator instead of count */
     dot?: boolean;
     /** Screen reader label for the badge */

package/dist/components/atoms/Badge/Badge.mjs

@@ -37,16 +37,15 @@ var BadgeIndicator = /*#__PURE__*/styled.span.withConfig({
   return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic.border.width.thin, " solid currentColor; }");
 }, function (props) {
   switch (props.$variant) {
+    // 'primary', 'error', 'warning' and 'success' are deprecated aliases for 'accent', removed in
+    // 3.0: 'primary' (#169), and the status colours, because a badge's colour alone can't carry a
+    // status (decision 0045, #263)
     case 'accent':
     case 'primary':
-      // Deprecated alias for 'accent', removed in 3.0 (#169)
-      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color.fill.danger, ";\n          color: ").concat(color.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color.fill.warning, ";\n          color: ").concat(color.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color.fill.success, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text.inverse, ";\n        ");
     default:
       return "\n          background-color: ".concat(color.fill.emphasis, ";\n          color: ").concat(color.text.inverse, ";\n        ");
   }

package/dist/components/atoms/Badge/index.d.mts

@@ -1,2 +1,2 @@
 export { Badge } from './Badge.mjs';
-export type { BadgeProps } from './Badge.mjs';
+export type { BadgeProps, BadgeVariant, DeprecatedBadgeVariant } from './Badge.mjs';

package/dist/components/atoms/Badge/index.d.ts

@@ -1,2 +1,2 @@
 export { Badge } from './Badge';
-export type { BadgeProps } from './Badge';
+export type { BadgeProps, BadgeVariant, DeprecatedBadgeVariant } from './Badge';

package/dist/components/atoms/Button/Button.mjs

@@ -78,7 +78,7 @@ var getSizeStyles = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
-      return "\n        font: ".concat(button.sizes.small.font, ";\n        min-height: ").concat(control.sm, ";\n        padding: 0 ").concat(inset.md, ";\n      ");
+      return "\n        font: ".concat(button.sizes.small.font, ";\n        font-weight: ").concat(button.sizes.small.fontWeight, ";\n        min-height: ").concat(control.sm, ";\n        padding: 0 ").concat(inset.md, ";\n      ");
     case 'medium':
       return "\n        font: ".concat(button.sizes.medium.font, ";\n        min-height: ").concat(control.md, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
     case 'large':

package/dist/components/atoms/CategoryLabel/CategoryLabel.d.mts

@@ -1,9 +1,22 @@
 import { ReactNode } from 'react';
 import type { IconName } from '../../../types/icons.mjs';
 /**
- * Category color options for CategoryLabel
+ * The category colours: four display colours with no meaning, and grey for "other" (decision 0043).
+ * They never mean status; for status use StatusLabel.
  */
-export type CategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange' | 'gray';
+export type CategoryDisplayColor = 'olive' | 'periwinkle' | 'rose' | 'magenta' | 'gray';
+/**
+ * Deprecated category colour names, each an alias of the nearest display colour until 3.0
+ * (decision 0043): blue is periwinkle; purple is magenta; pink, red and orange are rose; yellow and
+ * green are olive.
+ * @deprecated Use a CategoryDisplayColor: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'.
+ */
+export type DeprecatedCategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange';
+/**
+ * Category color options for CategoryLabel. The old hue names still work, as aliases of the
+ * nearest display colour, until 3.0.
+ */
+export type CategoryColor = CategoryDisplayColor | DeprecatedCategoryColor;
 /**
  * Visual variant options for CategoryLabel
  */
@@ -21,8 +34,9 @@ export interface CategoryLabelProps {
      */
     children: ReactNode;
     /**
-     * Color scheme for the label
-     * @default 'blue'
+     * Category colour: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'. The old hue names are
+     * deprecated aliases (decision 0043).
+     * @default 'periwinkle'
      */
     color?: CategoryColor;
     /**
@@ -52,16 +66,17 @@ export interface CategoryLabelProps {
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```

package/dist/components/atoms/CategoryLabel/CategoryLabel.d.ts

@@ -1,9 +1,22 @@
 import { ReactNode } from 'react';
 import type { IconName } from '../../../types/icons';
 /**
- * Category color options for CategoryLabel
+ * The category colours: four display colours with no meaning, and grey for "other" (decision 0043).
+ * They never mean status; for status use StatusLabel.
  */
-export type CategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange' | 'gray';
+export type CategoryDisplayColor = 'olive' | 'periwinkle' | 'rose' | 'magenta' | 'gray';
+/**
+ * Deprecated category colour names, each an alias of the nearest display colour until 3.0
+ * (decision 0043): blue is periwinkle; purple is magenta; pink, red and orange are rose; yellow and
+ * green are olive.
+ * @deprecated Use a CategoryDisplayColor: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'.
+ */
+export type DeprecatedCategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange';
+/**
+ * Category color options for CategoryLabel. The old hue names still work, as aliases of the
+ * nearest display colour, until 3.0.
+ */
+export type CategoryColor = CategoryDisplayColor | DeprecatedCategoryColor;
 /**
  * Visual variant options for CategoryLabel
  */
@@ -21,8 +34,9 @@ export interface CategoryLabelProps {
      */
     children: ReactNode;
     /**
-     * Color scheme for the label
-     * @default 'blue'
+     * Category colour: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'. The old hue names are
+     * deprecated aliases (decision 0043).
+     * @default 'periwinkle'
      */
     color?: CategoryColor;
     /**
@@ -52,16 +66,17 @@ export interface CategoryLabelProps {
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```

package/dist/components/atoms/CategoryLabel/CategoryLabel.mjs

@@ -14,15 +14,26 @@ var category = color.category;
 var radius = semantic.radius;
 var space = semantic.space;
 var labelHeight = semantic.size.label;
-// Text on white or the -subtle fill (outlined and minimal), at least 4.5:1 (#115)
+var displayColor = {
+  olive: 'olive',
+  periwinkle: 'periwinkle',
+  rose: 'rose',
+  magenta: 'magenta',
+  gray: 'gray',
+  blue: 'periwinkle',
+  purple: 'magenta',
+  pink: 'rose',
+  yellow: 'olive',
+  green: 'olive',
+  red: 'rose',
+  orange: 'rose'
+};
+// Text on white or the -muted fill (outlined and minimal), at least 4.5:1 (#115)
 var categoryText = {
-  blue: category['blue-text'],
-  purple: category['purple-text'],
-  pink: category['pink-text'],
-  yellow: category['yellow-text'],
-  green: category['green-text'],
-  red: category['red-text'],
-  orange: category['orange-text'],
+  olive: category['olive-text'],
+  periwinkle: category['periwinkle-text'],
+  rose: category['rose-text'],
+  magenta: category['magenta-text'],
   gray: category['gray-text']
 };
 var StyledCategoryLabel = /*#__PURE__*/styled.span.withConfig({
@@ -82,16 +93,17 @@ var HiddenLabel = /*#__PURE__*/styled.span.withConfig({
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```
@@ -99,16 +111,17 @@ var HiddenLabel = /*#__PURE__*/styled.span.withConfig({
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```
@@ -116,7 +129,7 @@ var HiddenLabel = /*#__PURE__*/styled.span.withConfig({
 var CategoryLabel = function CategoryLabel(_a) {
   var children = _a.children,
     _b = _a.color,
-    color = _b === void 0 ? 'blue' : _b,
+    color = _b === void 0 ? 'periwinkle' : _b,
     _c = _a.variant,
     variant = _c === void 0 ? 'filled' : _c,
     _d = _a.size,
@@ -128,7 +141,7 @@ var CategoryLabel = function CategoryLabel(_a) {
   // A blank aria-label is no label at all, so it falls back like a missing one
   var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
   return jsxs(StyledCategoryLabel, {
-    "$color": color,
+    "$color": displayColor[color],
     "$variant": variant,
     "$size": size,
     "data-testid": dataTestId,

package/dist/components/atoms/CategoryLabel/index.d.mts

@@ -1,2 +1,2 @@
 export { CategoryLabel } from './CategoryLabel.mjs';
-export type { CategoryLabelProps, CategoryColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel.mjs';
+export type { CategoryLabelProps, CategoryColor, CategoryDisplayColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel.mjs';

package/dist/components/atoms/CategoryLabel/index.d.ts

@@ -1,2 +1,2 @@
 export { CategoryLabel } from './CategoryLabel';
-export type { CategoryLabelProps, CategoryColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel';
+export type { CategoryLabelProps, CategoryColor, CategoryDisplayColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel';

package/dist/components/atoms/Chip/SuggestionChip.mjs

@@ -27,7 +27,7 @@ var StyledSuggestionChip = /*#__PURE__*/styled.button.withConfig({
  * - A native button: Enter and Space pick it, and its text is its accessible name
  * - Outlined, with the naked hover and pressed fills; no selected state
  * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
- */])), semantic.border.width.thin, color.border.input, chip["default"].borderRadius, color.fill.none, color.text["default"], semantic.motion.transition.feedback, sizeStyles, color.fill['none-hover'], color.fill['none-pressed'], chip.focus.outline, semantic.border.focusOffset, color.border.emphasis, color.text.disabled, forcedColors);
+ */])), semantic.border.width.thin, color.border.input, chip["default"].borderRadius, color.fill.none, color.text["default"], semantic.motion.transition.feedback, sizeStyles, color.fill['none-hover'], color.fill['none-pressed'], chip.focus.outline, semantic.border.focusOffset, color.border["default"], color.text.disabled, forcedColors);
 /**
  * SuggestionChip - Offers text to put in the agent input
  *

package/dist/components/atoms/Chip/shared/utils.mjs

@@ -23,7 +23,7 @@ var getVariantStyles = function getVariantStyles(_a) {
       fill = _b.fill,
       text = _b.text;
     var interactiveStates = $clickable;
-    return "\n      background-color: ".concat(fill['accent-muted'], ";\n      color: ").concat(text.accent, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text['accent-hover'] : text.accent, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text['accent-pressed'] : text.accent, ";\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ").concat(forcedColors, " {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    ");
+    return "\n      background-color: ".concat(fill['accent-muted'], ";\n      color: ").concat(text.accent, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text.accent : text.accent, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text.accent : text.accent, ";\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ").concat(forcedColors, " {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    ");
   }
   switch ($variant) {
     case 'emphasis':

package/dist/components/atoms/Chip/shared/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","sources":["../../../../../src/components/atoms/Chip/shared/utils.ts"],"sourcesContent":["import tokens from '../../../../lib/cssTokens'\nimport { forcedColors } from '../../../../lib/styleUtils'\nimport { ChipVariant } from './types'\n\nconst { component: { chip }, semantic } = tokens\n\ninterface StyledChipProps {\n  $variant: ChipVariant\n  $disabled?: boolean\n  $clickable?: boolean\n  $selected?: boolean\n}\n\n// Helper function to get variant styles matching Button's approach\nexport const getVariantStyles = ({ $variant, $selected, $clickable, $disabled }: StyledChipProps) => {\n  // Selected filter and input chips use the light-blue selected treatment (decision 0016).\n  // The text darkens with the fill so every state stays at least 4.5:1.\n  if ($selected) {\n    // A selected disabled chip looks like any disabled chip; the checkmark keeps the\n    // selected state visible (#110)\n    if ($disabled) {\n      const { disabled } = chip.variants.subtle\n      return `\n        background-color: ${disabled.backgroundColor};\n        color: ${disabled.textColor};\n      `\n    }\n\n    const { fill, text } = tokens.semantic.color\n    const interactiveStates = $clickable\n    return `\n      background-color: ${fill['accent-muted']};\n      color: ${text.accent};\n      \n      &:hover {\n        background-color: ${interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted']};\n        color: ${interactiveStates ? text['accent-hover'] : text.accent};\n      }\n      \n      &:active {\n        background-color: ${interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted']};\n        color: ${interactiveStates ? text['accent-pressed'] : text.accent};\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ${forcedColors} {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    `\n  }\n  \n  switch ($variant) {\n    case 'emphasis':\n      return `\n        background-color: ${chip.variants.emphasis.backgroundColor};\n        color: ${chip.variants.emphasis.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.emphasis.disabled.backgroundColor : ($clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.emphasis.disabled.backgroundColor : ($clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.emphasis.disabled.backgroundColor};\n          color: ${chip.variants.emphasis.disabled.textColor};\n        ` : ''}\n      `\n    case 'subtle':\n      return `\n        background-color: ${chip.variants.subtle.backgroundColor};\n        color: ${chip.variants.subtle.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.subtle.disabled.backgroundColor : ($clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.subtle.disabled.backgroundColor : ($clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.subtle.disabled.backgroundColor};\n          color: ${chip.variants.subtle.disabled.textColor};\n        ` : ''}\n      `\n    case 'interactive':\n      return `\n        background-color: ${chip.variants.interactive.backgroundColor};\n        color: ${chip.variants.interactive.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.interactive.disabled.backgroundColor : ($clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.interactive.disabled.backgroundColor : ($clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.interactive.disabled.backgroundColor};\n          color: ${chip.variants.interactive.disabled.textColor};\n        ` : ''}\n      `\n    case 'default':\n    default:\n      return `\n        background-color: ${chip.default.backgroundColor};\n        color: ${chip.default.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.disabled.backgroundColor : ($clickable ? chip.hover.backgroundColor : chip.default.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.disabled.backgroundColor : ($clickable ? chip.active.backgroundColor : chip.default.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.disabled.backgroundColor};\n          color: ${chip.disabled.textColor};\n        ` : ''}\n      `\n  }\n}\n\n// Chips have one size: 24px from the label scale as a minimum, with the content centred\n// and no vertical padding (decisions 0034 and 0035). Horizontal padding comes from the\n// semantic spacing scale (decision 0022).\nexport const sizeStyles = `\n  font: ${chip.sizes.medium.font};\n  min-height: ${semantic.size.label.medium};\n  padding: 0 ${semantic.space.inset.sm};\n`\n\n"],"names":["chip","tokens","component","semantic","getVariantStyles","_a","$variant","$selected","$clickable","$disabled","disabled","variants","subtle","concat","backgroundColor","textColor","_b","color","fill","text","interactiveStates","accent","forcedColors","emphasis","hover","active","interactive","sizeStyles","sizes","medium","font","size","label","space","inset","sm"],"mappings":"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"}
+{"version":3,"file":"utils.mjs","sources":["../../../../../src/components/atoms/Chip/shared/utils.ts"],"sourcesContent":["import tokens from '../../../../lib/cssTokens'\nimport { forcedColors } from '../../../../lib/styleUtils'\nimport { ChipVariant } from './types'\n\nconst { component: { chip }, semantic } = tokens\n\ninterface StyledChipProps {\n  $variant: ChipVariant\n  $disabled?: boolean\n  $clickable?: boolean\n  $selected?: boolean\n}\n\n// Helper function to get variant styles matching Button's approach\nexport const getVariantStyles = ({ $variant, $selected, $clickable, $disabled }: StyledChipProps) => {\n  // Selected filter and input chips use the light-blue selected treatment (decision 0016).\n  // The text darkens with the fill so every state stays at least 4.5:1.\n  if ($selected) {\n    // A selected disabled chip looks like any disabled chip; the checkmark keeps the\n    // selected state visible (#110)\n    if ($disabled) {\n      const { disabled } = chip.variants.subtle\n      return `\n        background-color: ${disabled.backgroundColor};\n        color: ${disabled.textColor};\n      `\n    }\n\n    const { fill, text } = tokens.semantic.color\n    const interactiveStates = $clickable\n    return `\n      background-color: ${fill['accent-muted']};\n      color: ${text.accent};\n      \n      &:hover {\n        background-color: ${interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted']};\n        color: ${interactiveStates ? text.accent : text.accent};\n      }\n      \n      &:active {\n        background-color: ${interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted']};\n        color: ${interactiveStates ? text.accent : text.accent};\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ${forcedColors} {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    `\n  }\n  \n  switch ($variant) {\n    case 'emphasis':\n      return `\n        background-color: ${chip.variants.emphasis.backgroundColor};\n        color: ${chip.variants.emphasis.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.emphasis.disabled.backgroundColor : ($clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.emphasis.disabled.backgroundColor : ($clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.emphasis.disabled.backgroundColor};\n          color: ${chip.variants.emphasis.disabled.textColor};\n        ` : ''}\n      `\n    case 'subtle':\n      return `\n        background-color: ${chip.variants.subtle.backgroundColor};\n        color: ${chip.variants.subtle.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.subtle.disabled.backgroundColor : ($clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.subtle.disabled.backgroundColor : ($clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.subtle.disabled.backgroundColor};\n          color: ${chip.variants.subtle.disabled.textColor};\n        ` : ''}\n      `\n    case 'interactive':\n      return `\n        background-color: ${chip.variants.interactive.backgroundColor};\n        color: ${chip.variants.interactive.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.interactive.disabled.backgroundColor : ($clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.interactive.disabled.backgroundColor : ($clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.interactive.disabled.backgroundColor};\n          color: ${chip.variants.interactive.disabled.textColor};\n        ` : ''}\n      `\n    case 'default':\n    default:\n      return `\n        background-color: ${chip.default.backgroundColor};\n        color: ${chip.default.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.disabled.backgroundColor : ($clickable ? chip.hover.backgroundColor : chip.default.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.disabled.backgroundColor : ($clickable ? chip.active.backgroundColor : chip.default.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.disabled.backgroundColor};\n          color: ${chip.disabled.textColor};\n        ` : ''}\n      `\n  }\n}\n\n// Chips have one size: 24px from the label scale as a minimum, with the content centred\n// and no vertical padding (decisions 0034 and 0035). Horizontal padding comes from the\n// semantic spacing scale (decision 0022).\nexport const sizeStyles = `\n  font: ${chip.sizes.medium.font};\n  min-height: ${semantic.size.label.medium};\n  padding: 0 ${semantic.space.inset.sm};\n`\n\n"],"names":["chip","tokens","component","semantic","getVariantStyles","_a","$variant","$selected","$clickable","$disabled","disabled","variants","subtle","concat","backgroundColor","textColor","_b","color","fill","text","interactiveStates","accent","forcedColors","emphasis","hover","active","interactive","sizeStyles","sizes","medium","font","size","label","space","inset","sm"],"mappings":"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"}

package/dist/components/atoms/Icon/Icon.mjs

@@ -24,7 +24,7 @@ var IconStyled = /*#__PURE__*/styled.span.withConfig({
     case 'default':
       return tokens.semantic.color.icon["default"];
     case 'emphasis':
-      return tokens.semantic.color.icon.emphasis;
+      return tokens.semantic.color.icon["default"];
     case 'subdued':
       return tokens.semantic.color.icon.muted;
     case 'disabled':

package/dist/components/atoms/MoneyDisplay/MoneyDisplay.mjs

@@ -1,10 +1,9 @@
 'use client';
 import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import { Typography } from '../Typography/Typography.mjs';
-import { Icon } from '../Icon/Icon.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
 
 var StyledWrapper = /*#__PURE__*/styled.span.withConfig({
@@ -13,7 +12,7 @@ var StyledWrapper = /*#__PURE__*/styled.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -29,35 +28,8 @@ var sizeToTypographyVariant = {
   large: 'h3',
   xlarge: 'h2'
 };
-// Map size to Icon size for consistent visual alignment
-var sizeToIconSize = {
-  small: 'xs',
-  medium: 'sm',
-  large: 'md',
-  xlarge: 'lg'
-};
-/**
- * Generates aria-label with spelled out amount
- */
-var generateAriaLabel = function generateAriaLabel(amount, currency, locale) {
-  var _a, _b;
-  var formatter = new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency: currency,
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  });
-  // Get parts to spell out the amount
-  var parts = formatter.formatToParts(Math.abs(amount));
-  var integerPart = ((_a = parts.find(function (p) {
-    return p.type === 'integer';
-  })) === null || _a === void 0 ? void 0 : _a.value) || '0';
-  var fractionPart = ((_b = parts.find(function (p) {
-    return p.type === 'fraction';
-  })) === null || _b === void 0 ? void 0 : _b.value) || '00';
-  var sign = amount < 0 ? 'negative ' : '';
-  return "".concat(sign).concat(integerPart, " dollars and ").concat(fractionPart, " cents");
-};
+// The minus sign, not a hyphen, so it reads and copies as minus (decision 0045)
+var MINUS = "\u2212";
 var MoneyDisplay = function MoneyDisplay(_a) {
   var amount = _a.amount,
     _b = _a.currency,
@@ -83,41 +55,23 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     maximumFractionDigits: 2
   });
   var formattedAmount = formatter.format(Math.abs(amount));
-  // Determine if we need to show a sign icon
-  var showPositiveIcon = showSign && amount > 0 || variant === 'positive';
-  var showNegativeIcon = amount < 0 || variant === 'negative';
-  // Generate accessibility label
-  var ariaLabel = generateAriaLabel(amount, currency, locale);
-  // Get typography variant and icon size
+  // A signed amount carries its sign as text, so the sign survives copying and is read aloud, and the
+  // role colour repeats it (decision 0045). Negative amounts always show their sign.
+  var isNegative = amount < 0 || variant === 'negative';
+  var isPositive = !isNegative && (showSign && amount > 0 || variant === 'positive');
+  var sign = isNegative ? MINUS : isPositive ? '+' : '';
   var typographyVariant = sizeToTypographyVariant[size];
-  var iconSize = sizeToIconSize[size];
-  // Determine icon color based on variant
-  var iconColor = variant === 'positive' || showPositiveIcon ? 'success' : variant === 'negative' || showNegativeIcon ? 'error' : variant === 'neutral' ? 'subdued' : 'default';
-  // Amount always uses default color (except neutral which stays subdued)
-  var amountColor = variant === 'neutral' ? 'subdued' : 'default';
-  return jsxs(StyledWrapper, {
+  var amountColor = isNegative ? 'error' : isPositive ? 'success' : variant === 'neutral' ? 'subdued' : 'default';
+  return jsx(StyledWrapper, {
     "$align": align,
     "$weight": weight,
-    "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    children: [showPositiveIcon && !showNegativeIcon &&
-    // The amount is shown without a sign, so the icon is the sign and needs a name (#85)
-    jsx(Icon, {
-      name: "addRing",
-      size: iconSize,
-      iconColor: iconColor,
-      "aria-label": "Plus"
-    }), showNegativeIcon && jsx(Icon, {
-      name: "remove",
-      size: iconSize,
-      iconColor: iconColor,
-      "aria-label": "Minus"
-    }), jsx(Typography, {
+    children: jsxs(Typography, {
       variant: typographyVariant,
       color: amountColor,
       as: "span",
-      children: formattedAmount
-    })]
+      children: [sign, formattedAmount]
+    })
   });
 };
 var templateObject_1;

package/dist/components/atoms/StatusBadge/StatusBadge.d.mts

@@ -10,7 +10,8 @@ export interface StatusBadgeProps extends StatusLabelProps {
     /**
      * Whether to show the icon
      * @default true
-     * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.
+     * @deprecated StatusLabel always shows its status icon or shape with the text, so status is
+     * never conveyed by colour alone (decision 0045).
      */
     showIcon?: boolean;
 }
@@ -18,6 +19,6 @@ export interface StatusBadgeProps extends StatusLabelProps {
  * StatusBadge displays a transaction or task status.
  *
  * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
- * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).
  */
 export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/components/atoms/StatusBadge/StatusBadge.d.ts

@@ -10,7 +10,8 @@ export interface StatusBadgeProps extends StatusLabelProps {
     /**
      * Whether to show the icon
      * @default true
-     * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.
+     * @deprecated StatusLabel always shows its status icon or shape with the text, so status is
+     * never conveyed by colour alone (decision 0045).
      */
     showIcon?: boolean;
 }
@@ -18,6 +19,6 @@ export interface StatusBadgeProps extends StatusLabelProps {
  * StatusBadge displays a transaction or task status.
  *
  * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
- * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).
  */
 export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/components/atoms/StatusBadge/StatusBadge.mjs

@@ -7,7 +7,7 @@ import { StatusLabelBase } from '../StatusLabel/StatusLabelBase.mjs';
  * StatusBadge displays a transaction or task status.
  *
  * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
- * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).
  */
 var StatusBadge = function StatusBadge(props) {
   return jsx(StatusLabelBase, __assign({}, props));

package/dist/components/atoms/StatusBadge/StatusBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.mjs","sources":["../../../../src/components/atoms/StatusBadge/StatusBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from '../StatusLabel/StatusLabelBase'\n\nexport type { StatusType, StatusSize } from '../StatusLabel/StatusLabelBase'\n\n/**\n * Props for the StatusBadge component\n * @deprecated Use `StatusLabelProps`. StatusBadge is renamed StatusLabel and is removed in 3.0\n * (decision 0018).\n */\nexport interface StatusBadgeProps extends StatusLabelProps {\n  /**\n   * Whether to show the icon\n   * @default true\n   * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.\n   */\n  showIcon?: boolean\n}\n\n/**\n * StatusBadge displays a transaction or task status.\n *\n * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always\n * shows the icon. StatusBadge is removed in 3.0 (decision 0018).\n */\nexport const StatusBadge: React.FC<StatusBadgeProps> = (props) => <StatusLabelBase {...props} />\n\nStatusBadge.displayName = 'StatusBadge'\n"],"names":["StatusBadge","props","_jsx","StatusLabelBase","__assign","displayName"],"mappings":";;;;;AAmBA;;;;;AAKG;IACUA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAA;EAAK,OAAAC,GAAA,CAACC,eAAe,EAAKC,QAAA,CAAA,EAAA,EAAAH,KAAK,CAAI,CAAA,CAAA;AAA9B,EAA8B;AAEhGD,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"StatusBadge.mjs","sources":["../../../../src/components/atoms/StatusBadge/StatusBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from '../StatusLabel/StatusLabelBase'\n\nexport type { StatusType, StatusSize } from '../StatusLabel/StatusLabelBase'\n\n/**\n * Props for the StatusBadge component\n * @deprecated Use `StatusLabelProps`. StatusBadge is renamed StatusLabel and is removed in 3.0\n * (decision 0018).\n */\nexport interface StatusBadgeProps extends StatusLabelProps {\n  /**\n   * Whether to show the icon\n   * @default true\n   * @deprecated StatusLabel always shows its status icon or shape with the text, so status is\n   * never conveyed by colour alone (decision 0045).\n   */\n  showIcon?: boolean\n}\n\n/**\n * StatusBadge displays a transaction or task status.\n *\n * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always\n * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).\n */\nexport const StatusBadge: React.FC<StatusBadgeProps> = (props) => <StatusLabelBase {...props} />\n\nStatusBadge.displayName = 'StatusBadge'\n"],"names":["StatusBadge","props","_jsx","StatusLabelBase","__assign","displayName"],"mappings":";;;;;AAoBA;;;;;AAKG;IACUA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAA;EAAK,OAAAC,GAAA,CAACC,eAAe,EAAKC,QAAA,CAAA,EAAA,EAAAH,KAAK,CAAI,CAAA,CAAA;AAA9B,EAA8B;AAEhGD,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}

package/dist/components/atoms/StatusLabel/StatusLabel.d.mts

@@ -4,8 +4,11 @@ export type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase
 /**
  * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
  *
- * Uses only the status colour tokens and always shows an icon with its text, so status is never
- * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
+ * Uses only the status colour tokens and always shows its text, so status is never conveyed by
+ * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for
+ * completed, failed and processing, and text only for the neutral pending, scheduled and
+ * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen
+ * readers.
  *
  * @example
  * ```tsx