@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/dist/styles/visually-hidden.styles.js

@@ -0,0 +1,19 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * `.visually-hidden`: text that assistive technology reads but that takes no visual space
+ * (status text, labels for icon-only controls). Structural: no tokens.
+ */
+export const visuallyHiddenStyles = css `
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+//# sourceMappingURL=visually-hidden.styles.js.map

package/dist/styles/visually-hidden.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.styles.js","sourceRoot":"","sources":["../../src/styles/visually-hidden.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYtC,CAAC"}

package/dist/switch/foundation.d.ts

@@ -0,0 +1,7 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { controlIndicatorStructuralStyles } from '../styles/control-indicator.structural.styles.js';
+export { OddkinSwitch, SWITCH_STRINGS, inputEvent, changeEvent } from './switch.js';
+export { switchTemplate } from './switch.template.js';
+export { switchStructuralStyles } from './switch.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/switch/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/switch/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,gCAAgC,EAAE,MAAM,kDAAkD,CAAC;AACpG,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/switch/foundation.js

@@ -0,0 +1,9 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { controlIndicatorStructuralStyles } from '../styles/control-indicator.structural.styles.js';
+export { OddkinSwitch, SWITCH_STRINGS, inputEvent, changeEvent } from './switch.js';
+export { switchTemplate } from './switch.template.js';
+export { switchStructuralStyles } from './switch.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/switch/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/switch/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,gCAAgC,EAAE,MAAM,kDAAkD,CAAC;AACpG,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/switch/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinSwitch, SWITCH_STRINGS, inputEvent, changeEvent } from './switch.js';
+export { switchTemplate } from './switch.template.js';
+export { switchStructuralStyles } from './switch.structural.styles.js';
+export { switchStyles } from './switch.styles.js';
+export { switchDefinition } from './switch.definition.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/switch/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/switch/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/switch`.
+export { OddkinSwitch, SWITCH_STRINGS, inputEvent, changeEvent } from './switch.js';
+export { switchTemplate } from './switch.template.js';
+export { switchStructuralStyles } from './switch.structural.styles.js';
+export { switchStyles } from './switch.styles.js';
+export { switchDefinition } from './switch.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/switch/index.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/switch/switch.d.ts

@@ -0,0 +1,46 @@
+import { type ElementEvents } from '@oddkin/core/element';
+import { OddkinCheckable, changeEvent, inputEvent } from '../form-control/checkable.js';
+export { changeEvent, inputEvent };
+export declare const SWITCH_STRINGS: {
+    on: string;
+    off: string;
+};
+declare const OddkinSwitch_base: import("@oddkin/core/element").WithProps<typeof OddkinCheckable, {
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        on: string;
+        off: string;
+    }> | undefined>;
+}>;
+/**
+ * An on/off setting that participates in forms like a checkbox: a native checkbox with
+ * `role="switch"` in the shadow root, drawn as a track and thumb, labelled by the slotted text.
+ *
+ * @slot - The label; names the switch.
+ * @csspart field - Wrapper of the switch row, description, and error.
+ * @csspart label - The label text beside the track.
+ * @csspart control - The native checkbox with `role="switch"` (the drawn track).
+ * @csspart thumb - The thumb inside the track.
+ * @csspart state - The visible on/off text (`strings.on`, `strings.off`), hidden from assistive technology.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The switch shows its error: `error` is set, or a required switch is off after the user left it or a validity check failed. Style it with `odd-switch:state(user-invalid)`.
+ * @a11y The slotted text names the switch through its `<label>`; the role announces on and off, so the visible state text is hidden from assistive technology. Description and error are announced through `aria-describedby`.
+ * @keyboard Space toggles; Tab order as a native checkbox.
+ * @previewRole switch
+ * @useFor A setting that takes effect at once, such as turning notifications on or off.
+ * @notFor A choice confirmed with a submit button (use odd-checkbox); one choice among several (use odd-radio-group).
+ * @limitation Validation bubbles anchor to the inner checkbox.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export declare class OddkinSwitch extends OddkinSwitch_base {
+    readonly _events?: ElementEvents<typeof OddkinSwitch>;
+    /** @internal The visible state text. */
+    get _stateText(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-switch': OddkinSwitch;
+    }
+}
+//# sourceMappingURL=switch.d.ts.map

