@common-origin/design-system 3.1.0 → 3.2.0

package/dist/data.js

@@ -35,7 +35,8 @@ var base = {
 		"4": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
 		"5": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
 		"6": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-		none: "none"
+		none: "none",
+		inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
 	},
 	zIndex: {
 		"0": "0",
@@ -65,7 +66,8 @@ var base = {
 		"80": "0.8",
 		"90": "0.9",
 		"95": "0.95",
-		"100": "1"
+		"100": "1",
+		scrim: "0.5"
 	},
 	dimension: {
 		"0": "0",
@@ -114,6 +116,15 @@ var base = {
 	color: {
 		transparent: "transparent",
 		white: "#ffffff",
+		surface: {
+			page: "#fcfcfc",
+			raised: "#ffffff",
+			overlay: "#ffffff"
+		},
+		ink: {
+			light: "#fcfcfc",
+			dark: "#222222"
+		},
 		gray: {
 			"100": "#fcfcfc",
 			"200": "#f9f9f9",
@@ -142,6 +153,20 @@ var base = {
 			"1100": "rgba(34, 34, 34, 0.706)",
 			"1200": "rgba(34, 34, 34, 1)"
 		},
+		"gray-alpha-inverse": {
+			"100": "rgba(252, 252, 252, 0.014)",
+			"200": "rgba(252, 252, 252, 0.027)",
+			"300": "rgba(252, 252, 252, 0.059)",
+			"400": "rgba(252, 252, 252, 0.09)",
+			"500": "rgba(252, 252, 252, 0.122)",
+			"600": "rgba(252, 252, 252, 0.158)",
+			"700": "rgba(252, 252, 252, 0.208)",
+			"800": "rgba(252, 252, 252, 0.502)",
+			"900": "rgba(252, 252, 252, 0.557)",
+			"1000": "rgba(252, 252, 252, 0.606)",
+			"1100": "rgba(252, 252, 252, 0.706)",
+			"1200": "rgba(252, 252, 252, 1)"
+		},
 		accent: {
 			"100": "#fbfcfd",
 			"200": "#f7f9fc",
@@ -154,7 +179,8 @@ var base = {
 			"900": "#0082fc",
 			"1000": "#0278e7",
 			"1100": "#0162bf",
-			"1200": "#0f2339"
+			"1200": "#0f2339",
+			solid: "#0162bf"
 		},
 		"accent-alpha": {
 			"100": "rgba(5, 68, 130, 0.016)",
@@ -182,7 +208,8 @@ var base = {
 			"900": "#009762",
 			"1000": "#018b5a",
 			"1100": "#017249",
-			"1200": "#12261b"
+			"1200": "#12261b",
+			solid: "#017249"
 		},
 		"success-alpha": {
 			"100": "rgba(5, 172, 47, 0.024)",
@@ -210,7 +237,8 @@ var base = {
 			"900": "#ad7b00",
 			"1000": "#9f7102",
 			"1100": "#835c00",
-			"1200": "#292111"
+			"1200": "#292111",
+			solid: "#835c00"
 		},
 		"warning-alpha": {
 			"100": "rgba(155, 105, 5, 0.02)",
@@ -238,7 +266,8 @@ var base = {
 			"900": "#da5f00",
 			"1000": "#c85701",
 			"1100": "#a54703",
-			"1200": "#341c10"
+			"1200": "#341c10",
+			solid: "#a54703"
 		},
 		"serious-alpha": {
 			"100": "rgba(193, 68, 5, 0.016)",
@@ -266,7 +295,8 @@ var base = {
 			"900": "#ff2b21",
 			"1000": "#f30004",
 			"1100": "#c90002",
-			"1200": "#3d1611"
+			"1200": "#3d1611",
+			solid: "#c90002"
 		},
 		"danger-alpha": {
 			"100": "rgba(172, 5, 5, 0.012)",
@@ -509,7 +539,7 @@ var component = {
 		primary: {
 			backgroundColor: "#222222",
 			textColor: "#fcfcfc",
-			borderRadius: "0.25rem",
+			borderRadius: "0.5rem",
 			font: "500 1rem/1.5rem 'Inter', sans-serif"
 		},
 		hover: {
@@ -522,21 +552,21 @@ var component = {
 			outline: "0.125rem solid #222222"
 		},
 		disabled: {
-			backgroundColor: "#f2f2f2",
+			backgroundColor: "rgba(34, 34, 34, 0.059)",
 			textColor: "rgba(34, 34, 34, 0.208)"
 		},
 		variants: {
 			secondary: {
-				backgroundColor: "#f2f2f2",
+				backgroundColor: "rgba(34, 34, 34, 0.059)",
 				textColor: "#222222",
 				hover: {
-					backgroundColor: "#ebebeb"
+					backgroundColor: "rgba(34, 34, 34, 0.09)"
 				},
 				active: {
-					backgroundColor: "#e4e4e4"
+					backgroundColor: "rgba(34, 34, 34, 0.122)"
 				},
 				disabled: {
-					backgroundColor: "#f2f2f2",
+					backgroundColor: "rgba(34, 34, 34, 0.059)",
 					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
@@ -544,10 +574,10 @@ var component = {
 				backgroundColor: "transparent",
 				textColor: "#222222",
 				hover: {
-					backgroundColor: "#f2f2f2"
+					backgroundColor: "rgba(34, 34, 34, 0.059)"
 				},
 				active: {
-					backgroundColor: "#ebebeb"
+					backgroundColor: "rgba(34, 34, 34, 0.09)"
 				},
 				disabled: {
 					backgroundColor: "transparent",
@@ -564,7 +594,7 @@ var component = {
 					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#f2f2f2",
+					backgroundColor: "rgba(34, 34, 34, 0.059)",
 					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
@@ -578,7 +608,7 @@ var component = {
 					backgroundColor: "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#f2f2f2",
+					backgroundColor: "rgba(34, 34, 34, 0.059)",
 					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			}
@@ -601,16 +631,16 @@ var component = {
 			size: "1.25rem"
 		},
 		"default": {
-			backgroundColor: "#f2f2f2",
+			backgroundColor: "rgba(34, 34, 34, 0.059)",
 			textColor: "#222222",
-			borderRadius: "0.75rem",
+			borderRadius: "10rem",
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
 		focus: {
 			outline: "0.125rem solid #222222"
 		},
 		disabled: {
-			backgroundColor: "#f2f2f2",
+			backgroundColor: "rgba(34, 34, 34, 0.059)",
 			textColor: "rgba(34, 34, 34, 0.208)"
 		},
 		variants: {
@@ -621,7 +651,7 @@ var component = {
 					backgroundColor: "#fcfcfc"
 				},
 				active: {
-					backgroundColor: "#f2f2f2"
+					backgroundColor: "rgba(34, 34, 34, 0.059)"
 				},
 				disabled: {
 					backgroundColor: "#ffffff",
@@ -637,7 +667,7 @@ var component = {
 	},
 	iconButton: {
 		primary: {
-			borderRadius: "0.25rem"
+			borderRadius: "0.5rem"
 		},
 		focus: {
 			outline: "0.125rem solid #222222"
@@ -658,7 +688,7 @@ var component = {
 		}
 	},
 	progressBar: {
-		backgroundColor: "#f2f2f2",
+		backgroundColor: "rgba(34, 34, 34, 0.059)",
 		sizes: {
 			sm: {
 				height: "0.25rem"
@@ -679,7 +709,7 @@ var component = {
 			backgroundColor: "#ffffff",
 			textColor: "#222222",
 			borderColor: "#909090",
-			borderRadius: "0.25rem",
+			borderRadius: "0.5rem",
 			borderWidth: "0.0625rem",
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
@@ -704,7 +734,7 @@ var component = {
 			}
 		},
 		disabled: {
-			backgroundColor: "#f2f2f2",
+			backgroundColor: "rgba(34, 34, 34, 0.059)",
 			textColor: "rgba(34, 34, 34, 0.208)",
 			borderColor: "#d1d1d1"
 		},
@@ -752,19 +782,19 @@ var component = {
 	alert: {
 		severity: {
 			error: {
-				background: "#faf0ee",
+				background: "rgba(180, 31, 1, 0.067)",
 				text: "#c90002"
 			},
 			warning: {
-				background: "#faf1e3",
+				background: "rgba(210, 128, 0, 0.11)",
 				text: "#835c00"
 			},
 			info: {
-				background: "#edf3fa",
+				background: "rgba(1, 86, 185, 0.071)",
 				text: "#0162bf"
 			},
 			success: {
-				background: "#dbf9e8",
+				background: "rgba(1, 213, 93, 0.142)",
 				text: "#017249"
 			}
 		},
@@ -865,7 +895,8 @@ var component = {
 	},
 	checkbox: {
 		box: {
-			size: "1.25rem"
+			size: "1.25rem",
+			borderRadius: "0.25rem"
 		},
 		row: {
 			minHeight: "2rem"
@@ -897,31 +928,34 @@ var component = {
 	status: {
 		pending: {
 			text: "#636363",
-			background: "#f2f2f2"
+			background: "rgba(34, 34, 34, 0.059)"
 		},
 		completed: {
 			text: "#017249",
-			background: "#dbf9e8"
+			background: "rgba(1, 213, 93, 0.142)"
 		},
 		failed: {
 			text: "#c90002",
-			background: "#faf0ee"
+			background: "rgba(180, 31, 1, 0.067)"
 		},
 		cancelled: {
 			text: "#636363",
-			background: "#f2f2f2"
+			background: "rgba(34, 34, 34, 0.059)"
 		},
 		processing: {
 			text: "#0162bf",
-			background: "#edf3fa"
+			background: "rgba(1, 86, 185, 0.071)"
 		},
 		scheduled: {
 			text: "#636363",
-			background: "#f2f2f2"
+			background: "rgba(34, 34, 34, 0.059)"
 		}
 	},
 	track: {
-		background: "#f2f2f2"
+		background: "rgba(34, 34, 34, 0.059)"
+	},
+	overlay: {
+		borderRadius: "1.5rem"
 	}
 };
 var semantic = {
@@ -1060,6 +1094,7 @@ var semantic = {
 		text: {
 			"default": "#222222",
 			inverse: "#fcfcfc",
+			"on-fill": "#fcfcfc",
 			disabled: "rgba(34, 34, 34, 0.208)",
 			success: "#017249",
 			warning: "#835c00",
@@ -1086,6 +1121,7 @@ var semantic = {
 			"default": "#222222",
 			disabled: "rgba(34, 34, 34, 0.208)",
 			inverse: "#fcfcfc",
+			"on-fill": "#fcfcfc",
 			success: "#017249",
 			warning: "#835c00",
 			muted: "#636363",
@@ -1098,53 +1134,53 @@ var semantic = {
 			gray: "#909090",
 			"gray-strong": "#636363",
 			"gray-text": "#636363",
-			"gray-muted": "#f2f2f2",
+			"gray-muted": "rgba(34, 34, 34, 0.059)",
 			olive: "#889903",
 			"olive-strong": "#5d6900",
 			"olive-text": "#5d6900",
-			"olive-muted": "#eff6d4",
+			"olive-muted": "rgba(160, 202, 1, 0.169)",
 			periwinkle: "#7a84ff",
 			"periwinkle-strong": "#533eff",
 			"periwinkle-text": "#533eff",
-			"periwinkle-muted": "#f0f2fa",
+			"periwinkle-muted": "rgba(1, 35, 170, 0.059)",
 			rose: "#ff4989",
 			"rose-strong": "#c4005d",
 			"rose-text": "#c4005d",
-			"rose-muted": "#faeff1",
+			"rose-muted": "rgba(176, 1, 33, 0.063)",
 			magenta: "#fd00fa",
 			"magenta-strong": "#b100af",
 			"magenta-text": "#b100af",
-			"magenta-muted": "#faeff9"
+			"magenta-muted": "rgba(176, 1, 160, 0.063)"
 		},
 		fill: {
 			emphasis: "#222222",
-			muted: "#f2f2f2",
+			muted: "rgba(34, 34, 34, 0.059)",
 			inverse: "#222222",
 			accent: "#0162bf",
-			"accent-muted": "#edf3fa",
-			"accent-muted-hover": "#e3ecf8",
-			"accent-muted-pressed": "#d8e5f6",
+			"accent-muted": "rgba(1, 86, 185, 0.071)",
+			"accent-muted-hover": "rgba(0, 82, 191, 0.11)",
+			"accent-muted-pressed": "rgba(0, 85, 196, 0.153)",
 			"accent-hover": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))",
 			"accent-pressed": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))",
 			danger: "#c90002",
 			"danger-hover": "color-mix(in srgb, #c90002, #fcfcfc calc(0.08 * 100%))",
 			"danger-pressed": "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))",
-			"danger-muted": "#faf0ee",
+			"danger-muted": "rgba(180, 31, 1, 0.067)",
 			success: "#017249",
-			"success-muted": "#dbf9e8",
+			"success-muted": "rgba(1, 213, 93, 0.142)",
 			warning: "#835c00",
-			"warning-muted": "#faf1e3",
-			disabled: "#f2f2f2",
-			"default": "#f2f2f2",
-			"default-hover": "#ebebeb",
-			"default-pressed": "#e4e4e4",
+			"warning-muted": "rgba(210, 128, 0, 0.11)",
+			disabled: "rgba(34, 34, 34, 0.059)",
+			"default": "rgba(34, 34, 34, 0.059)",
+			"default-hover": "rgba(34, 34, 34, 0.09)",
+			"default-pressed": "rgba(34, 34, 34, 0.122)",
 			none: "transparent",
-			"none-hover": "rgba(34, 34, 34, 0.1)",
-			"none-pressed": "rgba(34, 34, 34, 0.15)",
-			"inverse-none-hover": "rgba(255, 255, 255, 0.2)",
+			"none-hover": "rgba(34, 34, 34, 0.09)",
+			"none-pressed": "rgba(34, 34, 34, 0.158)",
+			"inverse-none-hover": "rgba(252, 252, 252, 0.208)",
 			serious: "#a54703",
-			"serious-muted": "#faf0eb",
-			"ai-muted": "#f4f0fa"
+			"serious-muted": "rgba(192, 65, 2, 0.079)",
+			"ai-muted": "rgba(69, 1, 170, 0.059)"
 		},
 		data: {
 			positive: "#009762",
@@ -1261,7 +1297,8 @@ var semantic = {
 	surface: {
 		base: "#fcfcfc",
 		raised: "#ffffff",
-		scrim: "rgba(34, 34, 34, 0.5)"
+		overlay: "#ffffff",
+		scrim: "color-mix(in srgb, #222222 calc(0.5 * 100%), transparent)"
 	}
 };
 var tokensJson = {

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.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","// 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":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAWC;;ACP9B;AACA;AACA;AAyGA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}
+{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.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","// 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":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAWC;;ACP9B;AACA;AACA;AAyGA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}

package/dist/lib/styleUtils.d.mts

@@ -21,6 +21,10 @@ 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>;
+/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */
+export declare const fieldButtonRadius: string;
+/** Corner radius every row and tab shares: the control radius (decision 0055). */
+export declare const rowRadius: string;
 export interface RowState {
     background: string;
     text?: string;

package/dist/lib/styleUtils.d.ts

@@ -21,6 +21,10 @@ 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>;
+/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */
+export declare const fieldButtonRadius: string;
+/** Corner radius every row and tab shares: the control radius (decision 0055). */
+export declare const rowRadius: string;
 export interface RowState {
     background: string;
     text?: string;

package/dist/lib/styleUtils.mjs

@@ -69,6 +69,10 @@ var visuallyHidden = css(templateObject_3 || (templateObject_3 = __makeTemplateO
 var _a = tokens.semantic.color,
   rowFill = _a.fill,
   rowText = _a.text;
+/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */
+var fieldButtonRadius = tokens.semantic.radius.sm;
+/** Corner radius every row and tab shares: the control radius (decision 0055). */
+var rowRadius = tokens.semantic.radius.md;
 var rowStates = {
   unselected: {
     rest: {
@@ -156,5 +160,5 @@ var rowForcedColors = function rowForcedColors(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3;
 
-export { breakpoints, exitAnimation, forcedColors, forcedColorsEdge, interactiveRow, media, reducedMotion, rowStates, visuallyHidden };
+export { breakpoints, exitAnimation, fieldButtonRadius, forcedColors, forcedColorsEdge, interactiveRow, media, reducedMotion, rowRadius, rowStates, visuallyHidden };
 //# sourceMappingURL=styleUtils.mjs.map

package/dist/lib/styleUtils.mjs.map

@@ -1 +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 },\n    pressed: { background: rowFill['accent-muted-pressed'], text: rowText.accent },\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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"}
+{"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\n/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */\nexport const fieldButtonRadius = tokens.semantic.radius.sm\n\n/** Corner radius every row and tab shares: the control radius (decision 0055). */\nexport const rowRadius = tokens.semantic.radius.md\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 },\n    pressed: { background: rowFill['accent-muted-pressed'], text: rowText.accent },\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","fieldButtonRadius","radius","rowRadius","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.mjs

@@ -47,6 +47,7 @@ var radiusByKey = {
 var backgroundByPath = {
   'surface.base': surface.base,
   'surface.raised': surface.raised,
+  'surface.overlay': surface.overlay,
   'surface.scrim': surface.scrim,
   'color.fill.emphasis': color.fill.emphasis,
   'color.fill.muted': color.fill.muted,

package/dist/lib/tokenAliases.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tokenAliases.mjs","sources":["../../src/lib/tokenAliases.ts"],"sourcesContent":["import tokens from './cssTokens'\nimport type { Tokens } from '../types/tokens'\n\n// Box's spacing and radius props keep their own names, which 3.0 decoupled from the removed\n// spacing.layout and border.radius tokens (P7, #99), and read the semantic grammar's tokens\n// (decision 0031). Each map covers every key the prop type allows, so TypeScript fails here if a\n// key is added without a mapping.\nconst { semantic } = tokens\nconst { color, space, radius, surface } = semantic\n\ntype Semantic = Tokens['semantic']\n\n/** Box's spacing values (`p`, `m`, `gap`…), each a `space` step, plus `auto`. */\nexport type BoxSpace =\n  | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | '10xl' | '11xl'\n  | 'auto'\n\n/** Box's spacing props: each name maps to the space step that replaced its spacing.layout token. */\nexport const spaceByLayoutKey: Record<BoxSpace, string> = {\n  none: space[0],\n  xs: space[100],\n  sm: space[200],\n  md: space[300],\n  lg: space[400],\n  xl: space[500],\n  '2xl': space[600],\n  '3xl': space[700],\n  '4xl': space[800],\n  '5xl': space[900],\n  '6xl': space[1000],\n  '7xl': space[1200],\n  '8xl': space[1400],\n  '9xl': space[1600],\n  '10xl': space[2000],\n  '11xl': space[2400],\n  // A keyword, not a step (0031)\n  auto: semantic.spacing.layout.auto,\n}\n\n/** Box's `borderRadius` values: the `radius` steps, with `circle` for `full`. */\nexport type BoxRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'circle'\n\n/** Box's `borderRadius` prop, read from `radius`. */\nexport const radiusByKey: Record<BoxRadius, string> = {\n  none: radius.none,\n  xs: radius.xs,\n  sm: radius.sm,\n  md: radius.md,\n  lg: radius.lg,\n  xl: radius.xl,\n  '2xl': radius['2xl'],\n  '3xl': radius['3xl'],\n  circle: radius.full,\n}\n\n/**\n * Box's `bg` values in the semantic grammar (decision 0031, #304): the token's path below\n * `semantic`, such as `surface.raised` or `color.fill.muted`.\n */\nexport type BackgroundPath =\n  | `surface.${keyof Semantic['surface']}`\n  | `color.fill.${keyof Semantic['color']['fill']}`\n\n/** Box's `bg` prop: the grammar's token paths, read from the token at that path. */\nexport const backgroundByPath: Record<BackgroundPath, string> = {\n  'surface.base': surface.base,\n  'surface.raised': surface.raised,\n  'surface.scrim': surface.scrim,\n  'color.fill.emphasis': color.fill.emphasis,\n  'color.fill.muted': color.fill.muted,\n  'color.fill.inverse': color.fill.inverse,\n  'color.fill.accent': color.fill.accent,\n  'color.fill.accent-hover': color.fill['accent-hover'],\n  'color.fill.accent-pressed': color.fill['accent-pressed'],\n  'color.fill.accent-muted': color.fill['accent-muted'],\n  'color.fill.accent-muted-hover': color.fill['accent-muted-hover'],\n  'color.fill.accent-muted-pressed': color.fill['accent-muted-pressed'],\n  'color.fill.danger': color.fill.danger,\n  'color.fill.danger-hover': color.fill['danger-hover'],\n  'color.fill.danger-pressed': color.fill['danger-pressed'],\n  'color.fill.danger-muted': color.fill['danger-muted'],\n  'color.fill.success': color.fill.success,\n  'color.fill.success-muted': color.fill['success-muted'],\n  'color.fill.warning': color.fill.warning,\n  'color.fill.warning-muted': color.fill['warning-muted'],\n  'color.fill.serious': color.fill.serious,\n  'color.fill.serious-muted': color.fill['serious-muted'],\n  'color.fill.ai-muted': color.fill['ai-muted'],\n  'color.fill.disabled': color.fill.disabled,\n  'color.fill.default': color.fill.default,\n  'color.fill.default-hover': color.fill['default-hover'],\n  'color.fill.default-pressed': color.fill['default-pressed'],\n  'color.fill.none': color.fill.none,\n  'color.fill.none-hover': color.fill['none-hover'],\n  'color.fill.none-pressed': color.fill['none-pressed'],\n  'color.fill.inverse-none-hover': color.fill['inverse-none-hover'],\n}\n\n/** Box's `color` prop: the text colours. */\nexport const textColorByKey: Record<keyof Semantic['color']['text'], string> = color.text\n\n/** Box's border props: the border colours. */\nexport const borderColorByKey: Record<keyof Semantic['color']['border'], string> = color.border\n"],"names":["semantic","tokens","color","space","radius","surface","spaceByLayoutKey","none","xs","sm","md","lg","xl","auto","spacing","layout","radiusByKey","circle","full","backgroundByPath","base","raised","scrim","fill","emphasis","muted","inverse","accent","danger","success","warning","serious","disabled","textColorByKey","text","borderColorByKey","border"],"mappings":"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"}
+{"version":3,"file":"tokenAliases.mjs","sources":["../../src/lib/tokenAliases.ts"],"sourcesContent":["import tokens from './cssTokens'\nimport type { Tokens } from '../types/tokens'\n\n// Box's spacing and radius props keep their own names, which 3.0 decoupled from the removed\n// spacing.layout and border.radius tokens (P7, #99), and read the semantic grammar's tokens\n// (decision 0031). Each map covers every key the prop type allows, so TypeScript fails here if a\n// key is added without a mapping.\nconst { semantic } = tokens\nconst { color, space, radius, surface } = semantic\n\ntype Semantic = Tokens['semantic']\n\n/** Box's spacing values (`p`, `m`, `gap`…), each a `space` step, plus `auto`. */\nexport type BoxSpace =\n  | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | '10xl' | '11xl'\n  | 'auto'\n\n/** Box's spacing props: each name maps to the space step that replaced its spacing.layout token. */\nexport const spaceByLayoutKey: Record<BoxSpace, string> = {\n  none: space[0],\n  xs: space[100],\n  sm: space[200],\n  md: space[300],\n  lg: space[400],\n  xl: space[500],\n  '2xl': space[600],\n  '3xl': space[700],\n  '4xl': space[800],\n  '5xl': space[900],\n  '6xl': space[1000],\n  '7xl': space[1200],\n  '8xl': space[1400],\n  '9xl': space[1600],\n  '10xl': space[2000],\n  '11xl': space[2400],\n  // A keyword, not a step (0031)\n  auto: semantic.spacing.layout.auto,\n}\n\n/** Box's `borderRadius` values: the `radius` steps, with `circle` for `full`. */\nexport type BoxRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'circle'\n\n/** Box's `borderRadius` prop, read from `radius`. */\nexport const radiusByKey: Record<BoxRadius, string> = {\n  none: radius.none,\n  xs: radius.xs,\n  sm: radius.sm,\n  md: radius.md,\n  lg: radius.lg,\n  xl: radius.xl,\n  '2xl': radius['2xl'],\n  '3xl': radius['3xl'],\n  circle: radius.full,\n}\n\n/**\n * Box's `bg` values in the semantic grammar (decision 0031, #304): the token's path below\n * `semantic`, such as `surface.raised` or `color.fill.muted`.\n */\nexport type BackgroundPath =\n  | `surface.${keyof Semantic['surface']}`\n  | `color.fill.${keyof Semantic['color']['fill']}`\n\n/** Box's `bg` prop: the grammar's token paths, read from the token at that path. */\nexport const backgroundByPath: Record<BackgroundPath, string> = {\n  'surface.base': surface.base,\n  'surface.raised': surface.raised,\n  'surface.overlay': surface.overlay,\n  'surface.scrim': surface.scrim,\n  'color.fill.emphasis': color.fill.emphasis,\n  'color.fill.muted': color.fill.muted,\n  'color.fill.inverse': color.fill.inverse,\n  'color.fill.accent': color.fill.accent,\n  'color.fill.accent-hover': color.fill['accent-hover'],\n  'color.fill.accent-pressed': color.fill['accent-pressed'],\n  'color.fill.accent-muted': color.fill['accent-muted'],\n  'color.fill.accent-muted-hover': color.fill['accent-muted-hover'],\n  'color.fill.accent-muted-pressed': color.fill['accent-muted-pressed'],\n  'color.fill.danger': color.fill.danger,\n  'color.fill.danger-hover': color.fill['danger-hover'],\n  'color.fill.danger-pressed': color.fill['danger-pressed'],\n  'color.fill.danger-muted': color.fill['danger-muted'],\n  'color.fill.success': color.fill.success,\n  'color.fill.success-muted': color.fill['success-muted'],\n  'color.fill.warning': color.fill.warning,\n  'color.fill.warning-muted': color.fill['warning-muted'],\n  'color.fill.serious': color.fill.serious,\n  'color.fill.serious-muted': color.fill['serious-muted'],\n  'color.fill.ai-muted': color.fill['ai-muted'],\n  'color.fill.disabled': color.fill.disabled,\n  'color.fill.default': color.fill.default,\n  'color.fill.default-hover': color.fill['default-hover'],\n  'color.fill.default-pressed': color.fill['default-pressed'],\n  'color.fill.none': color.fill.none,\n  'color.fill.none-hover': color.fill['none-hover'],\n  'color.fill.none-pressed': color.fill['none-pressed'],\n  'color.fill.inverse-none-hover': color.fill['inverse-none-hover'],\n}\n\n/** Box's `color` prop: the text colours. */\nexport const textColorByKey: Record<keyof Semantic['color']['text'], string> = color.text\n\n/** Box's border props: the border colours. */\nexport const borderColorByKey: Record<keyof Semantic['color']['border'], string> = color.border\n"],"names":["semantic","tokens","color","space","radius","surface","spaceByLayoutKey","none","xs","sm","md","lg","xl","auto","spacing","layout","radiusByKey","circle","full","backgroundByPath","base","raised","overlay","scrim","fill","emphasis","muted","inverse","accent","danger","success","warning","serious","disabled","textColorByKey","text","borderColorByKey","border"],"mappings":"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"}

package/dist/lib/useFloatingLayer.d.mts

@@ -1,6 +1,8 @@
 import { useEffect, type RefObject } from 'react';
 import { type FloatingAlign, type FloatingSide } from './floatingPosition.mjs';
 export declare const useIsomorphicLayoutEffect: typeof useEffect;
+/** The trigger's width in px, set on the floating element when `matchAnchorWidth` is on */
+export declare const ANCHOR_WIDTH_VAR = "--co-floating-anchor-width";
 interface FloatingLayerOptions {
     /** Whether the floating element is rendered */
     isPresent: boolean;
@@ -10,6 +12,11 @@ interface FloatingLayerOptions {
     anchorRef: RefObject<Element | null>;
     side: FloatingSide;
     align: FloatingAlign;
+    /**
+     * Writes the trigger's width to `ANCHOR_WIDTH_VAR` on the floating element before each placement,
+     * so its CSS can be at least as wide as the trigger
+     */
+    matchAnchorWidth?: boolean;
     /**
      * Called when the trigger may have moved away from the floating element: the page or a container
      * scrolled (anything but the floating element itself), or the window resized
@@ -21,5 +28,5 @@ interface FloatingLayerOptions {
  * paints, and places it again whenever its size changes. A gap of `space.100` separates it from the
  * trigger, and it keeps `space.200` from the viewport's edges.
  */
-export declare function useFloatingLayer({ isPresent, floatingRef, anchorRef, side, align, onDetach }: FloatingLayerOptions): void;
+export declare function useFloatingLayer({ isPresent, floatingRef, anchorRef, side, align, matchAnchorWidth, onDetach, }: FloatingLayerOptions): void;
 export {};