@vielzeug/refine 2.1.0 → 2.1.3

package/dist/stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.cjs","names":[],"sources":["../src/content/stepper/stepper.ts"],"sourcesContent":["import {\n  createContext,\n  define,\n  html,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed, signal, type Readable } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createInteraction, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { isStepNavigable } from './_is-step-navigable';\nimport componentStyles from './stepper.css?inline';\n\n// ── Context ─────────────────────────────────────────────────────────────────\n//\n// ore-step derives all of its parent-relative state (current/completed/navigable/\n// index/total/color/size/orientation) from this context instead of ore-stepper\n// pushing 8 attributes onto every child on every change. Matches the\n// provide()/inject() coordination already used by ore-tabs/ore-tab-item,\n// ore-radio-group/ore-radio, and ore-list/ore-list-item — ore-stepper was\n// previously the one outlier doing manual `querySelectorAll` + `setAttribute`\n// fan-out, which meant every reactive change re-walked and re-wrote every step\n// regardless of whether that step's own state actually changed.\n\n/** Context provided by ore-stepper to its ore-step children. */\nexport type StepperContext = {\n  clickable: Readable<boolean>;\n  color: Readable<ThemeColor | undefined>;\n  currentValue: Readable<string | undefined>;\n  linear: Readable<boolean>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  /** Ordered `value`s of every sibling `ore-step`, used to derive index/total/completed. */\n  stepValues: Readable<string[]>;\n};\n/** Injection key for the stepper context. */\nexport const STEPPER_CTX = createContext<StepperContext>('StepperContext');\n\nexport type OreStepperEvents = {\n  change: { value: string };\n};\n\nexport type OreStepperProps = {\n  /** When true, steps are clickable/keyboard-focusable for navigation. Default: display-only progress. */\n  clickable?: boolean;\n  /** Theme color for the current/completed step indicators */\n  color?: ThemeColor;\n  /** Disables the whole stepper — no step is navigable regardless of `clickable` */\n  disabled?: boolean;\n  /** Accessible label for the nav landmark */\n  label?: string;\n  /**\n   * Restricts navigation to completed steps and the current step — steps ahead of the\n   * current one cannot be clicked or focused, even when `clickable` is set.\n   */\n  linear?: boolean;\n  /** Layout orientation — 'horizontal' (default, desktop) or 'vertical' (compact/mobile-friendly) */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** The `value` of the currently active `ore-step` */\n  value?: string;\n};\n\n/**\n * Displays progress through a sequence of numbered steps. Manages step selection and provides\n * shared state (current value, clickability, theming) to its `ore-step` children via context.\n * Can be purely informational (progress display) or interactive navigation.\n *\n * @element ore-stepper\n * @element ore-step - Child element for each step (auto-discovered)\n *\n * @attr {string} value - The value of the currently active step\n * @attr {boolean} clickable - Allow clicking/focusing steps to navigate\n * @attr {boolean} linear - Restrict navigation to completed + current steps only\n * @attr {boolean} disabled - Disables the whole stepper\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav landmark label (default: 'Progress')\n *\n * @fires change - Emitted when the active step changes via click/keyboard. detail: { value: string }\n *\n * @slot - `ore-step` elements\n *\n * @cssprop --stepper-connector-color - Color of the connector line between steps\n * @cssprop --stepper-connector-size - Thickness of the connector line\n * @cssprop --stepper-gap - Gap between steps\n *\n * @part nav - Navigation landmark element\n * @part list - Ordered list container holding the slotted steps\n *\n * @example\n * ```html\n * <!-- Display-only progress -->\n * <ore-stepper value=\"shipping\" color=\"primary\">\n *   <ore-step value=\"cart\">Cart</ore-step>\n *   <ore-step value=\"shipping\">Shipping</ore-step>\n *   <ore-step value=\"payment\">Payment</ore-step>\n * </ore-stepper>\n *\n * <!-- Clickable navigation, mobile-friendly vertical layout -->\n * <ore-stepper value=\"shipping\" clickable linear orientation=\"vertical\">\n *   <ore-step value=\"cart\">Cart</ore-step>\n *   <ore-step value=\"shipping\">Shipping</ore-step>\n *   <ore-step value=\"payment\" disabled>Payment</ore-step>\n * </ore-stepper>\n * ```\n */\nexport const STEPPER_TAG = 'ore-stepper' as const;\ndefine<OreStepperProps>(STEPPER_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    clickable: prop.bool(false),\n    label: prop.string('Progress'),\n    linear: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreStepperEvents>();\n    const slots = useSlots();\n\n    const getSteps = (): HTMLElement[] => Array.from(el.querySelectorAll(':scope > ore-step')) as HTMLElement[];\n\n    const focusStep = (step: HTMLElement | undefined) => {\n      step?.shadowRoot?.querySelector<HTMLElement>('button.control')?.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State — mirrors ore-tabs' `selectedValue` signal + `ensureSelection()` pattern\n    // ────────────────────────────────────────────────────────────────\n\n    const currentValue = signal<string | undefined>(props.value.value);\n\n    bind({ attr: { value: () => currentValue.value ?? null } });\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      if (!value || value === currentValue.value) return;\n\n      currentValue.value = value;\n\n      if (shouldEmit) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const steps = getSteps();\n\n      if (steps.length === 0) return;\n\n      const current = currentValue.value;\n      const hasCurrent = current ? steps.some((s) => s.getAttribute('value') === current) : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = steps.find((s) => !s.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      if (firstEnabled) setSelection(firstEnabled);\n    };\n\n    watch(props.value, (value) => {\n      currentValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context provided to ore-step children\n    // ────────────────────────────────────────────────────────────────\n\n    const stepValues = computed(() => {\n      void slots.elements().value;\n\n      return getSteps().map((s) => s.getAttribute('value') ?? '');\n    });\n\n    provide(STEPPER_CTX, {\n      clickable: computed(() => Boolean(props.clickable.value) && !props.disabled.value),\n      color: props.color,\n      currentValue,\n      linear: computed(() => Boolean(props.linear.value)),\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      stepValues,\n    });\n\n    // Deferred to `onMounted()` (mirrors ore-tabs' `ensureSelection()` timing) rather than an\n    // immediate `watch(stepValues, ...)` — `getSteps()` walks the *live* light DOM, and while the\n    // browser is still parsing this element's `ore-step` children (synchronously upgrading each\n    // one as its own tag is reached, which happens whenever `customElements.define()` already\n    // ran before this markup was parsed — exactly what a sandboxed live-preview iframe does by\n    // design), `stepValues` observes that child list mid-populate. Reading it eagerly here used\n    // to call `ensureSelection()` — and therefore write `currentValue` — once per step as each\n    // one was discovered, interleaved with that *same* step's own first render effect further\n    // down the reactive graph. That reentrant write during a child's not-yet-finished initial\n    // render corrupted its rendered output (the step's clickable/static control silently failed\n    // to mount at all). Onmounted's callback runs on a microtask, strictly after the whole\n    // synchronous parse (and thus every child) has completed, so `getSteps()` sees the final list.\n    onMounted(() => ensureSelection());\n\n    // ────────────────────────────────────────────────────────────────\n    // Keyboard Navigation (roving tabindex over navigable steps)\n    // ────────────────────────────────────────────────────────────────\n\n    const getNavigableSteps = (): HTMLElement[] => {\n      const steps = getSteps();\n      const values = steps.map((s) => s.getAttribute('value') ?? '');\n      const currentIndex = values.indexOf(currentValue.value ?? '');\n      const clickable = Boolean(props.clickable.value) && !props.disabled.value;\n      const linear = Boolean(props.linear.value);\n\n      return steps.filter((step, index) =>\n        isStepNavigable({\n          disabled: step.hasAttribute('disabled'),\n          index,\n          linear,\n          stepperClickable: clickable,\n          stepperCurrentIndex: currentIndex,\n        }),\n      );\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: getNavigableSteps,\n      loop: false,\n      onNavigate: (_action, index) => {\n        const steps = getNavigableSteps();\n        const nextStep = steps[index];\n\n        // Select BEFORE focusing: changing `currentValue` re-renders each step's\n        // control (the step's navigable/button node-slot depends on the current\n        // index), which destroys the previously focused button. Ripple flushes\n        // effects synchronously, so by the time focusStep() runs the replacement\n        // button exists.\n        const value = nextStep?.getAttribute('value');\n\n        if (value) setSelection(value, true);\n\n        focusStep(nextStep);\n      },\n      orientation: () => (props.orientation.value === 'vertical' ? 'vertical' : 'horizontal'),\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const handleStepClick = (e: Event) => {\n      const step = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-step');\n\n      if (!step || step.closest(STEPPER_TAG) !== el || !getNavigableSteps().includes(step)) return;\n\n      const value = step.getAttribute('value');\n\n      setSelection(value ?? undefined, true);\n      // The click focused the step's old control; the selection re-render replaced\n      // it — restore focus onto the new one (see onNavigate's ordering note).\n      focusStep(step);\n    };\n\n    const activateFocusedStep = (): void => {\n      const steps = getNavigableSteps();\n      const focusedStep = steps.find(\n        (step) => step === document.activeElement || step.shadowRoot?.activeElement === document.activeElement,\n      );\n      const value = focusedStep?.getAttribute('value');\n\n      if (value) {\n        setSelection(value, true);\n        focusStep(focusedStep);\n      }\n    };\n\n    const activationPress = createInteraction({ onPress: activateFocusedStep });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const steps = getNavigableSteps();\n\n      if (steps.length === 0) return;\n\n      const path = e.composedPath();\n      const stepFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-step',\n      );\n      const focused = stepFromEvent ? steps.indexOf(stepFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      activationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleStepClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <ol class=\"steps\" role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"stepper.cjs","names":[],"sources":["../src/content/stepper/stepper.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\nimport { createInteraction, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport { isStepNavigable } from './_is-step-navigable';\nimport componentStyles from './stepper.css?inline';\n\n// ── Context ─────────────────────────────────────────────────────────────────\n//\n// ore-step derives all of its parent-relative state (current/completed/navigable/\n// index/total/color/size/orientation) from this context instead of ore-stepper\n// pushing 8 attributes onto every child on every change. Matches the\n// provide()/inject() coordination already used by ore-tabs/ore-tab-item,\n// ore-radio-group/ore-radio, and ore-list/ore-list-item — ore-stepper was\n// previously the one outlier doing manual `querySelectorAll` + `setAttribute`\n// fan-out, which meant every reactive change re-walked and re-wrote every step\n// regardless of whether that step's own state actually changed.\n\n/** Context provided by ore-stepper to its ore-step children. */\nexport type StepperContext = {\n  clickable: Readable<boolean>;\n  color: Readable<ThemeColor | undefined>;\n  currentValue: Readable<string | undefined>;\n  linear: Readable<boolean>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  /** Ordered `value`s of every sibling `ore-step`, used to derive index/total/completed. */\n  stepValues: Readable<string[]>;\n};\n/** Injection key for the stepper context. */\nexport const STEPPER_CTX = createContext<StepperContext>('StepperContext');\n\nexport type OreStepperEvents = {\n  change: { value: string };\n};\n\nexport type OreStepperProps = {\n  /** When true, steps are clickable/keyboard-focusable for navigation. Default: display-only progress. */\n  clickable?: boolean;\n  /** Theme color for the current/completed step indicators */\n  color?: ThemeColor;\n  /** Disables the whole stepper — no step is navigable regardless of `clickable` */\n  disabled?: boolean;\n  /** Accessible label for the nav landmark */\n  label?: string;\n  /**\n   * Restricts navigation to completed steps and the current step — steps ahead of the\n   * current one cannot be clicked or focused, even when `clickable` is set.\n   */\n  linear?: boolean;\n  /** Layout orientation — 'horizontal' (default, desktop) or 'vertical' (compact/mobile-friendly) */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** The `value` of the currently active `ore-step` */\n  value?: string;\n};\n\n/**\n * Displays progress through a sequence of numbered steps. Manages step selection and provides\n * shared state (current value, clickability, theming) to its `ore-step` children via context.\n * Can be purely informational (progress display) or interactive navigation.\n *\n * @element ore-stepper\n * @element ore-step - Child element for each step (auto-discovered)\n *\n * @attr {string} value - The value of the currently active step\n * @attr {boolean} clickable - Allow clicking/focusing steps to navigate\n * @attr {boolean} linear - Restrict navigation to completed + current steps only\n * @attr {boolean} disabled - Disables the whole stepper\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav landmark label (default: 'Progress')\n *\n * @fires change - Emitted when the active step changes via click/keyboard. detail: { value: string }\n *\n * @slot - `ore-step` elements\n *\n * @cssprop --stepper-connector-color - Color of the connector line between steps\n * @cssprop --stepper-connector-size - Thickness of the connector line\n * @cssprop --stepper-gap - Gap between steps\n *\n * @part nav - Navigation landmark element\n * @part list - Ordered list container holding the slotted steps\n *\n * @example\n * ```html\n * <!-- Display-only progress -->\n * <ore-stepper value=\"shipping\" color=\"primary\">\n *   <ore-step value=\"cart\">Cart</ore-step>\n *   <ore-step value=\"shipping\">Shipping</ore-step>\n *   <ore-step value=\"payment\">Payment</ore-step>\n * </ore-stepper>\n *\n * <!-- Clickable navigation, mobile-friendly vertical layout -->\n * <ore-stepper value=\"shipping\" clickable linear orientation=\"vertical\">\n *   <ore-step value=\"cart\">Cart</ore-step>\n *   <ore-step value=\"shipping\">Shipping</ore-step>\n *   <ore-step value=\"payment\" disabled>Payment</ore-step>\n * </ore-stepper>\n * ```\n */\nexport const STEPPER_TAG = 'ore-stepper' as const;\ndefine<OreStepperProps>(STEPPER_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    clickable: prop.bool(false),\n    label: prop.string('Progress'),\n    linear: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreStepperEvents>();\n    const slots = useSlots();\n\n    const getSteps = (): HTMLElement[] => Array.from(el.querySelectorAll(':scope > ore-step')) as HTMLElement[];\n\n    const focusStep = (step: HTMLElement | undefined) => {\n      step?.shadowRoot?.querySelector<HTMLElement>('button.control')?.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State — mirrors ore-tabs' `selectedValue` signal + `ensureSelection()` pattern\n    // ────────────────────────────────────────────────────────────────\n\n    const currentValue = signal<string | undefined>(props.value.value);\n\n    bind({ attr: { value: () => currentValue.value ?? null } });\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      if (!value || value === currentValue.value) return;\n\n      currentValue.value = value;\n\n      if (shouldEmit) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const steps = getSteps();\n\n      if (steps.length === 0) return;\n\n      const current = currentValue.value;\n      const hasCurrent = current ? steps.some((s) => s.getAttribute('value') === current) : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = steps.find((s) => !s.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      if (firstEnabled) setSelection(firstEnabled);\n    };\n\n    watch(props.value, (value) => {\n      currentValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context provided to ore-step children\n    // ────────────────────────────────────────────────────────────────\n\n    const stepValues = computed(() => {\n      void slots.elements().value;\n\n      return getSteps().map((s) => s.getAttribute('value') ?? '');\n    });\n\n    provide(STEPPER_CTX, {\n      clickable: computed(() => Boolean(props.clickable.value) && !props.disabled.value),\n      color: props.color,\n      currentValue,\n      linear: computed(() => Boolean(props.linear.value)),\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      stepValues,\n    });\n\n    // Deferred to `onMounted()` (mirrors ore-tabs' `ensureSelection()` timing) rather than an\n    // immediate `watch(stepValues, ...)` — `getSteps()` walks the *live* light DOM, and while the\n    // browser is still parsing this element's `ore-step` children (synchronously upgrading each\n    // one as its own tag is reached, which happens whenever `customElements.define()` already\n    // ran before this markup was parsed — exactly what a sandboxed live-preview iframe does by\n    // design), `stepValues` observes that child list mid-populate. Reading it eagerly here used\n    // to call `ensureSelection()` — and therefore write `currentValue` — once per step as each\n    // one was discovered, interleaved with that *same* step's own first render effect further\n    // down the reactive graph. That reentrant write during a child's not-yet-finished initial\n    // render corrupted its rendered output (the step's clickable/static control silently failed\n    // to mount at all). Onmounted's callback runs on a microtask, strictly after the whole\n    // synchronous parse (and thus every child) has completed, so `getSteps()` sees the final list.\n    onMounted(() => {\n      ensureSelection();\n      return undefined;\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Keyboard Navigation (roving tabindex over navigable steps)\n    // ────────────────────────────────────────────────────────────────\n\n    const getNavigableSteps = (): HTMLElement[] => {\n      const steps = getSteps();\n      const values = steps.map((s) => s.getAttribute('value') ?? '');\n      const currentIndex = values.indexOf(currentValue.value ?? '');\n      const clickable = Boolean(props.clickable.value) && !props.disabled.value;\n      const linear = Boolean(props.linear.value);\n\n      return steps.filter((step, index) =>\n        isStepNavigable({\n          disabled: step.hasAttribute('disabled'),\n          index,\n          linear,\n          stepperClickable: clickable,\n          stepperCurrentIndex: currentIndex,\n        }),\n      );\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: getNavigableSteps,\n      loop: false,\n      onNavigate: (_action, index) => {\n        const steps = getNavigableSteps();\n        const nextStep = steps[index];\n\n        // Select BEFORE focusing: changing `currentValue` re-renders each step's\n        // control (the step's navigable/button node-slot depends on the current\n        // index), which destroys the previously focused button. Ripple flushes\n        // effects synchronously, so by the time focusStep() runs the replacement\n        // button exists.\n        const value = nextStep?.getAttribute('value');\n\n        if (value) setSelection(value, true);\n\n        focusStep(nextStep);\n      },\n      orientation: () => (props.orientation.value === 'vertical' ? 'vertical' : 'horizontal'),\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const handleStepClick = (e: Event) => {\n      const step = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-step');\n\n      if (!step || step.closest(STEPPER_TAG) !== el || !getNavigableSteps().includes(step)) return;\n\n      const value = step.getAttribute('value');\n\n      setSelection(value ?? undefined, true);\n      // The click focused the step's old control; the selection re-render replaced\n      // it — restore focus onto the new one (see onNavigate's ordering note).\n      focusStep(step);\n    };\n\n    const activateFocusedStep = (): void => {\n      const steps = getNavigableSteps();\n      const focusedStep = steps.find(\n        (step) => step === document.activeElement || step.shadowRoot?.activeElement === document.activeElement,\n      );\n      const value = focusedStep?.getAttribute('value');\n\n      if (value) {\n        setSelection(value, true);\n        focusStep(focusedStep);\n      }\n    };\n\n    const activationPress = createInteraction({ onPress: activateFocusedStep });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const steps = getNavigableSteps();\n\n      if (steps.length === 0) return;\n\n      const path = e.composedPath();\n      const stepFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-step',\n      );\n      const focused = stepFromEvent ? steps.indexOf(stepFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      activationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleStepClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <ol class=\"steps\" role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/stepper.js

