@sarjallab09/figma-intelligence 1.1.0 → 1.2.1

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

@@ -1,142 +0,0 @@
-import type { ComponentKnowledge } from "../types.js";
-
-export const radioKnowledge: ComponentKnowledge = {
-  description:
-    "Exclusive selection control | Single choice from group | Mutually exclusive options",
-
-  stateSpecifications: [
-    { state: "Unchecked-Default", visualChange: "Empty circle with border", opacity: "1", cursorWeb: "pointer", usage: "Idle option not yet selected by the user" },
-    { state: "Unchecked-Hover", visualChange: "Border darkens, subtle fill tint on circle", opacity: "1", cursorWeb: "pointer", usage: "Pointer over an unselected radio" },
-    { state: "Unchecked-Focus", visualChange: "Focus ring around circle, no fill change", opacity: "1", cursorWeb: "default", usage: "Keyboard navigation lands on the option" },
-    { state: "Checked-Default", visualChange: "Filled inner dot appears inside circle", opacity: "1", cursorWeb: "pointer", usage: "Currently selected option in the group" },
-    { state: "Checked-Hover", visualChange: "Filled dot with darker border highlight", opacity: "1", cursorWeb: "pointer", usage: "Pointer hovers over the active selection" },
-    { state: "Disabled-Unchecked", visualChange: "Faded circle, muted border", opacity: "0.4", cursorWeb: "not-allowed", usage: "Option unavailable for selection" },
-    { state: "Disabled-Checked", visualChange: "Faded filled dot, muted border", opacity: "0.4", cursorWeb: "not-allowed", usage: "Selected but locked option" },
-  ],
-
-  propertyDescriptions: {
-    checked: "Whether this radio is the currently selected option in the group",
-    disabled: "Prevents interaction and dims the radio visually",
-    name: "Shared group name that enforces mutual exclusivity across radios",
-    value: "Unique value submitted when this option is selected",
-    label: "Visible text describing the option; always required",
-    helperText: "Optional secondary line clarifying the option's meaning",
-    error: "Displays validation styling and error message for the group",
-    size: "Controls the diameter of the radio circle and label font size",
-    orientation: "Vertical (stacked) or horizontal (inline) layout for the group",
-  },
-
-  sizeSpecifications: [
-    { size: "sm", height: "16px", paddingLR: "4px", fontSize: "12px", iconSize: "8px", borderRadius: "50%" },
-    { size: "md", height: "20px", paddingLR: "6px", fontSize: "14px", iconSize: "10px", borderRadius: "50%" },
-    { size: "lg", height: "24px", paddingLR: "8px", fontSize: "16px", iconSize: "12px", borderRadius: "50%" },
-    { size: "xl", height: "28px", paddingLR: "10px", fontSize: "18px", iconSize: "14px", borderRadius: "50%" },
-    { size: "compact", height: "14px", paddingLR: "2px", fontSize: "11px", iconSize: "6px", borderRadius: "50%" },
-  ],
-
-  designTokenBindings: [
-    { property: "circle-border", tokenName: "color/border/interactive", role: "Outer ring of unselected radio", fallback: "#8D8D8D" },
-    { property: "dot-fill", tokenName: "color/icon/interactive", role: "Inner dot fill when selected", fallback: "#0F62FE" },
-    { property: "circle-bg", tokenName: "color/field/01", role: "Background of the radio circle", fallback: "#FFFFFF" },
-    { property: "label-text", tokenName: "color/text/primary", role: "Label text beside the radio", fallback: "#161616" },
-    { property: "focus-ring", tokenName: "color/focus", role: "Keyboard focus outline", fallback: "#0F62FE" },
-    { property: "error-border", tokenName: "color/support/error", role: "Circle border when group is invalid", fallback: "#DA1E28" },
-    { property: "disabled-fill", tokenName: "color/disabled/02", role: "Muted fill for disabled state", fallback: "#C6C6C6" },
-  ],
-
-  structureRules: [
-    "Radios must always be grouped inside a <fieldset> with a <legend> labelling the question",
-    "Each radio input must have an associated <label> element linked via htmlFor/id",
-    "Only one radio in a group may have checked=true at any time",
-    "The inner dot must be centered within the circle and scale proportionally with size",
-    "Label text sits to the right (LTR) or left (RTL) of the circle with consistent gap",
-    "Helper text, if present, aligns below the label at the same inline-start position",
-    "Error messages render below the entire radio group, not per individual option",
-  ],
-
-  typeHierarchyRules: [
-    "Label uses body-compact-01 for md size, body-compact-02 for lg size",
-    "Helper text is one step smaller than its label counterpart",
-    "Error message uses body-compact-01 in the support-error color",
-    "Legend text uses heading-compact-01 to distinguish the group question from options",
-    "Label and helper text must maintain a minimum 4.5:1 contrast ratio",
-    "Disabled label text drops to 3:1 ratio but must still be legible",
-    "No text truncation; labels should wrap if they exceed the container width",
-  ],
-
-  interactionRules: [
-    { event: "click", trigger: "User clicks on circle or label", action: "Select this radio and deselect any other checked radio in the group" },
-    { event: "keydown:ArrowDown/ArrowRight", trigger: "Focus is on a radio in the group", action: "Move focus and selection to the next radio, wrapping to first" },
-    { event: "keydown:ArrowUp/ArrowLeft", trigger: "Focus is on a radio in the group", action: "Move focus and selection to the previous radio, wrapping to last" },
-    { event: "keydown:Tab", trigger: "Focus is on any radio in the group", action: "Move focus out of the radio group to the next focusable element" },
-    { event: "keydown:Space", trigger: "Focus is on an unchecked radio", action: "Select the focused radio" },
-    { event: "focus", trigger: "Keyboard navigates into the group", action: "Focus lands on the currently checked radio or the first radio if none checked" },
-  ],
-
-  contentGuidance: [
-    "Keep option labels concise — ideally one line of text",
-    "Write labels as noun phrases, not full sentences (e.g. 'Standard shipping' not 'I want standard shipping')",
-    "Present options in a logical order: most common first or in ascending/descending value",
-    "Use a legend that clearly frames the question — e.g. 'Payment method'",
-    "Limit groups to 7 or fewer options; use a select/dropdown for longer lists",
-    "Avoid negative phrasing in labels — prefer 'Opt out' over 'Do not include'",
-    "If helper text is needed, use it sparingly and only on options that need clarification",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "≥ 1056px (lg)", behavior: "Horizontal layout if 4 or fewer options; otherwise vertical stack" },
-    { breakpoint: "672–1055px (md)", behavior: "Vertical stack recommended; horizontal only for 2–3 short-label options" },
-    { breakpoint: "< 672px (sm)", behavior: "Always vertical stack; label wraps, hit target fills full width" },
-    { breakpoint: "Touch devices", behavior: "Minimum 44×44px touch target around circle and label area" },
-    { breakpoint: "RTL layouts", behavior: "Circle moves to inline-end, label to inline-start; arrow key directions invert" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Radio groups must be perceivable, operable, and understandable by assistive technology users. The <fieldset>/<legend> pattern ensures screen readers announce the group question.",
-    requirements: [
-      { requirement: "Each radio must have role='radio' and be inside a group with role='radiogroup'", level: "A", notes: "Native <input type='radio'> in <fieldset> satisfies this automatically" },
-      { requirement: "The group must have an accessible name via <legend> or aria-labelledby", level: "A", notes: "Visible legend preferred over aria-label" },
-      { requirement: "Arrow keys must move both focus and selection within the group", level: "A", notes: "Roving tabindex pattern recommended" },
-      { requirement: "Only the active/checked radio should be in the tab order (tabindex 0)", level: "A", notes: "Other radios get tabindex -1" },
-      { requirement: "State change must be announced via aria-checked", level: "A", notes: "Native inputs handle this; custom implementations must manage it" },
-      { requirement: "Error messages must be linked to the group via aria-describedby", level: "A", notes: "Use a live region or aria-invalid on the group container" },
-      { requirement: "Focus indicator must have at least 3:1 contrast against adjacent colors", level: "AA", notes: "WCAG 2.4.11 focus appearance" },
-    ],
-    outro: [
-      "Test with VoiceOver, NVDA, and JAWS to confirm group name and option announcement",
-      "Verify arrow-key roving works correctly when radios wrap between first and last",
-      "Ensure disabled radios are excluded from the arrow-key cycle",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Only one radio in a group can be selected at a time", platform: "All", expectedResult: "Selecting a new radio deselects the previous one" },
-    { check: "Arrow keys cycle through options", platform: "Web", expectedResult: "Focus and selection move; wrap at boundaries" },
-    { check: "Tab key exits the group", platform: "Web", expectedResult: "Focus moves to next focusable element outside the group" },
-    { check: "Disabled radios cannot be selected", platform: "All", expectedResult: "Click and keyboard interactions are blocked" },
-    { check: "Error state displays below the group", platform: "All", expectedResult: "Red border on circles and error text visible" },
-    { check: "Touch target meets 44px minimum", platform: "Mobile", expectedResult: "Tapping near the radio reliably triggers selection" },
-    { check: "Screen reader announces group label and selected state", platform: "Web", expectedResult: "'Payment method, Standard shipping, selected, radio button 1 of 3'" },
-  ],
-
-  dos: [
-    "Always provide a default selected option when one choice is strongly recommended",
-    "Use fieldset/legend to semantically group radios under a question",
-    "Keep the number of options between 2 and 7",
-    "Vertically stack options on small viewports for easy scanning",
-    "Use helper text to clarify options that might be ambiguous",
-    "Ensure the selected dot color meets 3:1 contrast against the circle background",
-    "Provide clear error messaging at the group level when validation fails",
-  ],
-
-  donts: [
-    "Don't use radios for toggling a single binary setting — use a toggle or checkbox instead",
-    "Don't mix radios and checkboxes in the same option group",
-    "Don't pre-select an option in legal or consent scenarios where explicit choice is required",
-    "Don't rely on color alone to indicate selected state — the filled dot shape is essential",
-    "Don't place radios in a horizontal row if labels vary significantly in length",
-    "Don't omit the group label/legend — screen readers need it for context",
-    "Don't disable all options in a group without explaining why via helper text",
-  ],
-};

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

@@ -1,282 +0,0 @@
-/**
- * range-slider.ts — Gold-standard design knowledge for Range Slider (dual-thumb) components
- */
-import type { ComponentKnowledge } from "../types.js";
-
-export const rangeSliderKnowledge: ComponentKnowledge = {
-  description:
-    "Dual-thumb range slider | Min/max value selection | Continuous or stepped range input with two draggable handles",
-
-  stateSpecifications: [
-    {
-      state: "Default",
-      visualChange: "Track shows filled range between two thumbs; unfilled portions are muted; thumbs are at their current positions",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Resting state — both thumbs are interactive and positioned at their current values",
-    },
-    {
-      state: "Hover (Thumb)",
-      visualChange: "Hovered thumb increases in size slightly or gains a subtle glow/ring effect",
-      opacity: "1",
-      cursorWeb: "grab",
-      usage: "Mouse cursor enters a thumb's hit area — indicates the thumb can be dragged",
-    },
-    {
-      state: "Active (Dragging)",
-      visualChange: "Active thumb is visually elevated (shadow or scale-up); value tooltip appears above showing current value",
-      opacity: "1",
-      cursorWeb: "grabbing",
-      usage: "User is actively dragging a thumb to adjust the range boundary",
-    },
-    {
-      state: "Focus",
-      visualChange: "Focused thumb shows a 2px focus ring; keyboard adjustments are possible",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "A thumb receives keyboard focus via Tab navigation for keyboard-driven value adjustment",
-    },
-    {
-      state: "Disabled",
-      visualChange: "Track and both thumbs are muted/desaturated; no interaction possible",
-      opacity: "0.4",
-      cursorWeb: "not-allowed",
-      usage: "Range selection is unavailable — the component is non-interactive",
-    },
-    {
-      state: "Error",
-      visualChange: "Track filled portion turns error color; error message appears below; thumbs may show error ring",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Selected range is invalid — e.g. range too narrow or too wide for business rules",
-    },
-  ],
-
-  propertyDescriptions: {
-    min: "Minimum possible value for the slider range — the leftmost position of the track",
-    max: "Maximum possible value for the slider range — the rightmost position of the track",
-    step: "Increment between selectable values — determines the snap points on the track (e.g. 1, 5, 10)",
-    value: "Tuple [minValue, maxValue] representing the current range selection; controlled by parent component",
-    onChange: "Callback invoked with the new [minValue, maxValue] tuple when either thumb is moved",
-    size: "Dimensional preset — Small, Medium, or Large — controlling track height, thumb size, and label font size",
-    label: "Visible label text for the range slider; positioned above the track",
-    showValues: "When true, displays the current min and max values as text labels at each end or above each thumb",
-    showTooltip: "When true, shows a value tooltip above the thumb while dragging or on hover",
-    marks: "Array of labeled tick marks to display along the track at specific value positions",
-    disabled: "When true, the slider is non-interactive; both thumbs and the track are muted",
-    minRange: "Minimum allowed distance between the two thumbs; prevents them from being too close together",
-    maxRange: "Maximum allowed distance between the two thumbs; constrains the range width",
-  },
-
-  sizeSpecifications: [
-    {
-      size: "Small",
-      height: "4px (track)",
-      paddingLR: "0px",
-      fontSize: "12px",
-      iconSize: "14px (thumb)",
-      borderRadius: "2px (track) / 50% (thumb)",
-    },
-    {
-      size: "Medium",
-      height: "6px (track)",
-      paddingLR: "0px",
-      fontSize: "14px",
-      iconSize: "18px (thumb)",
-      borderRadius: "3px (track) / 50% (thumb)",
-    },
-    {
-      size: "Large",
-      height: "8px (track)",
-      paddingLR: "0px",
-      fontSize: "16px",
-      iconSize: "24px (thumb)",
-      borderRadius: "4px (track) / 50% (thumb)",
-    },
-  ],
-
-  designTokenBindings: [
-    {
-      property: "Track Background",
-      tokenName: "$range-slider-track-bg",
-      role: "Unfilled track background color (portions outside the selected range)",
-      fallback: "#E4E7EC",
-    },
-    {
-      property: "Track Fill",
-      tokenName: "$range-slider-fill",
-      role: "Filled track color between the two thumbs (the selected range)",
-      fallback: "#2563EB",
-    },
-    {
-      property: "Thumb Background",
-      tokenName: "$range-slider-thumb-bg",
-      role: "Background fill of both thumb elements",
-      fallback: "#FFFFFF",
-    },
-    {
-      property: "Thumb Border",
-      tokenName: "$range-slider-thumb-border",
-      role: "Border around both thumb elements",
-      fallback: "#2563EB",
-    },
-    {
-      property: "Thumb Shadow",
-      tokenName: "$range-slider-thumb-shadow",
-      role: "Elevation shadow on thumb elements",
-      fallback: "0 1px 3px rgba(0, 0, 0, 0.2)",
-    },
-    {
-      property: "Thumb Hover Ring",
-      tokenName: "$range-slider-thumb-hover",
-      role: "Subtle ring or glow effect on thumb hover",
-      fallback: "rgba(37, 99, 235, 0.15)",
-    },
-    {
-      property: "Tooltip Background",
-      tokenName: "$range-slider-tooltip-bg",
-      role: "Background of the value tooltip shown during dragging",
-      fallback: "#101828",
-    },
-    {
-      property: "Tooltip Text",
-      tokenName: "$range-slider-tooltip-text",
-      role: "Text color inside the value tooltip",
-      fallback: "#FFFFFF",
-    },
-    {
-      property: "Label Color",
-      tokenName: "$range-slider-label",
-      role: "Label text color above the slider",
-      fallback: "#344054",
-    },
-    {
-      property: "Value Text",
-      tokenName: "$range-slider-value-text",
-      role: "Text color for the displayed min/max values",
-      fallback: "#667085",
-    },
-    {
-      property: "Mark Color",
-      tokenName: "$range-slider-mark",
-      role: "Color for tick marks along the track",
-      fallback: "#98A2B3",
-    },
-    {
-      property: "Focus Ring",
-      tokenName: "$focus-ring",
-      role: "Keyboard focus indicator around the focused thumb",
-      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
-    },
-  ],
-
-  structureRules: [
-    "Container uses vertical Auto Layout: label (optional) → slider track with thumbs → value labels/marks (optional)",
-    "Track is a horizontal bar with the filled range portion colored between the two thumb positions",
-    "Two thumb elements are positioned absolutely along the track based on their respective values",
-    "Each thumb is a circular element (border-radius: 50%) centered vertically on the track",
-    "Thumb hit area extends beyond the visible thumb to at least 44x44px for touch accessibility",
-    "Value tooltip is positioned above the active thumb using absolute positioning with a small arrow pointer",
-    "Tick marks are positioned along the track at values specified in the marks array",
-    "Mark labels are positioned below the track, centered on their corresponding tick mark",
-    "The filled track segment starts at the min thumb position and ends at the max thumb position",
-    "Thumbs cannot cross each other — the min thumb is constrained to values less than or equal to the max thumb",
-  ],
-
-  typeHierarchyRules: [
-    "Label text uses Medium weight (500) at the standard fontSize for the size preset",
-    "Value display text uses Regular weight (400) at the same fontSize or one step smaller",
-    "Tooltip text uses Medium weight (500) at 12px with inverted (light-on-dark) color scheme",
-    "Mark labels use Regular weight (400) at 10-12px in a muted color",
-    "All numeric values should use tabular/monospace figures to prevent layout shifts during dragging",
-  ],
-
-  interactionRules: [
-    { event: "Drag Thumb", trigger: "Pointer down on a thumb then drag horizontally", action: "Move the thumb along the track; update value in real-time; fire onChange continuously" },
-    { event: "Click Track", trigger: "Click/tap on the track between or outside the thumbs", action: "Move the nearest thumb to the clicked position; fire onChange" },
-    { event: "Hover Thumb", trigger: "Pointer enters a thumb's hit area", action: "Show hover ring effect; cursor changes to 'grab'" },
-    { event: "Focus Thumb", trigger: "Tab key reaches a thumb element", action: "Focus ring appears on the thumb; ready for keyboard adjustment" },
-    { event: "Arrow Right/Up", trigger: "Arrow key while a thumb is focused", action: "Increase the thumb value by one step; fire onChange" },
-    { event: "Arrow Left/Down", trigger: "Arrow key while a thumb is focused", action: "Decrease the thumb value by one step; fire onChange" },
-    { event: "Page Up", trigger: "Page Up while a thumb is focused", action: "Increase the thumb value by 10 steps (or 10% of range); fire onChange" },
-    { event: "Page Down", trigger: "Page Down while a thumb is focused", action: "Decrease the thumb value by 10 steps (or 10% of range); fire onChange" },
-    { event: "Home", trigger: "Home key while a thumb is focused", action: "Set the thumb to its minimum allowed value (min for low thumb, low thumb value for high thumb)" },
-    { event: "End", trigger: "End key while a thumb is focused", action: "Set the thumb to its maximum allowed value (high thumb value for low thumb, max for high thumb)" },
-    { event: "Touch Drag", trigger: "Touch start + move on a thumb", action: "Same as pointer drag; ensure no page scroll while dragging" },
-  ],
-
-  contentGuidance: [
-    "Label the slider clearly with the dimension being controlled: 'Price range', 'Distance', 'Age range'",
-    "Always display the current min and max values so users know their exact selection",
-    "Use units in value displays: '$50 - $200', '10km - 50km' — not just raw numbers",
-    "For financial values, use appropriate formatting with currency symbols and separators",
-    "Consider showing the full range bounds (min and max) at the track endpoints for context",
-    "Use tick marks with labels for sliders with discrete, meaningful stops (e.g. t-shirt sizes, price tiers)",
-    "Tooltip values should match the format of the displayed value labels for consistency",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "Mobile (<768px)", behavior: "Slider takes full container width; thumb size increases to 24px minimum for touch; value labels may stack vertically" },
-    { breakpoint: "Tablet (768-1023px)", behavior: "Standard slider width; comfortable thumb sizes; value labels positioned inline" },
-    { breakpoint: "Desktop (1024-1439px)", behavior: "Standard layout; tooltips appear on hover/drag; mark labels fully visible" },
-    { breakpoint: "Ultra-wide (>=1440px)", behavior: "Slider width remains capped at container max-width; does not scale with viewport" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Range sliders use two separate slider ARIA roles to enable independent control of min and max values. Each thumb must be independently operable via keyboard with proper value announcements.",
-    requirements: [
-      { requirement: "Slider Role (Min)", level: "A", notes: "Min thumb must have role='slider' with aria-valuemin, aria-valuemax (capped at max thumb), and aria-valuenow" },
-      { requirement: "Slider Role (Max)", level: "A", notes: "Max thumb must have role='slider' with aria-valuemin (capped at min thumb), aria-valuemax, and aria-valuenow" },
-      { requirement: "Accessible Labels", level: "A", notes: "Each thumb needs a distinct aria-label: 'Minimum price' and 'Maximum price' to differentiate them" },
-      { requirement: "Value Text", level: "A", notes: "Use aria-valuetext to provide formatted values (e.g. '$50') instead of raw numbers" },
-      { requirement: "Keyboard Navigation", level: "A", notes: "Arrow keys change value by step; Page Up/Down by 10x step; Home/End to boundaries" },
-      { requirement: "Tab Order", level: "A", notes: "Both thumbs must be in the tab order; Tab moves between thumbs; the min thumb comes first" },
-      { requirement: "Contrast", level: "AA", notes: "Track fill and thumbs must meet 3:1 non-text contrast against the background; value text must meet 4.5:1" },
-      { requirement: "Touch Target", level: "AA", notes: "Each thumb's interactive area must be at least 44x44px on touch devices" },
-      { requirement: "Value Announcement", level: "AA", notes: "Screen readers should announce the new value as the thumb is moved via keyboard" },
-    ],
-    outro: [
-      "Test that both thumbs can be independently controlled via keyboard without the values crossing",
-      "Verify screen readers announce the correct formatted value (aria-valuetext) when thumbs move",
-      "Ensure the relationship between the two thumbs is clear — use a group label like 'Price range'",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Default Render", platform: "All", expectedResult: "Track shows filled range between two thumbs; unfilled portions are muted" },
-    { check: "Drag Min Thumb", platform: "All", expectedResult: "Min thumb moves along track; value updates in real-time; cannot cross max thumb" },
-    { check: "Drag Max Thumb", platform: "All", expectedResult: "Max thumb moves along track; value updates in real-time; cannot cross min thumb" },
-    { check: "Track Click", platform: "All", expectedResult: "Clicking track moves the nearest thumb to the clicked position" },
-    { check: "Step Snapping", platform: "All", expectedResult: "Thumbs snap to valid step positions; no intermediate values" },
-    { check: "Value Display", platform: "All", expectedResult: "Current min and max values are displayed with correct formatting and units" },
-    { check: "Tooltip", platform: "Web", expectedResult: "Value tooltip appears above the active thumb during dragging; shows formatted value" },
-    { check: "Keyboard Control", platform: "Web", expectedResult: "Arrow keys change value by step; Page Up/Down by 10x; Home/End to boundaries" },
-    { check: "Min Range Constraint", platform: "All", expectedResult: "Thumbs cannot be closer than minRange; movement stops at the constraint boundary" },
-    { check: "Max Range Constraint", platform: "All", expectedResult: "Thumbs cannot be farther apart than maxRange; movement stops at the constraint boundary" },
-    { check: "Disabled State", platform: "All", expectedResult: "Track and thumbs are muted; no drag, click, or keyboard interaction" },
-    { check: "Screen Reader", platform: "Web", expectedResult: "Both thumbs announce slider role, label, and current formatted value" },
-    { check: "Touch Target", platform: "Mobile", expectedResult: "Each thumb has at least 44x44px touch area; drag works on touch devices without page scroll" },
-    { check: "RTL Support", platform: "Web", expectedResult: "Track direction reverses; min thumb on right, max thumb on left; keyboard directions adjust" },
-  ],
-
-  dos: [
-    "Give each thumb a distinct aria-label so screen readers can differentiate them (e.g. 'Minimum' and 'Maximum')",
-    "Use aria-valuetext to announce formatted values with units ('$50') instead of raw numbers",
-    "Display current values prominently so users always know their exact selection",
-    "Prevent thumbs from crossing each other — the min value must always be less than or equal to the max value",
-    "Support both drag interaction and keyboard step-by-step adjustment for accessibility",
-    "Enlarge thumb hit areas on touch devices to at least 44x44px for comfortable interaction",
-    "Use tick marks with labels for sliders with meaningful discrete stops",
-  ],
-
-  donts: [
-    "Do not use a range slider for simple single-value selection — use a standard slider instead",
-    "Do not allow thumbs to overlap or cross — enforce min/max constraints",
-    "Do not fire onChange only on drag-end — provide continuous updates during dragging for real-time feedback",
-    "Do not make the track thinner than 4px — it must be a visible, clickable target",
-    "Do not use a range slider for precise numeric entry — pair with input fields for exact values",
-    "Do not omit value labels — users need to see the exact numbers, not just relative positions",
-    "Do not use the same aria-label for both thumbs — they must be distinguishable by screen readers",
-  ],
-};