@common-origin/design-system 2.21.0 → 2.22.0

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

@@ -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

package/dist/components/atoms/StatusLabel/StatusLabel.mjs

@@ -6,8 +6,11 @@ import { StatusLabelBase } from './StatusLabelBase.mjs';
 /**
  * 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

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

@@ -1 +1 @@
-{"version":3,"file":"StatusLabel.mjs","sources":["../../../../src/components/atoms/StatusLabel/StatusLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from './StatusLabelBase'\n\nexport type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase'\n\n/**\n * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).\n *\n * Uses only the status colour tokens and always shows an icon with its text, so status is never\n * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.\n *\n * @example\n * ```tsx\n * <StatusLabel status=\"completed\" />\n *\n * <StatusLabel status=\"pending\" label=\"Awaiting approval\" size=\"small\" />\n * ```\n */\n// showIcon comes last so no caller (for example plain JavaScript) can hide the icon\nexport const StatusLabel: React.FC<StatusLabelProps> = (props) => <StatusLabelBase {...props} showIcon />\n\nStatusLabel.displayName = 'StatusLabel'\n"],"names":["StatusLabel","props","_jsx","StatusLabelBase","showIcon","displayName"],"mappings":";;;;;AAKA;;;;;;;;;;;;AAYG;AACH;IACaA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAK;EAAA,OAAAC,GAAC,CAAAC,eAAe,eAAKF,KAAK,EAAA;AAAEG,IAAAA,QAAQ,EAAG,IAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAvC,EAAuC;AAEzGJ,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"StatusLabel.mjs","sources":["../../../../src/components/atoms/StatusLabel/StatusLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from './StatusLabelBase'\n\nexport type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase'\n\n/**\n * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).\n *\n * Uses only the status colour tokens and always shows its text, so status is never conveyed by\n * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for\n * completed, failed and processing, and text only for the neutral pending, scheduled and\n * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen\n * readers.\n *\n * @example\n * ```tsx\n * <StatusLabel status=\"completed\" />\n *\n * <StatusLabel status=\"pending\" label=\"Awaiting approval\" size=\"small\" />\n * ```\n */\n// showIcon comes last so no caller (for example plain JavaScript) can hide the icon\nexport const StatusLabel: React.FC<StatusLabelProps> = (props) => <StatusLabelBase {...props} showIcon />\n\nStatusLabel.displayName = 'StatusLabel'\n"],"names":["StatusLabel","props","_jsx","StatusLabelBase","showIcon","displayName"],"mappings":";;;;;AAKA;;;;;;;;;;;;;;;AAeG;AACH;IACaA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAK;EAAA,OAAAC,GAAC,CAAAC,eAAe,eAAKF,KAAK,EAAA;AAAEG,IAAAA,QAAQ,EAAG,IAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAvC,EAAuC;AAEzGJ,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}

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

