@common-origin/design-system 2.23.0 → 3.0.0

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

@@ -1,13 +1,8 @@
 import React from 'react';
 /**
- * Badge variants: `default` and `accent`, plus deprecated aliases of `accent` kept until 3.0.
+ * Badge variants: `default`, the near-black count, and `accent`, the blue highlight (decision 0045).
  */
-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 type BadgeVariant = 'default' | 'accent';
 export interface BadgeProps {
     /** Content to wrap with the badge */
     children: React.ReactNode;
@@ -17,11 +12,9 @@ export interface BadgeProps {
     max?: number;
     /**
      * 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.
+     * the blue highlight, and `default` the near-black count. 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).
      * @default 'default'
      */
     variant?: BadgeVariant;

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

@@ -1,13 +1,8 @@
 import React from 'react';
 /**
- * Badge variants: `default` and `accent`, plus deprecated aliases of `accent` kept until 3.0.
+ * Badge variants: `default`, the near-black count, and `accent`, the blue highlight (decision 0045).
  */
-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 type BadgeVariant = 'default' | 'accent';
 export interface BadgeProps {
     /** Content to wrap with the badge */
     children: React.ReactNode;
@@ -17,11 +12,9 @@ export interface BadgeProps {
     max?: number;
     /**
      * 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.
+     * the blue highlight, and `default` the near-black count. 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).
      * @default 'default'
      */
     variant?: BadgeVariant;

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

@@ -37,14 +37,7 @@ 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':
-    case 'error':
-    case 'warning':
-    case 'success':
       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, BadgeVariant, DeprecatedBadgeVariant } from './Badge.mjs';
+export type { BadgeProps, BadgeVariant } from './Badge.mjs';

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

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

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

@@ -1,45 +1,34 @@
 import React from 'react';
 import type { Tokens } from '../../../types/tokens.mjs';
-import type { BackgroundPath } from '../../../lib/tokenAliases.mjs';
+import type { BackgroundPath, BoxRadius, BoxSpace } from '../../../lib/tokenAliases.mjs';
+export type { BoxRadius, BoxSpace };
 /**
  * Box's background: a semantic token's path below `semantic` (decision 0031), such as
- * `surface.base`, `surface.raised` or `color.fill.muted`.
+ * `surface.base`, `surface.raised` or `color.fill.muted`. The old `semantic.color.background`
+ * keys (`default`, `subtle`, `surface`…) were removed in 3.0 (#304).
  */
-export type BoxBackground = BackgroundPath | DeprecatedBoxBackground;
-/**
- * The old `semantic.color.background` keys, removed in 3.0 with those tokens (#99, #304).
- * @deprecated Use the token path: `default` and `page` → `surface.base`; `subtle` → `surface.raised`;
- * `overlay` → `surface.scrim`; `surface` → `color.fill.muted`; `transparent` → `color.fill.none`;
- * `progressTrack` → `color.fill.default`; `hover-overlay`, `active-overlay` and `inverse-overlay` →
- * `color.fill.none-hover`, `none-pressed` and `inverse-none-hover`. The rest become `color.fill.*`
- * with `interactive` → `accent`, `error` → `danger`, `neutral` → `default`, `-subtle` → `-muted`
- * and `-active` → `-pressed`: `interactive-subtle` → `color.fill.accent-muted`, `emphasis` →
- * `color.fill.emphasis`. `emphasis-hover`
- * and `emphasis-active` have no static replacement: a strong fill's states belong to the control
- * that has them (decision 0048).
- */
-export type DeprecatedBoxBackground = keyof Tokens['semantic']['color']['background'];
+export type BoxBackground = BackgroundPath;
 export interface BoxProps {
     display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'none';
     flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
     alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
     flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
-    gap?: keyof Tokens['semantic']['spacing']['layout'];
-    m?: keyof Tokens['semantic']['spacing']['layout'];
-    mt?: keyof Tokens['semantic']['spacing']['layout'];
-    mr?: keyof Tokens['semantic']['spacing']['layout'];
-    mb?: keyof Tokens['semantic']['spacing']['layout'];
-    ml?: keyof Tokens['semantic']['spacing']['layout'];
-    mx?: keyof Tokens['semantic']['spacing']['layout'];
-    my?: keyof Tokens['semantic']['spacing']['layout'];
-    p?: keyof Tokens['semantic']['spacing']['layout'];
-    pt?: keyof Tokens['semantic']['spacing']['layout'];
-    pr?: keyof Tokens['semantic']['spacing']['layout'];
-    pb?: keyof Tokens['semantic']['spacing']['layout'];
-    pl?: keyof Tokens['semantic']['spacing']['layout'];
-    px?: keyof Tokens['semantic']['spacing']['layout'];
-    py?: keyof Tokens['semantic']['spacing']['layout'];
+    gap?: BoxSpace;
+    m?: BoxSpace;
+    mt?: BoxSpace;
+    mr?: BoxSpace;
+    mb?: BoxSpace;
+    ml?: BoxSpace;
+    mx?: BoxSpace;
+    my?: BoxSpace;
+    p?: BoxSpace;
+    pt?: BoxSpace;
+    pr?: BoxSpace;
+    pb?: BoxSpace;
+    pl?: BoxSpace;
+    px?: BoxSpace;
+    py?: BoxSpace;
     width?: string;
     height?: string;
     maxWidth?: string;
@@ -51,7 +40,7 @@ export interface BoxProps {
     right?: string;
     bottom?: string;
     left?: string;
-    borderRadius?: keyof Tokens['semantic']['border']['radius'];
+    borderRadius?: BoxRadius;
     border?: keyof Tokens['semantic']['color']['border'];
     borderTop?: keyof Tokens['semantic']['color']['border'];
     borderRight?: keyof Tokens['semantic']['color']['border'];
@@ -59,8 +48,7 @@ export interface BoxProps {
     borderLeft?: keyof Tokens['semantic']['color']['border'];
     /**
      * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards,
-     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`. The old
-     * background keys (`default`, `subtle`, `surface`…) are deprecated and removed in 3.0.
+     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`.
      */
     bg?: BoxBackground;
     color?: keyof Tokens['semantic']['color']['text'];

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

@@ -1,45 +1,34 @@
 import React from 'react';
 import type { Tokens } from '../../../types/tokens';
-import type { BackgroundPath } from '../../../lib/tokenAliases';
+import type { BackgroundPath, BoxRadius, BoxSpace } from '../../../lib/tokenAliases';
+export type { BoxRadius, BoxSpace };
 /**
  * Box's background: a semantic token's path below `semantic` (decision 0031), such as
- * `surface.base`, `surface.raised` or `color.fill.muted`.
+ * `surface.base`, `surface.raised` or `color.fill.muted`. The old `semantic.color.background`
+ * keys (`default`, `subtle`, `surface`…) were removed in 3.0 (#304).
  */
-export type BoxBackground = BackgroundPath | DeprecatedBoxBackground;
-/**
- * The old `semantic.color.background` keys, removed in 3.0 with those tokens (#99, #304).
- * @deprecated Use the token path: `default` and `page` → `surface.base`; `subtle` → `surface.raised`;
- * `overlay` → `surface.scrim`; `surface` → `color.fill.muted`; `transparent` → `color.fill.none`;
- * `progressTrack` → `color.fill.default`; `hover-overlay`, `active-overlay` and `inverse-overlay` →
- * `color.fill.none-hover`, `none-pressed` and `inverse-none-hover`. The rest become `color.fill.*`
- * with `interactive` → `accent`, `error` → `danger`, `neutral` → `default`, `-subtle` → `-muted`
- * and `-active` → `-pressed`: `interactive-subtle` → `color.fill.accent-muted`, `emphasis` →
- * `color.fill.emphasis`. `emphasis-hover`
- * and `emphasis-active` have no static replacement: a strong fill's states belong to the control
- * that has them (decision 0048).
- */
-export type DeprecatedBoxBackground = keyof Tokens['semantic']['color']['background'];
+export type BoxBackground = BackgroundPath;
 export interface BoxProps {
     display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'none';
     flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
     alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
     flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
-    gap?: keyof Tokens['semantic']['spacing']['layout'];
-    m?: keyof Tokens['semantic']['spacing']['layout'];
-    mt?: keyof Tokens['semantic']['spacing']['layout'];
-    mr?: keyof Tokens['semantic']['spacing']['layout'];
-    mb?: keyof Tokens['semantic']['spacing']['layout'];
-    ml?: keyof Tokens['semantic']['spacing']['layout'];
-    mx?: keyof Tokens['semantic']['spacing']['layout'];
-    my?: keyof Tokens['semantic']['spacing']['layout'];
-    p?: keyof Tokens['semantic']['spacing']['layout'];
-    pt?: keyof Tokens['semantic']['spacing']['layout'];
-    pr?: keyof Tokens['semantic']['spacing']['layout'];
-    pb?: keyof Tokens['semantic']['spacing']['layout'];
-    pl?: keyof Tokens['semantic']['spacing']['layout'];
-    px?: keyof Tokens['semantic']['spacing']['layout'];
-    py?: keyof Tokens['semantic']['spacing']['layout'];
+    gap?: BoxSpace;
+    m?: BoxSpace;
+    mt?: BoxSpace;
+    mr?: BoxSpace;
+    mb?: BoxSpace;
+    ml?: BoxSpace;
+    mx?: BoxSpace;
+    my?: BoxSpace;
+    p?: BoxSpace;
+    pt?: BoxSpace;
+    pr?: BoxSpace;
+    pb?: BoxSpace;
+    pl?: BoxSpace;
+    px?: BoxSpace;
+    py?: BoxSpace;
     width?: string;
     height?: string;
     maxWidth?: string;
@@ -51,7 +40,7 @@ export interface BoxProps {
     right?: string;
     bottom?: string;
     left?: string;
-    borderRadius?: keyof Tokens['semantic']['border']['radius'];
+    borderRadius?: BoxRadius;
     border?: keyof Tokens['semantic']['color']['border'];
     borderTop?: keyof Tokens['semantic']['color']['border'];
     borderRight?: keyof Tokens['semantic']['color']['border'];
@@ -59,8 +48,7 @@ export interface BoxProps {
     borderLeft?: keyof Tokens['semantic']['color']['border'];
     /**
      * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards,
-     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`. The old
-     * background keys (`default`, `subtle`, `surface`…) are deprecated and removed in 3.0.
+     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`.
      */
     bg?: BoxBackground;
     color?: keyof Tokens['semantic']['color']['text'];

package/dist/components/atoms/Box/Box.mjs

@@ -4,12 +4,9 @@ import { jsx } from 'react/jsx-runtime';
 import styled$module, { css } from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import { spaceByLayoutKey, radiusByKey, borderColorByKey, textColorByKey, backgroundByPath, backgroundByKey } from '../../../lib/tokenAliases.mjs';
+import { spaceByLayoutKey, radiusByKey, borderColorByKey, backgroundByPath, textColorByKey } from '../../../lib/tokenAliases.mjs';
 import { reducedMotion } from '../../../lib/styleUtils.mjs';
 
-var backgroundColor = function backgroundColor(bg) {
-  return bg in backgroundByPath ? backgroundByPath[bg] : backgroundByKey[bg];
-};
 var StyledBox = /*#__PURE__*/styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -83,19 +80,19 @@ var StyledBox = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.$borderRadius && css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), radiusByKey[props.$borderRadius]);
 }, function (props) {
-  return props.$border && css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
+  return props.$border && borderColorByKey[props.$border] && css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
 }, function (props) {
-  return props.$borderTop && css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderTop]);
+  return props.$borderTop && borderColorByKey[props.$borderTop] && css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderTop]);
 }, function (props) {
-  return props.$borderRight && css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderRight]);
+  return props.$borderRight && borderColorByKey[props.$borderRight] && css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderRight]);
 }, function (props) {
-  return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderBottom]);
+  return props.$borderBottom && borderColorByKey[props.$borderBottom] && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderBottom]);
 }, function (props) {
-  return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderLeft]);
+  return props.$borderLeft && borderColorByKey[props.$borderLeft] && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderLeft]);
 }, function (props) {
-  return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor(props.$bg));
+  return props.$bg && backgroundByPath[props.$bg] && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundByPath[props.$bg]);
 }, function (props) {
-  return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), textColorByKey[props.$color]);
+  return props.$color && textColorByKey[props.$color] && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), textColorByKey[props.$color]);
 }, function (props) {
   return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokens.semantic.elevation[props.$shadow]);
 }, function (props) {

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

@@ -4,13 +4,10 @@ import { type IconName } from '../Icon/index.mjs';
  * Button variants. `accent` is the blue call to action one level above `primary`;
  * use at most one per view (decision 0016).
  */
-export type ButtonVariant = 'primary' | 'secondary' | 'naked' | 'accent'
-/** @deprecated Use `accent`. `emphasis` will be removed in 3.0. */
- | 'emphasis' | 'danger';
+export type ButtonVariant = 'primary' | 'secondary' | 'naked' | 'accent' | 'danger';
 export interface BaseButtonProps {
     /**
      * Visual style. `accent` is the blue call to action above `primary` (at most one per view).
-     * `emphasis` is a deprecated alias for `accent` and will be removed in 3.0.
      * @default 'primary'
      */
     variant?: ButtonVariant;

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

@@ -4,13 +4,10 @@ import { type IconName } from '../Icon';
  * Button variants. `accent` is the blue call to action one level above `primary`;
  * use at most one per view (decision 0016).
  */
-export type ButtonVariant = 'primary' | 'secondary' | 'naked' | 'accent'
-/** @deprecated Use `accent`. `emphasis` will be removed in 3.0. */
- | 'emphasis' | 'danger';
+export type ButtonVariant = 'primary' | 'secondary' | 'naked' | 'accent' | 'danger';
 export interface BaseButtonProps {
     /**
      * Visual style. `accent` is the blue call to action above `primary` (at most one per view).
-     * `emphasis` is a deprecated alias for `accent` and will be removed in 3.0.
      * @default 'primary'
      */
     variant?: ButtonVariant;

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

@@ -18,6 +18,7 @@ var control = semantic.size.control;
 var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles = function getVariantStyles(_a) {
+  var _b;
   var $variant = _a.$variant;
   var variantConfig = {
     primary: {
@@ -52,15 +53,6 @@ var getVariantStyles = function getVariantStyles(_a) {
       disabledBg: button.variants.accent.disabled.backgroundColor,
       disabledText: button.variants.accent.disabled.textColor
     },
-    // Deprecated alias for accent; removed in 3.0
-    emphasis: {
-      bg: button.variants.emphasis.backgroundColor,
-      text: button.variants.emphasis.textColor,
-      hoverBg: button.variants.emphasis.hover.backgroundColor,
-      activeBg: button.variants.emphasis.active.backgroundColor,
-      disabledBg: button.variants.emphasis.disabled.backgroundColor,
-      disabledText: button.variants.emphasis.disabled.textColor
-    },
     danger: {
       bg: button.variants.danger.backgroundColor,
       text: button.variants.danger.textColor,
@@ -70,7 +62,8 @@ var getVariantStyles = function getVariantStyles(_a) {
       disabledText: button.variants.danger.disabled.textColor
     }
   };
-  var config = variantConfig[$variant];
+  // A removed variant (such as `emphasis`) passed from plain JavaScript renders as primary
+  var config = (_b = variantConfig[$variant]) !== null && _b !== void 0 ? _b : variantConfig.primary;
   return "\n    background-color: ".concat(config.bg, ";\n    color: ").concat(config.text, ";\n    \n    &:hover:not(:disabled) {\n      background-color: ").concat(config.hoverBg, ";\n    }\n\n    &:active:not(:disabled) {\n      background-color: ").concat(config.activeBg, ";\n    }\n\n    &:disabled {\n      background-color: ").concat(config.disabledBg, ";\n      color: ").concat(config.disabledText, ";\n    }\n  ");
 };
 // Dynamic size styles: font from component tokens, height from size.control (decision 0034)

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

@@ -6,17 +6,10 @@ import type { IconName } from '../../../types/icons.mjs';
  */
 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'.
+ * Category color options for CategoryLabel: the display colours (decision 0043). The old hue names
+ * (blue, purple, pink, yellow, green, red, orange) were removed in 3.0.
  */
-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;
+export type CategoryColor = CategoryDisplayColor;
 /**
  * Visual variant options for CategoryLabel
  */
@@ -34,8 +27,7 @@ export interface CategoryLabelProps {
      */
     children: ReactNode;
     /**
-     * Category colour: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'. The old hue names are
-     * deprecated aliases (decision 0043).
+     * Category colour: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray' (decision 0043).
      * @default 'periwinkle'
      */
     color?: CategoryColor;

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

@@ -6,17 +6,10 @@ import type { IconName } from '../../../types/icons';
  */
 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'.
+ * Category color options for CategoryLabel: the display colours (decision 0043). The old hue names
+ * (blue, purple, pink, yellow, green, red, orange) were removed in 3.0.
  */
-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;
+export type CategoryColor = CategoryDisplayColor;
 /**
  * Visual variant options for CategoryLabel
  */
@@ -34,8 +27,7 @@ export interface CategoryLabelProps {
      */
     children: ReactNode;
     /**
-     * Category colour: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'. The old hue names are
-     * deprecated aliases (decision 0043).
+     * Category colour: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray' (decision 0043).
      * @default 'periwinkle'
      */
     color?: CategoryColor;

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

@@ -14,20 +14,7 @@ var category = color.category;
 var radius = semantic.radius;
 var space = semantic.space;
 var labelHeight = semantic.size.label;
-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'
-};
+var displayColors = ['olive', 'periwinkle', 'rose', 'magenta', 'gray'];
 // Text on white or the -muted fill (outlined and minimal), at least 4.5:1 (#115)
 var categoryText = {
   olive: category['olive-text'],
@@ -140,8 +127,10 @@ var CategoryLabel = function CategoryLabel(_a) {
   var iconSize = size === 'medium' ? 'xs' : 'sm';
   // 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": displayColor[color],
+  return jsxs(StyledCategoryLabel
+  // A removed hue name passed from plain JavaScript renders as the default, periwinkle
+  , {
+    "$color": displayColors.includes(color) ? color : 'periwinkle',
     "$variant": variant,
     "$size": size,
     "data-testid": dataTestId,

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

@@ -1,18 +1,11 @@
 import React from 'react';
-import { BaseChipProps, ChipVariant, LegacyVariant } from './shared/types.mjs';
+import { BaseChipProps, ChipVariant } from './shared/types.mjs';
 export interface ChipProps extends BaseChipProps {
     /**
-     * Visual style. Only `default` stays in 3.0. `emphasis`, `subtle`, `interactive`, `light`
-     * and `dark` are deprecated and will be removed (decision 0016).
+     * Visual style. The static Chip has one, `default` (decision 0016).
      * @default 'default'
      */
-    variant?: ChipVariant | LegacyVariant;
-    /**
-     * Click handler.
-     * @deprecated Removed in 3.0: the static Chip is not interactive. For a clickable action use a
-     * Button; for a toggle use `BooleanChip` (`FilterChip` in 3.0).
-     */
-    onClick?: () => void;
+    variant?: ChipVariant;
     /** Custom ARIA role override */
     role?: string;
     /** Legacy title prop for backward compatibility */
@@ -22,16 +15,11 @@ export interface ChipProps extends BaseChipProps {
  * Chip - a static, non-interactive label for tags, categories and metadata.
  *
  * Chips are classified by job (decision 0016):
- * - Chip: a static label (`default` variant only)
- * - InputChip: a removable value, such as an applied filter (formerly `FilterChip`)
- * - BooleanChip: toggles a filter on and off (becomes `FilterChip` in 3.0)
+ * - Chip: a static label
+ * - FilterChip: toggles a filter on and off
+ * - InputChip: a removable value, such as an applied filter
+ * - SuggestionChip: fills the agent input with a suggestion
  *
- * The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are
- * deprecated and will be removed in 3.0.
+ * For a clickable action, use a Button.
  */
 export declare const Chip: React.FC<ChipProps>;
-export interface LegacyChipProps {
-    title: string;
-    variant?: LegacyVariant;
-}
-export declare const LegacyChip: React.FC<LegacyChipProps>;

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

@@ -1,18 +1,11 @@
 import React from 'react';
-import { BaseChipProps, ChipVariant, LegacyVariant } from './shared/types';
+import { BaseChipProps, ChipVariant } from './shared/types';
 export interface ChipProps extends BaseChipProps {
     /**
-     * Visual style. Only `default` stays in 3.0. `emphasis`, `subtle`, `interactive`, `light`
-     * and `dark` are deprecated and will be removed (decision 0016).
+     * Visual style. The static Chip has one, `default` (decision 0016).
      * @default 'default'
      */
-    variant?: ChipVariant | LegacyVariant;
-    /**
-     * Click handler.
-     * @deprecated Removed in 3.0: the static Chip is not interactive. For a clickable action use a
-     * Button; for a toggle use `BooleanChip` (`FilterChip` in 3.0).
-     */
-    onClick?: () => void;
+    variant?: ChipVariant;
     /** Custom ARIA role override */
     role?: string;
     /** Legacy title prop for backward compatibility */
@@ -22,16 +15,11 @@ export interface ChipProps extends BaseChipProps {
  * Chip - a static, non-interactive label for tags, categories and metadata.
  *
  * Chips are classified by job (decision 0016):
- * - Chip: a static label (`default` variant only)
- * - InputChip: a removable value, such as an applied filter (formerly `FilterChip`)
- * - BooleanChip: toggles a filter on and off (becomes `FilterChip` in 3.0)
+ * - Chip: a static label
+ * - FilterChip: toggles a filter on and off
+ * - InputChip: a removable value, such as an applied filter
+ * - SuggestionChip: fills the agent input with a suggestion
  *
- * The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are
- * deprecated and will be removed in 3.0.
+ * For a clickable action, use a Button.
  */
 export declare const Chip: React.FC<ChipProps>;
-export interface LegacyChipProps {
-    title: string;
-    variant?: LegacyVariant;
-}
-export declare const LegacyChip: React.FC<LegacyChipProps>;