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

package/dist/styles/control.styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The field look of the Common page (158:22) for every Oddkin form control: the label in the UI
+ * type role, help and error in the small role, and the control surface (`color.border.strong`,
+ * `control.radius`, `control.height.md`, never below the target size) with its hover, invalid,
+ * disabled, and read-only states. The field variables (`--odd-field-height`, `-radius`,
+ * `-border-color`, `-background`) apply to every form control and the `.odd-field` recipe, which
+ * is generated from these rules.
+ */
+export declare const controlStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=control.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control.styles.d.ts","sourceRoot":"","sources":["../../src/styles/control.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,yCA+EzB,CAAC"}

package/dist/styles/control.styles.js

@@ -0,0 +1,91 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * The field look of the Common page (158:22) for every Oddkin form control: the label in the UI
+ * type role, help and error in the small role, and the control surface (`color.border.strong`,
+ * `control.radius`, `control.height.md`, never below the target size) with its hover, invalid,
+ * disabled, and read-only states. The field variables (`--odd-field-height`, `-radius`,
+ * `-border-color`, `-background`) apply to every form control and the `.odd-field` recipe, which
+ * is generated from these rules.
+ */
+export const controlStyles = css `
+  .field {
+    gap: ${token('space.xs')};
+    font-family: ${token('type.body.family')};
+    color: ${token('color.text.primary')};
+  }
+  .label {
+    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')};
+  }
+  .field:has(.control:disabled) .label {
+    color: ${token('color.text.disabled')};
+  }
+  .description,
+  .error {
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  .description {
+    color: ${token('color.text.secondary')};
+  }
+  .control {
+    min-block-size: max(
+      var(--odd-field-height, ${token('control.height.md')}),
+      ${token('target.min')}
+    );
+    padding-block: ${token('space.none')};
+    padding-inline: ${token('control.padding.inline.md')};
+    border: ${token('border.width.default')} solid
+      var(--odd-field-border-color, ${token('color.border.strong')});
+    border-radius: var(--odd-field-radius, ${token('control.radius')});
+    background: var(--odd-field-background, ${token('color.surface.default')});
+    color: ${token('color.text.primary')};
+    /* Body size: below 16px, iOS Safari zooms the page when the field takes focus. */
+    font-size: ${token('type.body.size')};
+    line-height: ${token('type.body.line-height')};
+    transition-property: border-color, background-color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  .control::placeholder {
+    color: ${token('color.text.secondary')};
+    opacity: 1;
+  }
+  @media (hover: hover) {
+    .control:read-write:hover {
+      background: var(--odd-field-background, ${token('color.surface.hover')});
+    }
+  }
+  .control[aria-invalid='true'] {
+    border-color: ${token('color.danger.foreground')};
+  }
+  .control:disabled {
+    background: ${token('color.surface.sunken')};
+    color: ${token('color.text.disabled')};
+  }
+  .control-box > select.control {
+    padding-inline-end: calc(${token('control.padding.inline.md')} + 1em + ${token('control.gap')});
+  }
+  .control-box:has(> .control-start) > .control {
+    padding-inline-start: calc(
+      ${token('control.padding.inline.md')} + 1em + ${token('control.gap')}
+    );
+  }
+  .control-box:has(> .control-end) > input.control {
+    padding-inline-end: calc(${token('control.padding.inline.md')} + 1em + ${token('control.gap')});
+  }
+  .control-start,
+  .control-end {
+    margin-inline: ${token('control.padding.inline.md')};
+  }
+  .control-box > .control:disabled ~ * {
+    color: ${token('color.text.disabled')};
+  }
+  .error {
+    color: ${token('color.danger.foreground')};
+  }
+`;
+//# sourceMappingURL=control.styles.js.map

