@sarjallab09/figma-intelligence 1.1.0 → 1.2.0

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

@@ -1,261 +0,0 @@
-/**
- * number-input.ts — Gold-standard design knowledge for Number Input components
- */
-import type { ComponentKnowledge } from "../types.js";
-
-export const numberInputKnowledge: ComponentKnowledge = {
-  description:
-    "Numeric input with stepper buttons | Allows precise numeric value entry | Supports increment/decrement via buttons and keyboard",
-
-  stateSpecifications: [
-    {
-      state: "Default",
-      visualChange: "Input field with current numeric value; stepper buttons visible with default icon color; border uses default token",
-      opacity: "1",
-      cursorWeb: "text",
-      usage: "Resting state — field displays the current value and is ready for interaction",
-    },
-    {
-      state: "Focused",
-      visualChange: "2px focus ring offset by 2px from the input edge, using $focus-ring token; caret visible in the input field",
-      opacity: "1",
-      cursorWeb: "text",
-      usage: "Input field receives keyboard focus via Tab key or programmatic focus call",
-    },
-    {
-      state: "Error",
-      visualChange: "Border switches to $color-error token; error icon appears inside the field; error message text displayed below",
-      opacity: "1",
-      cursorWeb: "text",
-      usage: "Value is outside min/max range, not a valid number, or required field is empty on validation",
-    },
-    {
-      state: "Disabled",
-      visualChange: "Input background and text switch to muted/disabled tokens; stepper buttons are greyed out and non-interactive",
-      opacity: "0.4",
-      cursorWeb: "not-allowed",
-      usage: "Numeric input is unavailable due to form state, permissions, or dependent field conditions",
-    },
-  ],
-
-  propertyDescriptions: {
-    label: "Visible label text rendered above or beside the input; describes the numeric value's purpose (e.g. 'Quantity', 'Amount')",
-    value: "Current numeric value displayed in the input field; controlled or uncontrolled depending on form framework",
-    min: "Minimum allowed value; decrement button becomes disabled when value reaches this limit",
-    max: "Maximum allowed value; increment button becomes disabled when value reaches this limit",
-    step: "Increment/decrement amount applied when stepper buttons are clicked or Up/Down arrow keys are pressed (default: 1)",
-    precision: "Number of decimal places to display and enforce (e.g. 0 for integers, 2 for currency amounts)",
-    size: "Dimensional preset controlling height, padding, font-size, and icon-size (Small, Medium, Large)",
-    required: "When true the field must have a value before form submission; adds required indicator to the label",
-    helperText: "Supplementary guidance text rendered below the input in default state (e.g. 'Enter a value between 1 and 100')",
-    errorMessage: "Validation error text rendered below the input in error state, replacing helper text",
-    disabled: "When true the input and stepper buttons are non-interactive: muted visuals, pointer-events none, aria-disabled='true'",
-  },
-
-  sizeSpecifications: [
-    {
-      size: "Small",
-      height: "32px",
-      paddingLR: "12px",
-      fontSize: "12px",
-      iconSize: "16px",
-      borderRadius: "6px",
-    },
-    {
-      size: "Medium",
-      height: "40px",
-      paddingLR: "16px",
-      fontSize: "14px",
-      iconSize: "20px",
-      borderRadius: "8px",
-    },
-    {
-      size: "Large",
-      height: "48px",
-      paddingLR: "20px",
-      fontSize: "16px",
-      iconSize: "24px",
-      borderRadius: "10px",
-    },
-  ],
-
-  designTokenBindings: [
-    {
-      property: "Field Background",
-      tokenName: "$number-input-field-bg",
-      role: "Background fill for the numeric input field area",
-      fallback: "#FFFFFF",
-    },
-    {
-      property: "Field Border",
-      tokenName: "$number-input-field-border",
-      role: "Border color for the input field in default state",
-      fallback: "#D0D5DD",
-    },
-    {
-      property: "Stepper Button Background",
-      tokenName: "$number-input-stepper-bg",
-      role: "Background fill for the increment/decrement stepper buttons",
-      fallback: "#F9FAFB",
-    },
-    {
-      property: "Stepper Button Hover",
-      tokenName: "$number-input-stepper-hover-bg",
-      role: "Background fill for stepper buttons on hover",
-      fallback: "#F2F4F7",
-    },
-    {
-      property: "Stepper Icon",
-      tokenName: "$number-input-stepper-icon",
-      role: "Icon color for the plus/minus or chevron icons in stepper buttons",
-      fallback: "#667085",
-    },
-    {
-      property: "Stepper Icon Disabled",
-      tokenName: "$number-input-stepper-icon-disabled",
-      role: "Icon color for stepper buttons when at min/max boundary or component is disabled",
-      fallback: "#98A2B3",
-    },
-    {
-      property: "Value Text",
-      tokenName: "$number-input-value-text",
-      role: "Text color for the numeric value displayed in the input field",
-      fallback: "#101828",
-    },
-    {
-      property: "Placeholder Text",
-      tokenName: "$number-input-placeholder-text",
-      role: "Text color for placeholder text when no value is entered",
-      fallback: "#98A2B3",
-    },
-    {
-      property: "Focus Ring",
-      tokenName: "$focus-ring",
-      role: "Keyboard focus indicator ring on the input field and stepper buttons",
-      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
-    },
-    {
-      property: "Error Border",
-      tokenName: "$color-error",
-      role: "Border color applied to the input field in error state",
-      fallback: "#F04438",
-    },
-    {
-      property: "Error Text",
-      tokenName: "$color-error-text",
-      role: "Text color for the error message below the input",
-      fallback: "#F04438",
-    },
-  ],
-
-  structureRules: [
-    "Component is a compound structure: input field flanked by increment and decrement stepper buttons",
-    "Stepper buttons may be placed on the right side (stacked vertically) or on both sides of the input (split layout)",
-    "Container uses horizontal Auto Layout with center vertical alignment for all children",
-    "Stepper buttons are direct children of the container — no intermediate wrappers between buttons and input",
-    "Input field occupies the remaining horizontal space between stepper buttons (fill-container)",
-    "Stepper button hit area is at least 44x44px regardless of visual size; transparent padding extends the target if needed",
-    "Label and helper/error text are positioned outside the input container in a vertical stack with $spacing-xs gap",
-    "Divider lines between stepper buttons and input field use the field border token at 1px width",
-    "Value text is horizontally centered within the input field for visual balance",
-    "When value reaches min or max boundary, the corresponding stepper button icon switches to the disabled icon token",
-  ],
-
-  typeHierarchyRules: [
-    "Value text uses tabular (monospaced) numerals to prevent layout shift when numbers change width",
-    "Font weight for the value is Regular (400) — never Bold to avoid visual heaviness at small sizes",
-    "Label text uses font-weight Medium (500) at the same size as the value text",
-    "Helper and error text use one step smaller font-size than the value text with Regular weight",
-    "Text alignment for the value is center-aligned within the input field",
-  ],
-
-  interactionRules: [
-    { event: "Click Increment", trigger: "pointerup on increment stepper button", action: "Increase value by step amount; clamp at max; fire onChange handler" },
-    { event: "Click Decrement", trigger: "pointerup on decrement stepper button", action: "Decrease value by step amount; clamp at min; fire onChange handler" },
-    { event: "Long Press Stepper", trigger: "pointerdown held for 500ms on stepper button", action: "Begin auto-repeat incrementing/decrementing at 100ms intervals until pointerup" },
-    { event: "Arrow Up", trigger: "ArrowUp key while input is focused", action: "Increase value by step amount; clamp at max" },
-    { event: "Arrow Down", trigger: "ArrowDown key while input is focused", action: "Decrease value by step amount; clamp at min" },
-    { event: "Home", trigger: "Home key while input is focused", action: "Set value to the minimum allowed value" },
-    { event: "End", trigger: "End key while input is focused", action: "Set value to the maximum allowed value" },
-    { event: "Direct Input", trigger: "User types a numeric value", action: "Update value on blur or Enter; validate against min/max/precision; show error if invalid" },
-    { event: "Focus", trigger: "Tab key or click on input", action: "Show focus ring; select all text for easy replacement" },
-    { event: "Blur", trigger: "Focus moves away from input", action: "Validate value; clamp to min/max if out of bounds; format to precision; fire onBlur handler" },
-  ],
-
-  contentGuidance: [
-    "Labels should describe what the number represents: 'Quantity', 'Number of guests', 'Price per unit'",
-    "Helper text should communicate constraints: 'Min 1, Max 99' or 'Increments of 0.5'",
-    "Error messages should be specific: 'Value must be between 1 and 100' rather than 'Invalid number'",
-    "Use appropriate precision for the context: integers for counts, 2 decimals for currency",
-    "Do not use a number input for values that are not truly numeric (e.g. phone numbers, ZIP codes — use text input with masking)",
-    "Stepper button icons should use universally understood symbols: plus/minus or up/down chevrons",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "Mobile (<768px)", behavior: "Input stretches to full width; stepper buttons maintain minimum 48px touch targets; consider split layout for easier tapping" },
-    { breakpoint: "Tablet (768-1023px)", behavior: "Input may be full-width or fixed-width depending on form layout; stepper buttons maintain 44px targets" },
-    { breakpoint: "Desktop (1024-1439px)", behavior: "Standard width following form column grid; stacked stepper buttons on the right side are the default layout" },
-    { breakpoint: "Ultra-wide (>=1440px)", behavior: "Input width remains capped — does not scale proportionally with viewport" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Number inputs require the spinbutton ARIA pattern with precise value announcements and full keyboard support for screen reader and keyboard-only users.",
-    requirements: [
-      { requirement: "Spinbutton Role", level: "A", notes: "Input element uses role='spinbutton' to communicate its purpose to assistive technology" },
-      { requirement: "Value Attributes", level: "A", notes: "aria-valuemin, aria-valuemax, and aria-valuenow reflect the current min, max, and value at all times" },
-      { requirement: "Value Text", level: "A", notes: "aria-valuetext provides a human-readable description when the number alone is insufficient (e.g. '$25.00')" },
-      { requirement: "Keyboard Increment", level: "A", notes: "Up/Down arrow keys change the value by step; Home/End jump to min/max boundaries" },
-      { requirement: "Label Association", level: "A", notes: "Input has aria-labelledby pointing to the visible label or an explicit <label> element with for attribute" },
-      { requirement: "Error Association", level: "A", notes: "Error message linked via aria-describedby on the input; aria-invalid='true' in error state" },
-      { requirement: "Stepper Button Labels", level: "A", notes: "Increment button has aria-label='Increase value'; decrement button has aria-label='Decrease value'" },
-      { requirement: "Contrast Ratio", level: "AA", notes: "Value text to background: 4.5:1 minimum; stepper button icons to background: 3:1 minimum" },
-      { requirement: "Touch Target", level: "AA", notes: "Stepper buttons provide at least 44x44px touch target per WCAG 2.5.5" },
-      { requirement: "Disabled Announcement", level: "A", notes: "Disabled state announced via aria-disabled='true'; stepper buttons at min/max announced as unavailable" },
-    ],
-    outro: [
-      "Ensure screen readers announce the updated value after each increment or decrement action",
-      "When value is clamped at min or max, provide audible feedback that the boundary has been reached",
-      "Do not trap keyboard focus within the component — Tab must move to the next form field",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Visual Regression", platform: "All", expectedResult: "Input and stepper buttons render pixel-perfect against baseline for each size and state" },
-    { check: "Increment Click", platform: "Web", expectedResult: "Clicking increment button increases value by step; value does not exceed max" },
-    { check: "Decrement Click", platform: "Web", expectedResult: "Clicking decrement button decreases value by step; value does not go below min" },
-    { check: "Long Press", platform: "Web", expectedResult: "Holding stepper button auto-repeats after 500ms delay at 100ms intervals" },
-    { check: "Keyboard Up/Down", platform: "Web", expectedResult: "Arrow Up/Down keys change value by step amount while input is focused" },
-    { check: "Home/End Keys", platform: "Web", expectedResult: "Home sets value to min; End sets value to max" },
-    { check: "Direct Input", platform: "Web", expectedResult: "Typing a valid number updates value on blur; invalid input triggers error state" },
-    { check: "Boundary Clamping", platform: "All", expectedResult: "Value clamps to min/max on blur; stepper icon switches to disabled style at boundaries" },
-    { check: "Precision", platform: "All", expectedResult: "Value displays correct number of decimal places per precision prop" },
-    { check: "Focus State", platform: "Web", expectedResult: "Focus ring visible on input via Tab; text selected for easy replacement" },
-    { check: "Error State", platform: "All", expectedResult: "Error border, icon, and message appear; aria-invalid='true' and aria-describedby set" },
-    { check: "Disabled State", platform: "All", expectedResult: "Muted visuals; clicks and keyboard input ignored; aria-disabled='true'" },
-    { check: "Screen Reader", platform: "Web", expectedResult: "Announces role 'spinbutton', label, current value, min, max, and error state correctly" },
-    { check: "Touch Target Size", platform: "Mobile", expectedResult: "Stepper buttons are at least 44x44px touch targets" },
-    { check: "Contrast", platform: "All", expectedResult: "Value text passes 4.5:1 contrast; stepper icons pass 3:1 non-text contrast" },
-    { check: "RTL Support", platform: "Web", expectedResult: "Stepper button positions and text alignment mirror correctly in RTL locales" },
-  ],
-
-  dos: [
-    "Use the Number Input for values where precise numeric control is needed (quantities, prices, percentages)",
-    "Set appropriate min, max, and step values to constrain input to valid ranges",
-    "Use tabular/monospaced numerals to prevent layout shift when values change",
-    "Provide clear helper text communicating the allowed range and step increments",
-    "Disable the corresponding stepper button when the value reaches min or max",
-    "Select all text on focus so users can quickly type a replacement value",
-    "Validate and clamp the value on blur to ensure it falls within the valid range",
-  ],
-
-  donts: [
-    "Do not use a Number Input for non-numeric values like phone numbers, ZIP codes, or credit card numbers",
-    "Do not allow the value to exceed min/max bounds — clamp or reject out-of-range input",
-    "Do not hide the stepper buttons — they provide essential affordance that the field accepts numeric input",
-    "Do not use proportional fonts for the value — layout will shift as digit widths change",
-    "Do not remove the focus ring from the input or stepper buttons",
-    "Do not allow free-text entry of non-numeric characters (letters, special characters except minus and decimal)",
-    "Do not override design token colors with hardcoded hex values for stepper buttons or field borders",
-  ],
-};

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

@@ -1,248 +0,0 @@
-/**
- * pagination.ts — Gold-standard design knowledge for Pagination components
- */
-import type { ComponentKnowledge } from "../types.js";
-
-export const paginationKnowledge: ComponentKnowledge = {
-  description:
-    "Page navigation control | Enables traversal across paged content | Supports numbered, compact, and load-more patterns",
-
-  stateSpecifications: [
-    {
-      state: "Default",
-      visualChange: "Page numbers displayed as clickable items; navigation arrows enabled; current page highlighted",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Resting state — pagination is ready for interaction with all navigable pages visible",
-    },
-    {
-      state: "Hover",
-      visualChange: "Background of hovered page number shifts to hover token; subtle elevation or underline may appear",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Mouse cursor enters a page number or navigation arrow hit area",
-    },
-    {
-      state: "Active-page",
-      visualChange: "Current page number uses primary fill with high-contrast text; non-interactive appearance",
-      opacity: "1",
-      cursorWeb: "default",
-      usage: "Indicates the currently displayed page — this item is not clickable",
-    },
-    {
-      state: "Disabled-nav",
-      visualChange: "Previous/Next arrows use muted color tokens; no hover effect",
-      opacity: "0.4",
-      cursorWeb: "not-allowed",
-      usage: "Navigation arrow is disabled because user is on the first or last page respectively",
-    },
-    {
-      state: "Focus",
-      visualChange: "2px focus ring offset by 2px around the focused page item, using $focus-ring token",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Page number or arrow receives keyboard focus via Tab or arrow key navigation",
-    },
-  ],
-
-  propertyDescriptions: {
-    totalPages: "Total number of pages available for navigation; determines the range of page numbers rendered",
-    currentPage: "The currently active page number; controls which item receives the active-page visual treatment",
-    type: "Pagination pattern variant — 'numbered' shows page numbers, 'loadMore' shows a single button, 'compact' shows current/total only",
-    size: "Dimensional preset controlling item height, padding, font-size, and icon-size (sm, md, lg)",
-    siblingCount: "Number of page numbers to show on each side of the current page before truncation ellipsis appears",
-    boundaryCount: "Number of page numbers always visible at the start and end of the range regardless of current page",
-    onPageChange: "Callback fired when a new page is selected; receives the target page number as argument",
-    disabled: "When true, the entire pagination component is non-interactive; all items appear muted",
-    showFirstLast: "When true, dedicated first-page and last-page navigation arrows are rendered alongside prev/next",
-  },
-
-  sizeSpecifications: [
-    {
-      size: "Small",
-      height: "28px",
-      paddingLR: "6px",
-      fontSize: "12px",
-      iconSize: "14px",
-      borderRadius: "4px",
-    },
-    {
-      size: "Medium",
-      height: "36px",
-      paddingLR: "10px",
-      fontSize: "14px",
-      iconSize: "18px",
-      borderRadius: "6px",
-    },
-    {
-      size: "Large",
-      height: "44px",
-      paddingLR: "14px",
-      fontSize: "16px",
-      iconSize: "22px",
-      borderRadius: "8px",
-    },
-  ],
-
-  designTokenBindings: [
-    {
-      property: "Page Item Background",
-      tokenName: "$pagination-item-bg",
-      role: "Default background for non-active page number items",
-      fallback: "transparent",
-    },
-    {
-      property: "Active Page Background",
-      tokenName: "$pagination-active-bg",
-      role: "Fill color for the currently selected page number",
-      fallback: "#2563EB",
-    },
-    {
-      property: "Active Page Text",
-      tokenName: "$pagination-active-text",
-      role: "Text color on the active page number for contrast",
-      fallback: "#FFFFFF",
-    },
-    {
-      property: "Page Item Text",
-      tokenName: "$pagination-item-text",
-      role: "Default text color for non-active page numbers",
-      fallback: "#344054",
-    },
-    {
-      property: "Hover Background",
-      tokenName: "$pagination-hover-bg",
-      role: "Background applied on hover for non-active page items",
-      fallback: "#F2F4F7",
-    },
-    {
-      property: "Disabled Color",
-      tokenName: "$pagination-disabled",
-      role: "Muted color for disabled navigation arrows",
-      fallback: "#D0D5DD",
-    },
-    {
-      property: "Border",
-      tokenName: "$pagination-border",
-      role: "Optional border around each page item for outlined variant",
-      fallback: "#E4E7EC",
-    },
-    {
-      property: "Focus Ring",
-      tokenName: "$focus-ring",
-      role: "Keyboard focus indicator ring on focused page item",
-      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
-    },
-    {
-      property: "Font Family",
-      tokenName: "$font-family-sans",
-      role: "Typeface for page number labels",
-      fallback: "Inter, system-ui, sans-serif",
-    },
-    {
-      property: "Gap",
-      tokenName: "$spacing-xs",
-      role: "Spacing between adjacent page items",
-      fallback: "4px",
-    },
-  ],
-
-  structureRules: [
-    "Container uses horizontal Auto Layout with center vertical alignment",
-    "Navigation arrows (prev/next) are the outermost children; page number items sit between them",
-    "Ellipsis truncation indicators are non-interactive text elements inserted when sibling/boundary counts cause omission",
-    "Each page item has equal width and height to form a square or near-square hit area",
-    "Active page item uses a different fill but same dimensions as other items — no layout shift on page change",
-    "Load-more variant replaces the numbered row with a single centered button component",
-    "Compact variant shows 'Page X of Y' text with prev/next arrows only — no individual page items",
-    "Touch targets for each item must be at least 44x44px; add transparent padding if visual size is smaller",
-  ],
-
-  typeHierarchyRules: [
-    "Page numbers use tabular (monospace) numerals for consistent width across digits",
-    "Font weight is Medium (500) for the active page, Regular (400) for inactive pages",
-    "Ellipsis uses the same font-size as page numbers but with reduced opacity",
-    "Compact variant label ('Page X of Y') uses Regular weight with the same font-size as the selected size preset",
-  ],
-
-  interactionRules: [
-    { event: "Click Page Number", trigger: "pointerup on a non-active page item", action: "Fire onPageChange with the clicked page number; update active-page visuals" },
-    { event: "Click Previous", trigger: "pointerup on prev arrow (when not disabled)", action: "Fire onPageChange with currentPage - 1" },
-    { event: "Click Next", trigger: "pointerup on next arrow (when not disabled)", action: "Fire onPageChange with currentPage + 1" },
-    { event: "Hover", trigger: "pointerenter on any interactive page item", action: "Apply hover background token; transition smoothly" },
-    { event: "Focus", trigger: "Tab or arrow key navigation", action: "Show focus ring on the focused page item" },
-    { event: "Keydown Enter", trigger: "Enter key while a page item is focused", action: "Fire onPageChange for the focused page number" },
-    { event: "Keydown Arrow", trigger: "Left/Right arrow keys within the pagination nav", action: "Move focus to the adjacent page item without activating it" },
-  ],
-
-  contentGuidance: [
-    "Always pair pagination with a clear indication of total results or total pages so users know the scope",
-    "Use numbered pagination for content where users need random access to specific pages (e.g. search results)",
-    "Use load-more for infinite-scroll-like patterns where sequential consumption is expected (e.g. feeds)",
-    "Use compact pagination when horizontal space is limited (e.g. mobile cards, embedded tables)",
-    "Navigation arrows should use chevron icons, not text labels, to save space; add aria-label for screen readers",
-    "Truncation ellipsis should appear when total pages exceed siblingCount + boundaryCount thresholds",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "Mobile (<768px)", behavior: "Switch to compact variant or show reduced siblingCount (1); prev/next arrows remain visible" },
-    { breakpoint: "Tablet (768-1023px)", behavior: "Show abbreviated page range with siblingCount of 1-2; navigation arrows visible" },
-    { breakpoint: "Desktop (1024-1439px)", behavior: "Full numbered pagination with standard siblingCount and boundaryCount" },
-    { breakpoint: "Ultra-wide (>=1440px)", behavior: "Pagination size remains capped; do not stretch to fill available width" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Pagination must be navigable by keyboard and clearly announce the current page to assistive technologies. It wraps in a landmark nav element for easy discovery.",
-    requirements: [
-      { requirement: "Landmark", level: "A", notes: "Wrap in <nav> element with aria-label='Pagination' for screen reader landmark navigation" },
-      { requirement: "Current Page", level: "A", notes: "Active page item must have aria-current='page' so screen readers announce it as the current page" },
-      { requirement: "Keyboard Navigation", level: "A", notes: "All page items and arrows must be focusable via Tab; Enter activates the focused item" },
-      { requirement: "Disabled State", level: "A", notes: "Disabled arrows use aria-disabled='true' and are excluded from tab order or made inert" },
-      { requirement: "Page Change Announcement", level: "AA", notes: "When a new page is selected, announce the change via aria-live='polite' region (e.g. 'Page 3 of 10')" },
-      { requirement: "Contrast Ratio", level: "AA", notes: "Active page indicator must have 3:1 contrast against surrounding surface; text must meet 4.5:1" },
-      { requirement: "Touch Target", level: "AA", notes: "Each page item must have at least 44x44px touch area per WCAG 2.5.5" },
-    ],
-    outro: [
-      "Ensure focus is not lost when the page list re-renders after a page change — focus should return to the newly active item or a predictable location",
-      "Truncation ellipsis elements should have aria-hidden='true' since they are not interactive and carry no semantic meaning",
-      "Screen readers should be able to determine the total number of pages from context (e.g. 'Page 3 of 10')",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Visual Regression", platform: "All", expectedResult: "Pagination renders pixel-perfect against baseline for each type and size variant" },
-    { check: "Active Page Highlight", platform: "All", expectedResult: "Current page is visually distinct with primary fill; changes on navigation" },
-    { check: "Disabled Arrow", platform: "All", expectedResult: "Prev disabled on page 1; Next disabled on last page; muted visuals and no click response" },
-    { check: "Hover State", platform: "Web", expectedResult: "Non-active page items show hover background on mouse enter; active page does not change" },
-    { check: "Focus State", platform: "Web", expectedResult: "Focus ring visible on Tab navigation; hidden on mouse click (focus-visible)" },
-    { check: "Keyboard Navigation", platform: "Web", expectedResult: "Tab moves between page items and arrows; Enter fires page change; arrow keys move focus" },
-    { check: "Screen Reader", platform: "Web", expectedResult: "Announces nav landmark, current page via aria-current, page change via aria-live" },
-    { check: "Truncation", platform: "Web", expectedResult: "Ellipsis appears when pages exceed sibling+boundary threshold; not focusable" },
-    { check: "Compact Variant", platform: "All", expectedResult: "'Page X of Y' label updates correctly; prev/next arrows function properly" },
-    { check: "Load More Variant", platform: "All", expectedResult: "Button triggers next page load; disabled/loading state during fetch" },
-    { check: "Touch Target Size", platform: "Mobile", expectedResult: "All interactive items have at least 44x44px hit area" },
-    { check: "Contrast", platform: "All", expectedResult: "Active page passes 4.5:1 text contrast; non-text indicator passes 3:1" },
-    { check: "RTL Support", platform: "Web", expectedResult: "Arrow directions swap; page order mirrors; layout alignment correct in RTL locales" },
-  ],
-
-  dos: [
-    "Use numbered pagination for data tables and search results where users need direct page access",
-    "Always show the first and last page numbers (boundaryCount >= 1) to give users a sense of total range",
-    "Highlight the active page clearly so users always know where they are in the result set",
-    "Pair pagination with a results summary (e.g. 'Showing 11-20 of 97 results')",
-    "Use consistent item sizing — each page number item should be the same width and height",
-    "Disable rather than hide navigation arrows when at the boundary to maintain spatial stability",
-    "Provide aria-current='page' on the active page item for assistive technology",
-  ],
-
-  donts: [
-    "Do not use pagination for fewer than 2 pages — hide the component entirely if totalPages <= 1",
-    "Do not show all page numbers when totalPages is large — use truncation with ellipsis",
-    "Do not change the page on hover — only on explicit click or Enter keypress",
-    "Do not remove disabled arrows from the DOM; keep them visible but inert for layout consistency",
-    "Do not rely solely on color to indicate the active page — use fill, weight, or shape differences",
-    "Do not use pagination for infinite scroll content — use load-more or virtual scrolling instead",
-    "Do not place pagination inside scrollable containers where it might be hidden from view",
-  ],
-};