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

package/dist/styles/option-row.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-row.structural.styles.d.ts","sourceRoot":"","sources":["../../src/styles/option-row.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,yBAAyB,yCAkDrC,CAAC"}

package/dist/styles/option-row.structural.styles.js

@@ -0,0 +1,63 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * Option rows (component-catalog.md §6 "option-row"), shared by listbox, select's enhanced picker,
+ * combobox, menu, split button, and command palette rows. Anatomy inside a row (`.option`, the
+ * element with `role="option"` or `role="menuitem"`): `.option-start` (icon or indicator),
+ * `.option-label` with an optional `.option-description` under it, `.option-end` (shortcut or
+ * submenu glyph), and `.option-check` (the selected mark, shown with `aria-selected` or
+ * `aria-checked`). States: `aria-selected`/`aria-checked`, `.active` (the active descendant),
+ * `:focus-visible` (roving focus), `aria-disabled`, and `.danger`. Token-free; the look is
+ * `optionRowStyles`.
+ */
+export const optionRowStructuralStyles = css `
+  .option {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+  }
+  .option-start,
+  .option-end,
+  .option-check {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+  }
+  .option-label {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .option-check {
+    visibility: hidden;
+  }
+  .option[aria-selected='true'] .option-check,
+  .option[aria-checked='true'] .option-check {
+    visibility: visible;
+  }
+  .option[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  /* Prefixed with :host to outrank the skin's state rules, which load later. The focus ring's
+     colour is forced to a system colour already. */
+  @media (forced-colors: active) {
+    :host .option[aria-selected='true'],
+    :host .option[aria-checked='true'] {
+      background: Highlight;
+      color: HighlightText;
+    }
+    :host .option[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+`;
+//# sourceMappingURL=option-row.structural.styles.js.map

package/dist/styles/option-row.structural.styles.js.map

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

package/dist/styles/option-row.styles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The option-row look (Figma `ListboxOption`, `MenuItem`, `CommandItem`): control-sized rows in the
+ * UI type role, a pointer hover, the selection surface with its check, an inset focus ring on the
+ * active or focused row, secondary end text, the danger tone, and disabled text. Rows are
+ * transparent over the surface they sit on.
+ */
+export declare const optionRowStyles: import("@oddkin/core/styles").CSSResult;
+/**
+ * The option-row look on the `<option>` rows of a customizable select's open picker (odd-select),
+ * where `appearance: base-select` and `::picker(select)` are supported: the same box and type
+ * (written out, as the analyzer reads each css template statically), the hover, the selection
+ * surface on the chosen option, the inset ring on the focused one, and disabled text. Elsewhere the
+ * engine draws its own picker and these rules do not apply. Only odd-select uses it, so it is imported
+ * relatively and not re-exported from `@oddkin/components/styles`.
+ */
+export declare const optionRowPickerStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=option-row.styles.d.ts.map

package/dist/styles/option-row.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-row.styles.d.ts","sourceRoot":"","sources":["../../src/styles/option-row.styles.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,yCA2C3B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,yCA8BjC,CAAC"}

package/dist/styles/option-row.styles.js