package/dist/styles/control.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.styles.js","sourceRoot":"","sources":["../../src/styles/control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;WAErB,KAAK,CAAC,UAAU,CAAC;mBACT,KAAK,CAAC,kBAAkB,CAAC;aAC/B,KAAK,CAAC,oBAAoB,CAAC;;;iBAGvB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;aAGxC,KAAK,CAAC,qBAAqB,CAAC;;;;iBAIxB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;aAGrC,KAAK,CAAC,sBAAsB,CAAC;;;;gCAIV,KAAK,CAAC,mBAAmB,CAAC;QAClD,KAAK,CAAC,YAAY,CAAC;;qBAEN,KAAK,CAAC,YAAY,CAAC;sBAClB,KAAK,CAAC,2BAA2B,CAAC;cAC1C,KAAK,CAAC,sBAAsB,CAAC;sCACL,KAAK,CAAC,qBAAqB,CAAC;6CACrB,KAAK,CAAC,gBAAgB,CAAC;8CACtB,KAAK,CAAC,uBAAuB,CAAC;aAC/D,KAAK,CAAC,oBAAoB,CAAC;;iBAEvB,KAAK,CAAC,gBAAgB,CAAC;mBACrB,KAAK,CAAC,uBAAuB,CAAC;;2BAEtB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;aAGpD,KAAK,CAAC,sBAAsB,CAAC;;;;;gDAKM,KAAK,CAAC,qBAAqB,CAAC;;;;oBAIxD,KAAK,CAAC,yBAAyB,CAAC;;;kBAGlC,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,qBAAqB,CAAC;;;+BAGV,KAAK,CAAC,2BAA2B,CAAC,YAAY,KAAK,CAAC,aAAa,CAAC;;;;QAIzF,KAAK,CAAC,2BAA2B,CAAC,YAAY,KAAK,CAAC,aAAa,CAAC;;;;+BAI3C,KAAK,CAAC,2BAA2B,CAAC,YAAY,KAAK,CAAC,aAAa,CAAC;;;;qBAI5E,KAAK,CAAC,2BAA2B,CAAC;;;aAG1C,KAAK,CAAC,qBAAqB,CAAC;;;aAG5B,KAAK,CAAC,yBAAyB,CAAC;;CAE5C,CAAC"}

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

@@ -0,0 +1,7 @@
+/**
+ * Layout of the field anatomy every Oddkin form control renders (`.field` holding `.label`,
+ * `.description`, `.control`, and `.error`): stacked, wrapping, the control filling the field.
+ * No brand tokens. The `.odd-field` recipe is generated from these rules.
+ */
+export declare const fieldStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=field.structural.styles.d.ts.map

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

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

package/dist/styles/field.structural.styles.js

@@ -0,0 +1,53 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * Layout of the field anatomy every Oddkin form control renders (`.field` holding `.label`,
+ * `.description`, `.control`, and `.error`): stacked, wrapping, the control filling the field.
+ * No brand tokens. The `.odd-field` recipe is generated from these rules.
+ */
+export const fieldStructuralStyles = css `
+  .field {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    /* Long labels, help, and errors wrap instead of widening the field. */
+    overflow-wrap: anywhere;
+  }
+  .control {
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: 0;
+    font: inherit;
+  }
+  /* A control with an adornment (a select's chevron) shares one grid cell with it. */
+  .control-box {
+    display: grid;
+    align-items: center;
+  }
+  .control-box > * {
+    grid-area: 1 / 1;
+  }
+  .control-start,
+  .control-end {
+    display: flex;
+    pointer-events: none;
+  }
+  .control-start {
+    justify-self: start;
+  }
+  .control-end {
+    justify-self: end;
+  }
+  /* The chevron replaces the engine's arrow, so every engine draws the same select. */
+  .control-box > select.control {
+    appearance: none;
+  }
+  @media (forced-colors: active) {
+    .control {
+      border: 1px solid FieldText;
+    }
+    .control[aria-invalid='true'] {
+      border-width: 2px;
+    }
+  }
+`;
+//# sourceMappingURL=field.structural.styles.js.map

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

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

package/dist/styles/focus-ring.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The keyboard focus indicator: an outline from the focus tokens on whatever matches
+ * `:focus-visible` inside the shadow root. Outlines take a system colour in forced-colours mode
+ * and never change layout.
+ */
+export declare const focusRingStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=focus-ring.styles.d.ts.map

