@common-origin/design-system 3.0.0 → 3.1.0

package/dist/tokens/index.mjs

@@ -785,7 +785,7 @@ var component = {
 			}
 		},
 		title: {
-			typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
+			typography: "600 1.125rem/1.5rem 'Inter', sans-serif",
 			fontWeight: "600",
 			lineHeight: "1.25rem"
 		},
@@ -829,6 +829,14 @@ var component = {
 		fontSize: "0.75rem",
 		lineHeight: "1.25rem"
 	},
+	sidebarNav: {
+		width: {
+			rail: "3.5rem",
+			narrow: "14rem",
+			"default": "16rem",
+			wide: "18.75rem"
+		}
+	},
 	slider: {
 		thumb: {
 			shadow: {
@@ -987,12 +995,15 @@ var semantic = {
 		"600": "1.5rem",
 		"800": "2rem",
 		"1200": "3rem",
+		"1400": "3.5rem",
 		"1500": "3.75rem",
 		"1800": "4.5rem",
 		"2000": "5rem",
 		"3000": "7.5rem",
 		"4500": "11.25rem",
 		"5000": "12.5rem",
+		"5600": "14rem",
+		"6400": "16rem",
 		"7500": "18.75rem",
 		"9000": "22.5rem",
 		"10000": "25rem",
@@ -1004,6 +1015,11 @@ var semantic = {
 			md: "2.5rem",
 			lg: "3rem"
 		},
+		row: {
+			sm: "2rem",
+			md: "3rem",
+			lg: "4.5rem"
+		},
 		overlay: {
 			sm: "25rem",
 			md: "35rem",
@@ -1160,12 +1176,12 @@ var semantic = {
 	},
 	typography: {
 		display: "700 5rem/4.5rem 'Inter', sans-serif",
-		h1: "700 3rem/3rem 'Inter', sans-serif",
-		h2: "700 2rem/2.5rem 'Inter', sans-serif",
-		h3: "700 1.75rem/2.25rem 'Inter', sans-serif",
-		h4: "700 1.5rem/2rem 'Inter', sans-serif",
-		h5: "500 1.25rem/1.75rem 'Inter', sans-serif",
-		h6: "500 1.125rem/1.5rem 'Inter', sans-serif",
+		h1: "600 3rem/3rem 'Inter', sans-serif",
+		h2: "600 2rem/2.5rem 'Inter', sans-serif",
+		h3: "600 1.75rem/2.25rem 'Inter', sans-serif",
+		h4: "600 1.5rem/2rem 'Inter', sans-serif",
+		h5: "600 1.25rem/1.75rem 'Inter', sans-serif",
+		h6: "600 1.125rem/1.5rem 'Inter', sans-serif",
 		subtitle: "500 1rem/1.5rem 'Inter', sans-serif",
 		body: "400 1rem/1.5rem 'Inter', sans-serif",
 		small: "400 0.875rem/1.25rem 'Inter', sans-serif",
@@ -1180,6 +1196,9 @@ var semantic = {
 			instant: "0ms",
 			moderate: "200ms"
 		},
+		delay: {
+			hint: "500ms"
+		},
 		easing: {
 			standard: "ease-in-out",
 			decelerate: "ease-out",

package/dist/tokens/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAM,MAAM,GAAW;;ACP9B;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAM,MAAM,GAAW;;ACP9B;;;;"}

package/dist/tokens/styles/tokens.d.mts

@@ -1212,9 +1212,13 @@ export type Tokens = {
                 };
             };
             title: {
-                /** Alert title style (h6), adjusted by title.fontWeight and title.lineHeight. */
+                /** Alert title style (h6), adjusted by title.lineHeight. */
                 typography: string;
-                /** Alert titles are semibold, heavier than h6's medium. */
+                /**
+                 * Alert title weight.
+                 *
+                 * @deprecated h6 is semibold since decision 0050, so the title takes its weight from title.typography. Use semantic.fontWeight.semibold. Removed in 4.0.
+                 */
                 fontWeight: string;
                 /** Alert titles use a tighter line height than h6. */
                 lineHeight: string;
@@ -1278,6 +1282,18 @@ export type Tokens = {
             /** Code line height. */
             lineHeight: string;
         };
+        sidebarNav: {
+            width: {
+                /** Width of a collapsed SidebarNav, the icon rail: the tallest dense row (size.row.sm, in comfortable) with an inset on each side. */
+                rail: string;
+                /** Width of an expanded SidebarNav with width="narrow": short labels. */
+                narrow: string;
+                /** Width of an expanded SidebarNav with the default width: labels with a trailing count. */
+                default: string;
+                /** Width of an expanded SidebarNav with width="wide": long titles, such as chat history. */
+                wide: string;
+            };
+        };
         slider: {
             thumb: {
                 shadow: {
@@ -1349,7 +1365,11 @@ export type Tokens = {
             };
         };
         transactionListItem: {
-            /** Minimum height of a TransactionListItem row, so rows line up in a list. */
+            /**
+             * Minimum height of a TransactionListItem row, so rows line up in a list.
+             *
+             * @deprecated Two-line rows share semantic.size.row.lg, which follows density (decision 0051). Removed in 4.0.
+             */
             minHeight: string;
         };
         status: {
@@ -1479,11 +1499,11 @@ export type Tokens = {
         fontWeight: {
             /** 400. Body text, captions, most UI text. */
             regular: string;
-            /** 500. Subheadings (h5, h6, subtitle), buttons, emphasis within UI text. */
+            /** 500. Subtitle, buttons, emphasis within UI text. */
             medium: string;
-            /** 600. Labels and short titles that need more weight than medium (label, Alert title). */
+            /** 600. Headings (h1 to h6), labels and short titles (label, Alert title). */
             semibold: string;
-            /** 700. Headings (display to h4), overline, strong indicators such as the required-field asterisk. */
+            /** 700. The display heading, overline, strong indicators such as the required-field asterisk. */
             bold: string;
         };
         border: {
@@ -1517,6 +1537,8 @@ export type Tokens = {
             '800': string;
             /** Size step for headers and indents, such as the AccountCard header. */
             '1200': string;
+            /** Size step for the collapsed SidebarNav rail: one icon row with an inset on each side. */
+            '1400': string;
             /** Size step for the comfortable ListItem expanded indent. */
             '1500': string;
             /** Size step for tall rows, such as the TransactionListItem minimum height. */
@@ -1529,7 +1551,11 @@ export type Tokens = {
             '4500': string;
             /** Size step for large illustrations, such as the large EmptyState image. */
             '5000': string;
-            /** Size step for narrow column widths: AccountCard, EmptyState actions. */
+            /** Size step for a narrow navigation column: the narrow SidebarNav. */
+            '5600': string;
+            /** Size step for a standard navigation column: the default SidebarNav. */
+            '6400': string;
+            /** Size step for narrow column widths: AccountCard, EmptyState actions, the wide SidebarNav, the widest a Tooltip grows. */
             '7500': string;
             /** Size step for readable text widths, such as EmptyState copy. */
             '9000': string;
@@ -1539,7 +1565,7 @@ export type Tokens = {
             '19200': string;
             /** Minimum pointer target for a control that's smaller to look at: its invisible hit area (WCAG 2.5.8, decision 0039). On touch screens, use touchTarget. */
             pointerTarget: string;
-            /** Minimum height of a tappable row or control on touch screens. */
+            /** Invisible hit area of a small control on touch screens, such as the Slider thumb. Not a row or control height: those follow density down to pointerTarget (decision 0051). */
             touchTarget: string;
             control: {
                 /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
@@ -1549,6 +1575,14 @@ export type Tokens = {
                 /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
                 lg: string;
             };
+            row: {
+                /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+                sm: string;
+                /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+                md: string;
+                /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
+                lg: string;
+            };
             overlay: {
                 /** Width of a small Modal, and the default width or height of a Sheet. */
                 sm: string;
@@ -1861,6 +1895,10 @@ export type Tokens = {
                 /** The default duration for state changes and short movements, such as a menu opening. */
                 moderate: string;
             };
+            delay: {
+                /** How long the pointer rests on a control before its Tooltip opens, so passing pointers don't open it. A wait before anything moves, not an animation duration. */
+                hint: string;
+            };
             easing: {
                 /** Easing for change on screen: something moving or resizing in place. */
                 standard: string;

package/dist/tokens/styles/tokens.d.ts

@@ -1212,9 +1212,13 @@ export type Tokens = {
                 };
             };
             title: {
-                /** Alert title style (h6), adjusted by title.fontWeight and title.lineHeight. */
+                /** Alert title style (h6), adjusted by title.lineHeight. */
                 typography: string;
-                /** Alert titles are semibold, heavier than h6's medium. */
+                /**
+                 * Alert title weight.
+                 *
+                 * @deprecated h6 is semibold since decision 0050, so the title takes its weight from title.typography. Use semantic.fontWeight.semibold. Removed in 4.0.
+                 */
                 fontWeight: string;
                 /** Alert titles use a tighter line height than h6. */
                 lineHeight: string;
@@ -1278,6 +1282,18 @@ export type Tokens = {
             /** Code line height. */
             lineHeight: string;
         };
+        sidebarNav: {
+            width: {
+                /** Width of a collapsed SidebarNav, the icon rail: the tallest dense row (size.row.sm, in comfortable) with an inset on each side. */
+                rail: string;
+                /** Width of an expanded SidebarNav with width="narrow": short labels. */
+                narrow: string;
+                /** Width of an expanded SidebarNav with the default width: labels with a trailing count. */
+                default: string;
+                /** Width of an expanded SidebarNav with width="wide": long titles, such as chat history. */
+                wide: string;
+            };
+        };
         slider: {
             thumb: {
                 shadow: {
@@ -1349,7 +1365,11 @@ export type Tokens = {
             };
         };
         transactionListItem: {
-            /** Minimum height of a TransactionListItem row, so rows line up in a list. */
+            /**
+             * Minimum height of a TransactionListItem row, so rows line up in a list.
+             *
+             * @deprecated Two-line rows share semantic.size.row.lg, which follows density (decision 0051). Removed in 4.0.
+             */
             minHeight: string;
         };
         status: {
@@ -1479,11 +1499,11 @@ export type Tokens = {
         fontWeight: {
             /** 400. Body text, captions, most UI text. */
             regular: string;
-            /** 500. Subheadings (h5, h6, subtitle), buttons, emphasis within UI text. */
+            /** 500. Subtitle, buttons, emphasis within UI text. */
             medium: string;
-            /** 600. Labels and short titles that need more weight than medium (label, Alert title). */
+            /** 600. Headings (h1 to h6), labels and short titles (label, Alert title). */
             semibold: string;
-            /** 700. Headings (display to h4), overline, strong indicators such as the required-field asterisk. */
+            /** 700. The display heading, overline, strong indicators such as the required-field asterisk. */
             bold: string;
         };
         border: {
@@ -1517,6 +1537,8 @@ export type Tokens = {
             '800': string;
             /** Size step for headers and indents, such as the AccountCard header. */
             '1200': string;
+            /** Size step for the collapsed SidebarNav rail: one icon row with an inset on each side. */
+            '1400': string;
             /** Size step for the comfortable ListItem expanded indent. */
             '1500': string;
             /** Size step for tall rows, such as the TransactionListItem minimum height. */
@@ -1529,7 +1551,11 @@ export type Tokens = {
             '4500': string;
             /** Size step for large illustrations, such as the large EmptyState image. */
             '5000': string;
-            /** Size step for narrow column widths: AccountCard, EmptyState actions. */
+            /** Size step for a narrow navigation column: the narrow SidebarNav. */
+            '5600': string;
+            /** Size step for a standard navigation column: the default SidebarNav. */
+            '6400': string;
+            /** Size step for narrow column widths: AccountCard, EmptyState actions, the wide SidebarNav, the widest a Tooltip grows. */
             '7500': string;
             /** Size step for readable text widths, such as EmptyState copy. */
             '9000': string;
@@ -1539,7 +1565,7 @@ export type Tokens = {
             '19200': string;
             /** Minimum pointer target for a control that's smaller to look at: its invisible hit area (WCAG 2.5.8, decision 0039). On touch screens, use touchTarget. */
             pointerTarget: string;
-            /** Minimum height of a tappable row or control on touch screens. */
+            /** Invisible hit area of a small control on touch screens, such as the Slider thumb. Not a row or control height: those follow density down to pointerTarget (decision 0051). */
             touchTarget: string;
             control: {
                 /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
@@ -1549,6 +1575,14 @@ export type Tokens = {
                 /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
                 lg: string;
             };
+            row: {
+                /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+                sm: string;
+                /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+                md: string;
+                /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
+                lg: string;
+            };
             overlay: {
                 /** Width of a small Modal, and the default width or height of a Sheet. */
                 sm: string;
@@ -1861,6 +1895,10 @@ export type Tokens = {
                 /** The default duration for state changes and short movements, such as a menu opening. */
                 moderate: string;
             };
+            delay: {
+                /** How long the pointer rests on a control before its Tooltip opens, so passing pointers don't open it. A wait before anything moves, not an animation duration. */
+                hint: string;
+            };
             easing: {
                 /** Easing for change on screen: something moving or resizing in place. */
                 standard: string;

package/dist/tokens.css

@@ -460,9 +460,9 @@
   --co-semantic-letter-spacing-normal: var(--co-base-letter-spacing-2); /** 0: default tracking (h5, h6 and text). */
   --co-semantic-letter-spacing-wide: var(--co-base-letter-spacing-4); /** Wide tracking for small uppercase labels, such as SearchField section headers. */
   --co-semantic-font-weight-regular: var(--co-base-font-weight-2); /** 400. Body text, captions, most UI text. */
-  --co-semantic-font-weight-medium: var(--co-base-font-weight-3); /** 500. Subheadings (h5, h6, subtitle), buttons, emphasis within UI text. */
-  --co-semantic-font-weight-semibold: var(--co-base-font-weight-4); /** 600. Labels and short titles that need more weight than medium (label, Alert title). */
-  --co-semantic-font-weight-bold: var(--co-base-font-weight-5); /** 700. Headings (display to h4), overline, strong indicators such as the required-field asterisk. */
+  --co-semantic-font-weight-medium: var(--co-base-font-weight-3); /** 500. Subtitle, buttons, emphasis within UI text. */
+  --co-semantic-font-weight-semibold: var(--co-base-font-weight-4); /** 600. Headings (h1 to h6), labels and short titles (label, Alert title). */
+  --co-semantic-font-weight-bold: var(--co-base-font-weight-5); /** 700. The display heading, overline, strong indicators such as the required-field asterisk. */
   --co-semantic-border-default: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-default); /** Hairline in the default border colour: dividers and decorative outlines, such as Breadcrumbs, CodeBlock and Divider. 1.53:1 on white, so never a control edge (decision 0025). */
   --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-focus); /** The focus ring every component draws, with border.focusOffset; never blue (decision 0029). */
   --co-semantic-border-width-thin: var(--co-base-border-width-1); /** Hairline border: dividers, control edges and rings. */
@@ -476,21 +476,27 @@
   --co-semantic-size-600: var(--co-base-dimension-6); /** Size step for the medium label height, used by chips and StatusLabel. */
   --co-semantic-size-800: var(--co-base-dimension-8); /** Size step for compact rows and large labels, such as the Checkbox row. */
   --co-semantic-size-1200: var(--co-base-dimension-12); /** Size step for headers and indents, such as the AccountCard header. */
+  --co-semantic-size-1400: var(--co-base-dimension-14); /** Size step for the collapsed SidebarNav rail: one icon row with an inset on each side. */
   --co-semantic-size-1500: var(--co-base-dimension-15); /** Size step for the comfortable ListItem expanded indent. */
   --co-semantic-size-1800: var(--co-base-dimension-18); /** Size step for tall rows, such as the TransactionListItem minimum height. */
   --co-semantic-size-2000: var(--co-base-dimension-20); /** Size step for small illustrations, such as the small EmptyState image. */
   --co-semantic-size-3000: var(--co-base-dimension-30); /** Size step for medium illustrations and multi-line inputs: EmptyState, TextArea. */
   --co-semantic-size-4500: var(--co-base-dimension-45); /** Size step for truncation widths, such as a Breadcrumbs label. */
   --co-semantic-size-5000: var(--co-base-dimension-50); /** Size step for large illustrations, such as the large EmptyState image. */
-  --co-semantic-size-7500: var(--co-base-dimension-75); /** Size step for narrow column widths: AccountCard, EmptyState actions. */
+  --co-semantic-size-5600: var(--co-base-dimension-56); /** Size step for a narrow navigation column: the narrow SidebarNav. */
+  --co-semantic-size-6400: var(--co-base-dimension-64); /** Size step for a standard navigation column: the default SidebarNav. */
+  --co-semantic-size-7500: var(--co-base-dimension-75); /** Size step for narrow column widths: AccountCard, EmptyState actions, the wide SidebarNav, the widest a Tooltip grows. */
   --co-semantic-size-9000: var(--co-base-dimension-90); /** Size step for readable text widths, such as EmptyState copy. */
   --co-semantic-size-10000: var(--co-base-dimension-100); /** Size step for compact panel widths, such as the EmptyState block. */
   --co-semantic-size-19200: var(--co-base-dimension-192); /** Size step for wide content columns, such as CardLarge. */
   --co-semantic-size-pointer-target: var(--co-base-dimension-6); /** Minimum pointer target for a control that's smaller to look at: its invisible hit area (WCAG 2.5.8, decision 0039). On touch screens, use touchTarget. */
-  --co-semantic-size-touch-target: var(--co-base-dimension-11); /** Minimum height of a tappable row or control on touch screens. */
+  --co-semantic-size-touch-target: var(--co-base-dimension-11); /** Invisible hit area of a small control on touch screens, such as the Slider thumb. Not a row or control height: those follow density down to pointerTarget (decision 0051). */
   --co-semantic-size-control-sm: var(--co-base-dimension-8); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
   --co-semantic-size-control-md: var(--co-base-dimension-10); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
   --co-semantic-size-control-lg: var(--co-base-dimension-12); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
+  --co-semantic-size-row-sm: var(--co-base-dimension-8); /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+  --co-semantic-size-row-md: var(--co-base-dimension-12); /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+  --co-semantic-size-row-lg: var(--co-base-dimension-18); /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
   --co-semantic-size-overlay-sm: var(--co-base-dimension-100); /** Width of a small Modal, and the default width or height of a Sheet. */
   --co-semantic-size-overlay-md: var(--co-base-dimension-140); /** Width of a medium overlay panel, such as a medium Modal. */
   --co-semantic-size-overlay-lg: var(--co-base-dimension-180); /** Width of a large overlay panel, such as a large Modal. */
@@ -603,6 +609,7 @@
   --co-semantic-motion-duration-slow: var(--co-base-duration-moderate); /** The longest duration (P6): larger movements, such as a Sheet sliding in. */
   --co-semantic-motion-duration-instant: var(--co-base-duration-instant); /** No duration: changes that should happen at once, such as movement under reduced motion. */
   --co-semantic-motion-duration-moderate: var(--co-base-duration-normal); /** The default duration for state changes and short movements, such as a menu opening. */
+  --co-semantic-motion-delay-hint: var(--co-base-duration-slow); /** How long the pointer rests on a control before its Tooltip opens, so passing pointers don't open it. A wait before anything moves, not an animation duration. */
   --co-semantic-motion-easing-standard: var(--co-base-easing-ease-in-out); /** Easing for change on screen: something moving or resizing in place. */
   --co-semantic-motion-easing-decelerate: var(--co-base-easing-ease-out); /** Easing for things arriving or responding: entrances, hover and press. */
   --co-semantic-motion-easing-accelerate: var(--co-base-easing-ease-in); /** Easing for things leaving: exits and dismissals speed up as they go (decision 0037). */
@@ -749,7 +756,7 @@
   --co-component-alert-appearance-borderless-border-color-warning: var(--co-semantic-color-border-none); /** Borderless warning alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
   --co-component-alert-appearance-borderless-border-color-info: var(--co-semantic-color-border-none); /** Borderless info alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
   --co-component-alert-appearance-borderless-border-color-success: var(--co-semantic-color-border-none); /** Borderless success alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
-  --co-component-alert-title-font-weight: var(--co-semantic-font-weight-semibold); /** Alert titles are semibold, heavier than h6's medium. */
+  --co-component-alert-title-font-weight: var(--co-semantic-font-weight-semibold); /** Deprecated: h6 is semibold since decision 0050, so the title takes its weight from title.typography. Use semantic.fontWeight.semibold. Removed in 4.0. */
   --co-component-alert-title-line-height: var(--co-semantic-line-height-tight); /** Alert titles use a tighter line height than h6. */
   --co-component-alert-message-line-height: var(--co-semantic-line-height-tight); /** Alert messages use a tighter line height than body. */
   --co-component-tab-bar-badge-font-weight: var(--co-semantic-font-weight-bold); /** Tab count badges are bold, heavier than caption. */
@@ -767,6 +774,10 @@
   --co-component-code-block-font-family: var(--co-semantic-font-family-monospace); /** Code font. */
   --co-component-code-block-font-size: var(--co-semantic-font-size-xs); /** Code text size. */
   --co-component-code-block-line-height: var(--co-semantic-line-height-tight); /** Code line height. */
+  --co-component-sidebar-nav-width-rail: var(--co-semantic-size-1400); /** Width of a collapsed SidebarNav, the icon rail: the tallest dense row (size.row.sm, in comfortable) with an inset on each side. */
+  --co-component-sidebar-nav-width-narrow: var(--co-semantic-size-5600); /** Width of an expanded SidebarNav with width="narrow": short labels. */
+  --co-component-sidebar-nav-width-default: var(--co-semantic-size-6400); /** Width of an expanded SidebarNav with the default width: labels with a trailing count. */
+  --co-component-sidebar-nav-width-wide: var(--co-semantic-size-7500); /** Width of an expanded SidebarNav with width="wide": long titles, such as chat history. */
   --co-component-slider-thumb-shadow-default: var(--co-semantic-elevation-raised); /** Slider thumb at rest. */
   --co-component-slider-thumb-shadow-hover: var(--co-semantic-elevation-sticky); /** Slider thumb on hover: one step deeper. */
   --co-component-slider-thumb-shadow-active: var(--co-semantic-elevation-floating); /** Slider thumb while dragging: deepest. */
@@ -785,7 +796,7 @@
   --co-component-empty-state-actions-max-width: var(--co-semantic-size-7500); /** Widest EmptyState's actions area grows, so buttons don't stretch. */
   --co-component-list-item-expanded-indent-compact: var(--co-semantic-size-1200); /** Indent of a compact ListItem's expanded content, aligning it with the label. */
   --co-component-list-item-expanded-indent-comfortable: var(--co-semantic-size-1500); /** Left indent of a comfortable ListItem's expanded content. */
-  --co-component-transaction-list-item-min-height: var(--co-semantic-size-1800); /** Minimum height of a TransactionListItem row, so rows line up in a list. */
+  --co-component-transaction-list-item-min-height: var(--co-semantic-size-1800); /** Deprecated: Two-line rows share semantic.size.row.lg, which follows density (decision 0051). Removed in 4.0. */
   --co-component-status-pending-text: var(--co-semantic-color-text-muted); /** Text and icon of a pending StatusLabel: neutral, because waiting needs no attention (decision 0045). 6.01:1 on white. */
   --co-component-status-pending-background: var(--co-semantic-color-fill-muted); /** Fill of a pending StatusLabel (decision 0045). */
   --co-component-status-completed-text: var(--co-semantic-color-text-success); /** Text and icon of a completed StatusLabel, on its completed background. */
@@ -804,12 +815,12 @@
   --co-semantic-color-fill-danger-hover: color-mix(in srgb, var(--co-semantic-color-fill-danger), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-hover) * 100%)); /** Fill of a hovered destructive control: fill.danger with text.inverse mixed in at opacity.state.hover (decision 0048). */
   --co-semantic-color-fill-danger-pressed: color-mix(in srgb, var(--co-semantic-color-fill-danger), var(--co-semantic-color-text-inverse) calc(var(--co-semantic-opacity-state-pressed) * 100%)); /** Fill of a pressed destructive control: fill.danger with text.inverse mixed in at opacity.state.pressed (decision 0048). */
   --co-semantic-typography-display: var(--co-semantic-font-weight-bold) var(--co-base-font-size-10)/var(--co-base-line-height-10) var(--co-base-font-family-heading); /** The largest heading, for hero titles. */
-  --co-semantic-typography-h1: var(--co-semantic-font-weight-bold) var(--co-base-font-size-9)/var(--co-base-line-height-9) var(--co-base-font-family-heading); /** Heading 1: the page title, one per page. */
-  --co-semantic-typography-h2: var(--co-semantic-font-weight-bold) var(--co-base-font-size-8)/var(--co-base-line-height-8) var(--co-base-font-family-heading); /** Heading 2: major sections of a page. */
-  --co-semantic-typography-h3: var(--co-semantic-font-weight-bold) var(--co-base-font-size-7)/var(--co-base-line-height-7) var(--co-base-font-family-heading); /** Heading 3: the third heading level in a page outline. */
-  --co-semantic-typography-h4: var(--co-semantic-font-weight-bold) var(--co-base-font-size-6)/var(--co-base-line-height-6) var(--co-base-font-family-heading); /** Heading 4: the fourth heading level in a page outline. */
-  --co-semantic-typography-h5: var(--co-semantic-font-weight-medium) var(--co-base-font-size-5)/var(--co-base-line-height-5) var(--co-base-font-family-heading); /** Heading 5: the fifth heading level in a page outline. */
-  --co-semantic-typography-h6: var(--co-semantic-font-weight-medium) var(--co-base-font-size-4)/var(--co-base-line-height-4) var(--co-base-font-family-heading); /** The smallest heading; Alert's title builds on it. */
+  --co-semantic-typography-h1: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-9)/var(--co-base-line-height-9) var(--co-base-font-family-heading); /** Heading 1: the page title, one per page. */
+  --co-semantic-typography-h2: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-8)/var(--co-base-line-height-8) var(--co-base-font-family-heading); /** Heading 2: major sections of a page. */
+  --co-semantic-typography-h3: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-7)/var(--co-base-line-height-7) var(--co-base-font-family-heading); /** Heading 3: the third heading level in a page outline. */
+  --co-semantic-typography-h4: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-6)/var(--co-base-line-height-6) var(--co-base-font-family-heading); /** Heading 4: the fourth heading level in a page outline. */
+  --co-semantic-typography-h5: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-5)/var(--co-base-line-height-5) var(--co-base-font-family-heading); /** Heading 5: the fifth heading level in a page outline. */
+  --co-semantic-typography-h6: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-4)/var(--co-base-line-height-4) var(--co-base-font-family-heading); /** The smallest heading; Alert's title builds on it. */
   --co-semantic-typography-subtitle: var(--co-semantic-font-weight-medium) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Subtitle: a short line under a heading. */
   --co-semantic-typography-body: var(--co-semantic-font-weight-regular) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Body text: paragraphs and input values. The default text style. */
   --co-semantic-typography-small: var(--co-semantic-font-weight-regular) var(--co-base-font-size-2)/var(--co-base-line-height-3) var(--co-base-font-family-body); /** Small text: secondary copy and compact controls. */
@@ -828,18 +839,21 @@
   --co-component-badge-label-typography-medium: var(--co-semantic-typography-small); /** Typography for medium labels in the badge-like family (StatusLabel medium, CategoryLabel large). Combine with label.fontWeight. */
   --co-component-field-label-typography: var(--co-semantic-typography-label); /** Field label text. */
   --co-component-field-helper-text-typography: var(--co-semantic-typography-caption); /** Helper and error text under a field (TextField, PasswordField, NumberInput, Dropdown, Checkbox). One step below the label. */
-  --co-component-alert-title-typography: var(--co-semantic-typography-h6); /** Alert title style (h6), adjusted by title.fontWeight and title.lineHeight. */
+  --co-component-alert-title-typography: var(--co-semantic-typography-h6); /** Alert title style (h6), adjusted by title.lineHeight. */
   --co-component-alert-message-typography: var(--co-semantic-typography-body); /** Alert message style (body), adjusted by message.lineHeight. */
   --co-component-tab-bar-badge-typography: var(--co-semantic-typography-caption); /** Tab count badge text. */
   --co-component-search-field-section-header-typography: var(--co-semantic-typography-caption); /** Suggestion-list section header text (shown uppercase). */
 }
 
-/* Mode: density (decision 0032). Control heights and control insets for a region, set with data-co-density on any element (decisions 0032 and 0034, #191). Rows and layout spacing don't change. */
+/* Mode: density (decision 0032). Control heights, control insets and row heights for a region, set with data-co-density on any element (decisions 0032, 0034 and 0051). Layout spacing doesn't change. */
 
 [data-co-density="default"] {
   --co-semantic-size-control-sm: var(--co-base-dimension-8); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
   --co-semantic-size-control-md: var(--co-base-dimension-10); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
   --co-semantic-size-control-lg: var(--co-base-dimension-12); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
+  --co-semantic-size-row-sm: var(--co-base-dimension-8); /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+  --co-semantic-size-row-md: var(--co-base-dimension-12); /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+  --co-semantic-size-row-lg: var(--co-base-dimension-18); /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
   --co-semantic-space-inset-xs: var(--co-base-dimension-1); /** Tightest padding inside a component, such as around an icon in a small control. */
   --co-semantic-space-inset-sm: var(--co-base-dimension-2); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
   --co-semantic-space-inset-md: var(--co-base-dimension-3); /** Medium padding inside a component: form field insides, medium IconButtons. */
@@ -852,6 +866,9 @@
   --co-semantic-size-control-sm: var(--co-base-dimension-6); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
   --co-semantic-size-control-md: var(--co-base-dimension-8); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
   --co-semantic-size-control-lg: var(--co-base-dimension-10); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
+  --co-semantic-size-row-sm: var(--co-base-dimension-6); /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+  --co-semantic-size-row-md: var(--co-base-dimension-10); /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+  --co-semantic-size-row-lg: var(--co-base-dimension-16); /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
   --co-semantic-space-inset-xs: var(--co-base-dimension-1); /** Tightest padding inside a component, such as around an icon in a small control. */
   --co-semantic-space-inset-sm: var(--co-base-dimension-1); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
   --co-semantic-space-inset-md: var(--co-base-dimension-2); /** Medium padding inside a component: form field insides, medium IconButtons. */
@@ -864,6 +881,9 @@
   --co-semantic-size-control-sm: var(--co-base-dimension-10); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
   --co-semantic-size-control-md: var(--co-base-dimension-12); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
   --co-semantic-size-control-lg: var(--co-base-dimension-14); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
+  --co-semantic-size-row-sm: var(--co-base-dimension-10); /** Minimum height of dense single-line rows: navigation items, menu items, dense table rows. Follows density down to the minimum pointer target (decision 0051). */
+  --co-semantic-size-row-md: var(--co-base-dimension-14); /** Minimum height of single-line list rows: ListItem and the rows built on it, such as ActionSheet actions and SearchField suggestions. Follows density (decision 0051). */
+  --co-semantic-size-row-lg: var(--co-base-dimension-20); /** Minimum height of two-line rows: TransactionListItem. Follows density (decision 0051). */
   --co-semantic-space-inset-xs: var(--co-base-dimension-2); /** Tightest padding inside a component, such as around an icon in a small control. */
   --co-semantic-space-inset-sm: var(--co-base-dimension-3); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
   --co-semantic-space-inset-md: var(--co-base-dimension-4); /** Medium padding inside a component: form field insides, medium IconButtons. */

package/dist/types/icons.d.mts

@@ -1,4 +1,4 @@
-export type IconName = 'add' | 'ai' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'creditCard' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'info' | 'kebab' | 'lamp' | 'lineOut' | 'link' | 'meatballs' | 'menu' | 'message' | 'move' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'star' | 'starFilled' | 'statusCancelled' | 'statusError' | 'statusInProgress' | 'statusInfo' | 'statusNotStarted' | 'statusPending' | 'statusScheduled' | 'statusSerious' | 'statusSuccess' | 'statusWarning' | 'stop' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide' | 'wallet';
+export type IconName = 'add' | 'ai' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'creditCard' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'home' | 'info' | 'kebab' | 'lamp' | 'lineOut' | 'link' | 'meatballs' | 'menu' | 'message' | 'move' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'sidebar' | 'star' | 'starFilled' | 'statusCancelled' | 'statusError' | 'statusInProgress' | 'statusInfo' | 'statusNotStarted' | 'statusPending' | 'statusScheduled' | 'statusSerious' | 'statusSuccess' | 'statusWarning' | 'stop' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide' | 'wallet';
 /** Semantic category for grouping icons by purpose */
 export type IconCategory = 'action' | 'communication' | 'content' | 'feedback' | 'media' | 'navigation' | 'object' | 'status' | 'user';
 /** Enriched metadata for each icon entry in icons.json */

package/dist/types/icons.d.ts

@@ -1,4 +1,4 @@
-export type IconName = 'add' | 'ai' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'creditCard' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'info' | 'kebab' | 'lamp' | 'lineOut' | 'link' | 'meatballs' | 'menu' | 'message' | 'move' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'star' | 'starFilled' | 'statusCancelled' | 'statusError' | 'statusInProgress' | 'statusInfo' | 'statusNotStarted' | 'statusPending' | 'statusScheduled' | 'statusSerious' | 'statusSuccess' | 'statusWarning' | 'stop' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide' | 'wallet';
+export type IconName = 'add' | 'ai' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'creditCard' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'home' | 'info' | 'kebab' | 'lamp' | 'lineOut' | 'link' | 'meatballs' | 'menu' | 'message' | 'move' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'sidebar' | 'star' | 'starFilled' | 'statusCancelled' | 'statusError' | 'statusInProgress' | 'statusInfo' | 'statusNotStarted' | 'statusPending' | 'statusScheduled' | 'statusSerious' | 'statusSuccess' | 'statusWarning' | 'stop' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide' | 'wallet';
 /** Semantic category for grouping icons by purpose */
 export type IconCategory = 'action' | 'communication' | 'content' | 'feedback' | 'media' | 'navigation' | 'object' | 'status' | 'user';
 /** Enriched metadata for each icon entry in icons.json */

package/dist/types/icons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icons.mjs","sources":["../../src/types/icons.ts"],"sourcesContent":["// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'ai'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'statusCancelled'\n  | 'statusError'\n  | 'statusInProgress'\n  | 'statusInfo'\n  | 'statusNotStarted'\n  | 'statusPending'\n  | 'statusScheduled'\n  | 'statusSerious'\n  | 'statusSuccess'\n  | 'statusWarning'\n  | 'stop'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["iconsData","iconsJson"],"mappings":";;AAAA;AACA;AACA;AAuGA;AACO,IAAMA,SAAS,GAAGC;;;;"}
+{"version":3,"file":"icons.mjs","sources":["../../src/types/icons.ts"],"sourcesContent":["// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'ai'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'home'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'sidebar'\n  | 'star'\n  | 'starFilled'\n  | 'statusCancelled'\n  | 'statusError'\n  | 'statusInProgress'\n  | 'statusInfo'\n  | 'statusNotStarted'\n  | 'statusPending'\n  | 'statusScheduled'\n  | 'statusSerious'\n  | 'statusSuccess'\n  | 'statusWarning'\n  | 'stop'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["iconsData","iconsJson"],"mappings":";;AAAA;AACA;AACA;AAyGA;AACO,IAAMA,SAAS,GAAGC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@common-origin/design-system",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Common Origin Design System - Framework-agnostic atomic design components with comprehensive WCAG 2.2 AA testing",
   "private": false,
   "main": "dist/index.js",
@@ -65,7 +65,7 @@
     "test:coverage": "jest --coverage",
     "test:e2e": "playwright test",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint . --max-warnings 159",
+    "lint": "eslint . --max-warnings 157",
     "docs:dev": "npm run build:tokens && npm run dev",
     "verify:types": "node scripts/verify-types.cjs",
     "verify:no-nextjs": "node scripts/verify-no-nextjs-deps.cjs",