package/dist/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AAEnC,eAAO,MAAM,cAAc;IAAK,EAAE;IAAQ,GAAG;CAAS,CAAC;;;;;;;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,YAAa,SAAQ,iBAIhC;IACA,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,YAAY,CAAC,CAAC;IAE9D,wCAAwC;IACxC,IAAI,UAAU,IAAI,MAAM,CAGvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,YAAY,CAAC;KAC5B;CACF"}

package/dist/switch/switch.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="switch.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=switch.define.d.ts.map

package/dist/switch/switch.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.define.d.ts","sourceRoot":"","sources":["../../src/switch/switch.define.ts"],"names":[],"mappings":""}

package/dist/switch/switch.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./switch.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { switchDefinition } from './switch.definition.js';
+define(switchDefinition);
+//# sourceMappingURL=switch.define.js.map

package/dist/switch/switch.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.define.js","sourceRoot":"","sources":["../../src/switch/switch.define.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/switch/switch.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinSwitch } from './switch.js';
+export declare const switchDefinition: import("@oddkin/core/element").ElementDefinition<OddkinSwitch>;
+//# sourceMappingURL=switch.definition.d.ts.map

package/dist/switch/switch.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.definition.d.ts","sourceRoot":"","sources":["../../src/switch/switch.definition.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,eAAO,MAAM,gBAAgB,gEAc3B,CAAC"}

package/dist/switch/switch.definition.js

@@ -0,0 +1,27 @@
+import { compose } from '@oddkin/core/element';
+import { controlIndicatorStructuralStyles } from '../styles/control-indicator.structural.styles.js';
+import { controlIndicatorStyles } from '../styles/control-indicator.styles.js';
+import { controlStyles } from '../styles/control.styles.js';
+import { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinSwitch } from './switch.js';
+import { switchStructuralStyles } from './switch.structural.styles.js';
+import { switchStyles } from './switch.styles.js';
+import { switchTemplate } from './switch.template.js';
+export const switchDefinition = compose({
+    name: 'odd-switch',
+    element: OddkinSwitch,
+    template: switchTemplate,
+    styles: [
+        hostStyles,
+        fieldStructuralStyles,
+        controlIndicatorStructuralStyles,
+        switchStructuralStyles,
+        focusRingStyles,
+        controlStyles,
+        controlIndicatorStyles,
+        switchStyles,
+    ],
+});
+//# sourceMappingURL=switch.definition.js.map

package/dist/switch/switch.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.definition.js","sourceRoot":"","sources":["../../src/switch/switch.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,gCAAgC,EAAE,MAAM,kDAAkD,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACtC,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,YAAY;IACrB,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE;QACN,UAAU;QACV,qBAAqB;QACrB,gCAAgC;QAChC,sBAAsB;QACtB,eAAe;QACf,aAAa;QACb,sBAAsB;QACtB,YAAY;KACb;CACF,CAAC,CAAC"}

package/dist/switch/switch.js

@@ -0,0 +1,39 @@
+import { prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { OddkinCheckable, changeEvent, inputEvent } from '../form-control/checkable.js';
+export { changeEvent, inputEvent };
+export const SWITCH_STRINGS = { on: 'On', off: 'Off' };
+/**
+ * An on/off setting that participates in forms like a checkbox: a native checkbox with
+ * `role="switch"` in the shadow root, drawn as a track and thumb, labelled by the slotted text.
+ *
+ * @slot - The label; names the switch.
+ * @csspart field - Wrapper of the switch row, description, and error.
+ * @csspart label - The label text beside the track.
+ * @csspart control - The native checkbox with `role="switch"` (the drawn track).
+ * @csspart thumb - The thumb inside the track.
+ * @csspart state - The visible on/off text (`strings.on`, `strings.off`), hidden from assistive technology.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The switch shows its error: `error` is set, or a required switch is off after the user left it or a validity check failed. Style it with `odd-switch:state(user-invalid)`.
+ * @a11y The slotted text names the switch through its `<label>`; the role announces on and off, so the visible state text is hidden from assistive technology. Description and error are announced through `aria-describedby`.
+ * @keyboard Space toggles; Tab order as a native checkbox.
+ * @previewRole switch
+ * @useFor A setting that takes effect at once, such as turning notifications on or off.
+ * @notFor A choice confirmed with a submit button (use odd-checkbox); one choice among several (use odd-radio-group).
+ * @limitation Validation bubbles anchor to the inner checkbox.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinSwitch extends OddkinCheckable.with({
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    /** @internal The visible state text. */
+    get _stateText() {
+        const text = strings(SWITCH_STRINGS, this.strings);
+        return this.checked ? text.on : text.off;
+    }
+}
+//# sourceMappingURL=switch.js.map

