@persona/design-system 0.5.0 → 0.6.0

package/dist/variables/semantic.mjs

@@ -0,0 +1,241 @@
+import { Color } from "@persona/design-tokens";
+//#region variables/semantic.ts
+const CoreSlate1150 = "#262626";
+const CoreSlate1200 = "#1F1F1F";
+const CoreSlate1300 = "#181818";
+const semanticLight = {
+	ActionAccent: Color.CorePurple100,
+	ActionDanger: Color.CoreRed700,
+	ActionDangerActive: Color.CoreRed900,
+	ActionDangerDisabled: Color.CoreRed400,
+	ActionDangerHover: Color.CoreRed800,
+	ActionInverse: Color.PrimaryWhite,
+	ActionInverseActive: Color.CoreSlate300,
+	ActionInverseHover: Color.CoreSlate100,
+	ActionNeutral: Color.CoreSlate100,
+	ActionNeutralActive: Color.CoreSlate400,
+	ActionNeutralHover: Color.CoreSlate200,
+	ActionOutlineActive: Color.CoreSlate300,
+	ActionOutlineHover: Color.CoreSlate100,
+	ActionPrimary: Color.CorePurple600,
+	ActionPrimaryActive: Color.CorePurple900,
+	ActionPrimaryHover: Color.CorePurple800,
+	BorderAccent: Color.CorePurple600,
+	BorderDanger: Color.CoreRed600,
+	BorderDefault: Color.CoreSlate300,
+	BorderDivider: Color.CoreSlate100,
+	BorderFocus: Color.CoreBlue600,
+	BorderHover: Color.CoreSlate1000,
+	BorderSubtle: Color.CoreSlate200,
+	BorderWarning: Color.CoreOrange700,
+	FeedbackAccent1: Color.CorePurple200,
+	FeedbackAccent1Static: Color.CorePurple200,
+	FeedbackAccent2: Color.CorePurple400,
+	FeedbackAccent3: Color.CorePurple600,
+	FeedbackDanger1: Color.CoreRed100,
+	FeedbackDanger2: Color.CoreRed400,
+	FeedbackDanger3: Color.CoreRed600,
+	FeedbackDanger4: Color.CoreRed800,
+	FeedbackHighlight1: Color.CoreYellow500,
+	FeedbackHighlight2: Color.CoreYellow800,
+	FeedbackInfo1: Color.CoreBlue100,
+	FeedbackInfo2: Color.CoreBlue400,
+	FeedbackInfo3: Color.CoreBlue600,
+	FeedbackMisc1: Color.CoreTeal500,
+	FeedbackMisc2: Color.CoreTeal800,
+	FeedbackNeutral1: Color.CoreSlate100,
+	FeedbackNeutral2: Color.CoreSlate200,
+	FeedbackNeutral2Static: Color.CoreSlate200,
+	FeedbackNeutral3: Color.CoreSlate300,
+	FeedbackNeutral4: Color.CoreSlate700,
+	FeedbackNeutral5: Color.CoreSlate800,
+	FeedbackNeutralInverse: Color.PrimaryWhite,
+	FeedbackSuccess1: Color.CoreGreen100,
+	FeedbackSuccess2: Color.CoreGreen500,
+	FeedbackSuccess3: Color.CoreGreen700,
+	FeedbackWarning1: Color.CoreOrange100,
+	FeedbackWarning2: Color.CoreOrange500,
+	FeedbackWarning3: Color.CoreOrange700,
+	FgAccent: Color.CorePurple700,
+	FgAccentActive: Color.CorePurple900,
+	FgAccentHover: Color.CorePurple800,
+	FgAccentStatic: Color.CorePurple600,
+	FgDanger1: Color.CoreRed800,
+	FgDanger2: Color.CoreRed1000,
+	FgDisabled: Color.CoreSlate500,
+	FgFeature: Color.CorePurple1000,
+	FgHighlight: Color.CoreYellow1000,
+	FgInfo: Color.CoreBlue1000,
+	FgInverse: Color.PrimaryWhite,
+	FgInverseStatic: Color.PrimaryWhite,
+	FgMisc: Color.CoreTeal1000,
+	FgPrimary: Color.CoreSlate1100,
+	FgPrimaryStatic: Color.CoreSlate1100,
+	FgSecondary: Color.CoreSlate800,
+	FgSecondaryStatic: Color.CoreSlate800,
+	FgSuccess: Color.CoreGreen1000,
+	FgTertiary: Color.CoreSlate700,
+	FgWarning1: Color.CoreOrange900,
+	FgWarning2: Color.CoreOrange1000,
+	InputBorderAccent: Color.CoreBlue700,
+	InputBorderDefault: Color.CoreSlate300,
+	InputBorderDisabled: Color.CoreSlate300,
+	InputBorderHover: Color.CoreSlate500,
+	InputBorderHoverStrong: Color.CoreSlate1000,
+	InputBorderStrong: Color.CoreSlate800,
+	InputSurfaceAccent: Color.CoreBlue700,
+	InputSurfaceAccentDisabled: Color.CoreBlue300,
+	InputSurfaceAccentHover: Color.CoreBlue800,
+	InputSurfaceDefault: Color.PrimaryWhite,
+	InputSurfaceDisabled: Color.CoreSlate100,
+	InputSurfaceHover: Color.PrimaryWhite,
+	InputSurfaceInverseStatic: Color.PrimaryWhite,
+	Opacity15: "100%",
+	Opacity25: "100%",
+	Opacity65: "65%",
+	StatusDanger1Static: Color.CoreRed100,
+	StatusDanger2: Color.CoreRed200,
+	StatusDanger3: Color.CoreRed300,
+	StatusDanger4: Color.CoreRed600,
+	StatusFeature: Color.CorePurple300,
+	StatusHighlight: Color.CoreYellow400,
+	StatusInfo1: Color.CoreBlue200,
+	StatusInfo2: Color.CoreBlue300,
+	StatusInfo3: Color.CoreBlue700,
+	StatusMisc: Color.CoreTeal300,
+	StatusNeutral: Color.CoreSlate200,
+	StatusSuccess1: Color.CoreGreen200,
+	StatusSuccess2: Color.CoreGreen300,
+	StatusSuccess3: Color.CoreGreen800,
+	StatusWarning: Color.CoreOrange300,
+	SurfaceAccent: Color.CorePurple100,
+	SurfaceAccentStatic: Color.CorePurple100,
+	SurfaceElevated: Color.PrimaryWhite,
+	SurfaceHover: Color.CoreSlate50,
+	SurfaceInset: Color.CoreSlate300,
+	SurfacePage: Color.CoreSlate50,
+	SurfacePrimary: Color.PrimaryWhite,
+	SurfaceSecondary: Color.CoreSlate50,
+	SurfaceSubtle: Color.CoreSlate50,
+	SurfaceTertiary: Color.CoreSlate100
+};
+const semanticDark = {
+	ActionAccent: Color.CorePurple500,
+	ActionDanger: Color.CoreRed400,
+	ActionDangerActive: Color.CoreRed200,
+	ActionDangerDisabled: Color.CoreRed400,
+	ActionDangerHover: Color.CoreRed300,
+	ActionInverse: Color.CoreSlate700,
+	ActionInverseActive: Color.CoreSlate500,
+	ActionInverseHover: Color.CoreSlate600,
+	ActionNeutral: Color.CoreSlate1100,
+	ActionNeutralActive: Color.CoreSlate900,
+	ActionNeutralHover: Color.CoreSlate1000,
+	ActionOutlineActive: Color.CoreSlate1100,
+	ActionOutlineHover: CoreSlate1200,
+	ActionPrimary: Color.CorePurple400,
+	ActionPrimaryActive: Color.CorePurple200,
+	ActionPrimaryHover: Color.CorePurple300,
+	BorderAccent: Color.CorePurple500,
+	BorderDanger: Color.CoreRed500,
+	BorderDefault: Color.CoreSlate1000,
+	BorderDivider: Color.CoreSlate1100,
+	BorderFocus: Color.CoreBlue400,
+	BorderHover: Color.CoreSlate600,
+	BorderSubtle: Color.CoreSlate1100,
+	BorderWarning: Color.CoreOrange400,
+	FeedbackAccent1: Color.CorePurple400,
+	FeedbackAccent1Static: Color.CorePurple200,
+	FeedbackAccent2: Color.CorePurple400,
+	FeedbackAccent3: Color.CorePurple600,
+	FeedbackDanger1: Color.CoreRed600,
+	FeedbackDanger2: Color.CoreRed350,
+	FeedbackDanger3: Color.CoreRed500,
+	FeedbackDanger4: Color.CoreRed800,
+	FeedbackHighlight1: Color.CoreYellow400,
+	FeedbackHighlight2: Color.CoreYellow700,
+	FeedbackInfo1: Color.CoreBlue600,
+	FeedbackInfo2: Color.CoreBlue400,
+	FeedbackInfo3: Color.CoreBlue600,
+	FeedbackMisc1: Color.CoreTeal400,
+	FeedbackMisc2: Color.CoreTeal600,
+	FeedbackNeutral1: Color.CoreSlate1100,
+	FeedbackNeutral2: Color.CoreSlate1000,
+	FeedbackNeutral2Static: Color.CoreSlate200,
+	FeedbackNeutral3: CoreSlate1150,
+	FeedbackNeutral4: Color.CoreSlate1000,
+	FeedbackNeutral5: CoreSlate1200,
+	FeedbackNeutralInverse: CoreSlate1200,
+	FeedbackSuccess1: Color.CoreGreen700,
+	FeedbackSuccess2: Color.CoreGreen400,
+	FeedbackSuccess3: Color.CoreGreen600,
+	FeedbackWarning1: Color.CoreOrange600,
+	FeedbackWarning2: Color.CoreOrange400,
+	FeedbackWarning3: Color.CoreOrange600,
+	FgAccent: Color.CorePurple400,
+	FgAccentActive: Color.CorePurple200,
+	FgAccentHover: Color.CorePurple300,
+	FgAccentStatic: Color.CorePurple600,
+	FgDanger1: Color.CoreRed300,
+	FgDanger2: Color.CoreRed300,
+	FgDisabled: Color.CoreSlate900,
+	FgFeature: Color.CorePurple400,
+	FgHighlight: Color.CoreYellow300,
+	FgInfo: Color.CoreBlue350,
+	FgInverse: Color.CoreSlate1100,
+	FgInverseStatic: Color.PrimaryWhite,
+	FgMisc: Color.CoreTeal200,
+	FgPrimary: Color.CoreSlate400,
+	FgPrimaryStatic: Color.CoreSlate1100,
+	FgSecondary: Color.CoreSlate700,
+	FgSecondaryStatic: Color.CoreSlate800,
+	FgSuccess: Color.CoreGreen400,
+	FgTertiary: Color.CoreSlate500,
+	FgWarning1: Color.CoreOrange400,
+	FgWarning2: Color.CoreOrange400,
+	InputBorderAccent: Color.CoreBlue500,
+	InputBorderDefault: Color.CoreSlate1000,
+	InputBorderDisabled: Color.CoreSlate800,
+	InputBorderHover: Color.CoreSlate900,
+	InputBorderHoverStrong: Color.CoreSlate600,
+	InputBorderStrong: Color.CoreSlate800,
+	InputSurfaceAccent: Color.CoreBlue500,
+	InputSurfaceAccentDisabled: Color.CoreBlue500,
+	InputSurfaceAccentHover: Color.CoreBlue400,
+	InputSurfaceDefault: CoreSlate1200,
+	InputSurfaceDisabled: CoreSlate1200,
+	InputSurfaceHover: CoreSlate1200,
+	InputSurfaceInverseStatic: Color.PrimaryWhite,
+	Opacity15: "15%",
+	Opacity25: "25%",
+	Opacity65: "65%",
+	StatusDanger1Static: Color.CoreRed100,
+	StatusDanger2: Color.CoreRed300,
+	StatusDanger3: Color.CoreRed600,
+	StatusDanger4: Color.CoreRed300,
+	StatusFeature: Color.CorePurple500,
+	StatusHighlight: Color.CoreYellow400,
+	StatusInfo1: Color.CoreBlue350,
+	StatusInfo2: Color.CoreBlue600,
+	StatusInfo3: Color.CoreBlue400,
+	StatusMisc: Color.CoreTeal600,
+	StatusNeutral: Color.CoreSlate1100,
+	StatusSuccess1: Color.CoreGreen300,
+	StatusSuccess2: Color.CoreGreen600,
+	StatusSuccess3: Color.CoreGreen300,
+	StatusWarning: Color.CoreOrange600,
+	SurfaceAccent: Color.CorePurple500,
+	SurfaceAccentStatic: Color.CorePurple100,
+	SurfaceElevated: CoreSlate1150,
+	SurfaceHover: Color.CoreSlate1100,
+	SurfaceInset: Color.CoreSlate1000,
+	SurfacePage: CoreSlate1300,
+	SurfacePrimary: CoreSlate1200,
+	SurfaceSecondary: CoreSlate1150,
+	SurfaceSubtle: Color.CoreSlate1100,
+	SurfaceTertiary: Color.CoreSlate900
+};
+//#endregion
+export { semanticDark, semanticLight };
+
+//# sourceMappingURL=semantic.mjs.map