@@ -0,0 +1,92 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * The option-row look (Figma `ListboxOption`, `MenuItem`, `CommandItem`): control-sized rows in the
+ * UI type role, a pointer hover, the selection surface with its check, an inset focus ring on the
+ * active or focused row, secondary end text, the danger tone, and disabled text. Rows are
+ * transparent over the surface they sit on.
+ */
+export const optionRowStyles = css `
+  .option {
+    gap: ${token('control.gap')};
+    min-block-size: max(${token('control.height.md')}, ${token('target.min')});
+    padding-inline: ${token('control.padding.inline.md')};
+    border-radius: ${token('control.radius')};
+    color: ${token('color.text.primary')};
+    font-family: ${token('type.ui.family')};
+    font-size: ${token('type.ui.size')};
+    font-weight: ${token('type.ui.weight')};
+    line-height: ${token('type.ui.line-height')};
+    letter-spacing: ${token('type.ui.letter-spacing')};
+  }
+  @media (hover: hover) {
+    .option:not([aria-disabled='true']):hover {
+      background: ${token('color.surface.hover')};
+    }
+  }
+  .option[aria-selected='true'],
+  .option[aria-checked='true'] {
+    background: ${token('color.selection.surface')};
+  }
+  .option.active,
+  .option:focus-visible {
+    outline: ${token('focus.width')} solid ${token('color.focus.ring')};
+    outline-offset: calc(-1 * ${token('focus.width')});
+  }
+  .option-description,
+  .option-end {
+    color: ${token('color.text.secondary')};
+  }
+  .option-description {
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  .option.danger {
+    color: ${token('color.danger.foreground')};
+  }
+  .option[aria-disabled='true'],
+  .option[aria-disabled='true'] .option-description,
+  .option[aria-disabled='true'] .option-end {
+    color: ${token('color.text.disabled')};
+  }
+`;
+/**
+ * The option-row look on the `<option>` rows of a customizable select's open picker (odd-select),
+ * where `appearance: base-select` and `::picker(select)` are supported: the same box and type
+ * (written out, as the analyzer reads each css template statically), the hover, the selection
+ * surface on the chosen option, the inset ring on the focused one, and disabled text. Elsewhere the
+ * engine draws its own picker and these rules do not apply. Only odd-select uses it, so it is imported
+ * relatively and not re-exported from `@oddkin/components/styles`.
+ */
+export const optionRowPickerStyles = css `
+  @supports (appearance: base-select) and selector(::picker(select)) {
+    select option {
+      gap: ${token('control.gap')};
+      min-block-size: max(${token('control.height.md')}, ${token('target.min')});
+      padding-inline: ${token('control.padding.inline.md')};
+      border-radius: ${token('control.radius')};
+      color: ${token('color.text.primary')};
+      font-family: ${token('type.ui.family')};
+      font-size: ${token('type.ui.size')};
+      font-weight: ${token('type.ui.weight')};
+      line-height: ${token('type.ui.line-height')};
+      letter-spacing: ${token('type.ui.letter-spacing')};
+    }
+    @media (hover: hover) {
+      select option:not(:disabled):hover {
+        background: ${token('color.surface.hover')};
+      }
+    }
+    select option:checked {
+      background: ${token('color.selection.surface')};
+    }
+    select option:focus-visible {
+      outline: ${token('focus.width')} solid ${token('color.focus.ring')};
+      outline-offset: calc(-1 * ${token('focus.width')});
+    }
+    select option:disabled {
+      color: ${token('color.text.disabled')};
+    }
+  }
+`;
+//# sourceMappingURL=option-row.styles.js.map

package/dist/styles/option-row.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-row.styles.js","sourceRoot":"","sources":["../../src/styles/option-row.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;WAEvB,KAAK,CAAC,aAAa,CAAC;0BACL,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;sBACtD,KAAK,CAAC,2BAA2B,CAAC;qBACnC,KAAK,CAAC,gBAAgB,CAAC;aAC/B,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAIjC,KAAK,CAAC,qBAAqB,CAAC;;;;;kBAK9B,KAAK,CAAC,yBAAyB,CAAC;;;;eAInC,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;gCACtC,KAAK,CAAC,aAAa,CAAC;;;;aAIvC,KAAK,CAAC,sBAAsB,CAAC;;;iBAGzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;aAGrC,KAAK,CAAC,yBAAyB,CAAC;;;;;aAKhC,KAAK,CAAC,qBAAqB,CAAC;;CAExC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;aAG3B,KAAK,CAAC,aAAa,CAAC;4BACL,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;wBACtD,KAAK,CAAC,2BAA2B,CAAC;uBACnC,KAAK,CAAC,gBAAgB,CAAC;eAC/B,KAAK,CAAC,oBAAoB,CAAC;qBACrB,KAAK,CAAC,gBAAgB,CAAC;mBACzB,KAAK,CAAC,cAAc,CAAC;qBACnB,KAAK,CAAC,gBAAgB,CAAC;qBACvB,KAAK,CAAC,qBAAqB,CAAC;wBACzB,KAAK,CAAC,wBAAwB,CAAC;;;;sBAIjC,KAAK,CAAC,qBAAqB,CAAC;;;;oBAI9B,KAAK,CAAC,yBAAyB,CAAC;;;iBAGnC,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;kCACtC,KAAK,CAAC,aAAa,CAAC;;;eAGvC,KAAK,CAAC,qBAAqB,CAAC;;;CAG1C,CAAC"}