package/dist/styles/focus-ring.styles.d.ts.map

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

package/dist/styles/focus-ring.styles.js

@@ -0,0 +1,14 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * The keyboard focus indicator: an outline from the focus tokens on whatever matches
+ * `:focus-visible` inside the shadow root. Outlines take a system colour in forced-colours mode
+ * and never change layout.
+ */
+export const focusRingStyles = css `
+  :focus-visible {
+    outline: ${token('focus.width')} solid ${token('color.focus.ring')};
+    outline-offset: ${token('focus.offset')};
+  }
+`;
+//# sourceMappingURL=focus-ring.styles.js.map

package/dist/styles/focus-ring.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.styles.js","sourceRoot":"","sources":["../../src/styles/focus-ring.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,eAAe,GAAG,GAAG,CAAA;;eAEnB,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;sBAChD,KAAK,CAAC,cAAc,CAAC;;CAE1C,CAAC"}

package/dist/styles/glyphs.d.ts

@@ -0,0 +1,37 @@
+/** Glyph geometry: 1em square, stroked in `currentColor`; `.mirror` glyphs flip right to left. */
+export declare const glyphStyles: import("@oddkin/core/styles").CSSResult;
+export declare const checkGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const minusGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const plusGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const closeGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const chevronDownGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const chevronUpGlyph: import("@oddkin/core/template").TemplateResult;
+/** Points to the inline end: right in left-to-right text, left in right-to-left text. */
+export declare const chevronEndGlyph: import("@oddkin/core/template").TemplateResult;
+/** Points to the inline start. */
+export declare const chevronStartGlyph: import("@oddkin/core/template").TemplateResult;
+/** Points to the inline end. */
+export declare const arrowEndGlyph: import("@oddkin/core/template").TemplateResult;
+/** Points to the inline start. */
+export declare const arrowStartGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const searchGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const moreGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const externalGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const uploadGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const fileGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const infoGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const warningGlyph: import("@oddkin/core/template").TemplateResult;
+export declare const checkCircleGlyph: import("@oddkin/core/template").TemplateResult;
+/** The rating star (design/icons/general/star.svg); filled with `fill: currentColor` when on. */
+export declare const starGlyph: import("@oddkin/core/template").TemplateResult;
+/** The clock beside a relative time (design/icons/general/clock.svg). */
+export declare const clockGlyph: import("@oddkin/core/template").TemplateResult;
+/** The date picker's calendar button (design/icons/general/calendar.svg). */
+export declare const calendarGlyph: import("@oddkin/core/template").TemplateResult;
+/** The copy action (design/icons/general/copy.svg): a sheet in front of another. */
+export declare const copyGlyph: import("@oddkin/core/template").TemplateResult;
+/** A person (design/icons/general/person.svg): the count of chosen people in a multiple field. */
+export declare const userGlyph: import("@oddkin/core/template").TemplateResult;
+/** An upward arrow (design/icons/general/direction-arrow-bold-up.svg); rotated for downward. */
+export declare const arrowUpGlyph: import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=glyphs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"glyphs.d.ts","sourceRoot":"","sources":["../../src/styles/glyphs.ts"],"names":[],"mappings":"AAQA,kGAAkG;AAClG,eAAO,MAAM,WAAW,yCAoBvB,CAAC;AAEF,eAAO,MAAM,UAAU,gDAEhB,CAAC;AACR,eAAO,MAAM,UAAU,gDAEhB,CAAC;AACR,eAAO,MAAM,SAAS,gDAEf,CAAC;AACR,eAAO,MAAM,UAAU,gDAEhB,CAAC;AACR,eAAO,MAAM,gBAAgB,gDAEtB,CAAC;AACR,eAAO,MAAM,cAAc,gDAEpB,CAAC;AACR,yFAAyF;AACzF,eAAO,MAAM,eAAe,gDAMrB,CAAC;AACR,kCAAkC;AAClC,eAAO,MAAM,iBAAiB,gDAMvB,CAAC;AACR,gCAAgC;AAChC,eAAO,MAAM,aAAa,gDAEnB,CAAC;AACR,kCAAkC;AAClC,eAAO,MAAM,eAAe,gDAMrB,CAAC;AACR,eAAO,MAAM,WAAW,gDAGjB,CAAC;AACR,eAAO,MAAM,SAAS,gDAIf,CAAC;AACR,eAAO,MAAM,aAAa,gDAEnB,CAAC;AACR,eAAO,MAAM,WAAW,gDAEjB,CAAC;AACR,eAAO,MAAM,SAAS,gDAEf,CAAC;AACR,eAAO,MAAM,SAAS,gDAIf,CAAC;AACR,eAAO,MAAM,YAAY,gDAIlB,CAAC;AACR,eAAO,MAAM,gBAAgB,gDAGtB,CAAC;AACR,iGAAiG;AACjG,eAAO,MAAM,SAAS,gDAEf,CAAC;AACR,yEAAyE;AACzE,eAAO,MAAM,UAAU,gDAGhB,CAAC;AACR,6EAA6E;AAC7E,eAAO,MAAM,aAAa,gDAGnB,CAAC;AACR,oFAAoF;AACpF,eAAO,MAAM,SAAS,gDAGf,CAAC;AACR,kGAAkG;AAClG,eAAO,MAAM,SAAS,gDAGf,CAAC;AACR,gGAAgG;AAChG,eAAO,MAAM,YAAY,gDAElB,CAAC"}

