@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Select/Select.contract.json

@@ -1,259 +0,0 @@
-{
-  "$schema": "https://usefragments.com/schemas/contract.v1.json",
-  "name": "Select",
-  "description": "Dropdown for choosing from a list of options. Use when there are more than 4-5 choices that would clutter the UI.",
-  "category": "forms",
-  "tags": ["select", "dropdown", "form", "options", "picker"],
-  "status": "stable",
-  "sourcePath": "src/components/Select/index.tsx",
-  "exportName": "Select",
-  "propsSummary": [
-    "children: node",
-    "value: string",
-    "defaultValue: string",
-    "onValueChange: function",
-    "onChange: function",
-    "open: boolean",
-    "defaultOpen: boolean",
-    "onOpenChange: function",
-    "required: boolean",
-    "name: string",
-    "placeholder: string",
-    "options: array",
-    "size: sm|md|lg (default: md)",
-    "variant: field|ghost (default: field)",
-    "className: string",
-    "label: string",
-    "helperText: string",
-    "error: union",
-    "disabled: boolean"
-  ],
-  "props": {
-    "children": {
-      "type": "node",
-      "description": "Select trigger and content when options prop is not used",
-      "required": false
-    },
-    "value": {
-      "type": "string",
-      "description": "Controlled selected value",
-      "required": false
-    },
-    "defaultValue": {
-      "type": "string",
-      "description": "Default selected value (uncontrolled)",
-      "required": false
-    },
-    "onValueChange": {
-      "type": "function",
-      "description": "Called when selection changes",
-      "required": false
-    },
-    "onChange": {
-      "type": "function",
-      "description": "Alias for onValueChange",
-      "required": false
-    },
-    "open": {
-      "type": "boolean",
-      "description": "Controlled open state of the dropdown",
-      "required": false
-    },
-    "defaultOpen": {
-      "type": "boolean",
-      "description": "Initial open state for uncontrolled usage",
-      "default": "false",
-      "required": false
-    },
-    "onOpenChange": {
-      "type": "function",
-      "description": "Called when dropdown open state changes",
-      "required": false
-    },
-    "required": {
-      "type": "boolean",
-      "description": "Whether a selection is required",
-      "required": false
-    },
-    "name": {
-      "type": "string",
-      "description": "Form field name",
-      "required": false
-    },
-    "placeholder": {
-      "type": "string",
-      "description": "Placeholder text when no value selected",
-      "required": false
-    },
-    "options": {
-      "type": "array",
-      "description": "Convenience options array for simple selects (alternative to compound Select.Item children)",
-      "required": false
-    },
-    "size": {
-      "type": "enum",
-      "description": "Size variant",
-      "default": "md",
-      "required": false,
-      "values": ["sm", "md", "lg"]
-    },
-    "variant": {
-      "type": "enum",
-      "description": "Visual treatment. \"ghost\" drops the field shell for a compact borderless control, for toolbars and dense rows. Pair with size=\"sm\".",
-      "default": "field",
-      "required": false,
-      "values": ["field", "ghost"]
-    },
-    "className": {
-      "type": "string",
-      "description": "Wrapper class name",
-      "required": false
-    },
-    "label": {
-      "type": "string",
-      "description": "Visible label text above the select",
-      "required": false
-    },
-    "helperText": {
-      "type": "string",
-      "description": "Helper text shown below the select",
-      "required": false
-    },
-    "error": {
-      "type": "union",
-      "description": "Show error styling. When a string is provided, it is displayed as an error message.",
-      "required": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "description": "Disable the select",
-      "default": "false",
-      "required": false
-    }
-  },
-  "usage": {
-    "when": [
-      "Choosing from a predefined list of options",
-      "More than 4-5 options that would clutter UI as radio buttons",
-      "Space-constrained forms",
-      "When users need to see all options at once"
-    ],
-    "whenNot": [
-      "Very few options (2-3) - use radio buttons",
-      "Users might type custom values - use Combobox",
-      "Multiple selections needed - use Checkbox group or MultiSelect",
-      "Actions, not selection - use Menu"
-    ],
-    "guidelines": [
-      "Include a placeholder that explains what to select",
-      "Use label prop for accessible field labeling",
-      "Use helperText for guidance and error for validation messages",
-      "Group related options with SelectGroup",
-      "Keep option text concise",
-      "Order options logically (alphabetical, by frequency, or by category)"
-    ],
-    "accessibility": [
-      "Full keyboard navigation support",
-      "Type-ahead search within options",
-      "Proper ARIA roles and attributes"
-    ]
-  },
-  "examples": [
-    {
-      "name": "Default",
-      "description": "Basic select dropdown",
-      "code": "<StatefulSelect placeholder=\"Select a fruit\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"apple\">Apple</Select.Item>\n    <Select.Item value=\"banana\">Banana</Select.Item>\n    <Select.Item value=\"orange\">Orange</Select.Item>\n    <Select.Item value=\"grape\">Grape</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
-    },
-    {
-      "name": "With Groups",
-      "description": "Options organized into groups",
-      "code": "<StatefulSelect placeholder=\"Select a country\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Group>\n      <Select.GroupLabel>North America</Select.GroupLabel>\n      <Select.Item value=\"us\">United States</Select.Item>\n      <Select.Item value=\"ca\">Canada</Select.Item>\n      <Select.Item value=\"mx\">Mexico</Select.Item>\n    </Select.Group>\n    <Select.Group>\n      <Select.GroupLabel>Europe</Select.GroupLabel>\n      <Select.Item value=\"uk\">United Kingdom</Select.Item>\n      <Select.Item value=\"de\">Germany</Select.Item>\n      <Select.Item value=\"fr\">France</Select.Item>\n    </Select.Group>\n  </Select.Content>\n</StatefulSelect>"
-    },
-    {
-      "name": "With Label and Helper Text",
-      "description": "Select with built-in label and helper text",
-      "code": "<StatefulSelect\n  label=\"Timezone\"\n  placeholder=\"Select a timezone\"\n  helperText=\"Used for reminders and calendar notifications.\"\n>\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"pt\">Pacific Time</Select.Item>\n    <Select.Item value=\"mt\">Mountain Time</Select.Item>\n    <Select.Item value=\"ct\">Central Time</Select.Item>\n    <Select.Item value=\"et\">Eastern Time</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
-    },
-    {
-      "name": "Error State",
-      "description": "Validation error with message",
-      "code": "<Select\n  label=\"Country\"\n  placeholder=\"Select a country\"\n  error=\"Please select a country\"\n>\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"us\">United States</Select.Item>\n    <Select.Item value=\"uk\">United Kingdom</Select.Item>\n  </Select.Content>\n</Select>"
-    },
-    {
-      "name": "With Disabled Options",
-      "description": "Some options are disabled",
-      "code": "<StatefulSelect placeholder=\"Select a plan\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"free\">Free</Select.Item>\n    <Select.Item value=\"pro\">Pro</Select.Item>\n    <Select.Item value=\"enterprise\" disabled>Enterprise (Contact Sales)</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
-    },
-    {
-      "name": "Scrollable List",
-      "description": "Long list with scroll hint — shows 4 items with half-peek of the 5th to indicate more",
-      "code": "<StatefulSelect placeholder=\"Select a timezone\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"utc-8\">Pacific Time (UTC-8)</Select.Item>\n    <Select.Item value=\"utc-7\">Mountain Time (UTC-7)</Select.Item>\n    <Select.Item value=\"utc-6\">Central Time (UTC-6)</Select.Item>\n    <Select.Item value=\"utc-5\">Eastern Time (UTC-5)</Select.Item>\n    <Select.Item value=\"utc-4\">Atlantic Time (UTC-4)</Select.Item>\n    <Select.Item value=\"utc+0\">GMT (UTC+0)</Select.Item>\n    <Select.Item value=\"utc+1\">Central European (UTC+1)</Select.Item>\n    <Select.Item value=\"utc+5.5\">India Standard (UTC+5:30)</Select.Item>\n    <Select.Item value=\"utc+8\">China Standard (UTC+8)</Select.Item>\n    <Select.Item value=\"utc+9\">Japan Standard (UTC+9)</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
-    },
-    {
-      "name": "Custom Max Visible Items",
-      "description": "Show 6 items before scrolling with half-peek scroll hint",
-      "code": "<StatefulSelect placeholder=\"Select a color\">\n  <Select.Trigger />\n  <Select.Content maxVisibleItems={6}>\n    <Select.Item value=\"red\">Red</Select.Item>\n    <Select.Item value=\"orange\">Orange</Select.Item>\n    <Select.Item value=\"yellow\">Yellow</Select.Item>\n    <Select.Item value=\"green\">Green</Select.Item>\n    <Select.Item value=\"blue\">Blue</Select.Item>\n    <Select.Item value=\"indigo\">Indigo</Select.Item>\n    <Select.Item value=\"violet\">Violet</Select.Item>\n    <Select.Item value=\"pink\">Pink</Select.Item>\n    <Select.Item value=\"teal\">Teal</Select.Item>\n    <Select.Item value=\"cyan\">Cyan</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
-    },
-    {
-      "name": "Disabled",
-      "description": "Disabled select",
-      "code": "<Select disabled placeholder=\"Select an option\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"1\">Option 1</Select.Item>\n  </Select.Content>\n</Select>"
-    },
-    {
-      "name": "Options Prop",
-      "description": "Convenience API for simple lists without manual Select.Item composition",
-      "code": "<StatefulSelect\n  placeholder=\"Select a team\"\n  options={[\n    { value: 'eng', label: 'Engineering' },\n    { value: 'design', label: 'Design' },\n    { value: 'pm', label: 'Product' },\n  ]}\n/>"
-    }
-  ],
-  "relations": [
-    {
-      "component": "Menu",
-      "relationship": "alternative",
-      "note": "Use Menu for action-based dropdowns"
-    },
-    {
-      "component": "Input",
-      "relationship": "sibling",
-      "note": "Use Input for free-form text entry"
-    },
-    {
-      "component": "Checkbox",
-      "relationship": "alternative",
-      "note": "Use Checkbox group for multiple selections"
-    }
-  ],
-  "contract": {
-    "propsSummary": [
-      "value: string | null - controlled selected value",
-      "onValueChange: (value: string | null) => void - selection handler",
-      "onChange: (value: string | null) => void - alias for onValueChange",
-      "label: string - visible label text",
-      "helperText: string - helper text below field",
-      "error: boolean | string - error styling and message",
-      "placeholder: string - placeholder text",
-      "disabled: boolean - disable select",
-      "size: sm|md|lg (default: md)",
-      "variant: field|ghost (default: field) - ghost is borderless, for toolbars",
-      "options: SelectOption[] - convenience API for simple option lists",
-      "maxVisibleItems: number - max visible options before scrolling (default 4)",
-      "Select.Trigger accepts an icon prop for a leading adornment"
-    ],
-    "a11yRules": ["A11Y_SELECT_KEYBOARD", "A11Y_SELECT_LABEL"]
-  },
-  "ai": {
-    "compositionPattern": "compound",
-    "subComponents": ["Trigger", "Content", "Item", "Group", "GroupLabel"],
-    "requiredChildren": ["Trigger", "Content"],
-    "childrenRequirement": "Select.Trigger and Select.Content are required for compound usage. Omit children entirely when using the options prop; the component generates the trigger, content, and items.",
-    "commonPatterns": [
-      "<Select placeholder=\"Select option\" options={[{ value: 'opt1', label: 'Option 1' }, { value: 'opt2', label: 'Option 2' }]} />",
-      "<Select placeholder=\"Select option\"><Select.Trigger /><Select.Content><Select.Item value=\"opt1\">{label1}</Select.Item><Select.Item value=\"opt2\">{label2}</Select.Item></Select.Content></Select>"
-    ]
-  },
-  "provenance": {
-    "source": "migrated",
-    "verified": false,
-    "frameworkSupport": "native",
-    "extractedAt": "2026-03-13T23:19:03.116Z"
-  }
-}