package/dist/styles/overlay-surface.structural.styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Overlay surfaces (component-catalog.md §6 "overlay-surface"), shared by every overlay: an inner
+ * `[popover]` or `<dialog>` with `class="overlay-surface"` (menus, listboxes, combobox surfaces,
+ * dialogs), or a host that is itself the popover (`odd-popover`, `odd-tooltip`, `odd-toast`). It
+ * replaces the browser's popover and dialog padding and scrolls a non-modal dialog as a modal one
+ * does (border-box sizing comes from `hostStyles`). The browser's solid border stays, and forced
+ * colours draw it in `CanvasText`. An anchored popover stays within the room its placement leaves
+ * (`--_overlay-max-inline-size` and `-block-size`, written by the overlay wiring; the viewport
+ * otherwise). `.overlay-close` is the explicit close control of every dismissible surface.
+ * Token-free; the look is `overlaySurfaceStyles`.
+ */
+export declare const overlaySurfaceStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=overlay-surface.structural.styles.d.ts.map

package/dist/styles/overlay-surface.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-surface.structural.styles.d.ts","sourceRoot":"","sources":["../../src/styles/overlay-surface.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,8BAA8B,yCAuB1C,CAAC"}

package/dist/styles/overlay-surface.structural.styles.js

@@ -0,0 +1,37 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * Overlay surfaces (component-catalog.md §6 "overlay-surface"), shared by every overlay: an inner
+ * `[popover]` or `<dialog>` with `class="overlay-surface"` (menus, listboxes, combobox surfaces,
+ * dialogs), or a host that is itself the popover (`odd-popover`, `odd-tooltip`, `odd-toast`). It
+ * replaces the browser's popover and dialog padding and scrolls a non-modal dialog as a modal one
+ * does (border-box sizing comes from `hostStyles`). The browser's solid border stays, and forced
+ * colours draw it in `CanvasText`. An anchored popover stays within the room its placement leaves
+ * (`--_overlay-max-inline-size` and `-block-size`, written by the overlay wiring; the viewport
+ * otherwise). `.overlay-close` is the explicit close control of every dismissible surface.
+ * Token-free; the look is `overlaySurfaceStyles`.
+ */
+export const overlaySurfaceStructuralStyles = css `
+  .overlay-surface,
+  :host([popover]) {
+    padding: 0;
+    overflow: auto;
+  }
+  [popover].overlay-surface,
+  :host([popover]) {
+    max-inline-size: var(--_overlay-max-inline-size, 100%);
+    max-block-size: var(--_overlay-max-block-size, 100%);
+  }
+  .overlay-close {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+`;
+//# sourceMappingURL=overlay-surface.structural.styles.js.map

package/dist/styles/overlay-surface.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-surface.structural.styles.js","sourceRoot":"","sources":["../../src/styles/overlay-surface.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBhD,CAAC"}

