@vielzeug/refine 1.8.0 → 2.0.0

package/dist/step.js

@@ -0,0 +1,127 @@
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as t, forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
+import { disablableBundle as r } from "./shared/prop-bundles.js";
+import { isStepNavigable as i } from "./content/stepper/_is-step-navigable.js";
+import a from "./content/stepper/step.css.js";
+import { STEPPER_CTX as o } from "./stepper.js";
+import { bind as s, define as c, getHost as l, html as u, inject as d, prop as f, useSlots as p, watchEffect as m } from "@vielzeug/ore";
+//#region src/content/stepper/step.ts
+var h = "ore-step";
+c(h, {
+	props: {
+		...r,
+		color: f.string(),
+		error: f.bool(!1),
+		optional: f.bool(!1),
+		orientation: f.oneOf(["horizontal", "vertical"], "horizontal"),
+		size: f.string(),
+		value: f.string("")
+	},
+	setup(e) {
+		let t = l(), n = p(), r = d(o), a = () => r ? r.stepValues.value.indexOf(e.value.value) : -1, c = () => r?.stepValues.value.length ?? 0, f = () => r ? r.stepValues.value.indexOf(r.currentValue.value ?? "") : -1, h = () => {
+			let e = a();
+			return e >= 0 ? e + 1 : 1;
+		}, g = () => c() || 1, _ = () => {
+			let e = a(), t = f();
+			return e >= 0 && e === t;
+		}, v = () => {
+			let e = a(), t = f();
+			return e >= 0 && t >= 0 && e < t;
+		}, y = () => {
+			let t = a(), n = f();
+			return !!r && i({
+				disabled: e.disabled.value === !0,
+				index: t,
+				linear: r.linear.value,
+				stepperClickable: r.clickable.value,
+				stepperCurrentIndex: n
+			});
+		}, b = () => !!e.disabled.value;
+		s({ attr: {
+			completed: () => v() ? !0 : void 0,
+			current: () => _() ? !0 : void 0,
+			index: () => {
+				let e = a();
+				return e >= 0 ? String(e + 1) : void 0;
+			},
+			navigable: () => y() ? !0 : void 0,
+			total: () => r ? String(c()) : void 0
+		} }), r && m(() => {
+			let e = r.color.value, n = r.size.value, i = r.orientation.value;
+			e !== void 0 && t.setAttribute("color", e), n !== void 0 && t.setAttribute("size", n), t.setAttribute("orientation", i);
+		});
+		let x = () => {
+			if (e.error.value) return "error";
+			if (v()) return "completed";
+			if (_()) return "current step";
+		}, S = () => `Step ${h()} of ${g()}`, C = () => {
+			let e = x();
+			return e ? `${S()}, ${e}` : S();
+		}, w = (n) => {
+			if (n.stopPropagation(), !y()) {
+				n.preventDefault();
+				return;
+			}
+			t.dispatchEvent(new CustomEvent("click", {
+				bubbles: !0,
+				detail: { value: e.value.value }
+			}));
+		}, T = () => u`
+      <span class="indicator" part="indicator" aria-hidden="true">
+        <span class="icon-slot" ?hidden="${() => !n.has("icon").value}"><slot name="icon"></slot></span>
+        ${() => n.has("icon").value ? "" : e.error.value ? u`
+                  <ore-icon name="x" size="14" stroke-width="3"></ore-icon>
+                ` : v() ? u`
+                    <ore-icon name="check" size="14" stroke-width="3"></ore-icon>
+                  ` : u`
+                    <span class="number">${h}</span>
+                  `}
+      </span>
+    `, E = () => u`
+      <span class="content" part="content">
+        <span class="sr-only">${C}</span>
+        <span class="label" part="label">
+          <span class="label-text"><slot></slot></span>
+          ${() => e.optional.value ? u`
+                  <span class="optional-hint">(optional)</span>
+                ` : ""}
+        </span>
+        <span class="description" part="description" ?hidden="${() => !n.has("description").value}">
+          <slot name="description"></slot>
+        </span>
+      </span>
+    `;
+		return u`
+      <li class="step" role="listitem">
+        <span class="connector connector-leading" part="connector" aria-hidden="true"></span>
+        <span class="connector connector-trailing" part="connector" aria-hidden="true"></span>
+        ${() => y() ? u`
+                <button
+                  type="button"
+                  class="control"
+                  part="control"
+                  aria-current="${() => _() ? "step" : null}"
+                  aria-disabled="${b}"
+                  tabindex="${() => _() ? "0" : "-1"}"
+                  @click="${w}">
+                  ${T()}${E()}
+                </button>
+              ` : u`
+                <div class="control" part="control" aria-current="${() => _() ? "step" : null}">
+                  ${T()}${E()}
+                </div>
+              `}
+      </li>
+    `;
+	},
+	styles: [
+		t,
+		e,
+		n("button.control"),
+		a
+	]
+});
+//#endregion
+export { h as STEP_TAG };
+
+//# sourceMappingURL=step.js.map