package/dist/styles/glyphs.js

@@ -0,0 +1,135 @@
+import { css } from '@oddkin/core/styles';
+import { html } from '@oddkin/core/template';
+// Built-in affordance and tone glyphs (component-contracts.md §2.7), drawn by Oddkin from simple
+// geometry on a 20-unit grid. Inline SVG in the shadow root: no image request, so a strict
+// Content-Security-Policy needs no `img-src`. One export per glyph, so bundles keep only those
+// they render. Decorative: the control or text beside a glyph carries the meaning.
+/** Glyph geometry: 1em square, stroked in `currentColor`; `.mirror` glyphs flip right to left. */
+export const glyphStyles = css `
+  .glyph {
+    display: inline-block;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: middle;
+  }
+  .glyph .dot {
+    fill: currentColor;
+    stroke: none;
+  }
+  .glyph.mirror:dir(rtl) {
+    scale: -1 1;
+  }
+`;
+export const checkGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M5 10.5l3.5 3.5L15 7" />
+</svg>`;
+export const minusGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M5 10h10" />
+</svg>`;
+export const plusGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M10 5v10M5 10h10" />
+</svg>`;
+export const closeGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M6 6l8 8M14 6l-8 8" />
+</svg>`;
+export const chevronDownGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M6 8l4 4 4-4" />
+</svg>`;
+export const chevronUpGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M6 12l4-4 4 4" />
+</svg>`;
+/** Points to the inline end: right in left-to-right text, left in right-to-left text. */
+export const chevronEndGlyph = html `<svg
+  class="glyph mirror"
+  viewBox="0 0 20 20"
+  aria-hidden="true"
+>
+  <path d="M8 6l4 4-4 4" />
+</svg>`;
+/** Points to the inline start. */
+export const chevronStartGlyph = html `<svg
+  class="glyph mirror"
+  viewBox="0 0 20 20"
+  aria-hidden="true"
+>
+  <path d="M12 6l-4 4 4 4" />
+</svg>`;
+/** Points to the inline end. */
+export const arrowEndGlyph = html `<svg class="glyph mirror" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M4 10h12M12 6l4 4-4 4" />
+</svg>`;
+/** Points to the inline start. */
+export const arrowStartGlyph = html `<svg
+  class="glyph mirror"
+  viewBox="0 0 20 20"
+  aria-hidden="true"
+>
+  <path d="M16 10H4M8 6l-4 4 4 4" />
+</svg>`;
+export const searchGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <circle cx="8.5" cy="8.5" r="4.5" />
+  <path d="M12 12l4 4" />
+</svg>`;
+export const moreGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <circle class="dot" cx="5" cy="10" r="1.25" />
+  <circle class="dot" cx="10" cy="10" r="1.25" />
+  <circle class="dot" cx="15" cy="10" r="1.25" />
+</svg>`;
+export const externalGlyph = html `<svg class="glyph mirror" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M11 4h5v5M16 4l-7 7M14 12v4H4V6h4" />
+</svg>`;
+export const uploadGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M10 13V4M6 8l4-4 4 4M4 13v3h12v-3" />
+</svg>`;
+export const fileGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M5 3h6l4 4v10H5zM11 3v4h4" />
+</svg>`;
+export const infoGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <circle cx="10" cy="10" r="7" />
+  <path d="M10 9v5" />
+  <circle class="dot" cx="10" cy="6.5" r="1" />
+</svg>`;
+export const warningGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M10 3.5l7 12.5H3z" />
+  <path d="M10 8.5V12" />
+  <circle class="dot" cx="10" cy="14" r="0.9" />
+</svg>`;
+export const checkCircleGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <circle cx="10" cy="10" r="7" />
+  <path d="M7 10.25l2 2 4-4.5" />
+</svg>`;
+/** The rating star (design/icons/general/star.svg); filled with `fill: currentColor` when on. */
+export const starGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M10 2l2.5 5 5.5 1-4 4 1 6-5-3-5 3 1-6-4-4 5.5-1z" />
+</svg>`;
+/** The clock beside a relative time (design/icons/general/clock.svg). */
+export const clockGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <circle cx="10" cy="10" r="8" />
+  <path d="M10 5v5l4 2" />
+</svg>`;
+/** The date picker's calendar button (design/icons/general/calendar.svg). */
+export const calendarGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <rect x="2" y="4" width="16" height="14" rx="1" />
+  <path d="M2 8h16M6 2v4M14 2v4M6 12h2M12 12h2" />
+</svg>`;
+/** The copy action (design/icons/general/copy.svg): a sheet in front of another. */
+export const copyGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <rect x="6" y="6" width="12" height="12" rx="1" />
+  <path d="M3 14H2V2h12v1" />
+</svg>`;
+/** A person (design/icons/general/person.svg): the count of chosen people in a multiple field. */
+export const userGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <circle cx="10" cy="5" r="3" />
+  <path d="M3 18v-3c0-7 14-7 14 0v3" />
+</svg>`;
+/** An upward arrow (design/icons/general/direction-arrow-bold-up.svg); rotated for downward. */
+export const arrowUpGlyph = html `<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M10 18V2M4 8l6-6 6 6" />
+</svg>`;
+//# sourceMappingURL=glyphs.js.map