package/dist/styles/overlay-surface.styles.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The overlay look (Figma `popover`, `tooltip`, `Menu`, `ListboxSurface`, and the open `select`,
+ * `combobox`, and `multiselect`): the raised surface, the default border, `control.radius`, and
+ * `elevation.md`. `.sheet` is the modal look of `dialog`, `alertDialog`, and `drawer`: the default
+ * surface, `card.radius`, `elevation.xl`, and the scrim behind it. Spacing is the consumer's. The
+ * close control is a secondary glyph button of the target size. Unless motion is reduced,
+ * popovers and dialogs (with their backdrop) fade in (a keyframes animation, at the floor) and fade
+ * out where `transition-behavior: allow-discrete` keeps them shown while closing; nothing waits
+ * for either (F11).
+ */
+export declare const overlaySurfaceStyles: import("@oddkin/core/styles").CSSResult;
+/**
+ * The anchored overlay look on the open picker of a native `<select>`, in its gated enhancement
+ * (`appearance: base-select`; registry entry `customizable-select`). The declarations repeat the
+ * anchored rule above rather than share a fragment: the analyzer reads each css template
+ * statically, and an interpolated fragment would hide its tokens. Only odd-select uses it, so it is
+ * imported relatively and not re-exported from `@oddkin/components/styles`.
+ */
+export declare const overlayPickerStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=overlay-surface.styles.d.ts.map

package/dist/styles/overlay-surface.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-surface.styles.d.ts","sourceRoot":"","sources":["../../src/styles/overlay-surface.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,yCA8DhC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,yCAc/B,CAAC"}

package/dist/styles/overlay-surface.styles.js

@@ -0,0 +1,98 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * The overlay look (Figma `popover`, `tooltip`, `Menu`, `ListboxSurface`, and the open `select`,
+ * `combobox`, and `multiselect`): the raised surface, the default border, `control.radius`, and
+ * `elevation.md`. `.sheet` is the modal look of `dialog`, `alertDialog`, and `drawer`: the default
+ * surface, `card.radius`, `elevation.xl`, and the scrim behind it. Spacing is the consumer's. The
+ * close control is a secondary glyph button of the target size. Unless motion is reduced,
+ * popovers and dialogs (with their backdrop) fade in (a keyframes animation, at the floor) and fade
+ * out where `transition-behavior: allow-discrete` keeps them shown while closing; nothing waits
+ * for either (F11).
+ */
+export const overlaySurfaceStyles = css `
+  .overlay-surface,
+  :host([popover]) {
+    border-width: ${token('border.width.default')};
+    border-color: ${token('color.border.default')};
+    border-radius: ${token('control.radius')};
+    background: ${token('color.surface.raised')};
+    color: ${token('color.text.primary')};
+    box-shadow: ${token('elevation.md')};
+    font-family: ${token('type.body.family')};
+    font-size: ${token('type.body.size')};
+    line-height: ${token('type.body.line-height')};
+  }
+  .overlay-surface.sheet {
+    border-radius: ${token('card.radius')};
+    background: ${token('color.surface.default')};
+    box-shadow: ${token('elevation.xl')};
+  }
+  .overlay-surface.sheet::backdrop {
+    background: ${token('color.scrim')};
+  }
+  .overlay-close {
+    min-inline-size: max(${token('control.height.sm')}, ${token('target.min')});
+    min-block-size: max(${token('control.height.sm')}, ${token('target.min')});
+    border-radius: ${token('control.radius')};
+    color: ${token('color.text.secondary')};
+    font-size: ${token('icon.size.md')};
+  }
+  @media (hover: hover) {
+    .overlay-close:hover {
+      background: ${token('color.surface.hover')};
+      color: ${token('color.text.primary')};
+    }
+  }
+  @keyframes odd-overlay-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [popover].overlay-surface:popover-open,
+    :host(:popover-open),
+    dialog.overlay-surface[open],
+    dialog.overlay-surface[open]::backdrop {
+      animation: odd-overlay-in ${token('motion.duration.fast')} ${token('motion.easing.enter')};
+    }
+    @supports (transition-behavior: allow-discrete) {
+      [popover].overlay-surface:not(:popover-open),
+      :host([popover]:not(:popover-open)),
+      dialog.overlay-surface:not([open]) {
+        opacity: 0;
+        transition:
+          opacity ${token('motion.duration.fast')} ${token('motion.easing.exit')},
+          display ${token('motion.duration.fast')} allow-discrete,
+          overlay ${token('motion.duration.fast')} allow-discrete;
+      }
+      dialog.overlay-surface:not([open])::backdrop {
+        opacity: 0;
+        transition: opacity ${token('motion.duration.fast')} ${token('motion.easing.exit')};
+      }
+    }
+  }
+`;
+/**
+ * The anchored overlay look on the open picker of a native `<select>`, in its gated enhancement
+ * (`appearance: base-select`; registry entry `customizable-select`). The declarations repeat the
+ * anchored rule above rather than share a fragment: the analyzer reads each css template
+ * statically, and an interpolated fragment would hide its tokens. Only odd-select uses it, so it is
+ * imported relatively and not re-exported from `@oddkin/components/styles`.
+ */
+export const overlayPickerStyles = css `
+  @supports (appearance: base-select) and selector(::picker(select)) {
+    ::picker(select) {
+      border-width: ${token('border.width.default')};
+      border-color: ${token('color.border.default')};
+      border-radius: ${token('control.radius')};
+      background: ${token('color.surface.raised')};
+      color: ${token('color.text.primary')};
+      box-shadow: ${token('elevation.md')};
+      font-family: ${token('type.body.family')};
+      font-size: ${token('type.body.size')};
+      line-height: ${token('type.body.line-height')};
+    }
+  }
+`;
+//# sourceMappingURL=overlay-surface.styles.js.map