package/dist/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AAEnC,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,YAAa,SAAQ,eAAe,CAAC,IAAI,CAAC;IACrD,OAAO,EAAE,IAAI,CAAC,MAAM,CAAiC;QACnD,WAAW,EAAE,6BAA6B;KAC3C,CAAC;CACH,CAAC;IAGA,wCAAwC;IACxC,IAAI,UAAU;QACZ,MAAM,IAAI,GAAG,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IAC3C,CAAC;CACF"}

package/dist/switch/switch.structural.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The switch: a 2.5rem × 1.5rem track (the native checkbox with `appearance: none`) with a 1rem
+ * thumb at its inline start, moved to its inline end while checked (mirrored right to left by
+ * the logical margin). Forced colours win over the skin by one class. No brand tokens.
+ */
+export declare const switchStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=switch.structural.styles.d.ts.map

package/dist/switch/switch.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.structural.styles.d.ts","sourceRoot":"","sources":["../../src/switch/switch.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,yCA6ClC,CAAC"}

package/dist/switch/switch.structural.styles.js

@@ -0,0 +1,53 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The switch: a 2.5rem × 1.5rem track (the native checkbox with `appearance: none`) with a 1rem
+ * thumb at its inline start, moved to its inline end while checked (mirrored right to left by
+ * the logical margin). Forced colours win over the skin by one class. No brand tokens.
+ */
+export const switchStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .switch-track {
+    box-sizing: border-box;
+    display: block;
+    inline-size: 2.5rem;
+    block-size: 1.5rem;
+    margin: 0;
+    appearance: none;
+    cursor: inherit;
+  }
+  .switch-thumb {
+    box-sizing: border-box;
+    justify-self: start;
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin-inline-start: 0.25rem;
+    pointer-events: none;
+  }
+  .switch-track:checked + .switch-thumb {
+    margin-inline-start: 1.25rem;
+  }
+  @media (forced-colors: active) {
+    .indicator > .switch-track {
+      border: 1px solid CanvasText;
+    }
+    .indicator > .switch-track:checked {
+      border-color: Highlight;
+      background: Highlight;
+    }
+    .choice .indicator > .switch-track + .switch-thumb {
+      background: CanvasText;
+    }
+    .choice .indicator > .switch-track:disabled + .switch-thumb {
+      background: GrayText;
+    }
+    .choice .indicator > .switch-track:checked + .switch-thumb {
+      background: HighlightText;
+    }
+    .indicator > .switch-track:disabled {
+      border-color: GrayText;
+    }
+  }
+`;
+//# sourceMappingURL=switch.structural.styles.js.map

package/dist/switch/switch.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.structural.styles.js","sourceRoot":"","sources":["../../src/switch/switch.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxC,CAAC"}

package/dist/switch/switch.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Oddkin's default switch (Common page, Figma `switch`): a full-radius track with the strong
+ * border on the sunken surface, the selection background when on; the thumb in secondary text,
+ * the selection foreground when on, and disabled text when disabled and off.
+ */
+export declare const switchStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=switch.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,YAAY,yCA4BxB,CAAC"}

package/dist/switch/switch.styles.js

@@ -0,0 +1,37 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default switch (Common page, Figma `switch`): a full-radius track with the strong
+ * border on the sunken surface, the selection background when on; the thumb in secondary text,
+ * the selection foreground when on, and disabled text when disabled and off.
+ */
+export const switchStyles = css `
+  .switch-track {
+    border: ${token('border.width.default')} solid ${token('color.border.strong')};
+    border-radius: ${token('radius.full')};
+    background: ${token('color.surface.sunken')};
+    transition-property: border-color, background-color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  .switch-track:checked {
+    background: ${token('color.selection.background')};
+  }
+  .switch-track[aria-invalid='true'] {
+    border-color: ${token('color.danger.foreground')};
+  }
+  .switch-thumb {
+    border-radius: ${token('radius.full')};
+    background: ${token('color.text.secondary')};
+    transition-property: margin-inline-start, background-color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  .switch-track:disabled + .switch-thumb {
+    background: ${token('color.text.disabled')};
+  }
+  .switch-track:checked + .switch-thumb {
+    background: ${token('color.selection.foreground')};
+  }
+`;
+//# sourceMappingURL=switch.styles.js.map

package/dist/switch/switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;cAEjB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,sBAAsB,CAAC;;2BAEpB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;kBAG/C,KAAK,CAAC,4BAA4B,CAAC;;;oBAGjC,KAAK,CAAC,yBAAyB,CAAC;;;qBAG/B,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,sBAAsB,CAAC;;2BAEpB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;kBAG/C,KAAK,CAAC,qBAAqB,CAAC;;;kBAG5B,KAAK,CAAC,4BAA4B,CAAC;;CAEpD,CAAC"}

package/dist/switch/switch.template.d.ts

@@ -0,0 +1,9 @@
+import type { OddkinSwitch } from './switch.js';
+/**
+ * Anatomy: a `<label>` row holding the drawn track (the native checkbox with `role="switch"`,
+ * `part="control"`, and its `thumb`), the slotted label text (`part="label"`), and the on/off text
+ * (`part="state"`, hidden from assistive technology); `description` and `error` parts below,
+ * referenced by `aria-describedby`.
+ */
+export declare const switchTemplate: (toggle: OddkinSwitch) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=switch.template.d.ts.map

package/dist/switch/switch.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.template.d.ts","sourceRoot":"","sources":["../../src/switch/switch.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,WAAY,YAAY,mDA6B1C,CAAC"}

package/dist/switch/switch.template.js

@@ -0,0 +1,39 @@
+import { live } from '@oddkin/core/helpers/live';
+import { html } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+/**
+ * Anatomy: a `<label>` row holding the drawn track (the native checkbox with `role="switch"`,
+ * `part="control"`, and its `thumb`), the slotted label text (`part="label"`), and the on/off text
+ * (`part="state"`, hidden from assistive technology); `description` and `error` parts below,
+ * referenced by `aria-describedby`.
+ */
+export const switchTemplate = (toggle) => html `<div part="field" class="field">
+    <label class="choice">
+      <span class="indicator">
+        <input
+          part="control"
+          id="control"
+          class="switch-track"
+          type="checkbox"
+          role="switch"
+          .checked=${live(toggle._currentChecked)}
+          ?required=${toggle.required}
+          ?disabled=${toggle.disabled || toggle._formDisabled.value}
+          aria-describedby=${toggle._describedBy}
+          aria-invalid=${toggle._userInvalid.value ? 'true' : null}
+          @input=${toggle._onInput}
+          @change=${toggle._onChange}
+          @blur=${toggle._onBlur}
+        />
+        <span part="thumb" class="switch-thumb"></span>
+      </span>
+      <span part="label" class="label"><slot></slot></span>
+      <span part="state" class="state" aria-hidden="true">${toggle._stateText}</span>
+    </label>
+    <div part="description" id="description" class="description" ?hidden=${!toggle.description}>
+      ${toggle.description}
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!toggle.error}>${toggle.error}</div>
+    ${externalDescriptionTemplate(toggle._externalDescription)}
+  </div>`;
+//# sourceMappingURL=switch.template.js.map

package/dist/switch/switch.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.template.js","sourceRoot":"","sources":["../../src/switch/switch.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAG7E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAoB,EAAE,EAAE,CACrD,IAAI,CAAA;;;;;;;;;qBASe,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC;sBAC3B,MAAM,CAAC,QAAQ;sBACf,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,KAAK;6BACtC,MAAM,CAAC,YAAY;yBACvB,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;mBAC/C,MAAM,CAAC,QAAQ;oBACd,MAAM,CAAC,SAAS;kBAClB,MAAM,CAAC,OAAO;;;;;4DAK4B,MAAM,CAAC,UAAU;;2EAEF,CAAC,MAAM,CAAC,WAAW;QACtF,MAAM,CAAC,WAAW;;yDAE+B,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK;MAChF,2BAA2B,CAAC,MAAM,CAAC,oBAAoB,CAAC;SACrD,CAAC"}

package/dist/tab-panel/foundation.d.ts

@@ -0,0 +1,5 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { OddkinTabPanel } from './tab-panel.js';
+export { tabPanelTemplate } from './tab-panel.template.js';
+export { tabPanelStructuralStyles } from './tab-panel.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/tab-panel/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/tab-panel/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/tab-panel/foundation.js

@@ -0,0 +1,7 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { OddkinTabPanel } from './tab-panel.js';
+export { tabPanelTemplate } from './tab-panel.template.js';
+export { tabPanelStructuralStyles } from './tab-panel.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/tab-panel/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/tab-panel/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/tab-panel/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinTabPanel } from './tab-panel.js';
+export { tabPanelTemplate } from './tab-panel.template.js';
+export { tabPanelStructuralStyles } from './tab-panel.structural.styles.js';
+export { tabPanelStyles } from './tab-panel.styles.js';
+export { tabPanelDefinition } from './tab-panel.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/tab-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-panel/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/tab-panel/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/tab-panel`.
+export { OddkinTabPanel } from './tab-panel.js';
+export { tabPanelTemplate } from './tab-panel.template.js';
+export { tabPanelStructuralStyles } from './tab-panel.structural.styles.js';
+export { tabPanelStyles } from './tab-panel.styles.js';
+export { tabPanelDefinition } from './tab-panel.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/tab-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tab-panel/index.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/tab-panel/tab-panel.d.ts

@@ -0,0 +1,30 @@
+import { OddkinElement } from '@oddkin/core/element';
+import type { Scope } from '@oddkin/core/scope';
+declare const OddkinTabPanel_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly value: import("@oddkin/core/element").PropDefinition<string>;
+    readonly disabled: import("@oddkin/core/element").PropDefinition<boolean>;
+}>;
+/**
+ * One panel of `odd-tabs`: its tab's text, its value, and the content shown while its tab is
+ * selected. `odd-tabs` assigns it to a tab panel inside its own shadow root, so the tab and the
+ * panel reference each other while the content stays in the light DOM.
+ *
+ * @slot - The panel content.
+ * @a11y The surrounding `odd-tabs` gives the panel `role="tabpanel"`, names it by its tab, and hides it while another tab is selected; on its own it has no role.
+ * @previewRole tabPanel
+ * @useFor The content of one tab of odd-tabs.
+ * @notFor Content outside odd-tabs (use a section with a heading).
+ * @category Navigation
+ * @customization 2 3
+ */
+export declare class OddkinTabPanel extends OddkinTabPanel_base {
+    protected connected(_scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-tab-panel': OddkinTabPanel;
+    }
+}
+export {};
+//# sourceMappingURL=tab-panel.d.ts.map