package/dist/step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","names":[],"sources":["../src/content/stepper/step.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, useSlots, watchEffect } from '@vielzeug/ore';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { isStepNavigable } from './_is-step-navigable';\nimport stepStyles from './step.css?inline';\nimport { STEPPER_CTX } from './stepper';\n\nexport type OreStepProps = {\n  /**\n   * Theme color. Inherited from the parent `ore-stepper` when nested inside one (overrides\n   * this value); only takes effect on its own when `ore-step` is rendered standalone.\n   */\n  color?: ThemeColor;\n  /** Disables this step — it cannot be navigated to and is skipped by keyboard navigation. */\n  disabled?: boolean;\n  /** Marks this step as failed/invalid. Overrides the completed/current indicator visuals. */\n  error?: boolean;\n  /**\n   * Marks this step as optional. Renders a small \"(optional)\" hint next to the label.\n   * Purely presentational — has no effect on navigation.\n   */\n  optional?: boolean;\n  /** Orientation. Inherited from the parent `ore-stepper` when nested inside one. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size. Inherited from the parent `ore-stepper` when nested inside one. */\n  size?: ComponentSize;\n  /** Unique identifier, matches `ore-stepper`'s `value` attribute. */\n  value: string;\n};\n\n/**\n * A single step trigger. Must be placed as a direct child of `ore-stepper`, which provides\n * this step's current/completed/navigable/index/total state via context — those are derived,\n * read-only attributes on this element, not settable props.\n *\n * @element ore-step\n *\n * @attr {string} value - Unique identifier, matches the parent ore-stepper's `value` attribute\n * @attr {boolean} disabled - Prevents navigation to this step\n * @attr {boolean} error - Marks the step as failed/invalid\n * @attr {boolean} optional - Renders an \"(optional)\" hint next to the label\n * @attr {boolean} current - Read-only. Derived from position relative to the parent ore-stepper's `value`.\n * @attr {boolean} completed - Read-only. Derived from position relative to the parent ore-stepper's `value`.\n * @attr {boolean} navigable - Read-only. Derived from the parent ore-stepper's `clickable`/`linear`/`disabled`.\n * @attr {number} index - Read-only. This step's 1-based position among its siblings.\n * @attr {number} total - Read-only. Total sibling step count.\n * @attr {string} color - Inherited from ore-stepper: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Inherited from ore-stepper: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Inherited from ore-stepper: 'horizontal' | 'vertical'\n *\n * @slot - Step label\n * @slot description - Optional supporting text shown below the label\n * @slot icon - Custom icon replacing the step number/check/error indicator\n *\n * @part control - Clickable (or static) root element for the step\n * @part indicator - Circular indicator holding the number/icon\n * @part content - Wrapper around the label and description\n * @part label - Step label element\n * @part description - Step description element\n * @part connector - Connector line segments (leading and trailing halves) either side of this step's indicator\n *\n * @example\n * ```html\n * <ore-step value=\"details\">Account details</ore-step>\n * <ore-step value=\"review\" disabled>Review</ore-step>\n * ```\n */\nexport const STEP_TAG = 'ore-step' as const;\ndefine<OreStepProps>(STEP_TAG, {\n  props: {\n    ...disablableBundle,\n    color: prop.string<ThemeColor>(),\n    error: prop.bool(false),\n    optional: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n    const stepperCtx = inject(STEPPER_CTX);\n\n    // ────────────────────────────────────────────────────────────────\n    // State derived from the parent ore-stepper's context — see stepper.ts's\n    // module doc comment for why this replaced parent-side attribute fan-out.\n    // ────────────────────────────────────────────────────────────────\n\n    // Plain functions, not `computed()` — every one of these ultimately reads\n    // `stepperCtx.stepValues`/`stepperCtx.currentValue`, which are themselves `computed()`s\n    // owned by the parent `ore-stepper`. Wrapping a *child* `computed()` around a *parent*\n    // `computed()` (a computed-to-computed dependency crossing a `provide()`/`inject()`\n    // boundary) is exactly the shape that surfaced two related bugs: a step's `completed`/\n    // `current` attributes going permanently stale after a few rapid selections, and — worse —\n    // a step's entire clickable/static control silently failing to render at all when its\n    // `ore-step` tag upgrades before its siblings exist in the light DOM yet (true whenever\n    // `ore-step`/`ore-stepper` are already `customElements.define()`d before this markup is\n    // parsed, e.g. every sandboxed live-preview iframe). Reading straight through to the\n    // parent's computeds on every call — no intermediate computed layer of our own to go\n    // stale — made both disappear. Cheap enough to not need memoizing (a couple of `indexOf`/\n    // comparisons over an already-memoized parent computed).\n    const stepIndex = (): number => (stepperCtx ? stepperCtx.stepValues.value.indexOf(props.value.value) : -1);\n    const totalSteps = (): number => stepperCtx?.stepValues.value.length ?? 0;\n    const currentIndex = (): number =>\n      stepperCtx ? stepperCtx.stepValues.value.indexOf(stepperCtx.currentValue.value ?? '') : -1;\n    // 1-based, always-sane values for on-screen text (the step number badge, the sr-only\n    // \"Step X of Y\" label) — falls back to \"1 of 1\" when rendered standalone with no parent\n    // `ore-stepper` to derive a real position from. Kept separate from the `index`/`total`\n    // *attributes* below, which correctly reflect nothing at all in that same standalone case.\n    const displayIndex = (): number => {\n      const index = stepIndex();\n\n      return index >= 0 ? index + 1 : 1;\n    };\n    const displayTotal = (): number => totalSteps() || 1;\n\n    const isCurrent = (): boolean => {\n      const index = stepIndex();\n      const current = currentIndex();\n\n      return index >= 0 && index === current;\n    };\n    // Purely positional — intentionally NOT gated on `props.error.value`. This also drives the\n    // `completed` *attribute* below, which `step.css` uses to color both connector segments\n    // either side of the indicator (`:host([completed]) .connector`); every *consumer* of this\n    // (the icon choice, the sr-only state label) already checks `error` first and short-circuits\n    // before it matters, so folding `!error` in here too would only end up suppressing\n    // `[completed]` on an error step that's before the current one — breaking the connector\n    // color chain right at that step instead of just swapping its icon.\n    const isCompleted = (): boolean => {\n      const index = stepIndex();\n      const current = currentIndex();\n\n      return index >= 0 && current >= 0 && index < current;\n    };\n    const isNavigable = (): boolean => {\n      const index = stepIndex();\n      const current = currentIndex();\n\n      return (\n        !!stepperCtx &&\n        isStepNavigable({\n          disabled: props.disabled.value === true,\n          index,\n          linear: stepperCtx.linear.value,\n          stepperClickable: stepperCtx.clickable.value,\n          stepperCurrentIndex: current,\n        })\n      );\n    };\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    // Purely derived, read-only state — no matching `prop.*` declaration, so `bind()` is the\n    // sole writer and can safely reflect `undefined` (removes the attribute) when this step\n    // isn't nested inside an `ore-stepper` at all.\n    bind({\n      attr: {\n        completed: () => (isCompleted() ? true : undefined),\n        current: () => (isCurrent() ? true : undefined),\n        index: () => {\n          const index = stepIndex();\n\n          return index >= 0 ? String(index + 1) : undefined;\n        },\n        navigable: () => (isNavigable() ? true : undefined),\n        total: () => (stepperCtx ? String(totalSteps()) : undefined),\n      },\n    });\n\n    // `color`/`size`/`orientation` double as regular, independently-settable props (for a step\n    // rendered standalone) *and* stepper-inherited values — mirrors ore-tab-item's handling of\n    // its own `color`/`size`/`variant` inheritance from `ore-tabs`. Only forcibly overwrite the\n    // attribute when a parent context actually exists, so the plain prop reflection is left\n    // alone otherwise.\n    if (stepperCtx) {\n      watchEffect(() => {\n        const color = stepperCtx.color.value;\n        const size = stepperCtx.size.value;\n        const orientation = stepperCtx.orientation.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        el.setAttribute('orientation', orientation);\n      });\n    }\n\n    const stateLabel = (): string | undefined => {\n      if (props.error.value) return 'error';\n\n      if (isCompleted()) return 'completed';\n\n      if (isCurrent()) return 'current step';\n\n      return undefined;\n    };\n\n    const positionLabel = () => `Step ${displayIndex()} of ${displayTotal()}`;\n    const srLabel = () => {\n      const state = stateLabel();\n\n      return state ? `${positionLabel()}, ${state}` : positionLabel();\n    };\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (!isNavigable()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const indicatorTemplate = () => html`\n      <span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">\n        <span class=\"icon-slot\" ?hidden=\"${() => !slots.has('icon').value}\"><slot name=\"icon\"></slot></span>\n        ${() =>\n          slots.has('icon').value\n            ? ''\n            : props.error.value\n              ? html`\n                  <ore-icon name=\"x\" size=\"14\" stroke-width=\"3\"></ore-icon>\n                `\n              : isCompleted()\n                ? html`\n                    <ore-icon name=\"check\" size=\"14\" stroke-width=\"3\"></ore-icon>\n                  `\n                : html`\n                    <span class=\"number\">${displayIndex}</span>\n                  `}\n      </span>\n    `;\n\n    const contentTemplate = () => html`\n      <span class=\"content\" part=\"content\">\n        <span class=\"sr-only\">${srLabel}</span>\n        <span class=\"label\" part=\"label\">\n          <span class=\"label-text\"><slot></slot></span>\n          ${() =>\n            props.optional.value\n              ? html`\n                  <span class=\"optional-hint\">(optional)</span>\n                `\n              : ''}\n        </span>\n        <span class=\"description\" part=\"description\" ?hidden=\"${() => !slots.has('description').value}\">\n          <slot name=\"description\"></slot>\n        </span>\n      </span>\n    `;\n\n    return html`\n      <li class=\"step\" role=\"listitem\">\n        <span class=\"connector connector-leading\" part=\"connector\" aria-hidden=\"true\"></span>\n        <span class=\"connector connector-trailing\" part=\"connector\" aria-hidden=\"true\"></span>\n        ${() =>\n          isNavigable()\n            ? html`\n                <button\n                  type=\"button\"\n                  class=\"control\"\n                  part=\"control\"\n                  aria-current=\"${() => (isCurrent() ? 'step' : null)}\"\n                  aria-disabled=\"${isDisabled}\"\n                  tabindex=\"${() => (isCurrent() ? '0' : '-1')}\"\n                  @click=\"${handleClick}\">\n                  ${indicatorTemplate()}${contentTemplate()}\n                </button>\n              `\n            : html`\n                <div class=\"control\" part=\"control\" aria-current=\"${() => (isCurrent() ? 'step' : null)}\">\n                  ${indicatorTemplate()}${contentTemplate()}\n                </div>\n              `}\n      </li>\n    `;\n  },\n  styles: [colorThemeMixin, coarsePointerMixin, forcedColorsFocusMixin('button.control'), stepStyles],\n});\n"],"mappings":"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"}

package/dist/stepper.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/keyboard.cjs"),n=require("./core/direction.cjs"),r=require("./core/nav.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./content/stepper/_is-step-navigable.cjs"),o=require("./content/stepper/stepper.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple"),l=require("@vielzeug/ripple/watch");var u=(0,s.createContext)(`StepperContext`),d=`ore-stepper`;(0,s.define)(d,{props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,clickable:s.prop.bool(!1),label:s.prop.string(`Progress`),linear:s.prop.bool(!1),orientation:s.prop.oneOf([`horizontal`,`vertical`],`horizontal`),value:s.prop.string()},setup(i){let o=(0,s.getHost)(),d=(0,s.useEmit)(),f=(0,s.useSlots)(),p=()=>Array.from(o.querySelectorAll(`:scope > ore-step`)),m=e=>{e?.shadowRoot?.querySelector(`button.control`)?.focus()},h=(0,c.signal)(i.value.value);(0,s.bind)({attr:{value:()=>h.value??null}});let g=(e,t=!1)=>{!e||e===h.value||(h.value=e,t&&d(`change`,{value:e}))},_=()=>{let e=p();if(e.length===0)return;let t=h.value;if(t&&e.some(e=>e.getAttribute(`value`)===t))return;let n=e.find(e=>!e.hasAttribute(`disabled`))?.getAttribute(`value`)??void 0;n&&g(n)};(0,l.watch)(i.value,e=>{h.value=e,_()});let v=(0,c.computed)(()=>(f.elements().value,p().map(e=>e.getAttribute(`value`)??``)));(0,s.provide)(u,{clickable:(0,c.computed)(()=>!!i.clickable.value&&!i.disabled.value),color:i.color,currentValue:h,linear:(0,c.computed)(()=>!!i.linear.value),orientation:(0,c.computed)(()=>i.orientation.value??`horizontal`),size:i.size,stepValues:v}),(0,s.onMounted)(()=>_());let y=()=>{let e=p(),t=e.map(e=>e.getAttribute(`value`)??``).indexOf(h.value??``),n=!!i.clickable.value&&!i.disabled.value,r=!!i.linear.value;return e.filter((e,i)=>a.isStepNavigable({disabled:e.hasAttribute(`disabled`),index:i,linear:r,stepperClickable:n,stepperCurrentIndex:t}))},b=r.createListControl({direction:()=>n.elementDirection(o),getItems:y,loop:!1,onNavigate:(e,t)=>{let n=y()[t],r=n?.getAttribute(`value`);r&&g(r,!0),m(n)},orientation:()=>i.orientation.value===`vertical`?`vertical`:`horizontal`,signal:e.lifecycleSignal(s.onCleanup)}),x=e=>{let t=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`ore-step`);if(!t||t.closest(`ore-stepper`)!==o||!y().includes(t))return;let n=t.getAttribute(`value`);g(n??void 0,!0),m(t)},S=t.createInteraction({onPress:()=>{let e=y().find(e=>e===document.activeElement||e.shadowRoot?.activeElement===document.activeElement),t=e?.getAttribute(`value`);t&&(g(t,!0),m(e))}});return(0,s.bind)({on:{click:x,keydown:e=>{let t=y();if(t.length===0)return;let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`ore-step`),r=n?t.indexOf(n):-1;r>=0&&b.set(r),!b.handleKeydown(e)&&S.handleKeydown(e)}}}),s.html`
+      <nav part="nav" aria-label="${i.label}">
+        <ol class="steps" role="list" part="list">
+          <slot></slot>
+        </ol>
+      </nav>
+    `},styles:[o.default]}),exports.STEPPER_CTX=u,exports.STEPPER_TAG=d;
+//# sourceMappingURL=stepper.cjs.map

package/dist/stepper.cjs.map

@@ -0,0 +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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"}

package/dist/stepper.js

@@ -0,0 +1,101 @@
+import { lifecycleSignal as e } from "./core/ore.js";
+import { createInteraction as t } from "./core/keyboard.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";
+//#region src/content/stepper/stepper.ts
+var C = u("StepperContext"), w = "ore-stepper";
+d(w, {
+	props: {
+		...o,
+		...a,
+		...i,
+		clickable: g.bool(!1),
+		label: g.string("Progress"),
+		linear: g.bool(!1),
+		orientation: g.oneOf(["horizontal", "vertical"], "horizontal"),
+		value: g.string()
+	},
+	setup(i) {
+		let a = f(), o = v(), c = y(), u = () => Array.from(a.querySelectorAll(":scope > ore-step")), d = (e) => {
+			e?.shadowRoot?.querySelector("button.control")?.focus();
+		}, g = x(i.value.value);
+		l({ attr: { value: () => g.value ?? null } });
+		let w = (e, t = !1) => {
+			!e || e === g.value || (g.value = e, t && o("change", { value: e }));
+		}, T = () => {
+			let e = u();
+			if (e.length === 0) return;
+			let t = g.value;
+			if (t && e.some((e) => e.getAttribute("value") === t)) return;
+			let n = e.find((e) => !e.hasAttribute("disabled"))?.getAttribute("value") ?? void 0;
+			n && w(n);
+		};
+		S(i.value, (e) => {
+			g.value = e, T();
+		});
+		let E = b(() => (c.elements().value, u().map((e) => e.getAttribute("value") ?? "")));
+		_(C, {
+			clickable: b(() => !!i.clickable.value && !i.disabled.value),
+			color: i.color,
+			currentValue: g,
+			linear: b(() => !!i.linear.value),
+			orientation: b(() => i.orientation.value ?? "horizontal"),
+			size: i.size,
+			stepValues: E
+		}), 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({
+				disabled: e.hasAttribute("disabled"),
+				index: i,
+				linear: r,
+				stepperClickable: n,
+				stepperCurrentIndex: t
+			}));
+		}, O = r({
+			direction: () => n(a),
+			getItems: D,
+			loop: !1,
+			onNavigate: (e, t) => {
+				let n = D()[t], r = n?.getAttribute("value");
+				r && w(r, !0), d(n);
+			},
+			orientation: () => i.orientation.value === "vertical" ? "vertical" : "horizontal",
+			signal: e(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: () => {
+			let e = D().find((e) => e === document.activeElement || e.shadowRoot?.activeElement === document.activeElement), t = e?.getAttribute("value");
+			t && (w(t, !0), d(e));
+		} });
+		return l({ on: {
+			click: k,
+			keydown: (e) => {
+				let t = D();
+				if (t.length === 0) return;
+				let n = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "ore-step"), r = n ? t.indexOf(n) : -1;
+				r >= 0 && O.set(r), !O.handleKeydown(e) && A.handleKeydown(e);
+			}
+		} }), p`
+      <nav part="nav" aria-label="${i.label}">
+        <ol class="steps" role="list" part="list">
+          <slot></slot>
+        </ol>
+      </nav>
+    `;
+	},
+	styles: [c]
+});
+//#endregion
+export { C as STEPPER_CTX, w as STEPPER_TAG };
+
+//# sourceMappingURL=stepper.js.map

package/dist/stepper.js.map

@@ -0,0 +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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"}

package/dist/styles/index.d.ts

@@ -11,32 +11,4 @@ export { colorThemeMixin, elevationMixin, forcedColorsFocusMixin, forcedColorsFo
 export { frostVariantMixin } from './mixins/variants.css';
 export { fieldVariantMixin, type FieldVariantMixinOptions } from './mixins/field-variants.css';
 export { tableBaseMixin } from './mixins/table-base.css';
-/**
- * Base mixins for elevated surface components (box, card).
- * Covers theming, elevation shadows, padding, and border radius.
- *
- * @example
- * ```ts
- * styles: [...surfaceMixins, frostVariantMixin('.box'), componentStyles]
- * ```
- */
-export declare const surfaceMixins: readonly [import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult];
-/**
- * Base mixins shared by every text input component (input, textarea, file-input).
- * Covers theming, coarse-pointer targets, reduced-motion, border radius, and
- * disabled/loading states.
- *
- * **Required additions** (component-specific arguments, so not included here):
- * - `sizeVariantMixin(YOUR_PRESET)` — supply the component's size config.
- * - `forcedColorsFocusMixin(selector)` — **mandatory** for WCAG forced-colors
- *   compliance. Pass the CSS selector for the component's focusable inner
- *   element (e.g. `'input'`, `'textarea'`, `'.dropzone'`). Omitting this
- *   removes the focus ring in Windows High Contrast mode.
- *
- * @example
- * ```ts
- * styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles]
- * ```
- */
-export declare const fieldMixins: readonly [import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult, import("@vielzeug/ore").CSSResult];
 //# 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;AAQH,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;AAIzD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,uJAAgF,CAAC;AAE3G;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,0LAMd,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,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"}

package/dist/styles/mixins/shape.css.cjs

@@ -49,7 +49,7 @@ let e=require("@vielzeug/ore");var t=e.css`
     --_radius: var(--rounded-full);
   }
 `,r={fontSize:`--_font-size`,gap:`--_gap`,height:`--_height`,iconSize:`--_icon-size`,lineHeight:`--_line-height`,padding:`--_padding`,size:`--_size`,thumbSize:`--_thumb-size`,width:`--_width`},i=e=>Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>`${e.startsWith(`--`)?e:r[e]??`--_${e}`}: ${t};`).join(`
-        `),a=t=>{let n=i({fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`,size:`var(--size-4)`,...t?.sm}),r=i({fontSize:`var(--text-sm)`,gap:`var(--size-2)`,size:`var(--size-5)`,...t?.md});return e.css`
+        `),a=t=>{let n=i({fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`,size:`var(--size-4)`,...t?.sm}),r=i({fontSize:`var(--text-sm)`,gap:`var(--size-2)`,size:`var(--size-5)`,...t?.md}),a=i({fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,size:`var(--size-6)`,...t?.lg});return e.css`
     :host {
       ${r}
     }
@@ -60,7 +60,7 @@ let e=require("@vielzeug/ore");var t=e.css`
       ${r}
     }
     :host([size='lg']) {
-      ${i({fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,size:`var(--size-6)`,...t?.lg})}
+      ${a}
     }
   `};exports.paddingMixin=t,exports.roundedVariantMixin=n,exports.sizeVariantMixin=a;
 //# sourceMappingURL=shape.css.cjs.map

package/dist/styles/mixins/shape.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"shape.css.cjs","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":"+BAoBA,IAAa,EAAe,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EA4ClB,EAAsB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFhC,EAAmC,CACvC,SAAU,eACV,IAAK,SACL,OAAQ,YACR,SAAU,eACV,WAAY,iBACZ,QAAS,aACT,KAAM,UACN,UAAW,gBACX,MAAO,UACT,EAEM,EAAiB,GACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,EAAG,KAAO,IAAM,IAAA,EAAS,CAAC,CAClC,KAAK,CAAC,EAAG,KAAO,GAAG,EAAE,WAAW,IAAI,EAAI,EAAK,EAAS,IAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK;SAAY,EAET,EAAoB,GAAmE,CAClG,IAAM,EAAK,EAAc,CACvB,SAAU,iBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,EAAc,CACvB,SAAU,iBACV,IAAK,gBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EAQD,MAAO,GAAA,GAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAfE,EAAc,CACvB,SAAU,mBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAaM,EAAG;;GAGX"}
+{"version":3,"file":"shape.css.cjs","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":"+BAoBA,IAAa,EAAe,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EA4ClB,EAAsB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFhC,EAAmC,CACvC,SAAU,eACV,IAAK,SACL,OAAQ,YACR,SAAU,eACV,WAAY,iBACZ,QAAS,aACT,KAAM,UACN,UAAW,gBACX,MAAO,UACT,EAEM,EAAiB,GACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,EAAG,KAAO,IAAM,IAAA,EAAS,CAAC,CAClC,KAAK,CAAC,EAAG,KAAO,GAAG,EAAE,WAAW,IAAI,EAAI,EAAK,EAAS,IAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK;SAAY,EAET,EAAoB,GAAmE,CAClG,IAAM,EAAK,EAAc,CACvB,SAAU,iBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,EAAc,CACvB,SAAU,iBACV,IAAK,gBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,EAAc,CACvB,SAAU,mBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EAED,MAAO,GAAA,GAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;GAGX"}

package/dist/styles/mixins/shape.css.js

@@ -71,6 +71,11 @@ var t = e`
 		gap: "var(--size-2)",
 		size: "var(--size-5)",
 		...t?.md
+	}), a = i({
+		fontSize: "var(--text-base)",
+		gap: "var(--size-2-5)",
+		size: "var(--size-6)",
+		...t?.lg
 	});
 	return e`
     :host {
@@ -83,12 +88,7 @@ var t = e`
       ${r}
     }
     :host([size='lg']) {
-      ${i({
-		fontSize: "var(--text-base)",
-		gap: "var(--size-2-5)",
-		size: "var(--size-6)",
-		...t?.lg
-	})}
+      ${a}
     }
   `;
 };

package/dist/styles/mixins/shape.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"shape.css.js","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":";;AAoBA,IAAa,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;GA4ClB,IAAsB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFhC,IAAmC;CACvC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,SAAS;CACT,MAAM;CACN,WAAW;CACX,OAAO;AACT,GAEM,KAAiB,MACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,GAAG,OAAO,MAAM,KAAA,CAAS,CAAC,CAClC,KAAK,CAAC,GAAG,OAAO,GAAG,EAAE,WAAW,IAAI,IAAI,IAAK,EAAS,MAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK,YAAY,GAET,KAAoB,MAAmE;CAClG,IAAM,IAAK,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAAC,GACK,IAAK,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAAC;CAQD,OAAO,CAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAfE,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAaM,EAAG;;;AAGX"}
+{"version":3,"file":"shape.css.js","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":";;AAoBA,IAAa,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;GA4ClB,IAAsB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFhC,IAAmC;CACvC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,SAAS;CACT,MAAM;CACN,WAAW;CACX,OAAO;AACT,GAEM,KAAiB,MACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,GAAG,OAAO,MAAM,KAAA,CAAS,CAAC,CAClC,KAAK,CAAC,GAAG,OAAO,GAAG,EAAE,WAAW,IAAI,IAAI,IAAK,EAAS,MAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK,YAAY,GAET,KAAoB,MAAmE;CAClG,IAAM,IAAK,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAAC,GACK,IAAK,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAAC,GACK,IAAK,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAAC;CAED,OAAO,CAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;AAGX"}