package/dist/styles/overlay-surface.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-surface.styles.js","sourceRoot":"","sources":["../../src/styles/overlay-surface.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;oBAGnB,KAAK,CAAC,sBAAsB,CAAC;oBAC7B,KAAK,CAAC,sBAAsB,CAAC;qBAC5B,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,oBAAoB,CAAC;kBACtB,KAAK,CAAC,cAAc,CAAC;mBACpB,KAAK,CAAC,kBAAkB,CAAC;iBAC3B,KAAK,CAAC,gBAAgB,CAAC;mBACrB,KAAK,CAAC,uBAAuB,CAAC;;;qBAG5B,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,uBAAuB,CAAC;kBAC9B,KAAK,CAAC,cAAc,CAAC;;;kBAGrB,KAAK,CAAC,aAAa,CAAC;;;2BAGX,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;0BACnD,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;qBACvD,KAAK,CAAC,gBAAgB,CAAC;aAC/B,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;oBAIlB,KAAK,CAAC,qBAAqB,CAAC;eACjC,KAAK,CAAC,oBAAoB,CAAC;;;;;;;;;;;;;kCAaR,KAAK,CAAC,sBAAsB,CAAC,IAAI,KAAK,CAAC,qBAAqB,CAAC;;;;;;;;oBAQ3E,KAAK,CAAC,sBAAsB,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC;oBAC5D,KAAK,CAAC,sBAAsB,CAAC;oBAC7B,KAAK,CAAC,sBAAsB,CAAC;;;;8BAInB,KAAK,CAAC,sBAAsB,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC;;;;CAIzF,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;sBAGhB,KAAK,CAAC,sBAAsB,CAAC;sBAC7B,KAAK,CAAC,sBAAsB,CAAC;uBAC5B,KAAK,CAAC,gBAAgB,CAAC;oBAC1B,KAAK,CAAC,sBAAsB,CAAC;eAClC,KAAK,CAAC,oBAAoB,CAAC;oBACtB,KAAK,CAAC,cAAc,CAAC;qBACpB,KAAK,CAAC,kBAAkB,CAAC;mBAC3B,KAAK,CAAC,gBAAgB,CAAC;qBACrB,KAAK,CAAC,uBAAuB,CAAC;;;CAGlD,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * A slider area drawn by its element (odd-slider; the colour picker's hue and opacity): the area
+ * insets its `track` by half a `thumb`, so the thumb's centre travels the track from end to end,
+ * and takes touch drags itself (`touch-action: none`). The `fill` and the thumb follow
+ * `--_fraction` (0 to 1), mirrored in right-to-left text. Forced colours keep the track, fill, and
+ * thumb visible, through child selectors that outrank the visual sheet's colours (which forced
+ * colours would turn to Canvas). No brand tokens. Interpolated into each element's structural sheet.
+ */
+export declare const rangeStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=range.structural.styles.d.ts.map

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

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