@@ -41,8 +41,8 @@ export interface StatusLabelProps {
 }
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */
 export declare const StatusLabelBase: React.FC<StatusLabelProps & {
     showIcon?: boolean;

package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts

@@ -41,8 +41,8 @@ export interface StatusLabelProps {
 }
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */
 export declare const StatusLabelBase: React.FC<StatusLabelProps & {
     showIcon?: boolean;

package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs

@@ -4,6 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import styled$module, { keyframes } from 'styled-components';
 const styled = styled$module.default || styled$module;
 import { Icon } from '../Icon/Icon.mjs';
+import { StatusShape } from './StatusShape.mjs';
 import { reducedMotion, forcedColorsEdge, visuallyHidden } from '../../../lib/styleUtils.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
 
@@ -20,43 +21,46 @@ var labelHeight = tokens.semantic.size.label;
 var label = tokens.component.badge.label;
 var scaleIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
+  // Each status's icon and, for the coloured statuses, its shape indicator (decision 0045). The
+  // neutral statuses have no shape: at the small size they're plain text.
   var configs = {
     pending: {
       color: statusColors.pending.text,
       bgColor: statusColors.pending.background,
-      icon: 'refresh',
-      // Fallback until 'clock' icon is added
+      icon: 'statusPending',
       label: 'Pending'
     },
     completed: {
       color: statusColors.completed.text,
       bgColor: statusColors.completed.background,
-      icon: 'check',
+      icon: 'statusSuccess',
+      shape: 'success',
       label: 'Completed'
     },
     failed: {
       color: statusColors.failed.text,
       bgColor: statusColors.failed.background,
-      icon: 'close',
+      icon: 'statusError',
+      shape: 'error',
       label: 'Failed'
     },
     cancelled: {
       color: statusColors.cancelled.text,
       bgColor: statusColors.cancelled.background,
-      icon: 'cancel',
+      icon: 'statusCancelled',
       label: 'Cancelled'
     },
     processing: {
       color: statusColors.processing.text,
       bgColor: statusColors.processing.background,
-      icon: 'refresh',
+      icon: 'statusInProgress',
+      shape: 'inProgress',
       label: 'Processing'
     },
     scheduled: {
       color: statusColors.scheduled.text,
       bgColor: statusColors.scheduled.background,
-      icon: 'bell',
-      // Fallback until 'calendar' icon is added
+      icon: 'statusScheduled',
       label: 'Scheduled'
     }
   };
@@ -109,13 +113,13 @@ var VisibleContent = /*#__PURE__*/styled.span.withConfig({
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */])));
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */
 var StatusLabelBase = function StatusLabelBase(_a) {
   var status = _a.status,
@@ -143,10 +147,12 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     "data-testid": dataTestId,
     children: [jsxs(VisibleContent, {
       "aria-hidden": accessibleLabel ? 'true' : undefined,
-      children: [showIcon && jsx(Icon, {
+      children: [showIcon && size === 'medium' && jsx(Icon, {
         name: statusConfig.icon,
         size: sizeStyles.iconSize,
         iconColor: "inherit"
+      }), showIcon && size === 'small' && statusConfig.shape && jsx(StatusShape, {
+        shape: statusConfig.shape
       }), displayLabel, jsxs(ScreenReaderOnly, {
         children: [status, " status"]
       })]

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

@@ -0,0 +1,4 @@
+import { type StatusShape as StatusShapeName } from '../../../lib/statusShapes.mjs';
+export declare const StatusShape: ({ shape }: {
+    shape: StatusShapeName;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/StatusLabel/StatusShape.d.ts

@@ -0,0 +1,4 @@
+import { type StatusShape as StatusShapeName } from '../../../lib/statusShapes';
+export declare const StatusShape: ({ shape }: {
+    shape: StatusShapeName;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/StatusLabel/StatusShape.mjs

@@ -0,0 +1,31 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { statusShapes } from '../../../lib/statusShapes.mjs';
+
+// The shape indicator: at least 12px (decision 0045), filled with the current text colour, which is
+// the label's role colour at 5.3:1 or more on its tint, so it needs no edge. Decorative: the text
+// beside it names the status. Internal to the status family (#264): not exported from the package.
+var Mark = /*#__PURE__*/styled.svg.withConfig({
+  displayName: "StatusShape__Mark",
+  componentId: "sc-1yzi9jt-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"], ["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"])), tokens.semantic.size.icon.xs, tokens.semantic.size.icon.xs);
+var StatusShape = function StatusShape(_a) {
+  var shape = _a.shape;
+  return jsx(Mark, {
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    "data-shape": shape,
+    children: jsx("path", {
+      d: statusShapes[shape]
+    })
+  });
+};
+var templateObject_1;
+
+export { StatusShape };
+//# sourceMappingURL=StatusShape.mjs.map

package/dist/components/atoms/StatusLabel/StatusShape.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusShape.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Typography/Typography.mjs

@@ -25,7 +25,7 @@ var getTypographyStyles = function getTypographyStyles(variant) {
     caption: "font: ".concat(typography.caption, "; text-transform: uppercase;"),
     button1: "font: ".concat(tokens.component.button.sizes.large.font, ";"),
     button2: "font: ".concat(tokens.component.button.sizes.medium.font, ";"),
-    button3: "font: ".concat(tokens.component.button.sizes.small.font, ";"),
+    button3: "font: ".concat(tokens.component.button.sizes.small.font, "; font-weight: ").concat(tokens.component.button.sizes.small.fontWeight, ";"),
     label: "font: ".concat(typography.label, ";")
   };
   return styles[variant] || styles.body;
@@ -33,7 +33,7 @@ var getTypographyStyles = function getTypographyStyles(variant) {
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
     "default": color.text["default"],
-    emphasis: color.text.emphasis,
+    emphasis: color.text["default"],
     subdued: color.text.muted,
     inverse: color.text.inverse,
     disabled: color.text.disabled,

package/dist/components/molecules/AccountCard/AccountCard.mjs

@@ -5,10 +5,10 @@ import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import { Stack } from '../../atoms/Stack/Stack.mjs';
 import { Box } from '../../atoms/Box/Box.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
 import { Typography } from '../../atoms/Typography/Typography.mjs';
 import { MoneyDisplay } from '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
 import { Button } from '../../atoms/Button/Button.mjs';
-import { CategoryLabel } from '../../atoms/CategoryLabel/CategoryLabel.mjs';
 import { Avatar } from '../../atoms/Avatar/Avatar.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
 
@@ -22,7 +22,10 @@ var StyledBalanceSection = /*#__PURE__*/styled.div.withConfig({
 var StyledTrendSection = /*#__PURE__*/styled.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
   componentId: "sc-1erp7zn-1"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), space[100]);
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n  font: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n  font: ", ";\n"])), space[100], function (_a) {
+  var $color = _a.$color;
+  return $color;
+}, semantic.typography.small);
 /*#__PURE__*/styled.div.withConfig({
   displayName: "AccountCard__StyledActions",
   componentId: "sc-1erp7zn-2"
@@ -43,10 +46,12 @@ var trendToIcon = {
   down: 'arrowDown',
   neutral: 'arrowRight'
 };
+// A trend is a differential indicator (decision 0045): the arrow and the signed value carry the
+// direction, and the role colour repeats it. Category colours carry no meaning, so they aren't used.
 var trendToColor = {
-  up: 'green',
-  down: 'red',
-  neutral: 'blue'
+  up: semantic.color.text.success,
+  down: semantic.color.text.danger,
+  neutral: semantic.color.text.muted
 };
 /**
  * AccountCard component
@@ -141,16 +146,19 @@ var AccountCard = function AccountCard(_a) {
                 }), jsx(Typography, {
                   color: "subdued",
                   children: "Available"
-                }), trend && trendValue && jsx(StyledTrendSection, {
+                }), trend && trendValue &&
+                // A group rather than an image, so screen readers read the value as well as the direction
+                jsxs(StyledTrendSection, {
+                  role: "group",
                   "aria-label": "Trend ".concat(trend),
-                  role: "img",
-                  children: jsx(CategoryLabel, {
-                    size: "medium",
-                    icon: trendIcon,
-                    color: trendColor,
-                    variant: "minimal",
+                  "$color": trendColor,
+                  children: [jsx(Icon, {
+                    name: trendIcon,
+                    size: "sm",
+                    iconColor: "inherit"
+                  }), jsx("span", {
                     children: trendValue
-                  })
+                  })]
                 })]
               })
             })]

package/dist/components/molecules/Alert/Alert.d.mts

@@ -2,10 +2,10 @@ import React from 'react';
 export interface AlertProps {
     /**
      * Visual style variant affecting background, border, and icon colors
-     * - error: Critical issues, validation errors (crossCircle icon)
-     * - warning: Cautions, potential issues (bell icon)
-     * - info: Tips, helper text, neutral information (info icon)
-     * - success: Confirmations, successful operations (checkRing icon)
+     * - error: Critical issues, validation errors (cross in a hexagon)
+     * - warning: Cautions, potential issues (`!` in a triangle)
+     * - info: Tips, helper text, neutral information (`i` in a square)
+     * - success: Confirmations, successful operations (tick in a circle)
      * @default 'info'
      */
     variant?: 'error' | 'warning' | 'info' | 'success';

package/dist/components/molecules/Alert/Alert.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 export interface AlertProps {
     /**
      * Visual style variant affecting background, border, and icon colors
-     * - error: Critical issues, validation errors (crossCircle icon)
-     * - warning: Cautions, potential issues (bell icon)
-     * - info: Tips, helper text, neutral information (info icon)
-     * - success: Confirmations, successful operations (checkRing icon)
+     * - error: Critical issues, validation errors (cross in a hexagon)
+     * - warning: Cautions, potential issues (`!` in a triangle)
+     * - info: Tips, helper text, neutral information (`i` in a square)
+     * - success: Confirmations, successful operations (tick in a circle)
      * @default 'info'
      */
     variant?: 'error' | 'warning' | 'info' | 'success';

package/dist/components/molecules/Alert/Alert.mjs

@@ -35,11 +35,12 @@ var fadeOut = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateOb
 // The generated names of the two exits (full, and reduced motion)
 var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
 // Default icons by variant
+// Each severity's status icon (decision 0045): decorative, because the title and message say it
 var variantIcons = {
-  error: 'crossCircle',
-  warning: 'bell',
-  info: 'info',
-  success: 'checkRing'
+  error: 'statusError',
+  warning: 'statusWarning',
+  info: 'statusInfo',
+  success: 'statusSuccess'
 };
 // Icon colors by variant (using semantic icon color tokens)
 var variantIconColors = {

package/dist/components/molecules/CodeBlock/CodeBlock.mjs

@@ -15,7 +15,7 @@ var _a = tokens.semantic,
 var StyledCodeBlock = /*#__PURE__*/styled.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border.emphasis, tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color.text["default"], function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border["default"], tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';

package/dist/components/molecules/Dropdown/Dropdown.mjs

@@ -66,7 +66,7 @@ var DropdownMenu = /*#__PURE__*/styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, input["default"].backgroundColor, border.emphasis, input["default"].borderRadius, elevation.floating, space[100], function (_a) {
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, input["default"].backgroundColor, border["default"], input["default"].borderRadius, elevation.floating, space[100], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -89,7 +89,7 @@ var DropdownOption = /*#__PURE__*/styled.button.withConfig({
     selected: $isSelected,
     focused: $isFocused
   });
-}, border.emphasis);
+}, border["default"]);
 var StyledHelperText = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"

package/dist/components/molecules/InlineAlert/InlineAlert.mjs

@@ -5,16 +5,18 @@ import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
 import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { StatusShape } from '../../atoms/StatusLabel/StatusShape.mjs';
 
 var semantic = tokens.semantic;
 var color = semantic.color,
   typography = semantic.typography,
   size = semantic.size;
+// Each severity's status icon and, at the small size, its shape (decision 0045)
 var variantIcons = {
-  error: 'crossCircle',
-  warning: 'bell',
-  info: 'info',
-  success: 'checkRing'
+  error: 'statusError',
+  warning: 'statusWarning',
+  info: 'statusInfo',
+  success: 'statusSuccess'
 };
 var variantTextColors = {
   error: color.text.danger,
@@ -22,6 +24,12 @@ var variantTextColors = {
   info: color.text.accent,
   success: color.text.success
 };
+var variantShapes = {
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  success: 'success'
+};
 var sizeConfig = {
   small: {
     font: typography.caption,
@@ -122,7 +130,9 @@ var InlineAlert = function InlineAlert(_a) {
     children: hasMessage && jsxs(Fragment, {
       children: [jsx(StyledIconLine, {
         "aria-hidden": "true",
-        children: jsx(Icon, {
+        children: alertSize === 'small' ? jsx(StatusShape, {
+          shape: variantShapes[variant]
+        }) : jsx(Icon, {
           name: variantIcons[variant],
           size: sizeConfig[alertSize].icon,
           iconColor: "inherit"

package/dist/components/molecules/TabBar/TabBar.mjs

@@ -11,7 +11,7 @@ var semantic = tokens.semantic;
 var StyledTabList = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBar__StyledTabList",
   componentId: "sc-1g9ib0y-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border.emphasis, tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border["default"], tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
 var StyledTab = /*#__PURE__*/styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -31,11 +31,11 @@ var StyledTab = /*#__PURE__*/styled.button.withConfig({
 }, function (props) {
   return props.$isActive ? semantic.color.fill['accent-muted-hover'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text['accent-hover'] : semantic.color.text["default"];
+  return props.$isActive ? semantic.color.text.accent : semantic.color.text["default"];
 }, function (props) {
   return props.$isActive ? semantic.color.fill['accent-muted-pressed'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text['accent-pressed'] : semantic.color.text["default"];
+  return props.$isActive ? semantic.color.text.accent : semantic.color.text["default"];
 }, function (props) {
   return props.$disabled ? '0.5' : '1';
 }, semantic.border.focus, semantic.border.focusOffset);

package/dist/components/molecules/TransactionListItem/TransactionListItem.d.mts

@@ -34,6 +34,6 @@ export interface TransactionListItemProps {
  * status, and optional metadata (category, receipt, notes). Minimum height 72px
  * with interactive states for clickable items.
  *
- * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ * Composes: Avatar, CategoryLabel, StatusLabel, MoneyDisplay, Icon, DateFormatter, Typography, Stack
  */
 export declare const TransactionListItem: React.FC<TransactionListItemProps>;

package/dist/components/molecules/TransactionListItem/TransactionListItem.d.ts

@@ -34,6 +34,6 @@ export interface TransactionListItemProps {
  * status, and optional metadata (category, receipt, notes). Minimum height 72px
  * with interactive states for clickable items.
  *
- * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ * Composes: Avatar, CategoryLabel, StatusLabel, MoneyDisplay, Icon, DateFormatter, Typography, Stack
  */
 export declare const TransactionListItem: React.FC<TransactionListItemProps>;

package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import { Avatar } from '../../atoms/Avatar/Avatar.mjs';
-import { Badge } from '../../atoms/Badge/Badge.mjs';
+import { StatusLabel } from '../../atoms/StatusLabel/StatusLabel.mjs';
 import { CategoryLabel } from '../../atoms/CategoryLabel/CategoryLabel.mjs';
 import { MoneyDisplay } from '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
 import { Icon } from '../../atoms/Icon/Icon.mjs';
@@ -56,28 +56,30 @@ var StyledTruncatedText = /*#__PURE__*/styled.span.withConfig({
 ])));
 // Map categories to CategoryLabel configurations
 var categoryConfig = {
+  // Display colours carry no meaning (decision 0043); five coloured categories share four colours,
+  // so the icon and label tell dining and bills apart
   shopping: {
-    color: 'purple',
+    color: 'magenta',
     icon: 'paper',
     label: 'Shopping'
   },
   dining: {
-    color: 'orange',
+    color: 'rose',
     icon: 'paper',
     label: 'Dining'
   },
   transport: {
-    color: 'blue',
+    color: 'periwinkle',
     icon: 'paper',
     label: 'Transport'
   },
   entertainment: {
-    color: 'pink',
+    color: 'olive',
     icon: 'star',
     label: 'Entertainment'
   },
   bills: {
-    color: 'red',
+    color: 'rose',
     icon: 'paper',
     label: 'Bills'
   },
@@ -87,12 +89,6 @@ var categoryConfig = {
     label: 'Other'
   }
 };
-// Map status to badge variant
-var statusToBadgeVariant = {
-  completed: 'success',
-  pending: 'warning',
-  failed: 'error'
-};
 /**
  * TransactionListItem component
  *
@@ -100,7 +96,7 @@ var statusToBadgeVariant = {
  * status, and optional metadata (category, receipt, notes). Minimum height 72px
  * with interactive states for clickable items.
  *
- * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ * Composes: Avatar, CategoryLabel, StatusLabel, MoneyDisplay, Icon, DateFormatter, Typography, Stack
  */
 var TransactionListItem = function TransactionListItem(_a) {
   var merchant = _a.merchant,
@@ -124,8 +120,6 @@ var TransactionListItem = function TransactionListItem(_a) {
   var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
   // Get category configuration
   var categoryData = category ? categoryConfig[category] : undefined;
-  // Get badge variant from status
-  var badgeVariant = statusToBadgeVariant[status];
   var handleClick = function handleClick() {
     if (isClickable && onClick) {
       onClick();
@@ -143,19 +137,10 @@ var TransactionListItem = function TransactionListItem(_a) {
     onKeyDown: handleKeyDown,
     tabIndex: isClickable ? 0 : undefined,
     role: isClickable ? 'button' : undefined,
-    "aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
+    "aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)).concat(status === 'completed' ? '' : ", ".concat(status)) : undefined,
     "data-testid": dataTestId,
     children: [jsx(StyledAvatarSection, {
-      children: status === 'pending' ? jsx(Badge, {
-        variant: badgeVariant,
-        dot: true,
-        "aria-label": "Pending transaction",
-        children: jsx(Avatar, {
-          name: merchant,
-          picture: merchantLogo,
-          size: "md"
-        })
-      }) : jsx(Avatar, {
+      children: jsx(Avatar, {
         name: merchant,
         picture: merchantLogo,
         size: "md"
@@ -175,11 +160,10 @@ var TransactionListItem = function TransactionListItem(_a) {
             variant: "minimal",
             "aria-label": "Category: ".concat(categoryData.label),
             children: categoryData.label
-          }), status === 'failed' && jsx(Badge, {
-            variant: "error",
-            dot: true,
-            "aria-label": "Failed transaction",
-            children: jsx("span", {})
+          }), status !== 'completed' && jsx(StatusLabel, {
+            status: status,
+            size: "small",
+            liveRegion: false
           })]
         }), jsx(MoneyDisplay, {
           amount: amount,