package/dist/styles/glyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphs.js","sourceRoot":"","sources":["../../src/styles/glyphs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,iGAAiG;AACjG,2FAA2F;AAC3F,+FAA+F;AAC/F,mFAAmF;AAEnF,kGAAkG;AAClG,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoB7B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA;;OAEvB,CAAC;AACR,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA;;OAEvB,CAAC;AACR,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;;OAEtB,CAAC;AACR,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA;;OAEvB,CAAC;AACR,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAA;;OAE7B,CAAC;AACR,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAA;;OAE3B,CAAC;AACR,yFAAyF;AACzF,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAA;;;;;;OAM5B,CAAC;AACR,kCAAkC;AAClC,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAA;;;;;;OAM9B,CAAC;AACR,gCAAgC;AAChC,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAA;;OAE1B,CAAC;AACR,kCAAkC;AAClC,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAA;;;;;;OAM5B,CAAC;AACR,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAA;;;OAGxB,CAAC;AACR,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;;;;OAItB,CAAC;AACR,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAA;;OAE1B,CAAC;AACR,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAA;;OAExB,CAAC;AACR,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;;OAEtB,CAAC;AACR,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;;;;OAItB,CAAC;AACR,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAA;;;;OAIzB,CAAC;AACR,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAA;;;OAG7B,CAAC;AACR,iGAAiG;AACjG,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;;OAEtB,CAAC;AACR,yEAAyE;AACzE,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA;;;OAGvB,CAAC;AACR,6EAA6E;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAA;;;OAG1B,CAAC;AACR,oFAAoF;AACpF,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;;;OAGtB,CAAC;AACR,kGAAkG;AAClG,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;;;OAGtB,CAAC;AACR,gGAAgG;AAChG,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAA;;OAEzB,CAAC"}