package/dist/styles/range.structural.styles.js

@@ -0,0 +1,56 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * A slider area drawn by its element (odd-slider; the colour picker's hue and opacity): the area
+ * insets its `track` by half a `thumb`, so the thumb's centre travels the track from end to end,
+ * and takes touch drags itself (`touch-action: none`). The `fill` and the thumb follow
+ * `--_fraction` (0 to 1), mirrored in right-to-left text. Forced colours keep the track, fill, and
+ * thumb visible, through child selectors that outrank the visual sheet's colours (which forced
+ * colours would turn to Canvas). No brand tokens. Interpolated into each element's structural sheet.
+ */
+export const rangeStructuralStyles = css `
+  .slider {
+    --_thumb: 1.25rem;
+    position: relative;
+    display: grid;
+    align-items: center;
+    padding-inline: calc(var(--_thumb) / 2);
+    touch-action: none;
+    cursor: pointer;
+  }
+  :host(:disabled) .slider {
+    cursor: not-allowed;
+  }
+  .track {
+    position: relative;
+    block-size: 0.25rem;
+  }
+  .fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: calc(var(--_fraction) * 100%);
+  }
+  .thumb {
+    position: absolute;
+    box-sizing: border-box;
+    inline-size: var(--_thumb);
+    block-size: var(--_thumb);
+    inset-inline-start: calc(var(--_fraction) * (100% - var(--_thumb)));
+  }
+  @media (forced-colors: active) {
+    .slider > .track {
+      background: GrayText;
+    }
+    .slider > .track > .fill {
+      background: Highlight;
+    }
+    .slider > .thumb {
+      border: 2px solid ButtonText;
+      background: ButtonFace;
+    }
+    :host(:disabled) .slider > .track > .fill {
+      background: GrayText;
+    }
+  }
+`;
+//# sourceMappingURL=range.structural.styles.js.map

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

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

package/dist/styles/range.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Oddkin's slider area (Figma `slider`): one field high; a `radius.xs` track in
+ * `color.border.strong` filled in `color.action.default` up to the value; a round thumb on the
+ * default surface ringed in the action colour, in the danger colour when invalid; disabled, the
+ * fill takes the disabled text colour. Interpolated into each element's visual sheet.
+ */
+export declare const rangeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=range.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range.styles.d.ts","sourceRoot":"","sources":["../../src/styles/range.styles.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yCAyBvB,CAAC"}

package/dist/styles/range.styles.js

@@ -0,0 +1,35 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's slider area (Figma `slider`): one field high; a `radius.xs` track in
+ * `color.border.strong` filled in `color.action.default` up to the value; a round thumb on the
+ * default surface ringed in the action colour, in the danger colour when invalid; disabled, the
+ * fill takes the disabled text colour. Interpolated into each element's visual sheet.
+ */
+export const rangeStyles = css `
+  .slider {
+    min-block-size: ${token('control.height.md')};
+  }
+  .track,
+  .fill {
+    border-radius: ${token('radius.xs')};
+  }
+  .track {
+    background: ${token('color.border.strong')};
+  }
+  .fill {
+    background: ${token('color.action.default')};
+  }
+  .thumb {
+    border: ${token('border.width.default')} solid ${token('color.action.default')};
+    border-radius: ${token('radius.full')};
+    background: ${token('color.surface.default')};
+  }
+  .thumb[aria-invalid='true'] {
+    border-color: ${token('color.danger.foreground')};
+  }
+  :host(:disabled) .fill {
+    background: ${token('color.text.disabled')};
+  }
+`;
+//# sourceMappingURL=range.styles.js.map