package/dist/variables/semantic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.mjs","names":[],"sources":["../../variables/semantic.ts"],"sourcesContent":["// Generated by design-system/scripts/generate-semantic-tokens.mjs from\n//   design-system/tokens/semantic/light.json\n//   design-system/tokens/semantic/dark.json\n// Do not edit by hand — edit the token source and regenerate.\n// This module is where semantic aliases map onto core primitives.\n/* oxlint-disable persona-web/no-core-color-tokens */\nimport { Color } from '@persona/design-tokens';\n\n/** A CSS percentage. Opacity tokens are percentages, not colours. */\nexport type CssPercentage = `${number}%`;\n\n/**\n * Semantic tokens. Names match the Figma Semantic collection 1:1\n * (`action/primary` -> `ActionPrimary`).\n */\nexport interface SemanticTokens {\n  ActionAccent: Color;\n  ActionDanger: Color;\n  ActionDangerActive: Color;\n  ActionDangerDisabled: Color;\n  ActionDangerHover: Color;\n  ActionInverse: Color;\n  ActionInverseActive: Color;\n  ActionInverseHover: Color;\n  ActionNeutral: Color;\n  ActionNeutralActive: Color;\n  ActionNeutralHover: Color;\n  ActionOutlineActive: Color;\n  ActionOutlineHover: Color;\n  ActionPrimary: Color;\n  ActionPrimaryActive: Color;\n  ActionPrimaryHover: Color;\n  BorderAccent: Color;\n  BorderDanger: Color;\n  BorderDefault: Color;\n  BorderDivider: Color;\n  BorderFocus: Color;\n  BorderHover: Color;\n  BorderSubtle: Color;\n  BorderWarning: Color;\n  FeedbackAccent1: Color;\n  FeedbackAccent1Static: Color;\n  FeedbackAccent2: Color;\n  FeedbackAccent3: Color;\n  FeedbackDanger1: Color;\n  FeedbackDanger2: Color;\n  FeedbackDanger3: Color;\n  FeedbackDanger4: Color;\n  FeedbackHighlight1: Color;\n  FeedbackHighlight2: Color;\n  FeedbackInfo1: Color;\n  FeedbackInfo2: Color;\n  FeedbackInfo3: Color;\n  FeedbackMisc1: Color;\n  FeedbackMisc2: Color;\n  FeedbackNeutral1: Color;\n  FeedbackNeutral2: Color;\n  FeedbackNeutral2Static: Color;\n  FeedbackNeutral3: Color;\n  FeedbackNeutral4: Color;\n  FeedbackNeutral5: Color;\n  FeedbackNeutralInverse: Color;\n  FeedbackSuccess1: Color;\n  FeedbackSuccess2: Color;\n  FeedbackSuccess3: Color;\n  FeedbackWarning1: Color;\n  FeedbackWarning2: Color;\n  FeedbackWarning3: Color;\n  FgAccent: Color;\n  FgAccentActive: Color;\n  FgAccentHover: Color;\n  FgAccentStatic: Color;\n  FgDanger1: Color;\n  FgDanger2: Color;\n  FgDisabled: Color;\n  FgFeature: Color;\n  /** Yellow foreground for filled highlight/attention treatments; transparent StatusIndicator attention intentionally uses FgWarning1. */\n  FgHighlight: Color;\n  FgInfo: Color;\n  FgInverse: Color;\n  FgInverseStatic: Color;\n  FgMisc: Color;\n  FgPrimary: Color;\n  FgPrimaryStatic: Color;\n  FgSecondary: Color;\n  FgSecondaryStatic: Color;\n  FgSuccess: Color;\n  FgTertiary: Color;\n  FgWarning1: Color;\n  FgWarning2: Color;\n  InputBorderAccent: Color;\n  InputBorderDefault: Color;\n  InputBorderDisabled: Color;\n  InputBorderHover: Color;\n  InputBorderHoverStrong: Color;\n  InputBorderStrong: Color;\n  InputSurfaceAccent: Color;\n  InputSurfaceAccentDisabled: Color;\n  InputSurfaceAccentHover: Color;\n  InputSurfaceDefault: Color;\n  InputSurfaceDisabled: Color;\n  InputSurfaceHover: Color;\n  InputSurfaceInverseStatic: Color;\n  /** 100% in light, 15% in dark; PX-1838 tracks whether the light value is deliberate. */\n  Opacity15: CssPercentage;\n  /** 100% in light, 25% in dark; PX-1838 tracks whether the light value is deliberate. */\n  Opacity25: CssPercentage;\n  Opacity65: CssPercentage;\n  StatusDanger1Static: Color;\n  StatusDanger2: Color;\n  StatusDanger3: Color;\n  StatusDanger4: Color;\n  StatusFeature: Color;\n  StatusHighlight: Color;\n  StatusInfo1: Color;\n  StatusInfo2: Color;\n  StatusInfo3: Color;\n  StatusMisc: Color;\n  StatusNeutral: Color;\n  StatusSuccess1: Color;\n  StatusSuccess2: Color;\n  StatusSuccess3: Color;\n  StatusWarning: Color;\n  SurfaceAccent: Color;\n  SurfaceAccentStatic: Color;\n  SurfaceElevated: Color;\n  SurfaceHover: Color;\n  SurfaceInset: Color;\n  SurfacePage: Color;\n  SurfacePrimary: Color;\n  SurfaceSecondary: Color;\n  SurfaceSubtle: Color;\n  SurfaceTertiary: Color;\n}\n\n// Core primitives @persona/design-tokens does not publish yet (scripts/lib/unpublishedPrimitives.mjs).\nconst CoreSlate1150 = '#262626' as Color;\nconst CoreSlate1200 = '#1F1F1F' as Color;\nconst CoreSlate1300 = '#181818' as Color;\n\nexport const semanticLight: SemanticTokens = {\n  ActionAccent: Color.CorePurple100,\n  ActionDanger: Color.CoreRed700,\n  ActionDangerActive: Color.CoreRed900,\n  ActionDangerDisabled: Color.CoreRed400,\n  ActionDangerHover: Color.CoreRed800,\n  ActionInverse: Color.PrimaryWhite,\n  ActionInverseActive: Color.CoreSlate300,\n  ActionInverseHover: Color.CoreSlate100,\n  ActionNeutral: Color.CoreSlate100,\n  ActionNeutralActive: Color.CoreSlate400,\n  ActionNeutralHover: Color.CoreSlate200,\n  ActionOutlineActive: Color.CoreSlate300,\n  ActionOutlineHover: Color.CoreSlate100,\n  ActionPrimary: Color.CorePurple600,\n  ActionPrimaryActive: Color.CorePurple900,\n  ActionPrimaryHover: Color.CorePurple800,\n  BorderAccent: Color.CorePurple600,\n  BorderDanger: Color.CoreRed600,\n  BorderDefault: Color.CoreSlate300,\n  BorderDivider: Color.CoreSlate100,\n  BorderFocus: Color.CoreBlue600,\n  BorderHover: Color.CoreSlate1000,\n  BorderSubtle: Color.CoreSlate200,\n  BorderWarning: Color.CoreOrange700,\n  FeedbackAccent1: Color.CorePurple200,\n  FeedbackAccent1Static: Color.CorePurple200,\n  FeedbackAccent2: Color.CorePurple400,\n  FeedbackAccent3: Color.CorePurple600,\n  FeedbackDanger1: Color.CoreRed100,\n  FeedbackDanger2: Color.CoreRed400,\n  FeedbackDanger3: Color.CoreRed600,\n  FeedbackDanger4: Color.CoreRed800,\n  FeedbackHighlight1: Color.CoreYellow500,\n  FeedbackHighlight2: Color.CoreYellow800,\n  FeedbackInfo1: Color.CoreBlue100,\n  FeedbackInfo2: Color.CoreBlue400,\n  FeedbackInfo3: Color.CoreBlue600,\n  FeedbackMisc1: Color.CoreTeal500,\n  FeedbackMisc2: Color.CoreTeal800,\n  FeedbackNeutral1: Color.CoreSlate100,\n  FeedbackNeutral2: Color.CoreSlate200,\n  FeedbackNeutral2Static: Color.CoreSlate200,\n  FeedbackNeutral3: Color.CoreSlate300,\n  FeedbackNeutral4: Color.CoreSlate700,\n  FeedbackNeutral5: Color.CoreSlate800,\n  FeedbackNeutralInverse: Color.PrimaryWhite,\n  FeedbackSuccess1: Color.CoreGreen100,\n  FeedbackSuccess2: Color.CoreGreen500,\n  FeedbackSuccess3: Color.CoreGreen700,\n  FeedbackWarning1: Color.CoreOrange100,\n  FeedbackWarning2: Color.CoreOrange500,\n  FeedbackWarning3: Color.CoreOrange700,\n  FgAccent: Color.CorePurple700,\n  FgAccentActive: Color.CorePurple900,\n  FgAccentHover: Color.CorePurple800,\n  FgAccentStatic: Color.CorePurple600,\n  FgDanger1: Color.CoreRed800,\n  FgDanger2: Color.CoreRed1000,\n  FgDisabled: Color.CoreSlate500,\n  FgFeature: Color.CorePurple1000,\n  FgHighlight: Color.CoreYellow1000,\n  FgInfo: Color.CoreBlue1000,\n  FgInverse: Color.PrimaryWhite,\n  FgInverseStatic: Color.PrimaryWhite,\n  FgMisc: Color.CoreTeal1000,\n  FgPrimary: Color.CoreSlate1100,\n  FgPrimaryStatic: Color.CoreSlate1100,\n  FgSecondary: Color.CoreSlate800,\n  FgSecondaryStatic: Color.CoreSlate800,\n  FgSuccess: Color.CoreGreen1000,\n  FgTertiary: Color.CoreSlate700,\n  FgWarning1: Color.CoreOrange900,\n  FgWarning2: Color.CoreOrange1000,\n  InputBorderAccent: Color.CoreBlue700,\n  InputBorderDefault: Color.CoreSlate300,\n  InputBorderDisabled: Color.CoreSlate300,\n  InputBorderHover: Color.CoreSlate500,\n  InputBorderHoverStrong: Color.CoreSlate1000,\n  InputBorderStrong: Color.CoreSlate800,\n  InputSurfaceAccent: Color.CoreBlue700,\n  InputSurfaceAccentDisabled: Color.CoreBlue300,\n  InputSurfaceAccentHover: Color.CoreBlue800,\n  InputSurfaceDefault: Color.PrimaryWhite,\n  InputSurfaceDisabled: Color.CoreSlate100,\n  InputSurfaceHover: Color.PrimaryWhite,\n  InputSurfaceInverseStatic: Color.PrimaryWhite,\n  Opacity15: '100%',\n  Opacity25: '100%',\n  Opacity65: '65%',\n  StatusDanger1Static: Color.CoreRed100,\n  StatusDanger2: Color.CoreRed200,\n  StatusDanger3: Color.CoreRed300,\n  StatusDanger4: Color.CoreRed600,\n  StatusFeature: Color.CorePurple300,\n  StatusHighlight: Color.CoreYellow400,\n  StatusInfo1: Color.CoreBlue200,\n  StatusInfo2: Color.CoreBlue300,\n  StatusInfo3: Color.CoreBlue700,\n  StatusMisc: Color.CoreTeal300,\n  StatusNeutral: Color.CoreSlate200,\n  StatusSuccess1: Color.CoreGreen200,\n  StatusSuccess2: Color.CoreGreen300,\n  StatusSuccess3: Color.CoreGreen800,\n  StatusWarning: Color.CoreOrange300,\n  SurfaceAccent: Color.CorePurple100,\n  SurfaceAccentStatic: Color.CorePurple100,\n  SurfaceElevated: Color.PrimaryWhite,\n  SurfaceHover: Color.CoreSlate50,\n  SurfaceInset: Color.CoreSlate300,\n  SurfacePage: Color.CoreSlate50,\n  SurfacePrimary: Color.PrimaryWhite,\n  SurfaceSecondary: Color.CoreSlate50,\n  SurfaceSubtle: Color.CoreSlate50,\n  SurfaceTertiary: Color.CoreSlate100,\n};\n\nexport const semanticDark: SemanticTokens = {\n  ActionAccent: Color.CorePurple500,\n  ActionDanger: Color.CoreRed400,\n  ActionDangerActive: Color.CoreRed200,\n  ActionDangerDisabled: Color.CoreRed400,\n  ActionDangerHover: Color.CoreRed300,\n  ActionInverse: Color.CoreSlate700,\n  ActionInverseActive: Color.CoreSlate500,\n  ActionInverseHover: Color.CoreSlate600,\n  ActionNeutral: Color.CoreSlate1100,\n  ActionNeutralActive: Color.CoreSlate900,\n  ActionNeutralHover: Color.CoreSlate1000,\n  ActionOutlineActive: Color.CoreSlate1100,\n  ActionOutlineHover: CoreSlate1200,\n  ActionPrimary: Color.CorePurple400,\n  ActionPrimaryActive: Color.CorePurple200,\n  ActionPrimaryHover: Color.CorePurple300,\n  BorderAccent: Color.CorePurple500,\n  BorderDanger: Color.CoreRed500,\n  BorderDefault: Color.CoreSlate1000,\n  BorderDivider: Color.CoreSlate1100,\n  BorderFocus: Color.CoreBlue400,\n  BorderHover: Color.CoreSlate600,\n  BorderSubtle: Color.CoreSlate1100,\n  BorderWarning: Color.CoreOrange400,\n  FeedbackAccent1: Color.CorePurple400,\n  FeedbackAccent1Static: Color.CorePurple200,\n  FeedbackAccent2: Color.CorePurple400,\n  FeedbackAccent3: Color.CorePurple600,\n  FeedbackDanger1: Color.CoreRed600,\n  FeedbackDanger2: Color.CoreRed350,\n  FeedbackDanger3: Color.CoreRed500,\n  FeedbackDanger4: Color.CoreRed800,\n  FeedbackHighlight1: Color.CoreYellow400,\n  FeedbackHighlight2: Color.CoreYellow700,\n  FeedbackInfo1: Color.CoreBlue600,\n  FeedbackInfo2: Color.CoreBlue400,\n  FeedbackInfo3: Color.CoreBlue600,\n  FeedbackMisc1: Color.CoreTeal400,\n  FeedbackMisc2: Color.CoreTeal600,\n  FeedbackNeutral1: Color.CoreSlate1100,\n  FeedbackNeutral2: Color.CoreSlate1000,\n  FeedbackNeutral2Static: Color.CoreSlate200,\n  FeedbackNeutral3: CoreSlate1150,\n  FeedbackNeutral4: Color.CoreSlate1000,\n  FeedbackNeutral5: CoreSlate1200,\n  FeedbackNeutralInverse: CoreSlate1200,\n  FeedbackSuccess1: Color.CoreGreen700,\n  FeedbackSuccess2: Color.CoreGreen400,\n  FeedbackSuccess3: Color.CoreGreen600,\n  FeedbackWarning1: Color.CoreOrange600,\n  FeedbackWarning2: Color.CoreOrange400,\n  FeedbackWarning3: Color.CoreOrange600,\n  FgAccent: Color.CorePurple400,\n  FgAccentActive: Color.CorePurple200,\n  FgAccentHover: Color.CorePurple300,\n  FgAccentStatic: Color.CorePurple600,\n  FgDanger1: Color.CoreRed300,\n  FgDanger2: Color.CoreRed300,\n  FgDisabled: Color.CoreSlate900,\n  FgFeature: Color.CorePurple400,\n  FgHighlight: Color.CoreYellow300,\n  FgInfo: Color.CoreBlue350,\n  FgInverse: Color.CoreSlate1100,\n  FgInverseStatic: Color.PrimaryWhite,\n  FgMisc: Color.CoreTeal200,\n  FgPrimary: Color.CoreSlate400,\n  FgPrimaryStatic: Color.CoreSlate1100,\n  FgSecondary: Color.CoreSlate700,\n  FgSecondaryStatic: Color.CoreSlate800,\n  FgSuccess: Color.CoreGreen400,\n  FgTertiary: Color.CoreSlate500,\n  FgWarning1: Color.CoreOrange400,\n  FgWarning2: Color.CoreOrange400,\n  InputBorderAccent: Color.CoreBlue500,\n  InputBorderDefault: Color.CoreSlate1000,\n  InputBorderDisabled: Color.CoreSlate800,\n  InputBorderHover: Color.CoreSlate900,\n  InputBorderHoverStrong: Color.CoreSlate600,\n  InputBorderStrong: Color.CoreSlate800,\n  InputSurfaceAccent: Color.CoreBlue500,\n  InputSurfaceAccentDisabled: Color.CoreBlue500,\n  InputSurfaceAccentHover: Color.CoreBlue400,\n  InputSurfaceDefault: CoreSlate1200,\n  InputSurfaceDisabled: CoreSlate1200,\n  InputSurfaceHover: CoreSlate1200,\n  InputSurfaceInverseStatic: Color.PrimaryWhite,\n  Opacity15: '15%',\n  Opacity25: '25%',\n  Opacity65: '65%',\n  StatusDanger1Static: Color.CoreRed100,\n  StatusDanger2: Color.CoreRed300,\n  StatusDanger3: Color.CoreRed600,\n  StatusDanger4: Color.CoreRed300,\n  StatusFeature: Color.CorePurple500,\n  StatusHighlight: Color.CoreYellow400,\n  StatusInfo1: Color.CoreBlue350,\n  StatusInfo2: Color.CoreBlue600,\n  StatusInfo3: Color.CoreBlue400,\n  StatusMisc: Color.CoreTeal600,\n  StatusNeutral: Color.CoreSlate1100,\n  StatusSuccess1: Color.CoreGreen300,\n  StatusSuccess2: Color.CoreGreen600,\n  StatusSuccess3: Color.CoreGreen300,\n  StatusWarning: Color.CoreOrange600,\n  SurfaceAccent: Color.CorePurple500,\n  SurfaceAccentStatic: Color.CorePurple100,\n  SurfaceElevated: CoreSlate1150,\n  SurfaceHover: Color.CoreSlate1100,\n  SurfaceInset: Color.CoreSlate1000,\n  SurfacePage: CoreSlate1300,\n  SurfacePrimary: CoreSlate1200,\n  SurfaceSecondary: CoreSlate1150,\n  SurfaceSubtle: Color.CoreSlate1100,\n  SurfaceTertiary: Color.CoreSlate900,\n};\n"],"mappings":"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"}

