@common-origin/design-system 2.18.0 → 2.20.0

package/dist/index.mjs

@@ -0,0 +1,55 @@
+export { Avatar } from './components/atoms/Avatar/Avatar.mjs';
+export { Badge } from './components/atoms/Badge/Badge.mjs';
+export { Box } from './components/atoms/Box/Box.mjs';
+export { Button } from './components/atoms/Button/Button.mjs';
+export { CategoryBadge } from './components/atoms/CategoryBadge/CategoryBadge.mjs';
+export { CategoryLabel } from './components/atoms/CategoryLabel/CategoryLabel.mjs';
+export { Chip, LegacyChip } from './components/atoms/Chip/Chip.mjs';
+export { InputChip } from './components/atoms/Chip/InputChip.mjs';
+export { FilterChip } from './components/atoms/Chip/FilterChip.mjs';
+export { BooleanChip } from './components/atoms/Chip/BooleanChip.mjs';
+export { Container } from './components/atoms/Container/Container.mjs';
+export { Picture } from './components/atoms/Picture/Picture.mjs';
+export { DateFormatter } from './components/atoms/DateFormatter/DateFormatter.mjs';
+export { Icon } from './components/atoms/Icon/Icon.mjs';
+export { IconButton } from './components/atoms/IconButton/IconButton.mjs';
+export { MoneyDisplay } from './components/atoms/MoneyDisplay/MoneyDisplay.mjs';
+export { ProgressBar } from './components/atoms/ProgressBar/ProgressBar.mjs';
+export { Divider } from './components/atoms/Divider/Divider.mjs';
+export { Stack } from './components/atoms/Stack/Stack.mjs';
+export { StatusBadge } from './components/atoms/StatusBadge/StatusBadge.mjs';
+export { StatusLabel } from './components/atoms/StatusLabel/StatusLabel.mjs';
+export { Tag } from './components/atoms/Tag/Tag.mjs';
+export { Typography } from './components/atoms/Typography/Typography.mjs';
+export { AccountCard } from './components/molecules/AccountCard/AccountCard.mjs';
+export { ActionSheet } from './components/molecules/ActionSheet/ActionSheet.mjs';
+export { AgentInput } from './components/molecules/AgentInput/AgentInput.mjs';
+export { Alert } from './components/molecules/Alert/Alert.mjs';
+export { InlineAlert } from './components/molecules/InlineAlert/InlineAlert.mjs';
+export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs.mjs';
+export { CardSmall } from './components/molecules/CardSmall/CardSmall.mjs';
+export { CardLarge } from './components/molecules/CardLarge/CardLarge.mjs';
+export { Checkbox } from './components/molecules/Checkbox/Checkbox.mjs';
+export { ChipGroup } from './components/molecules/ChipGroup/ChipGroup.mjs';
+export { CodeBlock } from './components/molecules/CodeBlock/CodeBlock.mjs';
+export { DateGroup } from './components/molecules/DateGroup/DateGroup.mjs';
+export { EmptyState } from './components/molecules/EmptyState/EmptyState.mjs';
+export { FeatureBlock } from './components/molecules/FeatureBlock/FeatureBlock.mjs';
+export { Dropdown } from './components/molecules/Dropdown/Dropdown.mjs';
+export { List } from './components/molecules/List/List.mjs';
+export { ListItem } from './components/molecules/List/ListItem.mjs';
+export { Modal } from './components/molecules/Modal/Modal.mjs';
+export { NumberInput } from './components/molecules/NumberInput/NumberInput.mjs';
+export { PageTitle } from './components/molecules/PageTitle/PageTitle.mjs';
+export { PasswordField } from './components/molecules/PasswordField/PasswordField.mjs';
+export { SearchField } from './components/molecules/SearchField/SearchField.mjs';
+export { Sheet } from './components/molecules/Sheet/Sheet.mjs';
+export { Slider } from './components/molecules/Slider/Slider.mjs';
+export { TabBar } from './components/molecules/TabBar/TabBar.mjs';
+export { TextField } from './components/molecules/TextField/TextField.mjs';
+export { StyledInputBase, StyledTextAreaBase } from './components/molecules/TextField/InputBase.mjs';
+export { TransactionListItem } from './components/molecules/TransactionListItem/TransactionListItem.mjs';
+export { Grid, GridCol, ResponsiveGrid } from './components/layout/GridSystem/GridSystem.mjs';
+export { tokens } from './types/tokens.mjs';
+export { iconsData } from './types/icons.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

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

package/dist/lib/cssTokens.d.mts