package/dist/styles/range.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.styles.js","sourceRoot":"","sources":["../../src/styles/range.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;sBAER,KAAK,CAAC,mBAAmB,CAAC;;;;qBAI3B,KAAK,CAAC,WAAW,CAAC;;;kBAGrB,KAAK,CAAC,qBAAqB,CAAC;;;kBAG5B,KAAK,CAAC,sBAAsB,CAAC;;;cAGjC,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;qBAC7D,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,uBAAuB,CAAC;;;oBAG5B,KAAK,CAAC,yBAAyB,CAAC;;;kBAGlC,KAAK,CAAC,qBAAqB,CAAC;;CAE7C,CAAC"}

package/dist/styles/spinner.styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The indeterminate busy indicator every loading state draws (`odd-button` while loading,
+ * `odd-spinner`, loading rows): a 1em ring in `currentColor` with a gap, turning once per 0.8 s,
+ * slowed under reduced motion. Elements recolour it with `border-color`. Structural: no tokens.
+ */
+export declare const spinnerStyles: import("@oddkin/core/styles").CSSResult;
+/** The busy ring beside a loading row's text; decorative, as the text says what is happening. */
+export declare const spinnerTemplate: import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=spinner.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.styles.d.ts","sourceRoot":"","sources":["../../src/styles/spinner.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,aAAa,yCAqBzB,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,eAAe,gDAAyD,CAAC"}

package/dist/styles/spinner.styles.js

@@ -0,0 +1,32 @@
+import { css } from '@oddkin/core/styles';
+import { html } from '@oddkin/core/template';
+/**
+ * The indeterminate busy indicator every loading state draws (`odd-button` while loading,
+ * `odd-spinner`, loading rows): a 1em ring in `currentColor` with a gap, turning once per 0.8 s,
+ * slowed under reduced motion. Elements recolour it with `border-color`. Structural: no tokens.
+ */
+export const spinnerStyles = css `
+  .spinner:not([hidden]) {
+    display: inline-block;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    border: 0.15em solid currentColor;
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    animation: odd-spin 0.8s linear infinite;
+  }
+  @keyframes odd-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .spinner:not([hidden]) {
+      animation-duration: 3s;
+    }
+  }
+`;
+/** The busy ring beside a loading row's text; decorative, as the text says what is happening. */
+export const spinnerTemplate = html `<span class="spinner" aria-hidden="true"></span>`;
+//# sourceMappingURL=spinner.styles.js.map

package/dist/styles/spinner.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../src/styles/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqB/B,CAAC;AAEF,iGAAiG;AACjG,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAA,kDAAkD,CAAC"}

package/dist/styles/tone.styles.d.ts

@@ -0,0 +1,13 @@
+import type { TemplateResult } from '@oddkin/core/template';
+/** Meaning colours (ADR 0045 §3), in one place for every element that takes `tone`. */
+export declare const TONES: readonly ['neutral', 'info', 'success', 'warning', 'danger'];
+export type Tone = (typeof TONES)[number];
+/**
+ * Tone colours for the host's `tone` attribute or a `data-tone` element in the shadow root, as
+ * private properties the element's own styles read: `--_tone-foreground`, `--_tone-surface`,
+ * `--_tone-border`. Neutral when no tone is set.
+ */
+export declare const toneStyles: import("@oddkin/core/styles").CSSResult;
+/** The glyph that marks a tone, so meaning never depends on colour alone (Figma's choices). */
+export declare function toneGlyph(tone: Tone): TemplateResult;
+//# sourceMappingURL=tone.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tone.styles.d.ts","sourceRoot":"","sources":["../../src/styles/tone.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAI5D,uFAAuF;AACvF,eAAO,MAAM,KAAK,YAAI,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAClF,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,UAAU,yCA+BtB,CAAC;AAEF,+FAA+F;AAC/F,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,cAAc,CAMpD"}

package/dist/styles/tone.styles.js