@@ -1,13 +1,12 @@
-import { lifecycleSignal as e } from "./core/ore.js";
-import { createInteraction as t } from "./core/keyboard.js";
+import { createInteraction as e } from "./core/keyboard.js";
+import { lifecycleSignal as t } from "./core/ore.js";
 import { elementDirection as n } from "./core/direction.js";
 import { createListControl as r } from "./core/nav.js";
 import { disablableBundle as i, sizableBundle as a, themableBundle as o } from "./shared/prop-bundles.js";
 import { isStepNavigable as s } from "./content/stepper/_is-step-navigable.js";
 import c from "./content/stepper/stepper.css.js";
 import { bind as l, createContext as u, define as d, getHost as f, html as p, onCleanup as m, onMounted as h, prop as g, provide as _, useEmit as v, useSlots as y } from "@vielzeug/ore";
-import { computed as b, signal as x } from "@vielzeug/ripple";
-import { watch as S } from "@vielzeug/ripple/watch";
+import { computed as b, signal as x, watch as S } from "@vielzeug/ripple";
 //#region src/content/stepper/stepper.ts
 var C = u("StepperContext"), w = "ore-stepper";
 d(w, {
@@ -48,7 +47,9 @@ d(w, {
 			orientation: b(() => i.orientation.value ?? "horizontal"),
 			size: i.size,
 			stepValues: E
-		}), h(() => T());
+		}), h(() => {
+			T();
+		});
 		let D = () => {
 			let e = u(), t = e.map((e) => e.getAttribute("value") ?? "").indexOf(g.value ?? ""), n = !!i.clickable.value && !i.disabled.value, r = !!i.linear.value;
 			return e.filter((e, i) => s({
@@ -67,13 +68,13 @@ d(w, {
 				r && w(r, !0), d(n);
 			},
 			orientation: () => i.orientation.value === "vertical" ? "vertical" : "horizontal",
-			signal: e(m)
+			signal: t(m)
 		}), k = (e) => {
 			let t = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "ore-step");
 			if (!t || t.closest("ore-stepper") !== a || !D().includes(t)) return;
 			let n = t.getAttribute("value");
 			w(n ?? void 0, !0), d(t);
-		}, A = t({ onPress: () => {
+		}, A = e({ onPress: () => {
 			let e = D().find((e) => e === document.activeElement || e.shadowRoot?.activeElement === document.activeElement), t = e?.getAttribute("value");
 			t && (w(t, !0), d(e));
 		} });

package/dist/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","names":[],"sources":["../src/content/stepper/stepper.ts"],"sourcesContent":["import {\n  createContext,\n  define,\n  html,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed, signal, type Readable } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createInteraction, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { isStepNavigable } from './_is-step-navigable';\nimport componentStyles from './stepper.css?inline';\n\n// ── Context ─────────────────────────────────────────────────────────────────\n//\n// ore-step derives all of its parent-relative state (current/completed/navigable/\n// index/total/color/size/orientation) from this context instead of ore-stepper\n// pushing 8 attributes onto every child on every change. Matches the\n// provide()/inject() coordination already used by ore-tabs/ore-tab-item,\n// ore-radio-group/ore-radio, and ore-list/ore-list-item — ore-stepper was\n// previously the one outlier doing manual `querySelectorAll` + `setAttribute`\n// fan-out, which meant every reactive change re-walked and re-wrote every step\n// regardless of whether that step's own state actually changed.\n\n/** Context provided by ore-stepper to its ore-step children. */\nexport type StepperContext = {\n  clickable: Readable<boolean>;\n  color: Readable<ThemeColor | undefined>;\n  currentValue: Readable<string | undefined>;\n  linear: Readable<boolean>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  /** Ordered `value`s of every sibling `ore-step`, used to derive index/total/completed. */\n  stepValues: Readable<string[]>;\n};\n/** Injection key for the stepper context. */\nexport const STEPPER_CTX = createContext<StepperContext>('StepperContext');\n\nexport type OreStepperEvents = {\n  change: { value: string };\n};\n\nexport type OreStepperProps = {\n  /** When true, steps are clickable/keyboard-focusable for navigation. Default: display-only progress. */\n  clickable?: boolean;\n  /** Theme color for the current/completed step indicators */\n  color?: ThemeColor;\n  /** Disables the whole stepper — no step is navigable regardless of `clickable` */\n  disabled?: boolean;\n  /** Accessible label for the nav landmark */\n  label?: string;\n  /**\n   * Restricts navigation to completed steps and the current step — steps ahead of the\n   * current one cannot be clicked or focused, even when `clickable` is set.\n   */\n  linear?: boolean;\n  /** Layout orientation — 'horizontal' (default, desktop) or 'vertical' (compact/mobile-friendly) */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** The `value` of the currently active `ore-step` */\n  value?: string;\n};\n\n/**\n * Displays progress through a sequence of numbered steps. Manages step selection and provides\n * shared state (current value, clickability, theming) to its `ore-step` children via context.\n * Can be purely informational (progress display) or interactive navigation.\n *\n * @element ore-stepper\n * @element ore-step - Child element for each step (auto-discovered)\n *\n * @attr {string} value - The value of the currently active step\n * @attr {boolean} clickable - Allow clicking/focusing steps to navigate\n * @attr {boolean} linear - Restrict navigation to completed + current steps only\n * @attr {boolean} disabled - Disables the whole stepper\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav landmark label (default: 'Progress')\n *\n * @fires change - Emitted when the active step changes via click/keyboard. detail: { value: string }\n *\n * @slot - `ore-step` elements\n *\n * @cssprop --stepper-connector-color - Color of the connector line between steps\n * @cssprop --stepper-connector-size - Thickness of the connector line\n * @cssprop --stepper-gap - Gap between steps\n *\n * @part nav - Navigation landmark element\n * @part list - Ordered list container holding the slotted steps\n *\n * @example\n * ```html\n * <!-- Display-only progress -->\n * <ore-stepper value=\"shipping\" color=\"primary\">\n *   <ore-step value=\"cart\">Cart</ore-step>\n *   <ore-step value=\"shipping\">Shipping</ore-step>\n *   <ore-step value=\"payment\">Payment</ore-step>\n * </ore-stepper>\n *\n * <!-- Clickable navigation, mobile-friendly vertical layout -->\n * <ore-stepper value=\"shipping\" clickable linear orientation=\"vertical\">\n *   <ore-step value=\"cart\">Cart</ore-step>\n *   <ore-step value=\"shipping\">Shipping</ore-step>\n *   <ore-step value=\"payment\" disabled>Payment</ore-step>\n * </ore-stepper>\n * ```\n */\nexport const STEPPER_TAG = 'ore-stepper' as const;\ndefine<OreStepperProps>(STEPPER_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    clickable: prop.bool(false),\n    label: prop.string('Progress'),\n    linear: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreStepperEvents>();\n    const slots = useSlots();\n\n    const getSteps = (): HTMLElement[] => Array.from(el.querySelectorAll(':scope > ore-step')) as HTMLElement[];\n\n    const focusStep = (step: HTMLElement | undefined) => {\n      step?.shadowRoot?.querySelector<HTMLElement>('button.control')?.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State — mirrors ore-tabs' `selectedValue` signal + `ensureSelection()` pattern\n    // ────────────────────────────────────────────────────────────────\n\n    const currentValue = signal<string | undefined>(props.value.value);\n\n    bind({ attr: { value: () => currentValue.value ?? null } });\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      if (!value || value === currentValue.value) return;\n\n      currentValue.value = value;\n\n      if (shouldEmit) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const steps = getSteps();\n\n      if (steps.length === 0) return;\n\n      const current = currentValue.value;\n      const hasCurrent = current ? steps.some((s) => s.getAttribute('value') === current) : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = steps.find((s) => !s.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      if (firstEnabled) setSelection(firstEnabled);\n    };\n\n    watch(props.value, (value) => {\n      currentValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context provided to ore-step children\n    // ────────────────────────────────────────────────────────────────\n\n    const stepValues = computed(() => {\n      void slots.elements().value;\n\n      return getSteps().map((s) => s.getAttribute('value') ?? '');\n    });\n\n    provide(STEPPER_CTX, {\n      clickable: computed(() => Boolean(props.clickable.value) && !props.disabled.value),\n      color: props.color,\n      currentValue,\n      linear: computed(() => Boolean(props.linear.value)),\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      stepValues,\n    });\n\n    // Deferred to `onMounted()` (mirrors ore-tabs' `ensureSelection()` timing) rather than an\n    // immediate `watch(stepValues, ...)` — `getSteps()` walks the *live* light DOM, and while the\n    // browser is still parsing this element's `ore-step` children (synchronously upgrading each\n    // one as its own tag is reached, which happens whenever `customElements.define()` already\n    // ran before this markup was parsed — exactly what a sandboxed live-preview iframe does by\n    // design), `stepValues` observes that child list mid-populate. Reading it eagerly here used\n    // to call `ensureSelection()` — and therefore write `currentValue` — once per step as each\n    // one was discovered, interleaved with that *same* step's own first render effect further\n    // down the reactive graph. That reentrant write during a child's not-yet-finished initial\n    // render corrupted its rendered output (the step's clickable/static control silently failed\n    // to mount at all). Onmounted's callback runs on a microtask, strictly after the whole\n    // synchronous parse (and thus every child) has completed, so `getSteps()` sees the final list.\n    onMounted(() => ensureSelection());\n\n    // ────────────────────────────────────────────────────────────────\n    // Keyboard Navigation (roving tabindex over navigable steps)\n    // ────────────────────────────────────────────────────────────────\n\n    const getNavigableSteps = (): HTMLElement[] => {\n      const steps = getSteps();\n      const values = steps.map((s) => s.getAttribute('value') ?? '');\n      const currentIndex = values.indexOf(currentValue.value ?? '');\n      const clickable = Boolean(props.clickable.value) && !props.disabled.value;\n      const linear = Boolean(props.linear.value);\n\n      return steps.filter((step, index) =>\n        isStepNavigable({\n          disabled: step.hasAttribute('disabled'),\n          index,\n          linear,\n          stepperClickable: clickable,\n          stepperCurrentIndex: currentIndex,\n        }),\n      );\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: getNavigableSteps,\n      loop: false,\n      onNavigate: (_action, index) => {\n        const steps = getNavigableSteps();\n        const nextStep = steps[index];\n\n        // Select BEFORE focusing: changing `currentValue` re-renders each step's\n        // control (the step's navigable/button node-slot depends on the current\n        // index), which destroys the previously focused button. Ripple flushes\n        // effects synchronously, so by the time focusStep() runs the replacement\n        // button exists.\n        const value = nextStep?.getAttribute('value');\n\n        if (value) setSelection(value, true);\n\n        focusStep(nextStep);\n      },\n      orientation: () => (props.orientation.value === 'vertical' ? 'vertical' : 'horizontal'),\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const handleStepClick = (e: Event) => {\n      const step = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-step');\n\n      if (!step || step.closest(STEPPER_TAG) !== el || !getNavigableSteps().includes(step)) return;\n\n      const value = step.getAttribute('value');\n\n      setSelection(value ?? undefined, true);\n      // The click focused the step's old control; the selection re-render replaced\n      // it — restore focus onto the new one (see onNavigate's ordering note).\n      focusStep(step);\n    };\n\n    const activateFocusedStep = (): void => {\n      const steps = getNavigableSteps();\n      const focusedStep = steps.find(\n        (step) => step === document.activeElement || step.shadowRoot?.activeElement === document.activeElement,\n      );\n      const value = focusedStep?.getAttribute('value');\n\n      if (value) {\n        setSelection(value, true);\n        focusStep(focusedStep);\n      }\n    };\n\n    const activationPress = createInteraction({ onPress: activateFocusedStep });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const steps = getNavigableSteps();\n\n      if (steps.length === 0) return;\n\n      const path = e.composedPath();\n      const stepFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-step',\n      );\n      const focused = stepFromEvent ? steps.indexOf(stepFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      activationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleStepClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <ol class=\"steps\" role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"stepper.js","names":[],"sources":["../src/content/stepper/stepper.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\nimport { createInteraction, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport { isStepNavigable } from './_is-step-navigable';\nimport componentStyles from './stepper.css?inline';\n\n// ── Context ─────────────────────────────────────────────────────────────────\n//\n// ore-step derives all of its parent-relative state (current/completed/navigable/\n// index/total/color/size/orientation) from this context instead of ore-stepper\n// pushing 8 attributes onto every child on every change. Matches the\n// provide()/inject() coordination already used by ore-tabs/ore-tab-item,\n// ore-radio-group/ore-radio, and ore-list/ore-list-item — ore-stepper was\n// previously the one outlier doing manual `querySelectorAll` + `setAttribute`\n// fan-out, which meant every reactive change re-walked and re-wrote every step\n// regardless of whether that step's own state actually changed.\n\n/** Context provided by ore-stepper to its ore-step children. */\nexport type StepperContext = {\n  clickable: Readable<boolean>;\n  color: Readable<ThemeColor | undefined>;\n  currentValue: Readable<string | undefined>;\n  linear: Readable<boolean>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  /** Ordered `value`s of every sibling `ore-step`, used to derive index/total/completed. */\n  stepValues: Readable<string[]>;\n};\n/** Injection key for the stepper context. */\nexport const STEPPER_CTX = createContext<StepperContext>('StepperContext');\n\nexport type OreStepperEvents = {\n  change: { value: string };\n};\n\nexport type OreStepperProps = {\n  /** When true, steps are clickable/keyboard-focusable for navigation. Default: display-only progress. */\n  clickable?: boolean;\n  /** Theme color for the current/completed step indicators */\n  color?: ThemeColor;\n  /** Disables the whole stepper — no step is navigable regardless of `clickable` */\n  disabled?: boolean;\n  /** Accessible label for the nav landmark */\n  label?: string;\n  /**\n   * Restricts navigation to completed steps and the current step — steps ahead of the\n   * current one cannot be clicked or focused, even when `clickable` is set.\n   */\n  linear?: boolean;\n  /** Layout orientation — 'horizontal' (default, desktop) or 'vertical' (compact/mobile-friendly) */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** The `value` of the currently active `ore-step` */\n  value?: string;\n};\n\n/**\n * Displays progress through a sequence of numbered steps. Manages step selection and provides\n * shared state (current value, clickability, theming) to its `ore-step` children via context.\n * Can be purely informational (progress display) or interactive navigation.\n *\n * @element ore-stepper\n * @element ore-step - Child element for each step (auto-discovered)\n *\n * @attr {string} value - The value of the currently active step\n * @attr {boolean} clickable - Allow clicking/focusing steps to navigate\n * @attr {boolean} linear - Restrict navigation to completed + current steps only\n * @attr {boolean} disabled - Disables the whole stepper\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav landmark label (default: 'Progress')\n *\n * @fires change - Emitted when the active step changes via click/keyboard. detail: { value: string }\n *\n * @slot - `ore-step` elements\n *\n * @cssprop --stepper-connector-color - Color of the connector line between steps\n * @cssprop --stepper-connector-size - Thickness of the connector line\n * @cssprop --stepper-gap - Gap between steps\n *\n * @part nav - Navigation landmark element\n * @part list - Ordered list container holding the slotted steps\n *\n * @example\n * ```html\n * <!-- Display-only progress -->\n * <ore-stepper value=\"shipping\" color=\"primary\">\n *   <ore-step value=\"cart\">Cart</ore-step>\n *   <ore-step value=\"shipping\">Shipping</ore-step>\n *   <ore-step value=\"payment\">Payment</ore-step>\n * </ore-stepper>\n *\n * <!-- Clickable navigation, mobile-friendly vertical layout -->\n * <ore-stepper value=\"shipping\" clickable linear orientation=\"vertical\">\n *   <ore-step value=\"cart\">Cart</ore-step>\n *   <ore-step value=\"shipping\">Shipping</ore-step>\n *   <ore-step value=\"payment\" disabled>Payment</ore-step>\n * </ore-stepper>\n * ```\n */\nexport const STEPPER_TAG = 'ore-stepper' as const;\ndefine<OreStepperProps>(STEPPER_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    clickable: prop.bool(false),\n    label: prop.string('Progress'),\n    linear: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreStepperEvents>();\n    const slots = useSlots();\n\n    const getSteps = (): HTMLElement[] => Array.from(el.querySelectorAll(':scope > ore-step')) as HTMLElement[];\n\n    const focusStep = (step: HTMLElement | undefined) => {\n      step?.shadowRoot?.querySelector<HTMLElement>('button.control')?.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State — mirrors ore-tabs' `selectedValue` signal + `ensureSelection()` pattern\n    // ────────────────────────────────────────────────────────────────\n\n    const currentValue = signal<string | undefined>(props.value.value);\n\n    bind({ attr: { value: () => currentValue.value ?? null } });\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      if (!value || value === currentValue.value) return;\n\n      currentValue.value = value;\n\n      if (shouldEmit) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const steps = getSteps();\n\n      if (steps.length === 0) return;\n\n      const current = currentValue.value;\n      const hasCurrent = current ? steps.some((s) => s.getAttribute('value') === current) : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = steps.find((s) => !s.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      if (firstEnabled) setSelection(firstEnabled);\n    };\n\n    watch(props.value, (value) => {\n      currentValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context provided to ore-step children\n    // ────────────────────────────────────────────────────────────────\n\n    const stepValues = computed(() => {\n      void slots.elements().value;\n\n      return getSteps().map((s) => s.getAttribute('value') ?? '');\n    });\n\n    provide(STEPPER_CTX, {\n      clickable: computed(() => Boolean(props.clickable.value) && !props.disabled.value),\n      color: props.color,\n      currentValue,\n      linear: computed(() => Boolean(props.linear.value)),\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      stepValues,\n    });\n\n    // Deferred to `onMounted()` (mirrors ore-tabs' `ensureSelection()` timing) rather than an\n    // immediate `watch(stepValues, ...)` — `getSteps()` walks the *live* light DOM, and while the\n    // browser is still parsing this element's `ore-step` children (synchronously upgrading each\n    // one as its own tag is reached, which happens whenever `customElements.define()` already\n    // ran before this markup was parsed — exactly what a sandboxed live-preview iframe does by\n    // design), `stepValues` observes that child list mid-populate. Reading it eagerly here used\n    // to call `ensureSelection()` — and therefore write `currentValue` — once per step as each\n    // one was discovered, interleaved with that *same* step's own first render effect further\n    // down the reactive graph. That reentrant write during a child's not-yet-finished initial\n    // render corrupted its rendered output (the step's clickable/static control silently failed\n    // to mount at all). Onmounted's callback runs on a microtask, strictly after the whole\n    // synchronous parse (and thus every child) has completed, so `getSteps()` sees the final list.\n    onMounted(() => {\n      ensureSelection();\n      return undefined;\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Keyboard Navigation (roving tabindex over navigable steps)\n    // ────────────────────────────────────────────────────────────────\n\n    const getNavigableSteps = (): HTMLElement[] => {\n      const steps = getSteps();\n      const values = steps.map((s) => s.getAttribute('value') ?? '');\n      const currentIndex = values.indexOf(currentValue.value ?? '');\n      const clickable = Boolean(props.clickable.value) && !props.disabled.value;\n      const linear = Boolean(props.linear.value);\n\n      return steps.filter((step, index) =>\n        isStepNavigable({\n          disabled: step.hasAttribute('disabled'),\n          index,\n          linear,\n          stepperClickable: clickable,\n          stepperCurrentIndex: currentIndex,\n        }),\n      );\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: getNavigableSteps,\n      loop: false,\n      onNavigate: (_action, index) => {\n        const steps = getNavigableSteps();\n        const nextStep = steps[index];\n\n        // Select BEFORE focusing: changing `currentValue` re-renders each step's\n        // control (the step's navigable/button node-slot depends on the current\n        // index), which destroys the previously focused button. Ripple flushes\n        // effects synchronously, so by the time focusStep() runs the replacement\n        // button exists.\n        const value = nextStep?.getAttribute('value');\n\n        if (value) setSelection(value, true);\n\n        focusStep(nextStep);\n      },\n      orientation: () => (props.orientation.value === 'vertical' ? 'vertical' : 'horizontal'),\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const handleStepClick = (e: Event) => {\n      const step = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-step');\n\n      if (!step || step.closest(STEPPER_TAG) !== el || !getNavigableSteps().includes(step)) return;\n\n      const value = step.getAttribute('value');\n\n      setSelection(value ?? undefined, true);\n      // The click focused the step's old control; the selection re-render replaced\n      // it — restore focus onto the new one (see onNavigate's ordering note).\n      focusStep(step);\n    };\n\n    const activateFocusedStep = (): void => {\n      const steps = getNavigableSteps();\n      const focusedStep = steps.find(\n        (step) => step === document.activeElement || step.shadowRoot?.activeElement === document.activeElement,\n      );\n      const value = focusedStep?.getAttribute('value');\n\n      if (value) {\n        setSelection(value, true);\n        focusStep(focusedStep);\n      }\n    };\n\n    const activationPress = createInteraction({ onPress: activateFocusedStep });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const steps = getNavigableSteps();\n\n      if (steps.length === 0) return;\n\n      const path = e.composedPath();\n      const stepFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-step',\n      );\n      const focused = stepFromEvent ? steps.indexOf(stepFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      activationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleStepClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <ol class=\"steps\" role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/styles/index.d.ts

@@ -5,10 +5,10 @@
  */
 export { coarsePointerMixin, reducedMotionMixin, SR_ONLY_INLINE_STYLE, srOnlyMixin } from './mixins/accessibility.css';
 export { rainbowEffectMixin, registerRainbowProperty, registerShineProperty, shineEffectMixin, } from './mixins/animation.css';
+export { type FieldVariantMixinOptions, fieldVariantMixin } from './mixins/field-variants.css';
 export { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/shape.css';
 export { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';
+export { tableBaseMixin } from './mixins/table-base.css';
 export { colorThemeMixin, elevationMixin, forcedColorsFocusMixin, forcedColorsFormControlMixin, forcedColorsMixin, } from './mixins/theme.css';
 export { frostVariantMixin } from './mixins/variants.css';
-export { fieldVariantMixin, type FieldVariantMixinOptions } from './mixins/field-variants.css';
-export { tableBaseMixin } from './mixins/table-base.css';
 //# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEvH,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAElG,OAAO,EACL,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,4BAA4B,EAC5B,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE/F,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEvH,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,KAAK,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE/F,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAElG,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EACL,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,4BAA4B,EAC5B,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/styles/preflight.css

@@ -234,6 +234,6 @@
   }
 
   [hidden]:where(:not([hidden='until-found'])) {
-    display: none !important;
+    display: none;
   }
 }

package/dist/styles/theme.css

@@ -340,13 +340,7 @@
     --overlay-enter-scale: 0.97; /* slight scale-in for menus / panels */
     --overlay-enter-scale-dialog: 0.96; /* slightly more pronounced for dialogs */
 
-    /* ========================================
-       CSS Color Scheme
-       ======================================== */
-    color-scheme: light dark;
-
     /* ── theme-tokens:generated:begin — run `pnpm run sync:theme`, do not hand-edit ── */
-
     /* ── Contrast scale — Neutral OKLCH with a lifted, non-pure-black Dark Mode baseline ── */
     --color-contrast-50: light-dark(oklch(99% 0.001 264deg), oklch(17% 0.001 250deg)); /* Canvas, page background */
     --color-contrast-100: light-dark(oklch(97% 0.001 264deg), oklch(21% 0.001 250deg)); /* Cards, elevated surfaces */
@@ -354,24 +348,20 @@
       oklch(95.5% 0.001 264deg),
       oklch(23.5% 0.001 250deg)
     ); /* Midpoint — chip base, subtle fills */
-
     --color-contrast-200: light-dark(oklch(94% 0.001 264deg), oklch(26% 0.001 250deg)); /* Nested cards, hover states */
     --color-contrast-300: light-dark(oklch(89% 0.002 264deg), oklch(32% 0.001 250deg)); /* Borders, dividers */
     --color-contrast-400: light-dark(
       oklch(81% 0.002 264deg),
       oklch(40% 0.001 250deg)
     ); /* Disabled backgrounds, subtle UI */
-
     --color-contrast-500: light-dark(
       oklch(49% 0.002 264deg),
       oklch(58% 0.001 250deg)
     ); /* Tertiary text - AA large-text compliant */
-
     --color-contrast-600: light-dark(
       oklch(40% 0.002 264deg),
       oklch(68% 0.001 250deg)
     ); /* Secondary text - AA compliant */
-
     --color-contrast-700: light-dark(oklch(32% 0.002 264deg), oklch(78% 0.001 250deg)); /* Body text - AAA compliant */
     --color-contrast-800: light-dark(oklch(22% 0.002 264deg), oklch(88% 0.001 250deg)); /* Headings - AAA compliant */
     --color-contrast-900: light-dark(
@@ -384,15 +374,10 @@
     --color-contrast: color-mix(in oklch, var(--color-contrast-900) 85%, transparent);
 
     /* ── Shade ramp — shared derivation recipe for every color family below ──── */
-
     /* Every family only authors a `base` (+ content/contrast ink pair); every  */
-
     /* other sub-token is `oklch(from var(--color-x) ...)`, derived from that   */
-
     /* single base using the deltas below. Tune a family by editing its base;   */
-
     /* tune the ramp shape itself (e.g. how much lighter "-lighter" is) here,    */
-
     /* once, for all 7 families at once. */
     --shade-lighter-l: 0.3;
     --shade-lighter-c: 0.35;
@@ -456,11 +441,11 @@
     --color-neutral-backdrop: light-dark(
       oklch(
         from var(--color-neutral) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
-          var(--shade-backdrop-alpha-light)
+        var(--shade-backdrop-alpha-light)
       ),
       oklch(
         from var(--color-neutral) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
-          var(--shade-backdrop-alpha-dark)
+        var(--shade-backdrop-alpha-dark)
       )
     );
     --color-neutral-content: light-dark(
@@ -490,15 +475,16 @@
 
     /* ── Primary — Periwinkle violet — primary brand color ── */
     --color-primary-hue: 293deg;
+
     --color-primary: light-dark(oklch(56% 0.22 var(--color-primary-hue)), oklch(72% 0.148 var(--color-primary-hue)));
     --color-primary-backdrop: light-dark(
       oklch(
         from var(--color-primary) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
-          var(--shade-backdrop-alpha-light)
+        var(--shade-backdrop-alpha-light)
       ),
       oklch(
         from var(--color-primary) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
-          var(--shade-backdrop-alpha-dark)
+        var(--shade-backdrop-alpha-dark)
       )
     );
     --color-primary-content: light-dark(
@@ -534,11 +520,11 @@
     --color-secondary-backdrop: light-dark(
       oklch(
         from var(--color-secondary) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
-          var(--shade-backdrop-alpha-light)
+        var(--shade-backdrop-alpha-light)
       ),
       oklch(
         from var(--color-secondary) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
-          var(--shade-backdrop-alpha-dark)
+        var(--shade-backdrop-alpha-dark)
       )
     );
     --color-secondary-content: light-dark(
@@ -571,11 +557,11 @@
     --color-info-backdrop: light-dark(
       oklch(
         from var(--color-info) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
-          var(--shade-backdrop-alpha-light)
+        var(--shade-backdrop-alpha-light)
       ),
       oklch(
         from var(--color-info) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
-          var(--shade-backdrop-alpha-dark)
+        var(--shade-backdrop-alpha-dark)
       )
     );
     --color-info-content: light-dark(
@@ -607,11 +593,11 @@
     --color-success-backdrop: light-dark(
       oklch(
         from var(--color-success) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
-          var(--shade-backdrop-alpha-light)
+        var(--shade-backdrop-alpha-light)
       ),
       oklch(
         from var(--color-success) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
-          var(--shade-backdrop-alpha-dark)
+        var(--shade-backdrop-alpha-dark)
       )
     );
     --color-success-content: light-dark(
@@ -644,11 +630,11 @@
     --color-warning-backdrop: light-dark(
       oklch(
         from var(--color-warning) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
-          var(--shade-backdrop-alpha-light)
+        var(--shade-backdrop-alpha-light)
       ),
       oklch(
         from var(--color-warning) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
-          var(--shade-backdrop-alpha-dark)
+        var(--shade-backdrop-alpha-dark)
       )
     );
     --color-warning-content: light-dark(
@@ -681,11 +667,11 @@
     --color-error-backdrop: light-dark(
       oklch(
         from var(--color-error) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
-          var(--shade-backdrop-alpha-light)
+        var(--shade-backdrop-alpha-light)
       ),
       oklch(
         from var(--color-error) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
-          var(--shade-backdrop-alpha-dark)
+        var(--shade-backdrop-alpha-dark)
       )
     );
     --color-error-content: light-dark(
@@ -711,7 +697,6 @@
     --color-error-border: oklch(from var(--color-error) l c h / var(--shade-border-alpha));
     --color-error-focus-shadow:
       0 0 0 4px color-mix(in oklch, var(--color-error) var(--shade-focus-ring-strength), transparent), var(--shadow-sm);
-
     /* ── theme-tokens:generated:end ── */
   }
 

package/dist/switch.cjs

@@ -1,10 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/checkable.cjs"),n=require("./styles/mixins/accessibility.css.cjs"),r=require("./styles/mixins/shape.css.cjs"),i=require("./styles/mixins/states.css.cjs"),a=require("./styles/mixins/theme.css.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./shared/size-presets.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./inputs/shared/native-field-event.cjs"),d=require("./inputs/switch/switch.css.cjs");let f=require("@vielzeug/ore");var p=`ore-switch`;(0,f.define)(p,{formAssociated:!0,props:{...o.themableBundle,...o.sizableBundle,...o.disablableBundle,checked:f.prop.bool(!1),error:f.prop.string(),helper:f.prop.string(),name:f.prop.string(),value:f.prop.string(`on`)},setup(n){let r=(0,f.getHost)(),i=t.createCheckable({checked:n.checked,clearIndeterminateFirst:!1,disabled:n.disabled,error:n.error,helper:n.helper,onToggle:e=>{i.triggerValidation(`change`),u.setFieldChecked(r,e.checked),u.dispatchNativeFieldEvent(r,`input`),u.dispatchNativeFieldEvent(r,`change`)},prefix:`switch`,signal:e.lifecycleSignal(f.onCleanup),value:n.value});i.attachFormField((0,f.useField)({disabled:i.disabled,toFormValue:e=>e,value:i.checkableFormValue}));let{assistiveId:a,checked:o,disabled:s,errorText:d,handleClick:p,handleKeydown:m,helperText:h,labelId:g}=i;return u.defineFieldChecked(r,()=>o.value,e=>{o.value=e}),c.applyCheckableBinding(n.size,{assistiveId:a,checked:o,disabled:s,errorText:d,handleClick:p,handleKeydown:m,helperText:h,labelId:g},`switch`),f.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/checkable.cjs"),a=require("./core/ore.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./shared/size-presets.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./inputs/shared/native-field-event.cjs"),d=require("./inputs/switch/switch.css.cjs");let f=require("@vielzeug/ore");var p=`ore-switch`;(0,f.define)(p,{formAssociated:!0,props:{...o.themableBundle,...o.sizableBundle,...o.disablableBundle,checked:f.prop.bool(!1),error:f.prop.string(),helper:f.prop.string(),name:f.prop.string(),value:f.prop.string(`on`)},setup(e){let t=(0,f.getHost)(),n=i.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:e.disabled,error:e.error,helper:e.helper,onToggle:e=>{n.triggerValidation(`change`),u.setFieldChecked(t,e.checked),u.dispatchNativeFieldEvent(t,`input`),u.dispatchNativeFieldEvent(t,`change`)},prefix:`switch`,signal:a.lifecycleSignal(f.onCleanup),value:e.value});n.attachFormField((0,f.useField)({disabled:n.disabled,toFormValue:e=>e,value:n.checkableFormValue}));let{assistiveId:r,checked:o,disabled:s,errorText:d,handleClick:p,handleKeydown:m,helperText:h,labelId:g}=n;return u.defineFieldChecked(t,()=>o.value,e=>{o.value=e}),c.applyCheckableBinding(e.size,{assistiveId:r,checked:o,disabled:s,errorText:d,handleClick:p,handleKeydown:m,helperText:h,labelId:g},`switch`),f.html`
       <div class="switch-wrapper" part="switch">
         <div class="switch-track" part="track">
           <div class="switch-thumb" part="thumb"></div>
         </div>
       </div>
       <span class="label" part="label" id="${g}"><slot></slot></span>
-      ${l.renderHelperRegion(a,d,h)}
-    `},styles:[a.colorThemeMixin,a.forcedColorsFormControlMixin,i.disabledStateMixin,n.coarsePointerMixin,r.sizeVariantMixin(s.SWITCH_SIZE_PRESET),d.default]}),exports.SWITCH_TAG=p;
+      ${l.renderHelperRegion(r,d,h)}
+    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(s.SWITCH_SIZE_PRESET),d.default]}),exports.SWITCH_TAG=p;
 //# sourceMappingURL=switch.cjs.map

package/dist/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, prop, getHost, onCleanup } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { lifecycleSignal, createCheckable } from '../../core';\nimport { disablableBundle, sizableBundle, SWITCH_SIZE_PRESET, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"mmBA2EA,IAAa,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAEb,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAM,SAChB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EACnC,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,CACvC,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAgBvG,OAdA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAA,sBACE,EAAM,KACN,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,SAAQ,EAC7F,QACF,EAEO,EAAA,IAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,kBAAkB,EACnC,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { createCheckable, lifecycleSignal } from '../../core';\nimport { disablableBundle, SWITCH_SIZE_PRESET, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"mmBAwEA,IAAa,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAEb,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAM,SAChB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EACnC,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,CACvC,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAgBvG,OAdA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAA,sBACE,EAAM,KACN,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,SAAQ,EAC7F,QACF,EAEO,EAAA,IAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,kBAAkB,EACnC,EAAA,OACF,CACF,CAAC"}

package/dist/switch.js

@@ -1,9 +1,9 @@
-import { lifecycleSignal as e } from "./core/ore.js";
-import { createCheckable as t } from "./core/checkable.js";
-import { coarsePointerMixin as n } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as i } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as a, forcedColorsFormControlMixin as o } from "./styles/mixins/theme.css.js";
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as r, forcedColorsFormControlMixin as i } from "./styles/mixins/theme.css.js";
+import { createCheckable as a } from "./core/checkable.js";
+import { lifecycleSignal as o } from "./core/ore.js";
 import { disablableBundle as s, sizableBundle as c, themableBundle as l } from "./shared/prop-bundles.js";
 import { SWITCH_SIZE_PRESET as u } from "./shared/size-presets.js";
 import { applyCheckableBinding as d } from "./inputs/shared/field-binding.js";
@@ -25,31 +25,31 @@ _(C, {
 		name: x.string(),
 		value: x.string("on")
 	},
-	setup(n) {
-		let r = v(), i = t({
-			checked: n.checked,
+	setup(e) {
+		let t = v(), n = a({
+			checked: e.checked,
 			clearIndeterminateFirst: !1,
-			disabled: n.disabled,
-			error: n.error,
-			helper: n.helper,
+			disabled: e.disabled,
+			error: e.error,
+			helper: e.helper,
 			onToggle: (e) => {
-				i.triggerValidation("change"), h(r, e.checked), m(r, "input"), m(r, "change");
+				n.triggerValidation("change"), h(t, e.checked), m(t, "input"), m(t, "change");
 			},
 			prefix: "switch",
-			signal: e(b),
-			value: n.value
+			signal: o(b),
+			value: e.value
 		});
-		i.attachFormField(S({
-			disabled: i.disabled,
+		n.attachFormField(S({
+			disabled: n.disabled,
 			toFormValue: (e) => e,
-			value: i.checkableFormValue
+			value: n.checkableFormValue
 		}));
-		let { assistiveId: a, checked: o, disabled: s, errorText: c, handleClick: l, handleKeydown: u, helperText: g, labelId: _ } = i;
-		return p(r, () => o.value, (e) => {
-			o.value = e;
-		}), d(n.size, {
-			assistiveId: a,
-			checked: o,
+		let { assistiveId: r, checked: i, disabled: s, errorText: c, handleClick: l, handleKeydown: u, helperText: g, labelId: _ } = n;
+		return p(t, () => i.value, (e) => {
+			i.value = e;
+		}), d(e.size, {
+			assistiveId: r,
+			checked: i,
 			disabled: s,
 			errorText: c,
 			handleClick: l,
@@ -63,15 +63,15 @@ _(C, {
         </div>
       </div>
       <span class="label" part="label" id="${_}"><slot></slot></span>
-      ${f(a, c, g)}
+      ${f(r, c, g)}
     `;
 	},
 	styles: [
-		a,
-		o,
+		r,
 		i,
 		n,
-		r(u),
+		e,
+		t(u),
 		g
 	]
 });

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, prop, getHost, onCleanup } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { lifecycleSignal, createCheckable } from '../../core';\nimport { disablableBundle, sizableBundle, SWITCH_SIZE_PRESET, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;AA2EA,IAAa,IAAa;AAC1B,EAAuB,GAAY;CACjC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,MAAM,EAAK,OAAO;EAClB,OAAO,EAAK,OAAO,IAAI;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAEb,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,MAAY;IAIrB,AAHA,EAAU,kBAAkB,QAAQ,GACpC,EAAgB,GAAI,EAAQ,OAAO,GACnC,EAAyB,GAAI,OAAO,GACpC,EAAyB,GAAI,QAAQ;GACvC;GACA,QAAQ;GACR,QAAQ,EAAgB,CAAS;GACjC,OAAO,EAAM;EACf,CAAC;EAED,EAAU,gBACR,EAAwB;GACtB,UAAU,EAAU;GACpB,cAAc,MAAM;GACpB,OAAO,EAAU;EACnB,CAAC,CACH;EAEA,IAAM,EAAE,gBAAa,YAAS,aAAU,cAAW,gBAAa,kBAAe,eAAY,eAAY;EAgBvG,OAdA,EACE,SACM,EAAQ,QACb,MAAU;GACT,EAAQ,QAAQ;EAClB,CACF,GAEA,EACE,EAAM,MACN;GAAE;GAAa;GAAS;GAAU;GAAW;GAAa;GAAe;GAAY;EAAQ,GAC7F,QACF,GAEO,CAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAmB,GAAa,GAAW,CAAU,EAAE;;CAE7D;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAiB,CAAkB;EACnC;CACF;AACF,CAAC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { createCheckable, lifecycleSignal } from '../../core';\nimport { disablableBundle, SWITCH_SIZE_PRESET, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;AAwEA,IAAa,IAAa;AAC1B,EAAuB,GAAY;CACjC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,MAAM,EAAK,OAAO;EAClB,OAAO,EAAK,OAAO,IAAI;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAEb,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,MAAY;IAIrB,AAHA,EAAU,kBAAkB,QAAQ,GACpC,EAAgB,GAAI,EAAQ,OAAO,GACnC,EAAyB,GAAI,OAAO,GACpC,EAAyB,GAAI,QAAQ;GACvC;GACA,QAAQ;GACR,QAAQ,EAAgB,CAAS;GACjC,OAAO,EAAM;EACf,CAAC;EAED,EAAU,gBACR,EAAwB;GACtB,UAAU,EAAU;GACpB,cAAc,MAAM;GACpB,OAAO,EAAU;EACnB,CAAC,CACH;EAEA,IAAM,EAAE,gBAAa,YAAS,aAAU,cAAW,gBAAa,kBAAe,eAAY,eAAY;EAgBvG,OAdA,EACE,SACM,EAAQ,QACb,MAAU;GACT,EAAQ,QAAQ;EAClB,CACF,GAEA,EACE,EAAM,MACN;GAAE;GAAa;GAAS;GAAU;GAAW;GAAa;GAAe;GAAY;EAAQ,GAC7F,QACF,GAEO,CAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAmB,GAAa,GAAW,CAAU,EAAE;;CAE7D;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAiB,CAAkB;EACnC;CACF;AACF,CAAC"}

package/dist/tab-item.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/aria-reflection.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./tabs.cjs"),a=require("./disclosure/tab-item/tab-item.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=`ore-tab-item`;(0,o.define)(c,{props:{...r.disablableBundle,active:o.prop.bool(!1),color:o.prop.string(),size:o.prop.string(),value:o.prop.string(``),variant:o.prop.string()},setup(t){let n=(0,o.getHost)(),r=o.watchEffect,a=(0,o.inject)(i.TABS_CTX);a&&r(()=>{let e=a.color.value,t=a.size.value,r=a.variant.value;e!==void 0&&n.setAttribute(`color`,e),t!==void 0&&n.setAttribute(`size`,t),r!==void 0&&n.setAttribute(`variant`,r)});let c=(0,s.computed)(()=>a?!!a.value.value&&a.value.value===t.value.value:t.active.value),l=()=>!!t.disabled.value;(0,o.bind)({attr:{active:()=>c.value?!0:void 0}});let u=e=>{if(e.stopPropagation(),l()){e.preventDefault();return}n.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,detail:{value:t.value.value}}))},d=()=>`tab-${t.value.value}`,f=(0,o.ref)();return(0,o.onMounted)(()=>{(0,o.watchEffect)(()=>{let r=f.value,i=t.value.value;if(!r)return;let a=((i?n.closest(`ore-tabs`):null)?.querySelector(`:scope > ore-tab-panel[value="${i}"]`))?.shadowRoot?.querySelector(`.panel`)??null;e.setAriaReflection(r,`ariaControlsElements`,a?[a]:[])})}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./core/aria-reflection.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./tabs.cjs"),a=require("./disclosure/tab-item/tab-item.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=`ore-tab-item`;(0,o.define)(c,{props:{...r.disablableBundle,active:o.prop.bool(!1),color:o.prop.string(),size:o.prop.string(),value:o.prop.string(``),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),r=o.watchEffect,a=(0,o.inject)(i.TABS_CTX);a&&r(()=>{let e=a.color.value,n=a.size.value,r=a.variant.value;e!==void 0&&t.setAttribute(`color`,e),n!==void 0&&t.setAttribute(`size`,n),r!==void 0&&t.setAttribute(`variant`,r)});let c=(0,s.computed)(()=>a?!!a.value.value&&a.value.value===e.value.value:e.active.value),l=()=>!!e.disabled.value;(0,o.bind)({attr:{active:()=>c.value?!0:void 0}});let u=n=>{if(n.stopPropagation(),l()){n.preventDefault();return}t.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,detail:{value:e.value.value}}))},d=()=>`tab-${e.value.value}`,f=(0,o.ref)();return(0,o.onMounted)(()=>{(0,o.watchEffect)(()=>{let r=f.value,i=e.value.value;if(!r)return;let a=((i?t.closest(`ore-tabs`):null)?.querySelector(`:scope > ore-tab-panel[value="${i}"]`))?.shadowRoot?.querySelector(`.panel`)??null;n.setAriaReflection(r,`ariaControlsElements`,a?[a]:[])})}),o.html`
       <button
         role="tab"
         type="button"
@@ -13,5 +13,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <slot></slot>
         <slot name="suffix"></slot>
       </button>
-    `},styles:[n.colorThemeMixin,n.forcedColorsFocusMixin(`button`),t.coarsePointerMixin,a.default]}),exports.TAB_ITEM_TAG=c;
+    `},styles:[t.colorThemeMixin,t.forcedColorsFocusMixin(`button`),e.coarsePointerMixin,a.default]}),exports.TAB_ITEM_TAG=c;
 //# sourceMappingURL=tab-item.cjs.map