package/dist/tab-panel/tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../src/tab-panel/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;;;;;;AAEhD;;;;;;;;;;;;GAYG;AACH,qBAAa,cAAe,SAAQ,mBAQlC;IACA,UAAmB,SAAS,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI,CAGhD;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF"}

package/dist/tab-panel/tab-panel.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="tab-panel.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=tab-panel.define.d.ts.map

package/dist/tab-panel/tab-panel.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.define.d.ts","sourceRoot":"","sources":["../../src/tab-panel/tab-panel.define.ts"],"names":[],"mappings":""}

package/dist/tab-panel/tab-panel.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./tab-panel.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { tabPanelDefinition } from './tab-panel.definition.js';
+define(tabPanelDefinition);
+//# sourceMappingURL=tab-panel.define.js.map

package/dist/tab-panel/tab-panel.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.define.js","sourceRoot":"","sources":["../../src/tab-panel/tab-panel.define.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,CAAC,kBAAkB,CAAC,CAAC"}

package/dist/tab-panel/tab-panel.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinTabPanel } from './tab-panel.js';
+export declare const tabPanelDefinition: import("@oddkin/core/element").ElementDefinition<OddkinTabPanel>;
+//# sourceMappingURL=tab-panel.definition.d.ts.map

package/dist/tab-panel/tab-panel.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.definition.d.ts","sourceRoot":"","sources":["../../src/tab-panel/tab-panel.definition.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAKhD,eAAO,MAAM,kBAAkB,kEAK7B,CAAC"}