@@ -0,0 +1,14 @@
+import type { Tokens } from '../styles/tokens.mjs';
+/**
+ * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,
+ * with every value a CSS variable that falls back to the resolved value, so a region can change a
+ * token through tokens.css. Breakpoints stay values.
+ *
+ * Use the resolved values from `tokens.json` instead where a value is read as data rather than
+ * CSS, such as a duration parsed for a timer.
+ *
+ * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;
+ * the browser specs check the variables.
+ */
+declare const tokens: Tokens;
+export default tokens;

package/dist/lib/cssTokens.d.ts

@@ -0,0 +1,14 @@
+import type { Tokens } from '../styles/tokens';
+/**
+ * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,
+ * with every value a CSS variable that falls back to the resolved value, so a region can change a
+ * token through tokens.css. Breakpoints stay values.
+ *
+ * Use the resolved values from `tokens.json` instead where a value is read as data rather than
+ * CSS, such as a duration parsed for a timer.
+ *
+ * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;
+ * the browser specs check the variables.
+ */
+declare const tokens: Tokens;
+export default tokens;

package/dist/lib/cssTokens.mjs

@@ -0,0 +1,19 @@
+'use client';
+import tokensJson from '../styles/tokens.json.mjs';
+import { withCssVariables } from './cssVariables.mjs';
+
+/**
+ * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,
+ * with every value a CSS variable that falls back to the resolved value, so a region can change a
+ * token through tokens.css. Breakpoints stay values.
+ *
+ * Use the resolved values from `tokens.json` instead where a value is read as data rather than
+ * CSS, such as a duration parsed for a timer.
+ *
+ * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;
+ * the browser specs check the variables.
+ */
+var tokens = withCssVariables(tokensJson);
+
+export { tokens as default };
+//# sourceMappingURL=cssTokens.mjs.map

package/dist/lib/cssTokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssTokens.mjs","sources":["../../src/lib/cssTokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\nimport { withCssVariables } from './cssVariables'\n\n/**\n * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,\n * with every value a CSS variable that falls back to the resolved value, so a region can change a\n * token through tokens.css. Breakpoints stay values.\n *\n * Use the resolved values from `tokens.json` instead where a value is read as data rather than\n * CSS, such as a duration parsed for a timer.\n *\n * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;\n * the browser specs check the variables.\n */\nconst tokens: Tokens = withCssVariables(tokensJson as Tokens)\n\nexport default tokens\n"],"names":["tokens","withCssVariables","tokensJson"],"mappings":";;;;AAIA;;;;;;;;;;AAUG;AACH,IAAMA,MAAM,GAAWC,gBAAgB,CAACC,UAAoB;;;;"}

package/dist/lib/cssVariables.d.mts

@@ -0,0 +1,15 @@
+/**
+ * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the
+ * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and
+ * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.
+ */
+export declare function cssVariableName(path: string[]): string;
+type Tree = {
+    [key: string]: string | Tree;
+};
+/**
+ * A copy of a token tree with the same shape, where every value reads its CSS variable and falls
+ * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.
+ */
+export declare function withCssVariables<T extends Tree>(tree: T, path?: string[]): T;
+export {};

package/dist/lib/cssVariables.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the
+ * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and
+ * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.
+ */
+export declare function cssVariableName(path: string[]): string;
+type Tree = {
+    [key: string]: string | Tree;
+};
+/**
+ * A copy of a token tree with the same shape, where every value reads its CSS variable and falls
+ * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.
+ */
+export declare function withCssVariables<T extends Tree>(tree: T, path?: string[]): T;
+export {};

package/dist/lib/cssVariables.mjs