package/src/components/Switch/index.ts

@@ -1,3 +0,0 @@
-'use client';
-
-export { Switch, type SwitchProps, Toggle, type ToggleProps } from '../Toggle';

package/src/components/Theme/ThemeToggle.module.scss

@@ -1,91 +0,0 @@
-@use "../../tokens/variables" as *;
-@use "../../tokens/mixins" as *;
-
-// Local component tokens
-$fui-theme-toggle-sm-width: 32px !default;
-$fui-theme-toggle-sm-height: 32px !default;
-$fui-theme-toggle-sm-icon: 12px !default;
-$fui-theme-toggle-md-width: 32px !default;
-$fui-theme-toggle-md-height: 32px !default;
-$fui-theme-toggle-md-icon: 14px !default;
-$fui-theme-toggle-lg-width: 40px !default;
-$fui-theme-toggle-lg-height: 40px !default;
-$fui-theme-toggle-lg-icon: 18px !default;
-
-// ============================================
-// Theme Toggle - Fragmented Button Group
-// ============================================
-
-.toggleGroup {
-  display: inline-flex;
-  align-items: stretch;
-  gap: 0;
-  padding: 0;
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-}
-
-.toggleButton {
-  @include button-reset;
-  @include interactive-base;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  background-color: transparent;
-
-  &:hover:not(.toggleButtonActive) {
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
-
-  // Keyboard focus ring is supplied by @include interactive-base.
-
-  svg {
-    flex-shrink: 0;
-  }
-}
-
-.toggleButtonActive {
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  color: var(--fui-text-primary, $fui-text-primary);
-  box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
-}
-
-// Size variants
-.sizeSm {
-  .toggleButton {
-    width: var(--fui-theme-toggle-sm-width, $fui-theme-toggle-sm-width);
-    height: var(--fui-theme-toggle-sm-height, $fui-theme-toggle-sm-height);
-
-    svg {
-      width: var(--fui-theme-toggle-sm-icon, $fui-theme-toggle-sm-icon);
-      height: var(--fui-theme-toggle-sm-icon, $fui-theme-toggle-sm-icon);
-    }
-  }
-}
-
-.sizeMd {
-  .toggleButton {
-    width: var(--fui-theme-toggle-md-width, $fui-theme-toggle-md-width);
-    height: var(--fui-theme-toggle-md-height, $fui-theme-toggle-md-height);
-
-    svg {
-      width: var(--fui-theme-toggle-md-icon, $fui-theme-toggle-md-icon);
-      height: var(--fui-theme-toggle-md-icon, $fui-theme-toggle-md-icon);
-    }
-  }
-}
-
-.sizeLg {
-  .toggleButton {
-    width: var(--fui-theme-toggle-lg-width, $fui-theme-toggle-lg-width);
-    height: var(--fui-theme-toggle-lg-height, $fui-theme-toggle-lg-height);
-
-    svg {
-      width: var(--fui-theme-toggle-lg-icon, $fui-theme-toggle-lg-icon);
-      height: var(--fui-theme-toggle-lg-icon, $fui-theme-toggle-lg-icon);
-    }
-  }
-}

package/src/components/Toggle/Toggle.module.scss

@@ -1,244 +0,0 @@
-@use "../../tokens/variables" as *;
-@use "../../tokens/mixins" as *;
-
-// Local component tokens (web-proportioned: ~1.8:1 width:height ratio)
-$fui-toggle-width-sm: 1.857rem !default; // 26px
-$fui-toggle-width-md: 2.571rem !default; // 36px
-$fui-toggle-width-lg: 3.286rem !default; // 46px
-$fui-toggle-height-sm: 1.143rem !default; // 16px
-$fui-toggle-height-md: 1.429rem !default; // 20px
-$fui-toggle-height-lg: 1.857rem !default; // 26px
-$fui-toggle-thumb-sm: 0.857rem !default; // 12px
-$fui-toggle-thumb-md: 1.143rem !default; // 16px
-$fui-toggle-thumb-offset: 2px !default;
-
-.root {
-  --_switch-off-bg: light-dark(
-    color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-text-primary) 8%),
-    color-mix(in srgb, var(--fui-bg-elevated) 82%, var(--fui-text-primary) 18%)
-  );
-  --_switch-off-bg-hover: light-dark(
-    color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 12%),
-    color-mix(in srgb, var(--fui-bg-elevated) 76%, var(--fui-text-primary) 24%)
-  );
-  --_switch-off-border: light-dark(
-    color-mix(in srgb, var(--fui-border-strong) 72%, var(--fui-text-primary) 28%),
-    color-mix(in srgb, var(--fui-border-strong) 58%, var(--fui-text-primary) 42%)
-  );
-  --_switch-off-border-hover: light-dark(
-    color-mix(in srgb, var(--fui-border-strong) 58%, var(--fui-text-primary) 42%),
-    color-mix(in srgb, var(--fui-border-strong) 44%, var(--fui-text-primary) 56%)
-  );
-  --_switch-thumb-bg: light-dark(
-    color-mix(in srgb, var(--fui-bg-primary) 98%, white 2%),
-    color-mix(in srgb, var(--fui-bg-primary) 56%, var(--fui-text-primary) 44%)
-  );
-  --_switch-thumb-border: light-dark(
-    color-mix(in srgb, var(--fui-border-strong) 68%, var(--fui-text-primary) 32%),
-    color-mix(in srgb, var(--fui-border-strong) 45%, var(--fui-text-primary) 55%)
-  );
-
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  cursor: pointer;
-  font-family: var(--fui-font-sans, $fui-font-sans);
-  -webkit-tap-highlight-color: transparent;
-
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: max(100%, var(--fui-target-size-min, #{$fui-target-size-min}));
-    height: var(--fui-target-size-min, $fui-target-size-min);
-    transform: translateY(-50%);
-  }
-}
-
-.rootWithHelper {
-  align-items: flex-start;
-
-  .track {
-    margin-top: var(--fui-space-0-5, $fui-space-0-5);
-  }
-}
-
-// iOS-style track: solid fill, clean pill shape
-.track {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  border-radius: var(--fui-radius-full, $fui-radius-full);
-  border: 1px solid var(--_switch-off-border);
-  background-color: var(--_switch-off-bg);
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 26%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, var(--fui-text-primary, $fui-text-primary) 5%, transparent);
-  transition:
-    background-color var(--fui-transition-normal, $fui-transition-normal),
-    border-color var(--fui-transition-normal, $fui-transition-normal),
-    box-shadow var(--fui-transition-normal, $fui-transition-normal);
-
-  .root[data-checked] & {
-    background-color: var(--fui-button-primary-base, $fui-color-accent);
-    border-color: var(
-      --fui-button-primary-border,
-      var(--fui-button-primary-base, #{$fui-color-accent})
-    );
-    box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
-  }
-
-  .root:not([data-disabled]):not([data-checked]) &:hover {
-    background-color: var(--_switch-off-bg-hover);
-    border-color: var(--_switch-off-border-hover);
-  }
-
-  .root:not([data-disabled])[data-checked] &:hover {
-    background-color: var(--fui-button-primary-hover, $fui-color-accent);
-    border-color: var(
-      --fui-button-primary-border-hover,
-      var(--fui-button-primary-hover, #{$fui-color-accent})
-    );
-  }
-
-  .root:focus-visible & {
-    @include field-shell-focus;
-  }
-}
-
-// Sm: 40×24
-.trackSm {
-  width: var(--fui-toggle-width-sm, $fui-toggle-width-sm);
-  height: var(--fui-toggle-height-sm, $fui-toggle-height-sm);
-  --_toggle-thumb-size: calc(var(--fui-toggle-height-sm, #{$fui-toggle-height-sm}) - 4px);
-  --_toggle-inset: 1px;
-  --_toggle-translate: calc(
-    var(--fui-toggle-width-sm, #{$fui-toggle-width-sm}) - var(--_toggle-thumb-size) - 4px
-  );
-}
-
-// Lg: 60×36
-.trackLg {
-  width: var(--fui-toggle-width-lg, $fui-toggle-width-lg);
-  height: var(--fui-toggle-height-lg, $fui-toggle-height-lg);
-  --_toggle-thumb-size: calc(var(--fui-toggle-height-lg, #{$fui-toggle-height-lg}) - 4px);
-  --_toggle-inset: 1px;
-  --_toggle-translate: calc(
-    var(--fui-toggle-width-lg, #{$fui-toggle-width-lg}) - var(--_toggle-thumb-size) - 4px
-  );
-}
-
-// Md: 51×31 (iOS standard)
-.trackMd {
-  width: var(--fui-toggle-width-md, $fui-toggle-width-md);
-  height: var(--fui-toggle-height-md, $fui-toggle-height-md);
-  --_toggle-thumb-size: calc(var(--fui-toggle-height-md, #{$fui-toggle-height-md}) - 4px);
-  --_toggle-inset: 1px;
-  --_toggle-translate: calc(
-    var(--fui-toggle-width-md, #{$fui-toggle-width-md}) - var(--_toggle-thumb-size) - 4px
-  );
-}
-
-.thumb {
-  position: absolute;
-  top: var(--_toggle-inset, $fui-toggle-thumb-offset);
-  left: var(--_toggle-inset, $fui-toggle-thumb-offset);
-  box-sizing: border-box;
-  width: var(--_toggle-thumb-size, $fui-toggle-thumb-md);
-  height: var(--_toggle-thumb-size, $fui-toggle-thumb-md);
-  border-radius: 50%;
-  pointer-events: none;
-  background-color: var(--_switch-thumb-bg);
-  border: 1px solid var(--_switch-thumb-border);
-  box-shadow:
-    0 1px 1px color-mix(in srgb, black 18%, transparent),
-    inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
-  transition:
-    transform var(--fui-transition-normal, $fui-transition-normal),
-    background-color var(--fui-transition-normal, $fui-transition-normal),
-    border-color var(--fui-transition-normal, $fui-transition-normal),
-    box-shadow var(--fui-transition-fast, $fui-transition-fast);
-
-  .root[data-checked] & {
-    transform: translateX(var(--_toggle-translate, 0));
-    background-color: var(--fui-button-primary-color, #fff);
-    border-color: color-mix(
-      in srgb,
-      var(--fui-button-primary-active, #{$fui-color-accent}) 28%,
-      transparent
-    );
-  }
-
-  .root:active:not([data-disabled]) & {
-    box-shadow: var(--fui-shadow-md, $fui-shadow-md);
-  }
-}
-
-.content {
-  flex: 1;
-}
-
-.label {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-  user-select: none;
-}
-
-.labelSm {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-}
-
-.labelLg {
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
-}
-
-.helper {
-  display: block;
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  margin-top: var(--fui-space-1, $fui-space-1);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
-}
-
-.helperSm {
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
-}
-
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .track {
-    border: 2px solid var(--fui-text-primary, $fui-text-primary);
-  }
-
-  .root[data-checked] .track {
-    border-color: var(--fui-button-primary-base, $fui-color-accent);
-  }
-}
-
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
-@media (prefers-reduced-motion: reduce) {
-  .thumb {
-    transition: none;
-  }
-
-  .track {
-    transition: none;
-  }
-}