package/dist/tab-panel/tab-panel.definition.js

@@ -0,0 +1,13 @@
+import { compose } from '@oddkin/core/element';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinTabPanel } from './tab-panel.js';
+import { tabPanelStructuralStyles } from './tab-panel.structural.styles.js';
+import { tabPanelStyles } from './tab-panel.styles.js';
+import { tabPanelTemplate } from './tab-panel.template.js';
+export const tabPanelDefinition = compose({
+    name: 'odd-tab-panel',
+    element: OddkinTabPanel,
+    template: tabPanelTemplate,
+    styles: [hostStyles, tabPanelStructuralStyles, tabPanelStyles],
+});
+//# sourceMappingURL=tab-panel.definition.js.map

package/dist/tab-panel/tab-panel.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.definition.js","sourceRoot":"","sources":["../../src/tab-panel/tab-panel.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACxC,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,CAAC,UAAU,EAAE,wBAAwB,EAAE,cAAc,CAAC;CAC/D,CAAC,CAAC"}

package/dist/tab-panel/tab-panel.js

@@ -0,0 +1,28 @@
+import { OddkinElement, prop } from '@oddkin/core/element';
+/**
+ * One panel of `odd-tabs`: its tab's text, its value, and the content shown while its tab is
+ * selected. `odd-tabs` assigns it to a tab panel inside its own shadow root, so the tab and the
+ * panel reference each other while the content stays in the light DOM.
+ *
+ * @slot - The panel content.
+ * @a11y The surrounding `odd-tabs` gives the panel `role="tabpanel"`, names it by its tab, and hides it while another tab is selected; on its own it has no role.
+ * @previewRole tabPanel
+ * @useFor The content of one tab of odd-tabs.
+ * @notFor Content outside odd-tabs (use a section with a heading).
+ * @category Navigation
+ * @customization 2 3
+ */
+export class OddkinTabPanel extends OddkinElement.with({
+    label: prop.string({ default: '', description: 'The text of its tab.' }),
+    value: prop.string({
+        default: '',
+        description: 'Identifies the panel in `odd-tabs` `value`; without it, its position ("0", "1", …).',
+    }),
+    disabled: prop.boolean({ reflect: true, description: 'Its tab cannot be selected.' }),
+}) {
+    connected(_scope) {
+        // An odd-tabs parent rendered before this panel was defined learns about it now.
+        this.parentElement?._panelsChanged?.();
+    }
+}
+//# sourceMappingURL=tab-panel.js.map