@@ -0,0 +1,37 @@
+'use client';
+import { __spreadArray } from '../vendor/tslib/tslib.es6.mjs';
+
+// Components read tokens as CSS variables, with the resolved value as the fallback (decision 0041).
+// A product that loads tokens.css can change a token for a region (a density or motion mode, a
+// theme); one that doesn't renders exactly the resolved values.
+/**
+ * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the
+ * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and
+ * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.
+ */
+function cssVariableName(path) {
+  return "--".concat(__spreadArray(['co'], path, true).join('-').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
+}
+/** Breakpoints stay values: a CSS variable can't be used in a media query */
+var keepsValue = function keepsValue(path) {
+  return path[1] === 'breakpoint';
+};
+/**
+ * A copy of a token tree with the same shape, where every value reads its CSS variable and falls
+ * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.
+ */
+function withCssVariables(tree, path) {
+  if (path === void 0) {
+    path = [];
+  }
+  return Object.fromEntries(Object.entries(tree).map(function (_a) {
+    var key = _a[0],
+      value = _a[1];
+    var at = __spreadArray(__spreadArray([], path, true), [key], false);
+    if (typeof value !== 'string') return [key, withCssVariables(value, at)];
+    return [key, keepsValue(at) ? value : "var(".concat(cssVariableName(at), ", ").concat(value, ")")];
+  }));
+}
+
+export { cssVariableName, withCssVariables };
+//# sourceMappingURL=cssVariables.mjs.map

package/dist/lib/cssVariables.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVariables.mjs","sources":["../../src/lib/cssVariables.ts"],"sourcesContent":["// Components read tokens as CSS variables, with the resolved value as the fallback (decision 0041).\n// A product that loads tokens.css can change a token for a region (a density or motion mode, a\n// theme); one that doesn't renders exactly the resolved values.\n\n/**\n * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the\n * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and\n * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.\n */\nexport function cssVariableName(path: string[]): string {\n  return `--${['co', ...path]\n    .join('-')\n    .replace(/([a-z])([A-Z])/g, '$1-$2')\n    .toLowerCase()}`\n}\n\n/** Breakpoints stay values: a CSS variable can't be used in a media query */\nconst keepsValue = (path: string[]) => path[1] === 'breakpoint'\n\ntype Tree = { [key: string]: string | Tree }\n\n/**\n * A copy of a token tree with the same shape, where every value reads its CSS variable and falls\n * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.\n */\nexport function withCssVariables<T extends Tree>(tree: T, path: string[] = []): T {\n  return Object.fromEntries(\n    Object.entries(tree).map(([key, value]) => {\n      const at = [...path, key]\n      if (typeof value !== 'string') return [key, withCssVariables(value, at)]\n      return [key, keepsValue(at) ? value : `var(${cssVariableName(at)}, ${value})`]\n    })\n  ) as T\n}\n"],"names":["cssVariableName","path","concat","__spreadArray","join","replace","toLowerCase","keepsValue","withCssVariables","tree","Object","fromEntries","entries","map","_a","key","value","at"],"mappings":";;;AAAA;AACA;AACA;AAEA;;;;AAIG;AACG,SAAUA,eAAeA,CAACC,IAAc,EAAA;AAC5C,EAAA,OAAO,IAAA,CAAAC,MAAA,CAAKC,eAAC,IAAI,CAAA,EAAKF,IAAI,EACvB,IAAA,CAAA,CAAAG,IAAI,CAAC,GAAG,CAAC,CACTC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CACnCC,WAAW,EAAE,CAAE,CAAA;AACpB,CAAA;AAEA;AACA,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIN,IAAc;AAAK,EAAA,OAAAA,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAA;AAAxB,CAAwB,CAAA;AAI/D;;;AAGG;AACa,SAAAO,gBAAgBA,CAAiBC,IAAO,EAAER,IAAmB,EAAA;AAAnB,EAAA,IAAAA,IAAA,KAAA,KAAA,CAAA,EAAA;AAAAA,IAAAA,IAAmB,GAAA,EAAA,CAAA;AAAA,GAAA;AAC3E,EAAA,OAAOS,MAAM,CAACC,WAAW,CACvBD,MAAM,CAACE,OAAO,CAACH,IAAI,CAAC,CAACI,GAAG,CAAC,UAACC,EAAY,EAAA;QAAXC,GAAG,GAAAD,EAAA,CAAA,CAAA,CAAA;AAAEE,MAAAA,KAAK,GAAAF,EAAA,CAAA,CAAA,CAAA,CAAA;AACnC,IAAA,IAAMG,EAAE,GAAOd,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAAF,IAAI,EAAE,IAAA,CAAA,EAAA,CAAAc,GAAG,SAAC,CAAA;AACzB,IAAA,IAAI,OAAOC,KAAK,KAAK,QAAQ,EAAE,OAAO,CAACD,GAAG,EAAEP,gBAAgB,CAACQ,KAAK,EAAEC,EAAE,CAAC,CAAC,CAAA;AACxE,IAAA,OAAO,CAACF,GAAG,EAAER,UAAU,CAACU,EAAE,CAAC,GAAGD,KAAK,GAAG,MAAO,CAAAd,MAAA,CAAAF,eAAe,CAACiB,EAAE,CAAC,EAAK,IAAA,CAAA,CAAAf,MAAA,CAAAc,KAAK,EAAG,GAAA,CAAA,CAAC,CAAA;AAChF,GAAC,CAAC,CACE,CAAA;AACR;;;;"}

package/dist/lib/styleUtils.d.mts

@@ -0,0 +1,42 @@
+export declare const breakpoints: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+export declare const media: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+export declare const forcedColors = "@media (forced-colors: active)";
+/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The
+ * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */
+export declare const forcedColorsEdge: string;
+export declare const reducedMotion = "@media (prefers-reduced-motion: reduce)";
+export declare const exitAnimation: import("styled-components").RuleSet<object>;
+export declare const visuallyHidden: import("styled-components").RuleSet<object>;
+export interface RowState {
+    background: string;
+    text?: string;
+}
+export declare const rowStates: Record<'unselected' | 'selected', Record<'rest' | 'hover' | 'pressed', RowState>>;
+/**
+ * The background (and, when selected, text) of an interactive row in every state.
+ * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under
+ *   aria-activedescendant. It shows the hover state.
+ * - `disabled`: shows the resting state, with no hover or press.
+ * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example
+ *   text set by Typography. Pass it without `&`.
+ */
+export declare const interactiveRow: ({ selected, focused, disabled, textSelector, }?: {
+    selected?: boolean;
+    focused?: boolean;
+    disabled?: boolean;
+    textSelector?: string;
+}) => string;

package/dist/lib/styleUtils.d.ts

@@ -14,6 +14,29 @@ export declare const media: {
     xl: string;
     '2xl': string;
 };
+export declare const forcedColors = "@media (forced-colors: active)";
+/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The
+ * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */
+export declare const forcedColorsEdge: string;
 export declare const reducedMotion = "@media (prefers-reduced-motion: reduce)";
 export declare const exitAnimation: import("styled-components").RuleSet<object>;
 export declare const visuallyHidden: import("styled-components").RuleSet<object>;
+export interface RowState {
+    background: string;
+    text?: string;
+}
+export declare const rowStates: Record<'unselected' | 'selected', Record<'rest' | 'hover' | 'pressed', RowState>>;
+/**
+ * The background (and, when selected, text) of an interactive row in every state.
+ * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under
+ *   aria-activedescendant. It shows the hover state.
+ * - `disabled`: shows the resting state, with no hover or press.
+ * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example
+ *   text set by Typography. Pass it without `&`.
+ */
+export declare const interactiveRow: ({ selected, focused, disabled, textSelector, }?: {
+    selected?: boolean;
+    focused?: boolean;
+    disabled?: boolean;
+    textSelector?: string;
+}) => string;

package/dist/lib/styleUtils.mjs

@@ -0,0 +1,160 @@
+'use client';
+import { __makeTemplateObject } from '../vendor/tslib/tslib.es6.mjs';
+import { keyframes, css } from 'styled-components';
+import tokens from './cssTokens.mjs';
+
+// Breakpoints from the semantic tokens (decision 0014)
+var breakpoints = {
+  xs: tokens.semantic.breakpoint.xs,
+  sm: tokens.semantic.breakpoint.sm,
+  md: tokens.semantic.breakpoint.md,
+  lg: tokens.semantic.breakpoint.lg,
+  xl: tokens.semantic.breakpoint.xl,
+  '2xl': tokens.semantic.breakpoint['2xl']
+};
+// Media query helpers
+var media = {
+  xs: "@media (min-width: ".concat(breakpoints.xs, ")"),
+  sm: "@media (min-width: ".concat(breakpoints.sm, ")"),
+  md: "@media (min-width: ".concat(breakpoints.md, ")"),
+  lg: "@media (min-width: ".concat(breakpoints.lg, ")"),
+  xl: "@media (min-width: ".concat(breakpoints.xl, ")"),
+  '2xl': "@media (min-width: ".concat(breakpoints['2xl'], ")")
+};
+// Windows Contrast Themes and other forced-colours modes (decision 0038). The browser swaps in
+// the user's system colours, drops background colours and box-shadows, and keeps borders and
+// outlines. Inside this query, give a control that shows its edge with a fill alone a border,
+// and draw selected and checked states with system colours: ButtonText for control edges,
+// Highlight and HighlightText for selected and checked, GrayText for disabled, CanvasText for
+// content. Use forced-color-adjust: none only on a fill that carries state.
+var forcedColors = '@media (forced-colors: active)';
+/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The
+ * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */
+var forcedColorsEdge = "".concat(forcedColors, " {\n  border: ").concat(tokens.semantic.border.width.thin, " solid currentColor;\n}");
+// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes
+// an instant change or a simple fade. Colour and opacity transitions need no fallback.
+var reducedMotion = '@media (prefers-reduced-motion: reduce)';
+// No `from` keyframe: the fade starts from the element's current opacity, including a
+// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.
+var fadeOut = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
+// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
+// the element's `animation` declarations while it exits: the entrance stays in the list,
+// so it isn't restarted, and the fade runs on top of it. A fade is already the
+// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
+// still catches clicks (so they can't reach the page behind it) and the panel is inert.
+// Exits accelerate: things leaving speed up as they go (decision 0037).
+])));
+// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
+// the element's `animation` declarations while it exits: the entrance stays in the list,
+// so it isn't restarted, and the fade runs on top of it. A fade is already the
+// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
+// still catches clicks (so they can't reach the page behind it) and the panel is inert.
+// Exits accelerate: things leaving speed up as they go (decision 0037).
+var exitAnimation = css(templateObject_2 || (templateObject_2 = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
+// Content for screen readers only. The 1px size and -1px margin are part of the standard
+// visually-hidden technique, not design values, so they aren't tokens.
+])), fadeOut, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.accelerate);
+// Content for screen readers only. The 1px size and -1px margin are part of the standard
+// visually-hidden technique, not design values, so they aren't tokens.
+var visuallyHidden = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"
+// One interaction pattern for rows and items: list items, menu and listbox options, sidebars
+// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the
+// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected
+// rows leave their text colour to the component, so a destructive row can stay red.
+])));
+// One interaction pattern for rows and items: list items, menu and listbox options, sidebars
+// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the
+// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected
+// rows leave their text colour to the component, so a destructive row can stay red.
+var _a = tokens.semantic.color,
+  rowFill = _a.fill,
+  rowText = _a.text;
+var rowStates = {
+  unselected: {
+    rest: {
+      background: 'transparent'
+    },
+    hover: {
+      background: rowFill.muted
+    },
+    pressed: {
+      background: rowFill["default"]
+    }
+  },
+  selected: {
+    rest: {
+      background: rowFill['accent-muted'],
+      text: rowText.accent
+    },
+    hover: {
+      background: rowFill['accent-muted-hover'],
+      text: rowText['accent-hover']
+    },
+    pressed: {
+      background: rowFill['accent-muted-pressed'],
+      text: rowText['accent-pressed']
+    }
+  }
+};
+var rowDeclarations = function rowDeclarations(_a, textSelector) {
+  var background = _a.background,
+    text = _a.text;
+  if (!text) return "background-color: ".concat(background, ";");
+  return textSelector ? "background-color: ".concat(background, ";\n  ").concat(textSelector, " { color: ").concat(text, "; }") : "background-color: ".concat(background, ";\n  color: ").concat(text, ";");
+};
+/**
+ * The background (and, when selected, text) of an interactive row in every state.
+ * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under
+ *   aria-activedescendant. It shows the hover state.
+ * - `disabled`: shows the resting state, with no hover or press.
+ * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example
+ *   text set by Typography. Pass it without `&`.
+ */
+var interactiveRow = function interactiveRow(_a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.selected,
+    selected = _c === void 0 ? false : _c,
+    _d = _b.focused,
+    focused = _d === void 0 ? false : _d,
+    _e = _b.disabled,
+    disabled = _e === void 0 ? false : _e,
+    textSelector = _b.textSelector;
+  var states = selected ? rowStates.selected : rowStates.unselected;
+  if (disabled) return "".concat(rowDeclarations(states.rest, textSelector), "\n").concat(rowForcedColors({
+    selected: selected,
+    focused: focused,
+    disabled: disabled,
+    textSelector: textSelector
+  }));
+  return "\n  ".concat(rowDeclarations(focused ? states.hover : states.rest, textSelector), "\n\n  &:hover {\n    ").concat(rowDeclarations(states.hover, textSelector), "\n  }\n\n  &:active {\n    ").concat(rowDeclarations(states.pressed, textSelector), "\n  }\n\n  ").concat(rowForcedColors({
+    selected: selected,
+    focused: focused,
+    disabled: disabled,
+    textSelector: textSelector
+  }), "\n");
+};
+// Rows in forced colours (decision 0038): fills are dropped, so a selected row takes the system
+// selection colours, and a hovered or keyboard-active row is outlined in Highlight.
+var rowForcedColors = function rowForcedColors(_a) {
+  var selected = _a.selected,
+    focused = _a.focused,
+    disabled = _a.disabled,
+    textSelector = _a.textSelector;
+  var text = function text(color) {
+    return textSelector ? "color: ".concat(color, ";\n    ").concat(textSelector, " { color: ").concat(color, "; }") : "color: ".concat(color, ";");
+  };
+  var hover = "outline: ".concat(tokens.semantic.border.width.thin, " solid Highlight;\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.width.thin, ");");
+  // A row that doesn't respond (disabled, or not interactive at all) keeps its selection but has
+  // no hover outline. Disabled text is the component's to colour: callers also pass this for
+  // static rows, which must stay CanvasText.
+  // A selected row keeps forced-color-adjust: auto: the browser keeps system colours an author
+  // sets, so the row stays Highlight with HighlightText. Its descendants' own colours would be
+  // forced to CanvasText, so they inherit HighlightText, and anything drawn with a fill inside
+  // (a chip or tag as the row's badge) drops it and keeps its edge. The doubled class outranks
+  // the descendants' own rules.
+  return "".concat(forcedColors, " {\n    ").concat(selected ? "background-color: Highlight;\n    ".concat(text('HighlightText'), "\n    && * {\n      color: inherit;\n      background-color: transparent;\n    }") : '', "\n    ").concat(!disabled && focused ? hover : '', "\n    ").concat(disabled ? '' : "&:hover {\n      ".concat(hover, "\n    }"), "\n  }");
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { breakpoints, exitAnimation, forcedColors, forcedColorsEdge, interactiveRow, media, reducedMotion, rowStates, visuallyHidden };
+//# sourceMappingURL=styleUtils.mjs.map

package/dist/lib/styleUtils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleUtils.mjs","sources":["../../src/lib/styleUtils.ts"],"sourcesContent":["import { css, keyframes } from 'styled-components'\nimport tokens from './cssTokens'\n\n// Breakpoints from the semantic tokens (decision 0014)\nexport const breakpoints = {\n  xs: tokens.semantic.breakpoint.xs,\n  sm: tokens.semantic.breakpoint.sm,\n  md: tokens.semantic.breakpoint.md,\n  lg: tokens.semantic.breakpoint.lg,\n  xl: tokens.semantic.breakpoint.xl,\n  '2xl': tokens.semantic.breakpoint['2xl'],\n}\n\n// Media query helpers\nexport const media = {\n  xs: `@media (min-width: ${breakpoints.xs})`,\n  sm: `@media (min-width: ${breakpoints.sm})`,\n  md: `@media (min-width: ${breakpoints.md})`,\n  lg: `@media (min-width: ${breakpoints.lg})`,\n  xl: `@media (min-width: ${breakpoints.xl})`,\n  '2xl': `@media (min-width: ${breakpoints['2xl']})`,\n}\n\n// Windows Contrast Themes and other forced-colours modes (decision 0038). The browser swaps in\n// the user's system colours, drops background colours and box-shadows, and keeps borders and\n// outlines. Inside this query, give a control that shows its edge with a fill alone a border,\n// and draw selected and checked states with system colours: ButtonText for control edges,\n// Highlight and HighlightText for selected and checked, GrayText for disabled, CanvasText for\n// content. Use forced-color-adjust: none only on a fill that carries state.\nexport const forcedColors = '@media (forced-colors: active)'\n\n/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The\n * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */\nexport const forcedColorsEdge = `${forcedColors} {\n  border: ${tokens.semantic.border.width.thin} solid currentColor;\n}`\n\n// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes\n// an instant change or a simple fade. Colour and opacity transitions need no fallback.\nexport const reducedMotion = '@media (prefers-reduced-motion: reduce)'\n\n// No `from` keyframe: the fade starts from the element's current opacity, including a\n// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.\nconst fadeOut = keyframes`\n  to { opacity: 0; }\n`\n\n// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of\n// the element's `animation` declarations while it exits: the entrance stays in the list,\n// so it isn't restarted, and the fade runs on top of it. A fade is already the\n// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop\n// still catches clicks (so they can't reach the page behind it) and the panel is inert.\n// Exits accelerate: things leaving speed up as they go (decision 0037).\nexport const exitAnimation = css`, ${fadeOut} ${tokens.semantic.motion.duration.fast} ${tokens.semantic.motion.easing.accelerate} forwards`\n\n// Content for screen readers only. The 1px size and -1px margin are part of the standard\n// visually-hidden technique, not design values, so they aren't tokens.\nexport const visuallyHidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`\n\n// One interaction pattern for rows and items: list items, menu and listbox options, sidebars\n// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the\n// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected\n// rows leave their text colour to the component, so a destructive row can stay red.\nconst { fill: rowFill, text: rowText } = tokens.semantic.color\n\nexport interface RowState {\n  background: string\n  text?: string\n}\n\nexport const rowStates: Record<'unselected' | 'selected', Record<'rest' | 'hover' | 'pressed', RowState>> = {\n  unselected: {\n    rest: { background: 'transparent' },\n    hover: { background: rowFill.muted },\n    pressed: { background: rowFill.default },\n  },\n  selected: {\n    rest: { background: rowFill['accent-muted'], text: rowText.accent },\n    hover: { background: rowFill['accent-muted-hover'], text: rowText['accent-hover'] },\n    pressed: { background: rowFill['accent-muted-pressed'], text: rowText['accent-pressed'] },\n  },\n}\n\nconst rowDeclarations = ({ background, text }: RowState, textSelector?: string) => {\n  if (!text) return `background-color: ${background};`\n  return textSelector\n    ? `background-color: ${background};\\n  ${textSelector} { color: ${text}; }`\n    : `background-color: ${background};\\n  color: ${text};`\n}\n\n/**\n * The background (and, when selected, text) of an interactive row in every state.\n * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under\n *   aria-activedescendant. It shows the hover state.\n * - `disabled`: shows the resting state, with no hover or press.\n * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example\n *   text set by Typography. Pass it without `&`.\n */\nexport const interactiveRow = ({\n  selected = false,\n  focused = false,\n  disabled = false,\n  textSelector,\n}: {\n  selected?: boolean\n  focused?: boolean\n  disabled?: boolean\n  textSelector?: string\n} = {}) => {\n  const states = selected ? rowStates.selected : rowStates.unselected\n  if (disabled) return `${rowDeclarations(states.rest, textSelector)}\\n${rowForcedColors({ selected, focused, disabled, textSelector })}`\n  return `\n  ${rowDeclarations(focused ? states.hover : states.rest, textSelector)}\n\n  &:hover {\n    ${rowDeclarations(states.hover, textSelector)}\n  }\n\n  &:active {\n    ${rowDeclarations(states.pressed, textSelector)}\n  }\n\n  ${rowForcedColors({ selected, focused, disabled, textSelector })}\n`\n}\n\n// Rows in forced colours (decision 0038): fills are dropped, so a selected row takes the system\n// selection colours, and a hovered or keyboard-active row is outlined in Highlight.\nconst rowForcedColors = ({\n  selected,\n  focused,\n  disabled,\n  textSelector,\n}: {\n  selected: boolean\n  focused: boolean\n  disabled: boolean\n  textSelector?: string\n}) => {\n  const text = (color: string) => (textSelector ? `color: ${color};\\n    ${textSelector} { color: ${color}; }` : `color: ${color};`)\n  const hover = `outline: ${tokens.semantic.border.width.thin} solid Highlight;\\n      outline-offset: calc(-1 * ${tokens.semantic.border.width.thin});`\n  // A row that doesn't respond (disabled, or not interactive at all) keeps its selection but has\n  // no hover outline. Disabled text is the component's to colour: callers also pass this for\n  // static rows, which must stay CanvasText.\n  // A selected row keeps forced-color-adjust: auto: the browser keeps system colours an author\n  // sets, so the row stays Highlight with HighlightText. Its descendants' own colours would be\n  // forced to CanvasText, so they inherit HighlightText, and anything drawn with a fill inside\n  // (a chip or tag as the row's badge) drops it and keeps its edge. The doubled class outranks\n  // the descendants' own rules.\n  return `${forcedColors} {\n    ${selected ? `background-color: Highlight;\\n    ${text('HighlightText')}\\n    && * {\\n      color: inherit;\\n      background-color: transparent;\\n    }` : ''}\n    ${!disabled && focused ? hover : ''}\n    ${disabled ? '' : `&:hover {\\n      ${hover}\\n    }`}\n  }`\n}\n"],"names":["breakpoints","xs","tokens","semantic","breakpoint","sm","md","lg","xl","media","concat","forcedColors","forcedColorsEdge","border","width","thin","reducedMotion","fadeOut","keyframes","templateObject_1","__makeTemplateObject","exitAnimation","css","templateObject_2","motion","duration","fast","easing","accelerate","visuallyHidden","_a","color","rowFill","fill","rowText","text","rowStates","unselected","rest","background","hover","muted","pressed","selected","accent","rowDeclarations","textSelector","interactiveRow","_b","_c","_d","focused","_e","disabled","states","rowForcedColors"],"mappings":"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"}

package/dist/lib/tokenAliases.d.mts

@@ -0,0 +1,13 @@
+import type { Tokens } from '../types/tokens.mjs';
+type Semantic = Tokens['semantic'];
+/** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
+export declare const spaceByLayoutKey: Record<keyof Semantic['spacing']['layout'], string>;
+/** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
+export declare const radiusByKey: Record<keyof Semantic['border']['radius'], string>;
+/** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
+export declare const backgroundByKey: Record<keyof Semantic['color']['background'], string>;
+/** Box's `color` prop: text colours, old and new keys. */
+export declare const textColorByKey: Record<keyof Semantic['color']['text'], string>;
+/** Box's border props: border colours, old and new keys. */
+export declare const borderColorByKey: Record<keyof Semantic['color']['border'], string>;
+export {};

package/dist/lib/tokenAliases.d.ts

@@ -0,0 +1,13 @@
+import type { Tokens } from '../types/tokens';
+type Semantic = Tokens['semantic'];
+/** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
+export declare const spaceByLayoutKey: Record<keyof Semantic['spacing']['layout'], string>;
+/** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
+export declare const radiusByKey: Record<keyof Semantic['border']['radius'], string>;
+/** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
+export declare const backgroundByKey: Record<keyof Semantic['color']['background'], string>;
+/** Box's `color` prop: text colours, old and new keys. */
+export declare const textColorByKey: Record<keyof Semantic['color']['text'], string>;
+/** Box's border props: border colours, old and new keys. */
+export declare const borderColorByKey: Record<keyof Semantic['color']['border'], string>;
+export {};

package/dist/lib/tokenAliases.mjs

@@ -0,0 +1,121 @@
+'use client';
+import tokens from './cssTokens.mjs';
+
+// Props whose values are token keys keep their published vocabulary in 2.x (P7), but read the
+// semantic grammar's names (decision 0031, #189). Each map covers every key the prop type allows,
+// so TypeScript fails here if a key is added without a mapping.
+var semantic = tokens.semantic;
+var color = semantic.color,
+  space = semantic.space,
+  radius = semantic.radius,
+  surface = semantic.surface;
+/** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
+var spaceByLayoutKey = {
+  none: space[0],
+  xs: space[100],
+  sm: space[200],
+  md: space[300],
+  lg: space[400],
+  xl: space[500],
+  '2xl': space[600],
+  '3xl': space[700],
+  '4xl': space[800],
+  '5xl': space[900],
+  '6xl': space[1000],
+  '7xl': space[1200],
+  '8xl': space[1400],
+  '9xl': space[1600],
+  '10xl': space[2000],
+  '11xl': space[2400],
+  // A keyword, not a step: it stays until the keyword question is settled (0031)
+  auto: semantic.spacing.layout.auto
+};
+/** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
+var radiusByKey = {
+  none: radius.none,
+  xs: radius.xs,
+  sm: radius.sm,
+  md: radius.md,
+  lg: radius.lg,
+  xl: radius.xl,
+  '2xl': radius['2xl'],
+  '3xl': radius['3xl'],
+  circle: radius.full
+};
+/** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
+var backgroundByKey = {
+  "default": surface.base,
+  page: surface.base,
+  subtle: surface.raised,
+  overlay: surface.scrim,
+  emphasis: color.fill.emphasis,
+  'emphasis-hover': color.fill['emphasis-hover'],
+  'emphasis-active': color.fill['emphasis-pressed'],
+  surface: color.fill.muted,
+  inverse: color.fill.inverse,
+  interactive: color.fill.accent,
+  'interactive-hover': color.fill['accent-hover'],
+  'interactive-active': color.fill['accent-pressed'],
+  'interactive-subtle': color.fill['accent-muted'],
+  'interactive-subtle-hover': color.fill['accent-muted-hover'],
+  'interactive-subtle-active': color.fill['accent-muted-pressed'],
+  error: color.fill.danger,
+  'error-hover': color.fill['danger-hover'],
+  'error-active': color.fill['danger-pressed'],
+  'error-subtle': color.fill['danger-muted'],
+  success: color.fill.success,
+  'success-subtle': color.fill['success-muted'],
+  warning: color.fill.warning,
+  'warning-subtle': color.fill['warning-muted'],
+  disabled: color.fill.disabled,
+  neutral: color.fill["default"],
+  'neutral-hover': color.fill['default-hover'],
+  'neutral-active': color.fill['default-pressed'],
+  transparent: color.fill.none,
+  'hover-overlay': color.fill['none-hover'],
+  'active-overlay': color.fill['none-pressed'],
+  'inverse-overlay': color.fill['inverse-none-hover'],
+  // Moved to the component tier (decision 0031 §6)
+  progressTrack: tokens.component.track.background
+};
+/** Box's `color` prop: text colours, old and new keys. */
+var textColorByKey = {
+  "default": color.text["default"],
+  emphasis: color.text.emphasis,
+  inverse: color.text.inverse,
+  disabled: color.text.disabled,
+  success: color.text.success,
+  warning: color.text.warning,
+  muted: color.text.muted,
+  accent: color.text.accent,
+  'accent-hover': color.text['accent-hover'],
+  'accent-pressed': color.text['accent-pressed'],
+  danger: color.text.danger,
+  subdued: color.text.muted,
+  interactive: color.text.accent,
+  'interactive-hover': color.text['accent-hover'],
+  'interactive-active': color.text['accent-pressed'],
+  error: color.text.danger
+};
+/** Box's border props: border colours, old and new keys. */
+var borderColorByKey = {
+  "default": color.border["default"],
+  success: color.border.success,
+  warning: color.border.warning,
+  none: color.border.none,
+  emphasis: color.border.emphasis,
+  input: color.border.input,
+  'input-hover': color.border['input-hover'],
+  focus: color.border.focus,
+  accent: color.border.accent,
+  danger: color.border.danger,
+  subtle: color.border.emphasis,
+  control: color.border.input,
+  // `strong` split by use (0031); as a generic firm outline it is the hovered-input border
+  strong: color.border['input-hover'],
+  interactive: color.border.accent,
+  error: color.border.danger
+};
+
+export { backgroundByKey, borderColorByKey, radiusByKey, spaceByLayoutKey, textColorByKey };
+//# sourceMappingURL=tokenAliases.mjs.map