package/dist/styles/host.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Host defaults every Oddkin component shares: border-box sizing inside the shadow root, and the
+ * `hidden` attribute always hiding the host and internal elements, even where a rule sets
+ * `display`. The only `!important` declarations Oddkin ships; they cannot leave the shadow root.
+ * Structural: no tokens.
+ */
+export declare const hostStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=host.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"host.styles.d.ts","sourceRoot":"","sources":["../../src/styles/host.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,UAAU,yCAetB,CAAC"}

package/dist/styles/host.styles.js

@@ -0,0 +1,24 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * Host defaults every Oddkin component shares: border-box sizing inside the shadow root, and the
+ * `hidden` attribute always hiding the host and internal elements, even where a rule sets
+ * `display`. The only `!important` declarations Oddkin ships; they cannot leave the shadow root.
+ * Structural: no tokens.
+ */
+export const hostStyles = css `
+  :host {
+    box-sizing: border-box;
+  }
+  :host([hidden]) {
+    display: none !important;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+  [hidden] {
+    display: none !important;
+  }
+`;
+//# sourceMappingURL=host.styles.js.map

package/dist/styles/host.styles.js.map

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

package/dist/styles/index.d.ts

@@ -0,0 +1,17 @@
+export { hostStyles } from './host.styles.js';
+export { focusRingStyles } from './focus-ring.styles.js';
+export { visuallyHiddenStyles } from './visually-hidden.styles.js';
+export { spinnerStyles, spinnerTemplate } from './spinner.styles.js';
+export { navRowStructuralStyles } from './nav-row.structural.styles.js';
+export { navRowStyles } from './nav-row.styles.js';
+export { optionRowStructuralStyles } from './option-row.structural.styles.js';
+export { optionRowStyles } from './option-row.styles.js';
+export { fieldStructuralStyles } from './field.structural.styles.js';
+export { controlStyles } from './control.styles.js';
+export { controlIndicatorStructuralStyles } from './control-indicator.structural.styles.js';
+export { controlIndicatorStyles } from './control-indicator.styles.js';
+export { overlaySurfaceStructuralStyles } from './overlay-surface.structural.styles.js';
+export { overlaySurfaceStyles } from './overlay-surface.styles.js';
+export { TONES, toneGlyph, toneStyles, type Tone } from './tone.styles.js';
+export * from './glyphs.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,gCAAgC,EAAE,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AACxF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC3E,cAAc,aAAa,CAAC"}

package/dist/styles/index.js

@@ -0,0 +1,19 @@
+// Shared style primitives for Oddkin components and consumers' own components. Each is one
+// constructed sheet per document, however many components adopt it. Side-effect free.
+export { hostStyles } from './host.styles.js';
+export { focusRingStyles } from './focus-ring.styles.js';
+export { visuallyHiddenStyles } from './visually-hidden.styles.js';
+export { spinnerStyles, spinnerTemplate } from './spinner.styles.js';
+export { navRowStructuralStyles } from './nav-row.structural.styles.js';
+export { navRowStyles } from './nav-row.styles.js';
+export { optionRowStructuralStyles } from './option-row.structural.styles.js';
+export { optionRowStyles } from './option-row.styles.js';
+export { fieldStructuralStyles } from './field.structural.styles.js';
+export { controlStyles } from './control.styles.js';
+export { controlIndicatorStructuralStyles } from './control-indicator.structural.styles.js';
+export { controlIndicatorStyles } from './control-indicator.styles.js';
+export { overlaySurfaceStructuralStyles } from './overlay-surface.structural.styles.js';
+export { overlaySurfaceStyles } from './overlay-surface.styles.js';
+export { TONES, toneGlyph, toneStyles } from './tone.styles.js';
+export * from './glyphs.js';
+//# sourceMappingURL=index.js.map

package/dist/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,sFAAsF;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,gCAAgC,EAAE,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AACxF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAa,MAAM,kBAAkB,CAAC;AAC3E,cAAc,aAAa,CAAC"}