package/dist/tab-panel/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../src/tab-panel/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG3D;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,cAAe,SAAQ,aAAa,CAAC,IAAI,CAAC;IACrD,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,sBAAsB,EAAE,CAAC;IACxE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC;QACjB,OAAO,EAAE,EAAE;QACX,WAAW,EACT,qFAAqF;KACxF,CAAC;IACF,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,6BAA6B,EAAE,CAAC;CACtF,CAAC;IACmB,SAAS,CAAC,MAAa;QACxC,iFAAiF;QAChF,IAAI,CAAC,aAAwD,EAAE,cAAc,EAAE,EAAE,CAAC;IACrF,CAAC;CACF"}

package/dist/tab-panel/tab-panel.structural.styles.d.ts

@@ -0,0 +1,3 @@
+/** A block of content. No brand or visual tokens. */
+export declare const tabPanelStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=tab-panel.structural.styles.d.ts.map

package/dist/tab-panel/tab-panel.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.structural.styles.d.ts","sourceRoot":"","sources":["../../src/tab-panel/tab-panel.structural.styles.ts"],"names":[],"mappings":"AAEA,qDAAqD;AACrD,eAAO,MAAM,wBAAwB,yCAMpC,CAAC"}

package/dist/tab-panel/tab-panel.structural.styles.js

@@ -0,0 +1,10 @@
+import { css } from '@oddkin/core/styles';
+/** A block of content. No brand or visual tokens. */
+export const tabPanelStructuralStyles = css `
+  :host {
+    display: block;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+`;
+//# sourceMappingURL=tab-panel.structural.styles.js.map

package/dist/tab-panel/tab-panel.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.structural.styles.js","sourceRoot":"","sources":["../../src/tab-panel/tab-panel.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,qDAAqD;AACrD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;CAM1C,CAAC"}

package/dist/tab-panel/tab-panel.styles.d.ts

@@ -0,0 +1,3 @@
+/** No look of its own: the panel inherits the text of `odd-tabs`, which draws the tab and panel. */
+export declare const tabPanelStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=tab-panel.styles.d.ts.map