package/dist/styles/tokens.css

@@ -0,0 +1,4 @@
+/* Global design tokens and cascade-layer ordering. This intentionally excludes resets. */
+@import url('theme.css');
+@import url('animation.css');
+@import url('layer.css');

package/dist/switch.cjs

@@ -1,10 +1,10 @@
-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("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/switch/switch.css.cjs");let f=require("@vielzeug/ore"),p=require("@vielzeug/ore/forms");var m=`ore-switch`;(0,f.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.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.useEmit)(),n=(0,f.inject)(l.FORM_CTX),r=l.useFormContext(e,n),i=s.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:r.disabled,error:e.error,helper:e.helper,onToggle:e=>{i.triggerValidation(`change`),t(`change`,e)},prefix:`switch`,signal:o.lifecycleSignal(f.onCleanup),validateOn:n?.validateOn,value:e.value});i.attachFormField((0,p.useField)({disabled:i.disabled,toFormValue:e=>e,value:i.checkableFormValue}));let{assistiveId:a,checked:d,disabled:m,errorText:h,handleClick:g,handleKeydown:_,helperText:v,labelId:y}=i;return c.applyCheckableBinding(r.size,{assistiveId:a,checked:d,disabled:m,errorText:h,handleClick:g,handleKeydown:_,helperText:v,labelId:y},`switch`),f.html`
+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`
       <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="${y}"><slot></slot></span>
-      ${u.renderHelperRegion(a,h,v)}
-    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.SWITCH_SIZE_PRESET),d.default]}),exports.SWITCH_TAG=m;
+      <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;
 //# 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, inject, prop, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable } from '../../headless';\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 { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: CheckableChangePayload;\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 change - Emitted when switch is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }\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 emit = useEmit<OreSwitchEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\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    applyCheckableBinding(\n      fCtxProps.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":"soBAyEA,IAAa,EAAa,0BACH,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,EAAA,EAAA,QAAA,CAAgC,EAEhC,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EAEzC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAK,SAAU,CAAO,CACxB,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EAAA,EAAA,SAAA,CACgB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAQvG,OANA,EAAA,sBACE,EAAU,KACV,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, 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"}