package/dist/styles/nav-row.structural.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Navigation rows (component-catalog.md §6 "nav-row"), shared by `odd-side-nav` and `odd-tree`:
+ * full-width `.entry` rows (a link, a button, or a treeitem) with a `.label` that wraps long text.
+ * Structural rules here; the look is `navRowStyles`. The forced-colours markers are prefixed with
+ * `.root` (the element's container) to outrank a skin's state rules, which load later.
+ */
+export declare const navRowStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=nav-row.structural.styles.d.ts.map

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

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

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

@@ -0,0 +1,44 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * Navigation rows (component-catalog.md §6 "nav-row"), shared by `odd-side-nav` and `odd-tree`:
+ * full-width `.entry` rows (a link, a button, or a treeitem) with a `.label` that wraps long text.
+ * Structural rules here; the look is `navRowStyles`. The forced-colours markers are prefixed with
+ * `.root` (the element's container) to outrank a skin's state rules, which load later.
+ */
+export const navRowStructuralStyles = css `
+  .entry {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .label {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    /* Long labels and translations wrap instead of widening the element. */
+    overflow-wrap: anywhere;
+  }
+  .entry:disabled,
+  .entry[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  @media (forced-colors: active) {
+    .root .entry[aria-current='page'],
+    .root .entry[aria-selected='true'] {
+      border-inline-start-color: Highlight;
+    }
+    .root .entry:disabled,
+    .root .entry[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+`;
+//# sourceMappingURL=nav-row.structural.styles.js.map

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * The navigation-row look through the `navigation.*` roles: padding, minimum target size, hover,
+ * and the current or selected row marked by an inline-start bar and weight, not colour alone.
+ */
+export declare const navRowStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=nav-row.styles.d.ts.map

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

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

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

@@ -0,0 +1,34 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * The navigation-row look through the `navigation.*` roles: padding, minimum target size, hover,
+ * and the current or selected row marked by an inline-start bar and weight, not colour alone.
+ */
+export const navRowStyles = css `
+  .entry {
+    gap: ${token('navigation.item.gap')};
+    min-block-size: max(${token('navigation.item.min-height')}, ${token('target.min')});
+    padding: ${token('navigation.item.padding.block')} ${token('navigation.item.padding.inline')};
+    border-inline-start: ${token('border.width.strong')} solid transparent;
+    border-radius: ${token('control.radius')};
+    transition-property: background-color, color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  @media (hover: hover) {
+    .entry:not(:disabled, [aria-disabled='true']):hover {
+      background: ${token('color.surface.hover')};
+    }
+  }
+  .entry[aria-current='page'],
+  .entry[aria-selected='true'] {
+    border-inline-start-color: ${token('color.action.default')};
+    background: ${token('color.surface.hover')};
+    font-weight: ${token('font.weight.semibold')};
+  }
+  .entry:disabled,
+  .entry[aria-disabled='true'] {
+    color: ${token('color.text.disabled')};
+  }
+`;
+//# sourceMappingURL=nav-row.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-row.styles.js","sourceRoot":"","sources":["../../src/styles/nav-row.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;WAEpB,KAAK,CAAC,qBAAqB,CAAC;0BACb,KAAK,CAAC,4BAA4B,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;eACtE,KAAK,CAAC,+BAA+B,CAAC,IAAI,KAAK,CAAC,gCAAgC,CAAC;2BACrE,KAAK,CAAC,qBAAqB,CAAC;qBAClC,KAAK,CAAC,gBAAgB,CAAC;;2BAEjB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;;iCAKf,KAAK,CAAC,sBAAsB,CAAC;kBAC5C,KAAK,CAAC,qBAAqB,CAAC;mBAC3B,KAAK,CAAC,sBAAsB,CAAC;;;;aAInC,KAAK,CAAC,qBAAqB,CAAC;;CAExC,CAAC"}

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

@@ -0,0 +1,12 @@
+/**
+ * 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 declare const optionRowStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=option-row.structural.styles.d.ts.map

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"}