@@ -0,0 +1,51 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+import { checkCircleGlyph, infoGlyph, warningGlyph } from './glyphs.js';
+/** Meaning colours (ADR 0045 §3), in one place for every element that takes `tone`. */
+export const TONES = ['neutral', 'info', 'success', 'warning', 'danger'];
+/**
+ * Tone colours for the host's `tone` attribute or a `data-tone` element in the shadow root, as
+ * private properties the element's own styles read: `--_tone-foreground`, `--_tone-surface`,
+ * `--_tone-border`. Neutral when no tone is set.
+ */
+export const toneStyles = css `
+  :host,
+  [data-tone] {
+    --_tone-foreground: ${token('color.neutral.foreground')};
+    --_tone-surface: ${token('color.neutral.surface')};
+    --_tone-border: ${token('color.neutral.border')};
+  }
+  :host([tone='info']),
+  [data-tone='info'] {
+    --_tone-foreground: ${token('color.info.foreground')};
+    --_tone-surface: ${token('color.info.surface')};
+    --_tone-border: ${token('color.info.border')};
+  }
+  :host([tone='success']),
+  [data-tone='success'] {
+    --_tone-foreground: ${token('color.success.foreground')};
+    --_tone-surface: ${token('color.success.surface')};
+    --_tone-border: ${token('color.success.border')};
+  }
+  :host([tone='warning']),
+  [data-tone='warning'] {
+    --_tone-foreground: ${token('color.warning.foreground')};
+    --_tone-surface: ${token('color.warning.surface')};
+    --_tone-border: ${token('color.warning.border')};
+  }
+  :host([tone='danger']),
+  [data-tone='danger'] {
+    --_tone-foreground: ${token('color.danger.foreground')};
+    --_tone-surface: ${token('color.danger.surface')};
+    --_tone-border: ${token('color.danger.border')};
+  }
+`;
+/** The glyph that marks a tone, so meaning never depends on colour alone (Figma's choices). */
+export function toneGlyph(tone) {
+    return tone === 'success'
+        ? checkCircleGlyph
+        : tone === 'warning' || tone === 'danger'
+            ? warningGlyph
+            : infoGlyph;
+}
+//# sourceMappingURL=tone.styles.js.map

package/dist/styles/tone.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone.styles.js","sourceRoot":"","sources":["../../src/styles/tone.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAExE,uFAAuF;AACvF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAGlF;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;0BAGH,KAAK,CAAC,0BAA0B,CAAC;uBACpC,KAAK,CAAC,uBAAuB,CAAC;sBAC/B,KAAK,CAAC,sBAAsB,CAAC;;;;0BAIzB,KAAK,CAAC,uBAAuB,CAAC;uBACjC,KAAK,CAAC,oBAAoB,CAAC;sBAC5B,KAAK,CAAC,mBAAmB,CAAC;;;;0BAItB,KAAK,CAAC,0BAA0B,CAAC;uBACpC,KAAK,CAAC,uBAAuB,CAAC;sBAC/B,KAAK,CAAC,sBAAsB,CAAC;;;;0BAIzB,KAAK,CAAC,0BAA0B,CAAC;uBACpC,KAAK,CAAC,uBAAuB,CAAC;sBAC/B,KAAK,CAAC,sBAAsB,CAAC;;;;0BAIzB,KAAK,CAAC,yBAAyB,CAAC;uBACnC,KAAK,CAAC,sBAAsB,CAAC;sBAC9B,KAAK,CAAC,qBAAqB,CAAC;;CAEjD,CAAC;AAEF,+FAA+F;AAC/F,MAAM,UAAU,SAAS,CAAC,IAAU;IAClC,OAAO,IAAI,KAAK,SAAS;QACvB,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ;YACvC,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,SAAS,CAAC;AAClB,CAAC"}

package/dist/styles/visually-hidden.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `.visually-hidden`: text that assistive technology reads but that takes no visual space
+ * (status text, labels for icon-only controls). Structural: no tokens.
+ */
+export declare const visuallyHiddenStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=visually-hidden.styles.d.ts.map