@sarjallab09/figma-intelligence 1.1.0 → 1.2.0

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/card.ts

@@ -1,143 +0,0 @@
-import type { ComponentKnowledge } from "../types.js";
-
-export const cardKnowledge: ComponentKnowledge = {
-  description:
-    "Content container | Grouped information surface | Scannable content unit",
-
-  stateSpecifications: [
-    { state: "Default", visualChange: "Elevated surface with content zones, resting shadow", opacity: "1", cursorWeb: "default", usage: "Static content display card" },
-    { state: "Hover (clickable)", visualChange: "Shadow increases, subtle lift transform", opacity: "1", cursorWeb: "pointer", usage: "User hovers over an interactive card" },
-    { state: "Focus (clickable)", visualChange: "Focus ring around entire card boundary", opacity: "1", cursorWeb: "pointer", usage: "Keyboard focus on an interactive card" },
-    { state: "Pressed (clickable)", visualChange: "Shadow decreases, card presses down slightly", opacity: "1", cursorWeb: "pointer", usage: "Card is being actively clicked or tapped" },
-    { state: "Selected", visualChange: "Border changes to primary color, optional checkmark overlay", opacity: "1", cursorWeb: "pointer", usage: "Card has been chosen in a selection context" },
-    { state: "Disabled", visualChange: "Content and surface dimmed, no interaction", opacity: "0.5", cursorWeb: "not-allowed", usage: "Card content is unavailable" },
-    { state: "Loading/Skeleton", visualChange: "Placeholder shimmer blocks replace text and image areas", opacity: "1", cursorWeb: "default", usage: "Card data is being fetched asynchronously" },
-  ],
-
-  propertyDescriptions: {
-    variant: "Visual style — elevated (shadow), outlined (border), or filled (background tint)",
-    clickable: "When true, the entire card surface is an interactive click target",
-    mediaPosition: "Where the image/media sits relative to content — top, left, right, or background",
-    title: "Primary heading text for the card",
-    subtitle: "Secondary text below the title providing context or metadata",
-    body: "Main descriptive content inside the card",
-    mediaSlot: "Image, illustration, or video displayed in the media zone",
-    actionsSlot: "Footer area for buttons, links, or icon actions",
-    badge: "Optional status indicator overlaid on the card (e.g. 'New', 'Sale')",
-    selected: "Whether the card is in a selected state within a selectable group",
-  },
-
-  sizeSpecifications: [
-    { size: "compact", height: "auto (min 120px)", paddingLR: "12px", fontSize: "12px", iconSize: "16px", borderRadius: "8px" },
-    { size: "sm", height: "auto (min 160px)", paddingLR: "16px", fontSize: "14px", iconSize: "16px", borderRadius: "8px" },
-    { size: "md", height: "auto (min 200px)", paddingLR: "16px", fontSize: "14px", iconSize: "20px", borderRadius: "12px" },
-    { size: "lg", height: "auto (min 280px)", paddingLR: "24px", fontSize: "16px", iconSize: "20px", borderRadius: "12px" },
-    { size: "horizontal", height: "auto (min 140px)", paddingLR: "16px", fontSize: "14px", iconSize: "20px", borderRadius: "12px" },
-  ],
-
-  designTokenBindings: [
-    { property: "surface-bg", tokenName: "color/layer/01", role: "Card background fill", fallback: "#FFFFFF" },
-    { property: "border", tokenName: "color/border/subtle/01", role: "Outline variant border", fallback: "#E0E0E0" },
-    { property: "shadow-resting", tokenName: "shadow/raised/02", role: "Elevation shadow at rest", fallback: "0 2px 6px rgba(0,0,0,0.1)" },
-    { property: "shadow-hover", tokenName: "shadow/raised/04", role: "Elevated shadow on hover for clickable cards", fallback: "0 6px 16px rgba(0,0,0,0.15)" },
-    { property: "title-text", tokenName: "color/text/primary", role: "Card title color", fallback: "#161616" },
-    { property: "body-text", tokenName: "color/text/secondary", role: "Body and subtitle text color", fallback: "#525252" },
-    { property: "selected-border", tokenName: "color/border/interactive", role: "Border on selected cards", fallback: "#0F62FE" },
-  ],
-
-  structureRules: [
-    "Cards follow a vertical stack: media zone → content zone (title, subtitle, body) → action zone",
-    "Horizontal cards place the media zone on the left (LTR) or right (RTL) with content beside it",
-    "The media zone has no padding; images bleed to the card edges with overflow:hidden and border-radius",
-    "Content zone applies internal padding; title comes first, followed by subtitle, then body",
-    "Action zone sits at the bottom with a top divider and horizontal button layout aligned to the end",
-    "Clickable cards wrap the entire surface in an <a> or <button>; actions inside use stopPropagation",
-    "Card aspect ratio is content-driven by default; media zone can enforce a fixed aspect ratio (16:9, 4:3)",
-  ],
-
-  typeHierarchyRules: [
-    "Title uses heading-compact-02 (16px/22px semibold) for md size and heading-compact-01 for sm",
-    "Subtitle uses body-compact-01 (14px) in text-secondary color",
-    "Body text uses body-01 (14px/20px) for comfortable reading within the card",
-    "Metadata (date, author, category) uses label-01 (12px) in text-helper color",
-    "Action button labels use body-compact-01 (14px) matching the design system button spec",
-    "Badge text uses label-01 (12px) with inverse text on a filled background",
-    "Title is limited to 2 lines with line-clamp; body limited to 3 lines",
-  ],
-
-  interactionRules: [
-    { event: "click", trigger: "User clicks anywhere on a clickable card", action: "Navigate to the card's detail view or trigger onSelect callback" },
-    { event: "keydown:Enter/Space", trigger: "Focus is on a clickable card", action: "Activate the card (same as click)" },
-    { event: "hover", trigger: "Pointer enters card boundary", action: "Increase shadow elevation and apply subtle scale transform" },
-    { event: "click:action-button", trigger: "User clicks a button inside the action zone", action: "Execute button action; stopPropagation prevents card-level click" },
-    { event: "long-press", trigger: "Touch user holds on card (mobile)", action: "Show context menu or enter selection mode" },
-    { event: "swipe", trigger: "Horizontal swipe on card (mobile)", action: "Reveal quick actions (archive, delete) from the side" },
-  ],
-
-  contentGuidance: [
-    "Use a clear, specific title — 'Q3 Revenue Report' not 'Report'",
-    "Limit body text to 2–3 sentences; cards are for scanning, not deep reading",
-    "Use high-quality images with consistent aspect ratios across a card grid",
-    "Place the most important information (title, key metric) at the top of the content zone",
-    "Action buttons should use ghost or tertiary style to avoid competing with card-level click",
-    "Metadata like dates and authors belong below the body text or in the subtitle",
-    "Badge labels should be 1–2 words: 'New', 'Featured', 'Sold out'",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "≥ 1056px (lg)", behavior: "Cards in a 3–4 column grid; horizontal variant available" },
-    { breakpoint: "672–1055px (md)", behavior: "Cards reflow to 2 column grid; horizontal cards stack vertically" },
-    { breakpoint: "< 672px (sm)", behavior: "Single column stack; cards fill full width; media aspect ratio may shift to 16:9" },
-    { breakpoint: "Touch devices", behavior: "Hover states replaced by active/pressed feedback; swipe actions enabled" },
-    { breakpoint: "Container queries", behavior: "Card adapts internal layout based on its own width, not viewport" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Cards must be perceivable as distinct content units and, when interactive, operable via keyboard. Clickable cards require careful handling to avoid nested interactive element issues.",
-    requirements: [
-      { requirement: "Clickable cards must be focusable and activated via Enter or Space", level: "A", notes: "Use <a> for navigation or <button> for actions" },
-      { requirement: "Card images must have descriptive alt text or be marked decorative (alt='')", level: "A", notes: "If the image is essential to understanding the card, alt text is required" },
-      { requirement: "Nested interactive elements (buttons, links) must not be inside the card's primary <a>/<button>", level: "A", notes: "Use CSS pseudo-element technique to make card clickable without nesting" },
-      { requirement: "Card groups should use <ul>/<li> structure for list semantics", level: "A", notes: "Screen readers announce 'list of 12 items' providing context" },
-      { requirement: "Selected cards must convey state via aria-selected or aria-pressed", level: "A", notes: "Also provide visual indicator beyond color (checkmark, border)" },
-      { requirement: "Text must maintain 4.5:1 contrast against the card surface", level: "AA", notes: "Check both light and dark theme values" },
-      { requirement: "Skeleton loading state should use aria-busy='true' on the card region", level: "AA", notes: "Announce 'loading' to screen readers" },
-    ],
-    outro: [
-      "Test keyboard navigation through a grid of clickable cards using Tab key",
-      "Verify that nested action buttons are independently focusable and do not trigger card navigation",
-      "Ensure card groups announce the count and position (e.g. 'item 3 of 12')",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Clickable card navigates on click and Enter key", platform: "All", expectedResult: "Detail view opens; URL updates if applicable" },
-    { check: "Hover shadow elevation increases", platform: "Web", expectedResult: "Smooth transition from resting to hover shadow" },
-    { check: "Action buttons work independently of card click", platform: "Web", expectedResult: "Button action fires; card navigation does not trigger" },
-    { check: "Image maintains aspect ratio", platform: "All", expectedResult: "No stretching or cropping beyond intended bounds" },
-    { check: "Cards reflow to single column on mobile", platform: "Mobile", expectedResult: "Full width cards stacked vertically with consistent spacing" },
-    { check: "Selected state is visually distinct", platform: "All", expectedResult: "Border color changes, checkmark visible, aria-selected is true" },
-    { check: "Skeleton state renders placeholder blocks", platform: "Web", expectedResult: "Shimmer animation on text and media placeholders" },
-  ],
-
-  dos: [
-    "Maintain consistent card heights within a row using CSS grid alignment",
-    "Use the outlined variant on busy backgrounds to provide clear boundaries",
-    "Apply the pseudo-element click technique to avoid nested interactive elements",
-    "Use skeleton loading when card data loads asynchronously",
-    "Group related cards with consistent metadata placement across the set",
-    "Provide alt text for card images that convey meaningful content",
-    "Use container queries to make card layout adapt to its allocated space",
-  ],
-
-  donts: [
-    "Don't nest links inside a clickable card element — it creates invalid HTML",
-    "Don't use cards for single pieces of unrelated data — use a list instead",
-    "Don't make every card clickable if the action is ambiguous or undefined",
-    "Don't vary card heights dramatically in a grid — use line-clamp for consistency",
-    "Don't place too many action buttons in the footer — limit to 2–3 maximum",
-    "Don't use card shadows in a flat design system that avoids elevation",
-    "Don't omit loading states — empty cards with no content look broken",
-  ],
-};

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/checkbox.ts

@@ -1,227 +0,0 @@
-/**
- * checkbox.ts — Design knowledge for Checkbox components
- */
-import type { ComponentKnowledge } from "../types.js";
-
-export const checkboxKnowledge: ComponentKnowledge = {
-  description:
-    "Selection control | Binary or tri-state choice | Form input element",
-
-  stateSpecifications: [
-    {
-      state: "Unchecked",
-      visualChange: "Empty box with visible border; no fill or checkmark",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Option is available but not selected",
-    },
-    {
-      state: "Checked",
-      visualChange: "Box filled with brand color; white checkmark icon visible",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Option has been selected by the user",
-    },
-    {
-      state: "Indeterminate",
-      visualChange: "Box filled with brand color; horizontal dash icon replaces checkmark",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Parent checkbox when only some child options are selected",
-    },
-    {
-      state: "Disabled",
-      visualChange: "Border and fill switch to muted/disabled tokens; label text dimmed",
-      opacity: "0.4",
-      cursorWeb: "not-allowed",
-      usage: "Option is non-interactive due to permissions or current context",
-    },
-    {
-      state: "Focus",
-      visualChange: "2px focus ring offset by 2px around the checkbox box",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Checkbox receives keyboard focus via Tab key",
-    },
-    {
-      state: "Hover",
-      visualChange: "Box border darkens or background shows a subtle highlight",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Mouse cursor enters the checkbox or its label area",
-    },
-    {
-      state: "Error",
-      visualChange: "Box border switches to error/red token; error message appears below",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Validation has failed — typically a required checkbox left unchecked",
-    },
-  ],
-
-  propertyDescriptions: {
-    checked: "Boolean indicating whether the checkbox is currently selected",
-    indeterminate: "When true the checkbox displays a dash instead of a checkmark, representing a mixed/partial selection",
-    disabled: "When true the checkbox is non-interactive: muted visuals, no event firing, aria-disabled='true'",
-    label: "Descriptive text rendered adjacent to the checkbox box; also serves as the accessible name",
-    error: "Error message string displayed below the checkbox when validation fails",
-    required: "When true the checkbox must be checked before the form can be submitted; adds aria-required='true'",
-    name: "Form field name used when submitting the checkbox value",
-    value: "The value submitted with the form when the checkbox is checked",
-  },
-
-  sizeSpecifications: [
-    {
-      size: "Small",
-      height: "16px",
-      paddingLR: "0px",
-      fontSize: "12px",
-      iconSize: "12px",
-      borderRadius: "3px",
-    },
-    {
-      size: "Medium",
-      height: "20px",
-      paddingLR: "0px",
-      fontSize: "14px",
-      iconSize: "14px",
-      borderRadius: "4px",
-    },
-    {
-      size: "Large",
-      height: "24px",
-      paddingLR: "0px",
-      fontSize: "16px",
-      iconSize: "16px",
-      borderRadius: "6px",
-    },
-  ],
-
-  designTokenBindings: [
-    {
-      property: "Box Border",
-      tokenName: "$checkbox-border",
-      role: "Border color of the unchecked checkbox box",
-      fallback: "#D0D5DD",
-    },
-    {
-      property: "Box Background (checked)",
-      tokenName: "$checkbox-checked-bg",
-      role: "Fill color when checkbox is checked or indeterminate",
-      fallback: "#2563EB",
-    },
-    {
-      property: "Checkmark Color",
-      tokenName: "$checkbox-checkmark",
-      role: "Color of the checkmark or dash icon inside the box",
-      fallback: "#FFFFFF",
-    },
-    {
-      property: "Label Color",
-      tokenName: "$text-primary",
-      role: "Label text color in default state",
-      fallback: "#101828",
-    },
-    {
-      property: "Focus Ring",
-      tokenName: "$focus-ring",
-      role: "Keyboard focus indicator around the checkbox box",
-      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
-    },
-    {
-      property: "Error Border",
-      tokenName: "$border-error",
-      role: "Border color when checkbox is in an error state",
-      fallback: "#F04438",
-    },
-  ],
-
-  structureRules: [
-    "Checkbox box and label are arranged in a horizontal Auto Layout with center vertical alignment",
-    "Checkmark or dash icon is centered within the checkbox box using absolute positioning or Auto Layout",
-    "The entire label area is clickable and toggles the checkbox — not just the box itself",
-    "Group spacing between stacked checkboxes uses $spacing-sm (8px) for vertical separation",
-    "Touch target for the checkbox extends to at least 44x44px including the label hit area",
-    "Checkbox groups are wrapped in a fieldset with a visible legend for screen readers",
-  ],
-
-  typeHierarchyRules: [
-    "Label text uses Regular weight (400) — never Bold — to maintain visual parity within groups",
-    "Line height matches the design system's body text scale for consistent vertical rhythm",
-    "Label text is left-aligned (or right-aligned in RTL) adjacent to the checkbox box",
-    "Description or helper text below the label uses a smaller font size and secondary color token",
-  ],
-
-  interactionRules: [
-    { event: "Click / Tap", trigger: "pointerup on box or label", action: "Toggle checked state; fire onChange handler" },
-    { event: "Space Key", trigger: "Space key while checkbox is focused", action: "Toggle checked state (same as click)" },
-    { event: "Focus", trigger: "Tab key or focus()", action: "Show focus ring around the checkbox box" },
-    { event: "Blur", trigger: "Focus moves away", action: "Remove focus ring; trigger validation if required" },
-    { event: "Label Click", trigger: "pointerup on the label text", action: "Toggle checkbox — label acts as an extended hit area" },
-  ],
-
-  contentGuidance: [
-    "Frame labels positively: 'Send me updates' instead of 'Do not send me updates'",
-    "Use parallel grammatical structure when checkboxes appear in a group",
-    "Limit checkbox groups to 7-10 items; beyond that, consider a different pattern (search, filter, or multi-select)",
-    "Each checkbox label should make sense independently — avoid labels that only work in context of the group heading",
-    "Required checkboxes (e.g. terms acceptance) should clearly state the obligation in the label",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "Mobile (<768px)", behavior: "Touch target expands to 48px height; labels may wrap to a second line" },
-    { breakpoint: "Tablet (768-1023px)", behavior: "Checkbox groups may display in 2-column grid layout" },
-    { breakpoint: "Desktop (>=1024px)", behavior: "Standard single-column or multi-column layout; compact sizing allowed" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Checkboxes must communicate their role, checked state, and any group context to assistive technology. Tri-state behavior requires careful ARIA handling.",
-    requirements: [
-      { requirement: "Role", level: "A", notes: "Use native <input type='checkbox'> or role='checkbox' with full ARIA support" },
-      { requirement: "aria-checked (tri-state)", level: "A", notes: "Values: 'true', 'false', or 'mixed' for indeterminate state" },
-      { requirement: "aria-required", level: "A", notes: "Set to 'true' on required checkboxes; pair with visible required indicator" },
-      { requirement: "Fieldset / Legend", level: "A", notes: "Wrap checkbox groups in <fieldset> with <legend> for group label context" },
-      { requirement: "Keyboard Operable", level: "A", notes: "Space key toggles state; Tab moves between checkboxes; no Enter activation" },
-      { requirement: "Contrast Ratio", level: "AA", notes: "Box border: 3:1 against background; checkmark: 3:1 against box fill; label: 4.5:1" },
-      { requirement: "Error Announcement", level: "A", notes: "Error messages linked via aria-describedby; announced on validation failure" },
-    ],
-    outro: [
-      "Test indeterminate state announcement with multiple screen readers — behavior varies across AT",
-      "Ensure label click correctly toggles the checkbox in all browsers",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Toggle Behavior", platform: "All", expectedResult: "Clicking checkbox or label toggles between checked and unchecked" },
-    { check: "Indeterminate State", platform: "All", expectedResult: "Dash icon visible; aria-checked='mixed'; clicking resolves to checked" },
-    { check: "Disabled State", platform: "All", expectedResult: "Muted visuals; no toggle on click; aria-disabled='true'" },
-    { check: "Keyboard Navigation", platform: "Web", expectedResult: "Tab moves focus between checkboxes; Space toggles; Enter does not toggle" },
-    { check: "Screen Reader", platform: "Web", expectedResult: "Announces role 'checkbox', label, and checked/unchecked/mixed state" },
-    { check: "Error State", platform: "All", expectedResult: "Red border on box; error text visible below; error linked via aria-describedby" },
-    { check: "Group Behavior", platform: "All", expectedResult: "Fieldset and legend announced; parent checkbox reflects child selection state" },
-    { check: "Touch Target", platform: "Mobile", expectedResult: "Hit area at least 44x44px including label" },
-    { check: "Contrast", platform: "All", expectedResult: "Box, checkmark, and label meet WCAG AA contrast requirements" },
-    { check: "RTL Support", platform: "Web", expectedResult: "Box position mirrors to right side; label alignment flips correctly" },
-  ],
-
-  dos: [
-    "Use checkboxes for independent, non-mutually-exclusive selections",
-    "Provide a visible label for every checkbox — never use a standalone unlabeled box",
-    "Use indeterminate state only for parent checkboxes that summarize child selections",
-    "Group related checkboxes inside a fieldset with a descriptive legend",
-    "Allow users to check and uncheck freely before submitting — validate on submit, not on change",
-    "Maintain consistent vertical spacing between grouped checkboxes",
-    "Pair required checkboxes with clear helper text explaining the obligation",
-  ],
-
-  donts: [
-    "Do not use checkboxes for mutually exclusive choices — use radio buttons instead",
-    "Do not pre-check optional checkboxes (e.g. marketing opt-ins) — respect user intent",
-    "Do not mix checkbox sizes within the same group",
-    "Do not place checkboxes in a horizontal row if there are more than 3 options",
-    "Do not rely on color alone to indicate the checked state — the checkmark icon is essential",
-    "Do not disable a checkbox without providing context about why it is unavailable",
-    "Do not use negative framing in labels (e.g. 'Do not contact me') — rephrase positively",
-  ],
-};

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/chip.ts

@@ -1,233 +0,0 @@
-/**
- * chip.ts — Gold-standard design knowledge for Chip / Tag / Pill components
- */
-import type { ComponentKnowledge } from "../types.js";
-
-export const chipKnowledge: ComponentKnowledge = {
-  description:
-    "Compact label | Filterable tag | Dismissible metadata token",
-
-  stateSpecifications: [
-    {
-      state: "Default",
-      visualChange: "Subtle fill or outlined container with label text and optional icon/avatar",
-      opacity: "1",
-      cursorWeb: "default",
-      usage: "Resting state displaying metadata or a category label",
-    },
-    {
-      state: "Hover",
-      visualChange: "Background darkens slightly; close icon (if removable) gains emphasis",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Cursor enters the chip hit area on interactive chips",
-    },
-    {
-      state: "Selected",
-      visualChange: "Filled background with contrasting text; checkmark icon may appear",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Chip is actively selected in a filter or choice group",
-    },
-    {
-      state: "Disabled",
-      visualChange: "Muted background and text; close icon hidden or non-interactive",
-      opacity: "0.4",
-      cursorWeb: "not-allowed",
-      usage: "Chip cannot be selected, removed, or interacted with",
-    },
-    {
-      state: "Focus",
-      visualChange: "2px focus ring offset by 2px from the chip edge using $focus-ring token",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Chip receives keyboard focus via Tab key",
-    },
-    {
-      state: "Active",
-      visualChange: "Background shifts one step darker; slight scale-down (0.97) on press",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Mouse button held down or touch press in progress on the chip",
-    },
-    {
-      state: "Removing",
-      visualChange: "Chip shrinks horizontally with opacity fade-out animation before removal from DOM",
-      opacity: "0",
-      cursorWeb: "default",
-      usage: "User clicked the close icon or triggered deletion via Backspace/Delete key",
-    },
-  ],
-
-  propertyDescriptions: {
-    label: "Text content displayed inside the chip; should be short (1-3 words)",
-    type: "Chip behavior variant — Filter (toggleable), Input (removable user entry), Choice (single-select), or Assist (action suggestion)",
-    removable: "When true, a close/dismiss icon is rendered on the trailing edge of the chip",
-    selected: "When true, the chip shows its selected visual state with filled background",
-    disabled: "When true, the chip is non-interactive with muted visuals and aria-disabled",
-    icon: "Optional leading icon rendered before the label text",
-    avatar: "Optional leading avatar thumbnail rendered before the label, typically 20px circular",
-  },
-
-  sizeSpecifications: [
-    {
-      size: "Small",
-      height: "24px",
-      paddingLR: "8px",
-      fontSize: "11px",
-      iconSize: "14px",
-      borderRadius: "12px",
-    },
-    {
-      size: "Medium",
-      height: "32px",
-      paddingLR: "12px",
-      fontSize: "13px",
-      iconSize: "16px",
-      borderRadius: "16px",
-    },
-    {
-      size: "Large",
-      height: "40px",
-      paddingLR: "16px",
-      fontSize: "14px",
-      iconSize: "20px",
-      borderRadius: "20px",
-    },
-  ],
-
-  designTokenBindings: [
-    {
-      property: "Background",
-      tokenName: "$chip-bg",
-      role: "Default chip fill color — subtle neutral tone",
-      fallback: "#F3F4F6",
-    },
-    {
-      property: "Background Selected",
-      tokenName: "$chip-bg-selected",
-      role: "Fill color when chip is in selected state",
-      fallback: "#2563EB",
-    },
-    {
-      property: "Text Color",
-      tokenName: "$chip-text",
-      role: "Label and icon color in default state",
-      fallback: "#374151",
-    },
-    {
-      property: "Text Color Selected",
-      tokenName: "$chip-text-selected",
-      role: "Label and icon color in selected state",
-      fallback: "#FFFFFF",
-    },
-    {
-      property: "Border",
-      tokenName: "$chip-border",
-      role: "Outlined variant border color",
-      fallback: "#D1D5DB",
-    },
-    {
-      property: "Close Icon Color",
-      tokenName: "$chip-close-icon",
-      role: "Color of the trailing dismiss/close icon",
-      fallback: "#6B7280",
-    },
-    {
-      property: "Focus Ring",
-      tokenName: "$focus-ring",
-      role: "Keyboard focus indicator ring",
-      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
-    },
-  ],
-
-  structureRules: [
-    "Container uses horizontal Auto Layout with center vertical alignment and hug-contents width",
-    "Leading icon or avatar is an optional first child; label text is the center child; close icon is the trailing child",
-    "Border-radius is set to 50% of the height to create the pill/capsule shape",
-    "Close icon has its own 4px hit area padding to meet the 24x24px minimum interactive target",
-    "Chip groups use horizontal Auto Layout with wrap enabled and $spacing-xs (4px) gap",
-    "When chips overflow their container, the group wraps to the next line — no horizontal scrolling by default",
-    "Selected chips with a checkmark prepend the check icon before the label, shifting content right",
-  ],
-
-  typeHierarchyRules: [
-    "Font weight is Medium (500) for all chip states",
-    "Text uses sentence case — 'New arrival', not 'New Arrival' or 'NEW ARRIVAL'",
-    "Labels are single-line only; truncate with ellipsis at a configurable max-width",
-    "Maximum label length is 25 characters — longer values should be truncated",
-    "Close icon (x) uses a slightly smaller size than the leading icon",
-  ],
-
-  interactionRules: [
-    { event: "Click / Tap", trigger: "pointerup on chip body", action: "Toggle selected state for Filter/Choice chips; no action for Input chips" },
-    { event: "Close Click", trigger: "pointerup on close icon", action: "Fire onRemove handler; animate chip out; remove from DOM" },
-    { event: "Hover", trigger: "pointerenter", action: "Transition to hover background; close icon gains emphasis" },
-    { event: "Focus", trigger: "Tab key or focus()", action: "Show focus ring; arrow keys navigate between chips in a group" },
-    { event: "Backspace / Delete", trigger: "Key pressed while chip is focused", action: "Remove the focused chip if removable; move focus to the next chip" },
-    { event: "Arrow Keys", trigger: "Left/Right arrows while chip group is focused", action: "Move focus between sibling chips in the group" },
-  ],
-
-  contentGuidance: [
-    "Chip labels should be 1-3 words maximum — they represent metadata, not sentences",
-    "Use nouns or short noun phrases: 'JavaScript', 'In Progress', 'Priority: High'",
-    "Avoid action verbs in chip labels — chips represent state, not actions",
-    "Leading icons should reinforce the category (e.g. calendar icon for date chips)",
-    "In filter groups, include an 'All' or 'Clear filters' option to reset selections",
-    "Removable chips should confirm destructive removal if the chip represents important data",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "Mobile (<768px)", behavior: "Chip groups wrap freely; use Small size; max 2 lines visible with 'Show more' toggle" },
-    { breakpoint: "Tablet (768-1023px)", behavior: "Medium size default; groups may show 3 lines before overflow" },
-    { breakpoint: "Desktop (1024-1439px)", behavior: "All sizes available; horizontal chip groups with wrap at container edge" },
-    { breakpoint: "Ultra-wide (>=1440px)", behavior: "Chip sizes remain capped — do not scale with viewport" },
-    { breakpoint: "Input Field Context", behavior: "Chips inside text inputs use Small size and compress to fit available width" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Chips serve as compact interactive elements that must be fully operable by keyboard and announced correctly by screen readers.",
-    requirements: [
-      { requirement: "Role", level: "A", notes: "Filter/Choice chips use role='option' within a listbox; Input chips use role='button' with aria-label" },
-      { requirement: "Focusable", level: "A", notes: "Each chip must be focusable via Tab; within groups, arrow keys navigate between chips" },
-      { requirement: "Keyboard Removal", level: "A", notes: "Backspace or Delete removes a focused removable chip; focus moves to the next sibling" },
-      { requirement: "Selected State", level: "A", notes: "Selected chips must announce aria-selected='true' and convey state change" },
-      { requirement: "Contrast Ratio", level: "AA", notes: "Text-to-background: 4.5:1 minimum in both default and selected states" },
-      { requirement: "Touch Target", level: "AA", notes: "Chip and close icon must each have a minimum 44x24px touch area" },
-    ],
-    outro: [
-      "Chip groups should use role='listbox' or role='group' with an aria-label describing the filter category",
-      "Announce removal actions to screen readers via aria-live polite region",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Visual Regression", platform: "All", expectedResult: "Chip renders pixel-perfect against baseline for each type and state" },
-    { check: "Selection Toggle", platform: "All", expectedResult: "Filter/Choice chips toggle between default and selected states on click" },
-    { check: "Removal Animation", platform: "Web", expectedResult: "Chip animates out smoothly on close; remaining chips reflow without jank" },
-    { check: "Keyboard Navigation", platform: "Web", expectedResult: "Arrow keys move focus between chips; Backspace removes focused chip" },
-    { check: "Truncation", platform: "All", expectedResult: "Labels exceeding max-width truncate with ellipsis; tooltip shows full text" },
-    { check: "Wrap Behavior", platform: "All", expectedResult: "Chip groups wrap to next line at container boundary; no horizontal scroll" },
-    { check: "Screen Reader", platform: "Web", expectedResult: "Announces chip label, type, selected state, and removable status" },
-  ],
-
-  dos: [
-    "Use Filter chips for multi-select category filtering in search interfaces",
-    "Use Input chips for user-entered tags (email addresses, categories) in form fields",
-    "Use Choice chips for single-select options where radio buttons feel too heavy",
-    "Keep labels concise — 1-3 words that clearly communicate the metadata",
-    "Provide keyboard navigation within chip groups using arrow keys",
-    "Animate chip removal for smooth visual feedback",
-  ],
-
-  donts: [
-    "Do not use chips for primary actions — use buttons instead",
-    "Do not allow chip labels to wrap to multiple lines",
-    "Do not mix chip types (Filter, Input, Choice) within the same group",
-    "Do not use chips as a replacement for navigation tabs",
-    "Do not place more than 20 chips in a single visible group without pagination or 'Show more'",
-    "Do not remove the close icon hit area padding — it must remain easily tappable",
-    "Do not use chips for long-form content or sentences",
-  ],
-};