package/llms.txt

@@ -17,6 +17,7 @@ For exact prop types, prefer the published type declarations (`dist/**/*.d.mts`,
 - [Tokens](skills/ui-authoring/TOKENS.md): Color / Spacing / Typography selection and catalog, radius, charts
 - [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, indicators, feedback, empty states, charts, panels
 - [Components](skills/ui-authoring/COMPONENTS.md): which PDS component to use (and its import path); APIs live in that component's `.mdx` when one exists, otherwise in `dist/components/<Name>/index.d.mts`
+- [design-system-component-authoring](skills/design-system-component-authoring/SKILL.md): authoring a new PDS component in this repo — clarifying scope, component conventions, prop interface patterns
 
 ## Imports
 

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@persona/design-system",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
   ],
   "license": "SEE LICENSE",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/CodeHighlight/PrismWithLanguages.*"
+  ],
   "files": [
     "dist",
     "skills",
@@ -26,6 +28,8 @@
     "./components/Card": "./dist/components/Card/index.mjs",
     "./components/CardV2": "./dist/components/CardV2/index.mjs",
     "./components/Checkbox": "./dist/components/Checkbox/index.mjs",
+    "./components/CodeHighlight": "./dist/components/CodeHighlight/index.mjs",
+    "./components/CodeHighlight/PrismWithLanguages": "./dist/components/CodeHighlight/PrismWithLanguages.mjs",
     "./components/Combobox": "./dist/components/Combobox/index.mjs",
     "./components/ConfigFormGroup": "./dist/components/ConfigFormGroup/index.mjs",
     "./components/DataTable": "./dist/components/DataTable/index.mjs",
@@ -60,6 +64,11 @@
     "./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
     "./components/Select": "./dist/components/Select/index.mjs",
     "./components/Slider": "./dist/components/Slider/index.mjs",
+    "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
+    "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+    "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
+    "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+    "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
     "./components/Spacer": "./dist/components/Spacer/index.mjs",
     "./components/Spinner": "./dist/components/Spinner/index.mjs",
     "./components/Stack": "./dist/components/Stack/index.mjs",
@@ -76,6 +85,7 @@
     "./components/Toast": "./dist/components/Toast/index.mjs",
     "./components/Toggle": "./dist/components/Toggle/index.mjs",
     "./components/Tooltip": "./dist/components/Tooltip/index.mjs",
+    "./lib/color": "./dist/lib/color.mjs",
     "./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
     "./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
     "./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
@@ -83,19 +93,28 @@
     "./lib/datePickerHelper": "./dist/lib/datePickerHelper.mjs",
     "./lib/embeddedSurfaceProtocol": "./dist/lib/embeddedSurfaceProtocol.mjs",
     "./lib/embeddedSurfaceRegistry": "./dist/lib/embeddedSurfaceRegistry.mjs",
+    "./lib/errorReporter": "./dist/lib/errorReporter.mjs",
+    "./lib/fieldSchemaTypes": "./dist/lib/fieldSchemaTypes.mjs",
     "./lib/GlobalStyles": "./dist/lib/GlobalStyles.mjs",
     "./lib/HeadlessAriaButton": "./dist/lib/HeadlessAriaButton.mjs",
+    "./lib/jsonSchema": "./dist/lib/jsonSchema.mjs",
     "./lib/message": "./dist/lib/message.mjs",
+    "./lib/methodChain": "./dist/lib/methodChain.mjs",
+    "./lib/methodChainNormalize": "./dist/lib/methodChainNormalize.mjs",
+    "./lib/methodChainTypes": "./dist/lib/methodChainTypes.mjs",
     "./lib/MiddleTruncatedText": "./dist/lib/MiddleTruncatedText.mjs",
+    "./lib/objectSchemaTypes": "./dist/lib/objectSchemaTypes.mjs",
     "./lib/PDSProvider": "./dist/lib/PDSProvider.mjs",
     "./lib/pseudoClass": "./dist/lib/pseudoClass.mjs",
     "./lib/reorderItems": "./dist/lib/reorderItems.mjs",
     "./lib/selectHelper": "./dist/lib/selectHelper.mjs",
+    "./lib/semanticColor": "./dist/lib/semanticColor.mjs",
     "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
     "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
     "./lib/useControlled": "./dist/lib/useControlled.mjs",
     "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
     "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
+    "./lib/useModalInsetRight": "./dist/lib/useModalInsetRight.mjs",
     "./lib/useOutsideClick": "./dist/lib/useOutsideClick.mjs",
     "./lib/useResizablePanel": "./dist/lib/useResizablePanel.mjs",
     "./lib/useScrollOverflow": "./dist/lib/useScrollOverflow.mjs",
@@ -115,16 +134,18 @@
     "./variables/color": "./dist/variables/color.mjs",
     "./variables/effect": "./dist/variables/effect.mjs",
     "./variables/keyframes": "./dist/variables/keyframes.mjs",
+    "./variables/semantic": "./dist/variables/semantic.mjs",
     "./variables/spacing": "./dist/variables/spacing.mjs",
     "./variables/text": "./dist/variables/text.mjs",
     "./variables/transitions": "./dist/variables/transitions.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsdown && node scripts/assert-no-node-imports.mjs && node scripts/assert-styled-components-interop.mjs",
+    "build": "tsdown && node scripts/assert-no-node-imports.mjs && node scripts/assert-styled-components-interop.mjs && node scripts/assert-parser-declarations.mjs",
     "release": "scripts/release.sh --dry-run",
-    "release:tag": "scripts/tag.sh",
     "skills:validate": "intent validate skills",
+    "tokens:generate": "node scripts/generate-semantic-tokens.mjs",
+    "tokens:check": "node scripts/generate-semantic-tokens.mjs --check",
     "skills:stale": "intent stale"
   },
   "dependencies": {
@@ -160,6 +181,7 @@
     "fuse.js": "^7.1.0",
     "lodash-es": "^4.18.1",
     "luxon": "^3.4.4",
+    "prism-react-renderer": "^2.4.1",
     "react-aria": "^3.37.0",
     "react-aria-components": "^1.13.0",
     "react-error-boundary": "^4.0.13",
@@ -170,22 +192,45 @@
     "uuid": "^14.0.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.4",
-    "@persona/design-tokens": "^0.4.5",
-    "@persona/icons": "^0.1.0",
+    "@persona/design-tokens": "0.4.15",
+    "@persona/icons": "0.1.4",
+    "@storybook/react": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@tanstack/intent": "^0.3.6",
     "@testing-library/dom": "^8.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.1",
+    "@types/jscodeshift": "^0.11.6",
     "@types/lodash-es": "^4.17.12",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.26",
     "@typescript/native": "npm:typescript@^7.0.2",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "chromatic": "^16.2.0",
     "csstype": "^3.1.2",
+    "date-fns": "^4.1.0",
+    "dedent": "^1.5.1",
+    "hygen": "^6.2.11",
+    "jest-styled-components": "^7.2.0",
+    "jscodeshift": "^17.1.1",
+    "jsdom": "^27.4.0",
+    "lodash": "^4.18.1",
+    "msw": "^2.12.14",
+    "playwright": "1.60.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.30.5",
+    "recharts": "^2.13.3",
+    "storybook": "^10.4.6",
     "styled-components": "^5.3.5",
     "tsdown": "^0.21.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2"
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "@persona/design-tokens": ">=0.4.5",
@@ -216,6 +261,8 @@
       "./components/Card": "./dist/components/Card/index.mjs",
       "./components/CardV2": "./dist/components/CardV2/index.mjs",
       "./components/Checkbox": "./dist/components/Checkbox/index.mjs",
+      "./components/CodeHighlight": "./dist/components/CodeHighlight/index.mjs",
+      "./components/CodeHighlight/PrismWithLanguages": "./dist/components/CodeHighlight/PrismWithLanguages.mjs",
       "./components/Combobox": "./dist/components/Combobox/index.mjs",
       "./components/ConfigFormGroup": "./dist/components/ConfigFormGroup/index.mjs",
       "./components/DataTable": "./dist/components/DataTable/index.mjs",
@@ -250,6 +297,11 @@
       "./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
       "./components/Select": "./dist/components/Select/index.mjs",
       "./components/Slider": "./dist/components/Slider/index.mjs",
+      "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
+      "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+      "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
+      "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+      "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
       "./components/Spacer": "./dist/components/Spacer/index.mjs",
       "./components/Spinner": "./dist/components/Spinner/index.mjs",
       "./components/Stack": "./dist/components/Stack/index.mjs",
@@ -266,6 +318,7 @@
       "./components/Toast": "./dist/components/Toast/index.mjs",
       "./components/Toggle": "./dist/components/Toggle/index.mjs",
       "./components/Tooltip": "./dist/components/Tooltip/index.mjs",
+      "./lib/color": "./dist/lib/color.mjs",
       "./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
       "./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
       "./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
@@ -273,19 +326,28 @@
       "./lib/datePickerHelper": "./dist/lib/datePickerHelper.mjs",
       "./lib/embeddedSurfaceProtocol": "./dist/lib/embeddedSurfaceProtocol.mjs",
       "./lib/embeddedSurfaceRegistry": "./dist/lib/embeddedSurfaceRegistry.mjs",
+      "./lib/errorReporter": "./dist/lib/errorReporter.mjs",
+      "./lib/fieldSchemaTypes": "./dist/lib/fieldSchemaTypes.mjs",
       "./lib/GlobalStyles": "./dist/lib/GlobalStyles.mjs",
       "./lib/HeadlessAriaButton": "./dist/lib/HeadlessAriaButton.mjs",
+      "./lib/jsonSchema": "./dist/lib/jsonSchema.mjs",
       "./lib/message": "./dist/lib/message.mjs",
+      "./lib/methodChain": "./dist/lib/methodChain.mjs",
+      "./lib/methodChainNormalize": "./dist/lib/methodChainNormalize.mjs",
+      "./lib/methodChainTypes": "./dist/lib/methodChainTypes.mjs",
       "./lib/MiddleTruncatedText": "./dist/lib/MiddleTruncatedText.mjs",
+      "./lib/objectSchemaTypes": "./dist/lib/objectSchemaTypes.mjs",
       "./lib/PDSProvider": "./dist/lib/PDSProvider.mjs",
       "./lib/pseudoClass": "./dist/lib/pseudoClass.mjs",
       "./lib/reorderItems": "./dist/lib/reorderItems.mjs",
       "./lib/selectHelper": "./dist/lib/selectHelper.mjs",
+      "./lib/semanticColor": "./dist/lib/semanticColor.mjs",
       "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
       "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
       "./lib/useControlled": "./dist/lib/useControlled.mjs",
       "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
       "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
+      "./lib/useModalInsetRight": "./dist/lib/useModalInsetRight.mjs",
       "./lib/useOutsideClick": "./dist/lib/useOutsideClick.mjs",
       "./lib/useResizablePanel": "./dist/lib/useResizablePanel.mjs",
       "./lib/useScrollOverflow": "./dist/lib/useScrollOverflow.mjs",
@@ -305,6 +367,7 @@
       "./variables/color": "./dist/variables/color.mjs",
       "./variables/effect": "./dist/variables/effect.mjs",
       "./variables/keyframes": "./dist/variables/keyframes.mjs",
+      "./variables/semantic": "./dist/variables/semantic.mjs",
       "./variables/spacing": "./dist/variables/spacing.mjs",
       "./variables/text": "./dist/variables/text.mjs",
       "./variables/transitions": "./dist/variables/transitions.mjs",

package/skills/design-system-component-authoring/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: design-system-component-authoring
+description: Use when building a new Persona design system component under packages/design-system/components/, or turning a designer's description, Figma frame, or AI-generated first draft into one. Also use when determining prop interfaces, weighing `children` vs a typed `items` array, questioning a composer pattern, spotting props that allow impossible states, finding hardcoded colors or missing tokens, or seeing a component rebuild what an existing DS primitive already does.
+---
+
+# Design System Component Authoring
+
+## Overview
+
+Core principle: **model the real requirement with the smallest prop interface that makes impossible
+states unrepresentable, compose existing design-system components instead of rebuilding them, and
+ask before inventing scope.** A first pass built this way needs almost no engineer refactoring.
+
+These components usually start from a designer's description (the designer may not code), so the
+failure mode is predictable: guessing at scope, inventing props, reaching for the most
+flexible-looking type. Prefer clarifying questions and small, correct interfaces over feature-rich
+guesses.
+
+## When to use
+
+- Building a new component under `packages/design-system/components/`.
+- Turning a designer's description, a Figma frame, or an AI draft into a real DS component.
+
+**REQUIRED BACKGROUND — load this too:**
+
+- `ui-authoring` — design tokens (`Color`, `Spacing`, `Typography`), when to use `Stack`/`HStack`/`Text` instead of styled elements, and its `COMPONENTS.md`/`PATTERNS.md` catalog of existing components to compose from (also browse `packages/design-system/components/`).
+
+## Canonical example
+
+`packages/design-system/components/Breadcrumbs/` is the example to imitate: a constrained
+`BreadcrumbsItemProps[]` rendered by a private `Breadcrumb`; `onEdit?` gating inline editing with no
+`editable` boolean; composition from `IconButton`, `Input`, `Link`, `HStack`, `Paragraph`,
+`Tooltip`; semantic theme tokens; a `DEFAULT_EDIT_MAX_LENGTH` constant; and a barrel `index.ts`
+plus `Breadcrumbs.mdx` with `<Controls />`.
+
+## Step 1 — Clarify before building (do NOT assume)
+
+Ask the designer whenever scope, states, sizes, max lengths, content shape, or state ownership are
+unspecified — and never add props the designer didn't ask for. **REQUIRED:** read
+`clarifying-scope.md` (in this skill directory) for the exact questions to ask.
+
+## Step 2 — Design the prop interface
+
+The props ARE the contract; make incorrect usage impossible to express. **REQUIRED:** read
+`prop-interface-patterns.md` (in this skill directory) for the rules, the do/don't table, and the
+rationalizations that lead to bad interfaces.
+
+## Step 3 — Build it
+
+Compose from existing DS components (never copy their CSS), style only with design tokens, follow
+the standard file layout with a barrel `index.ts`, use real aria affordances, and ship a
+`ComponentName.mdx`. Also add a row to
+`packages/design-system/skills/ui-authoring/COMPONENTS.md` (Component / Use for / Import) so UI
+authors pick the new component instead of reinventing it. **REQUIRED:** read
+`component-conventions.md` (in this skill directory) for each of those in detail.
+
+## Step 4 — Handoff
+
+Add a component `.mdx` page in `persona-id/design-site`, following the structure of existing
+component docs, and open a separate PR. If this session cannot access or write to that repository,
+explicitly flag the documentation PR as a required follow-up rather than marking it complete.
+
+If you open a PR, open it as a **draft** so an engineer can pick it up and review before it goes to
+wider engineering review.
+
+## Red flags — STOP and reconsider (or ask the designer)
+
+- A boolean and a callback that mean the same thing (`editable` + `onEdit`).
+- `loading` and `data` (or `error` and `value`) that can both be set at once.
+- A `variant`/status string union with exactly two options.
+- `title` / `label` / tooltip text typed as `ReactNode`.
+- `children` accepted where the design wants a fixed set of items.
+- `styled(SomeDSComponent)` with hardcoded color overrides or arbitrary restyling — layout-only tweaks (margin/width/alignment) are fine — or CSS copied from another component.
+- A prop, variant, or feature the designer never asked for (`fullWidth`, extra sizes), or spreading arbitrary `...props` onto the root.
+- A context provider whose only job is passing a `size`/`variant`.
+- Hardcoded hex/px, or `Core*` foundational tokens where a semantic token exists.
+- Missing `index.ts`, `.mdx`, aria attributes, or a `COMPONENTS.md` picker row.
+- You assumed a constraint (some items editable, a specific max length) instead of asking.
+- MDX docs with long, difficult-to-scan prose.

package/skills/design-system-component-authoring/clarifying-scope.md

@@ -0,0 +1,18 @@
+# Clarifying scope with the designer
+
+Stop and ask when any of the following is unspecified. **Never invent constraints or scope.** A
+short question now prevents a rebuild later.
+
+| Designer says / leaves unstated               | Ask before coding                                                                                                                                                                                 |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| "the items can be editable"                   | Are **all** items editable, or only some? Default: assume all behave the same. Do **not** invent a per-item `editable` flag.                                                                      |
+| A text/rename input                           | What is the max length we'd reasonably allow? Pick a sensible default and confirm it.                                                                                                             |
+| A "status" / "loading" component              | What are the exact, mutually-exclusive states? (drives the prop interface)                                                                                                                       |
+| Sizes/variants mentioned loosely              | Which sizes/variants actually exist? Don't add extras "for completeness".                                                                                                                        |
+| "designers can put whatever they want inside" | Should the contents be a constrained set of typed items (`items: ItemProps[]` + private child) or a genuinely open `children` slot? Surface this tradeoff — don't silently default to `children`. |
+| Nothing about ownership                       | Should the caller own the value (`value` + `onChange`) or should the component manage it internally?                                                                                              |
+
+Do **not** add props, variants, or features the designer did not ask for (e.g. `fullWidth`, extra
+variants, spreading arbitrary `...props` onto the root). A single optional `className` for external
+layout composition is fine (see `BreadcrumbsProps`); inventing feature props is not. If you think
+one is needed, propose it and ask — don't ship it silently.