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

package/dist/stat/stat.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./stat.recipe.ts by packages/components/test/recipes.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change the recipe and regenerate.
+import { unsafeCSS } from '@oddkin/core/styles';
+export const statRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .base {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-xs);\n    min-inline-size: 0;\n  }\n  .context {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-xs);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n}\n');
+//# sourceMappingURL=stat.recipe.styles.js.map

package/dist/stat/stat.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.recipe.styles.js","sourceRoot":"","sources":["../../src/stat/stat.recipe.styles.ts"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CACvC,sYAAsY,CACvY,CAAC"}

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

@@ -0,0 +1,3 @@
+/** A column: label, value, context; the arrow points down for a decrease. No tokens. */
+export declare const statStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=stat.structural.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat.structural.styles.d.ts","sourceRoot":"","sources":["../../src/stat/stat.structural.styles.ts"],"names":[],"mappings":"AAGA,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,yCAchC,CAAC"}

package/dist/stat/stat.structural.styles.js

@@ -0,0 +1,19 @@
+import { css } from '@oddkin/core/styles';
+import { statRecipeStyles } from './stat.recipe.styles.js';
+/** A column: label, value, context; the arrow points down for a decrease. No tokens. */
+export const statStructuralStyles = css `
+  ${statRecipeStyles}
+  :host {
+    display: block;
+  }
+  .value {
+    overflow-wrap: anywhere;
+  }
+  :host([trend='decrease']) .glyph {
+    rotate: 180deg;
+  }
+  .placeholder {
+    inline-size: 50%;
+  }
+`;
+//# sourceMappingURL=stat.structural.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat.structural.styles.js","sourceRoot":"","sources":["../../src/stat/stat.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,wFAAwF;AACxF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;IACnC,gBAAgB;;;;;;;;;;;;;CAanB,CAAC"}

package/dist/stat/stat.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Oddkin's default stat: Figma `stat` (the card surface: `card.padding`, `card.radius`, a
+ * `color.border.default` border; the label in the secondary UI role, the value in the display
+ * role, the context small and secondary; `space.xs` apart; the loading placeholder on the sunken
+ * surface, one line of the value tall).
+ */
+export declare const statStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=stat.styles.d.ts.map

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

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

package/dist/stat/stat.styles.js

@@ -0,0 +1,46 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default stat: Figma `stat` (the card surface: `card.padding`, `card.radius`, a
+ * `color.border.default` border; the label in the secondary UI role, the value in the display
+ * role, the context small and secondary; `space.xs` apart; the loading placeholder on the sunken
+ * surface, one line of the value tall).
+ */
+export const statStyles = css `
+  .base {
+    padding: ${token('card.padding')};
+    border: ${token('border.width.default')} solid ${token('color.border.default')};
+    border-radius: ${token('card.radius')};
+    background: ${token('color.surface.default')};
+  }
+  .label {
+    color: ${token('color.text.secondary')};
+    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')};
+  }
+  .value {
+    color: ${token('color.text.primary')};
+    font-family: ${token('type.display.family')};
+    font-size: ${token('type.display.size')};
+    font-weight: ${token('type.display.weight')};
+    line-height: ${token('type.display.line-height')};
+    letter-spacing: ${token('type.display.letter-spacing')};
+  }
+  .context {
+    color: ${token('color.text.secondary')};
+    font-family: ${token('type.small.family')};
+    font-size: ${token('type.small.size')};
+    font-weight: ${token('type.small.weight')};
+    line-height: ${token('type.small.line-height')};
+  }
+  .glyph {
+    font-size: ${token('icon.size.sm')};
+  }
+  .placeholder {
+    --odd-skeleton-color: ${token('color.surface.sunken')};
+    block-size: calc(${token('type.display.size')} * ${token('type.display.line-height')});
+  }
+`;
+//# sourceMappingURL=stat.styles.js.map

package/dist/stat/stat.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.styles.js","sourceRoot":"","sources":["../../src/stat/stat.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,UAAU,GAAG,GAAG,CAAA;;eAEd,KAAK,CAAC,cAAc,CAAC;cACtB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;qBAC7D,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,uBAAuB,CAAC;;;aAGnC,KAAK,CAAC,sBAAsB,CAAC;mBACvB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;aAGlC,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,qBAAqB,CAAC;iBAC9B,KAAK,CAAC,mBAAmB,CAAC;mBACxB,KAAK,CAAC,qBAAqB,CAAC;mBAC5B,KAAK,CAAC,0BAA0B,CAAC;sBAC9B,KAAK,CAAC,6BAA6B,CAAC;;;aAG7C,KAAK,CAAC,sBAAsB,CAAC;mBACvB,KAAK,CAAC,mBAAmB,CAAC;iBAC5B,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,mBAAmB,CAAC;mBAC1B,KAAK,CAAC,wBAAwB,CAAC;;;iBAGjC,KAAK,CAAC,cAAc,CAAC;;;4BAGV,KAAK,CAAC,sBAAsB,CAAC;uBAClC,KAAK,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,0BAA0B,CAAC;;CAEvF,CAAC"}

package/dist/stat/stat.template.d.ts

@@ -0,0 +1,7 @@
+import type { OddkinStat } from './stat.js';
+/**
+ * Anatomy: `part="base"` holding `part="label"`, then `part="value"` and `part="context"` (the
+ * trend arrow and the default slot), or, while loading, `part="placeholder"` and the loading words.
+ */
+export declare const statTemplate: (stat: OddkinStat) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=stat.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat.template.d.ts","sourceRoot":"","sources":["../../src/stat/stat.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,YAAY,SAAU,UAAU,mDAiB5C,CAAC"}

package/dist/stat/stat.template.js

@@ -0,0 +1,23 @@
+import { html } from '@oddkin/core/template';
+import { arrowUpGlyph } from '../styles/glyphs.js';
+/**
+ * Anatomy: `part="base"` holding `part="label"`, then `part="value"` and `part="context"` (the
+ * trend arrow and the default slot), or, while loading, `part="placeholder"` and the loading words.
+ */
+export const statTemplate = (stat) => {
+    const words = stat._strings;
+    return html `<div part="base" class="base">
+    <span part="label" class="label">${stat.label}</span>
+    ${stat.loading
+        ? html `<odd-skeleton part="placeholder" class="placeholder" shape="rect"></odd-skeleton
+            ><span part="context" class="context">${words.loading}</span>`
+        : stat.value
+            ? html `<span part="value" class="value">${stat.value}</span
+              ><span part="context" class="context"
+                >${stat.trend === 'none' ? null : arrowUpGlyph}<slot></slot
+              ></span>`
+            : html `<span part="value" class="value" aria-hidden="true">—</span
+              ><span part="context" class="context">${words.unavailable}</span>`}
+  </div>`;
+};
+//# sourceMappingURL=stat.template.js.map

package/dist/stat/stat.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.template.js","sourceRoot":"","sources":["../../src/stat/stat.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAgB,EAAE,EAAE;IAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC5B,OAAO,IAAI,CAAA;uCAC0B,IAAI,CAAC,KAAK;MAE3C,IAAI,CAAC,OAAO;QACV,CAAC,CAAC,IAAI,CAAA;oDACsC,KAAK,CAAC,OAAO,SAAS;QAClE,CAAC,CAAC,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,KAAK;;mBAE3C,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY;uBACvC;YACb,CAAC,CAAC,IAAI,CAAA;sDACsC,KAAK,CAAC,WAAW,SACnE;SACK,CAAC;AACV,CAAC,CAAC"}

package/dist/status-marker/foundation.d.ts

@@ -0,0 +1,7 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { spinnerStyles } from '../styles/spinner.styles.js';
+export { OddkinStatusMarker } from './status-marker.js';
+export { statusMarkerTemplate } from './status-marker.template.js';
+export { statusMarkerStructuralStyles } from './status-marker.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/status-marker/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/status-marker/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/status-marker/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 { glyphStyles } from '../styles/glyphs.js';
+export { spinnerStyles } from '../styles/spinner.styles.js';
+export { OddkinStatusMarker } from './status-marker.js';
+export { statusMarkerTemplate } from './status-marker.template.js';
+export { statusMarkerStructuralStyles } from './status-marker.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/status-marker/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/status-marker/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/status-marker/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinStatusMarker } from './status-marker.js';
+export { statusMarkerTemplate } from './status-marker.template.js';
+export { statusMarkerStructuralStyles } from './status-marker.structural.styles.js';
+export { statusMarkerStyles } from './status-marker.styles.js';
+export { statusMarkerDefinition } from './status-marker.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/status-marker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/status-marker/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/status-marker/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/status-marker`.
+export { OddkinStatusMarker } from './status-marker.js';
+export { statusMarkerTemplate } from './status-marker.template.js';
+export { statusMarkerStructuralStyles } from './status-marker.structural.styles.js';
+export { statusMarkerStyles } from './status-marker.styles.js';
+export { statusMarkerDefinition } from './status-marker.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/status-marker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/status-marker/index.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/status-marker/status-marker.d.ts

@@ -0,0 +1,30 @@
+import { OddkinElement } from '@oddkin/core/element';
+declare const OddkinStatusMarker_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly status: import("@oddkin/core/element").PropDefinition<"complete" | "failed" | "idle" | "pending">;
+}>;
+/**
+ * The status marker of a timeline event or a step (Figma's Event marker and Step status): a circle
+ * with the built-in glyph for `status`, or its own content (a step number) while idle. Decorative:
+ * hidden from assistive technology, so the list and the words beside it carry the meaning. The
+ * `.odd-timeline` and `.odd-stepper` recipes size and colour it; alone it has its own look.
+ *
+ * @slot - Content while idle: a step number. Empty: a dot.
+ * @csspart base - The circle.
+ * @cssprop --odd-status-marker-size - The circle's size (default `control.height.sm`).
+ * @a11y Hidden from assistive technology: say the status in words beside it ("Complete", "Needs attention").
+ * @previewRole statusMarker
+ * @useFor Timeline events and steps, inside the `.odd-timeline` and `.odd-stepper` recipes.
+ * @notFor Status on its own (use a badge, which carries words); a progress value (use a progress bar).
+ * @category Display
+ * @customization 1 2 3
+ */
+export declare class OddkinStatusMarker extends OddkinStatusMarker_base {
+    protected connected(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-status-marker': OddkinStatusMarker;
+    }
+}
+export {};
+//# sourceMappingURL=status-marker.d.ts.map

package/dist/status-marker/status-marker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.d.ts","sourceRoot":"","sources":["../../src/status-marker/status-marker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;;;;AAE3D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,kBAAmB,SAAQ,uBAOtC;IACA,UAAmB,SAAS,IAAI,IAAI,CAEnC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,kBAAkB,CAAC;KACzC;CACF"}

package/dist/status-marker/status-marker.define.d.ts

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

package/dist/status-marker/status-marker.define.d.ts.map

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

package/dist/status-marker/status-marker.define.js

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

package/dist/status-marker/status-marker.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.define.js","sourceRoot":"","sources":["../../src/status-marker/status-marker.define.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,CAAC,sBAAsB,CAAC,CAAC"}

package/dist/status-marker/status-marker.definition.d.ts

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

package/dist/status-marker/status-marker.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.definition.d.ts","sourceRoot":"","sources":["../../src/status-marker/status-marker.definition.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAKxD,eAAO,MAAM,sBAAsB,sEAWjC,CAAC"}

package/dist/status-marker/status-marker.definition.js

@@ -0,0 +1,21 @@
+import { compose } from '@oddkin/core/element';
+import { glyphStyles } from '../styles/glyphs.js';
+import { spinnerStyles } from '../styles/spinner.styles.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinStatusMarker } from './status-marker.js';
+import { statusMarkerStructuralStyles } from './status-marker.structural.styles.js';
+import { statusMarkerStyles } from './status-marker.styles.js';
+import { statusMarkerTemplate } from './status-marker.template.js';
+export const statusMarkerDefinition = compose({
+    name: 'odd-status-marker',
+    element: OddkinStatusMarker,
+    template: statusMarkerTemplate,
+    styles: [
+        hostStyles,
+        statusMarkerStructuralStyles,
+        glyphStyles,
+        spinnerStyles,
+        statusMarkerStyles,
+    ],
+});
+//# sourceMappingURL=status-marker.definition.js.map

package/dist/status-marker/status-marker.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.definition.js","sourceRoot":"","sources":["../../src/status-marker/status-marker.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,MAAM,CAAC,MAAM,sBAAsB,GAAG,OAAO,CAAC;IAC5C,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,kBAAkB;IAC3B,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE;QACN,UAAU;QACV,4BAA4B;QAC5B,WAAW;QACX,aAAa;QACb,kBAAkB;KACnB;CACF,CAAC,CAAC"}

package/dist/status-marker/status-marker.js

@@ -0,0 +1,29 @@
+import { OddkinElement, prop } from '@oddkin/core/element';
+/**
+ * The status marker of a timeline event or a step (Figma's Event marker and Step status): a circle
+ * with the built-in glyph for `status`, or its own content (a step number) while idle. Decorative:
+ * hidden from assistive technology, so the list and the words beside it carry the meaning. The
+ * `.odd-timeline` and `.odd-stepper` recipes size and colour it; alone it has its own look.
+ *
+ * @slot - Content while idle: a step number. Empty: a dot.
+ * @csspart base - The circle.
+ * @cssprop --odd-status-marker-size - The circle's size (default `control.height.sm`).
+ * @a11y Hidden from assistive technology: say the status in words beside it ("Complete", "Needs attention").
+ * @previewRole statusMarker
+ * @useFor Timeline events and steps, inside the `.odd-timeline` and `.odd-stepper` recipes.
+ * @notFor Status on its own (use a badge, which carries words); a progress value (use a progress bar).
+ * @category Display
+ * @customization 1 2 3
+ */
+export class OddkinStatusMarker extends OddkinElement.with({
+    status: prop.enum(['idle', 'pending', 'complete', 'failed'], {
+        default: 'idle',
+        reflect: true,
+        description: 'Idle: the content or a dot. Pending: a busy ring. Complete: a check. Failed: a warning glyph.',
+    }),
+}) {
+    connected() {
+        this.internals.ariaHidden = 'true';
+    }
+}
+//# sourceMappingURL=status-marker.js.map

package/dist/status-marker/status-marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.js","sourceRoot":"","sources":["../../src/status-marker/status-marker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,kBAAmB,SAAQ,aAAa,CAAC,IAAI,CAAC;IACzD,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE;QAC3D,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,IAAI;QACb,WAAW,EACT,+FAA+F;KAClG,CAAC;CACH,CAAC;IACmB,SAAS;QAC1B,IAAI,CAAC,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC;IACrC,CAAC;CACF"}

package/dist/status-marker/status-marker.structural.styles.d.ts

@@ -0,0 +1,3 @@
+/** A circle that centres its glyph or content; an empty idle marker shows a dot. No tokens. */
+export declare const statusMarkerStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=status-marker.structural.styles.d.ts.map

package/dist/status-marker/status-marker.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.structural.styles.d.ts","sourceRoot":"","sources":["../../src/status-marker/status-marker.structural.styles.ts"],"names":[],"mappings":"AAEA,+FAA+F;AAC/F,eAAO,MAAM,4BAA4B,yCAsBxC,CAAC"}

package/dist/status-marker/status-marker.structural.styles.js

@@ -0,0 +1,26 @@
+import { css } from '@oddkin/core/styles';
+/** A circle that centres its glyph or content; an empty idle marker shows a dot. No tokens. */
+export const statusMarkerStructuralStyles = css `
+  :host {
+    display: inline-grid;
+    flex: none;
+    vertical-align: middle;
+  }
+  .base {
+    display: grid;
+    place-items: center;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    border: var(--_border, 0) solid;
+    border-radius: var(--_radius, 50%);
+    box-sizing: border-box;
+  }
+  :host(:empty[status='idle']) .base::after {
+    content: '';
+    inline-size: 33%;
+    block-size: 33%;
+    border-radius: inherit;
+    background: currentColor;
+  }
+`;
+//# sourceMappingURL=status-marker.structural.styles.js.map

package/dist/status-marker/status-marker.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.structural.styles.js","sourceRoot":"","sources":["../../src/status-marker/status-marker.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,+FAA+F;AAC/F,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsB9C,CAAC"}

package/dist/status-marker/status-marker.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Oddkin's default marker: Figma's Step status (`control.height.sm`, a `border.width.default`
+ * ring): idle on the sunken surface, complete in the action colour, pending on the selection
+ * surface, failed on the danger surface.
+ */
+export declare const statusMarkerStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=status-marker.styles.d.ts.map

package/dist/status-marker/status-marker.styles.d.ts.map

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

package/dist/status-marker/status-marker.styles.js

@@ -0,0 +1,43 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default marker: Figma's Step status (`control.height.sm`, a `border.width.default`
+ * ring): idle on the sunken surface, complete in the action colour, pending on the selection
+ * surface, failed on the danger surface.
+ */
+export const statusMarkerStyles = css `
+  :host {
+    --_size: var(--odd-status-marker-size, ${token('control.height.sm')});
+    --_border: ${token('border.width.default')};
+    --_radius: ${token('radius.full')};
+    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: 1;
+  }
+  .base {
+    background: ${token('color.surface.sunken')};
+    border-color: ${token('color.border.strong')};
+  }
+  :host([status='complete']) .base {
+    background: ${token('color.action.default')};
+    border-color: ${token('color.action.default')};
+    color: ${token('color.text.on-action')};
+  }
+  :host([status='pending']) .base {
+    background: ${token('color.selection.surface')};
+    border-color: transparent;
+    color: ${token('color.selection.foreground')};
+  }
+  .glyph,
+  .spinner {
+    font-size: ${token('icon.size.sm')};
+  }
+  :host([status='failed']) .base {
+    background: ${token('color.danger.surface')};
+    border-color: ${token('color.danger.foreground')};
+    color: ${token('color.danger.foreground')};
+  }
+`;
+//# sourceMappingURL=status-marker.styles.js.map

package/dist/status-marker/status-marker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.styles.js","sourceRoot":"","sources":["../../src/status-marker/status-marker.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,kBAAkB,GAAG,GAAG,CAAA;;6CAEQ,KAAK,CAAC,mBAAmB,CAAC;iBACtD,KAAK,CAAC,sBAAsB,CAAC;iBAC7B,KAAK,CAAC,aAAa,CAAC;aACxB,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;;;;kBAIxB,KAAK,CAAC,sBAAsB,CAAC;oBAC3B,KAAK,CAAC,qBAAqB,CAAC;;;kBAG9B,KAAK,CAAC,sBAAsB,CAAC;oBAC3B,KAAK,CAAC,sBAAsB,CAAC;aACpC,KAAK,CAAC,sBAAsB,CAAC;;;kBAGxB,KAAK,CAAC,yBAAyB,CAAC;;aAErC,KAAK,CAAC,4BAA4B,CAAC;;;;iBAI/B,KAAK,CAAC,cAAc,CAAC;;;kBAGpB,KAAK,CAAC,sBAAsB,CAAC;oBAC3B,KAAK,CAAC,yBAAyB,CAAC;aACvC,KAAK,CAAC,yBAAyB,CAAC;;CAE5C,CAAC"}

package/dist/status-marker/status-marker.template.d.ts

@@ -0,0 +1,4 @@
+import type { OddkinStatusMarker } from './status-marker.js';
+/** Anatomy: `part="base"`, the circle, holding the status glyph, or the default slot while idle. */
+export declare const statusMarkerTemplate: (marker: OddkinStatusMarker) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=status-marker.template.d.ts.map

package/dist/status-marker/status-marker.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.template.d.ts","sourceRoot":"","sources":["../../src/status-marker/status-marker.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,oGAAoG;AACpG,eAAO,MAAM,oBAAoB,WAAY,kBAAkB,mDAW3D,CAAC"}

package/dist/status-marker/status-marker.template.js

@@ -0,0 +1,14 @@
+import { html } from '@oddkin/core/template';
+import { spinnerTemplate } from '../styles/spinner.styles.js';
+import { checkGlyph, warningGlyph } from '../styles/glyphs.js';
+/** Anatomy: `part="base"`, the circle, holding the status glyph, or the default slot while idle. */
+export const statusMarkerTemplate = (marker) => html `<span part="base" class="base"
+    >${marker.status === 'complete'
+    ? checkGlyph
+    : marker.status === 'failed'
+        ? warningGlyph
+        : marker.status === 'pending'
+            ? spinnerTemplate
+            : html `<slot></slot>`}</span
+  >`;
+//# sourceMappingURL=status-marker.template.js.map

package/dist/status-marker/status-marker.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-marker.template.js","sourceRoot":"","sources":["../../src/status-marker/status-marker.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAG/D,oGAAoG;AACpG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAA0B,EAAE,EAAE,CACjE,IAAI,CAAA;OAEA,MAAM,CAAC,MAAM,KAAK,UAAU;IAC1B,CAAC,CAAC,UAAU;IACZ,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ;QAC1B,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,SAAS;YAC3B,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,IAAI,CAAA,eACd;IACA,CAAC"}

package/dist/styles/control-indicator.structural.styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Layout of the drawn checkbox box and its marks (component-contracts.md §2.9 "control
+ * indicator"): `.indicator` stacks a `.indicator-box` (a native checkbox or radio with
+ * `appearance: none`, or a decorative `<span>`) and its `.indicator-check` and `.indicator-mixed`
+ * glyphs in one cell; a mark shows only in its state. `data-state="checked" | "mixed"` gives a
+ * span its state and a native checkbox its mixed state: `:indeterminate` also matches every radio
+ * of a group with none checked, so it is never used. A `.choice` label row
+ * holds an indicator (or a switch track) beside its `.label`. No brand tokens.
+ */
+export declare const controlIndicatorStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=control-indicator.structural.styles.d.ts.map

package/dist/styles/control-indicator.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-indicator.structural.styles.d.ts","sourceRoot":"","sources":["../../src/styles/control-indicator.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,eAAO,MAAM,gCAAgC,yCAuD5C,CAAC"}

package/dist/styles/control-indicator.structural.styles.js

@@ -0,0 +1,67 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * Layout of the drawn checkbox box and its marks (component-contracts.md §2.9 "control
+ * indicator"): `.indicator` stacks a `.indicator-box` (a native checkbox or radio with
+ * `appearance: none`, or a decorative `<span>`) and its `.indicator-check` and `.indicator-mixed`
+ * glyphs in one cell; a mark shows only in its state. `data-state="checked" | "mixed"` gives a
+ * span its state and a native checkbox its mixed state: `:indeterminate` also matches every radio
+ * of a group with none checked, so it is never used. A `.choice` label row
+ * holds an indicator (or a switch track) beside its `.label`. No brand tokens.
+ */
+export const controlIndicatorStructuralStyles = css `
+  .choice {
+    display: inline-flex;
+    align-items: center;
+    max-inline-size: 100%;
+    cursor: pointer;
+  }
+  .choice > .label {
+    min-inline-size: 0;
+  }
+  .choice:has(:disabled) {
+    cursor: not-allowed;
+  }
+  .indicator {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+  }
+  .indicator > * {
+    grid-area: 1 / 1;
+  }
+  .indicator-box {
+    box-sizing: border-box;
+    display: block;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    margin: 0;
+    appearance: none;
+    cursor: inherit;
+  }
+  .indicator-mark {
+    display: grid;
+    pointer-events: none;
+    visibility: hidden;
+  }
+  .indicator-box:is(:checked:not([data-state]), [data-state='checked']) ~ .indicator-check,
+  .indicator-box[data-state='mixed'] ~ .indicator-mixed {
+    visibility: visible;
+  }
+  /* One class more than the skin's state rules, so the system colours win in forced colours. */
+  @media (forced-colors: active) {
+    .indicator > .indicator-box {
+      border: 1px solid CanvasText;
+    }
+    .indicator > .indicator-box:is(:checked, [data-state]) {
+      border-color: Highlight;
+      background: Highlight;
+    }
+    .indicator > .indicator-box:is(:checked, [data-state]) ~ .indicator-mark {
+      color: HighlightText;
+    }
+    .indicator > .indicator-box:disabled {
+      border-color: GrayText;
+    }
+  }
+`;
+//# sourceMappingURL=control-indicator.structural.styles.js.map

package/dist/styles/control-indicator.structural.styles.js.map

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

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

@@ -0,0 +1,9 @@
+/**
+ * The checkbox look of the Common page (158:22): a `radius.sm` box on the default surface with a
+ * strong border, the selection colours with a drawn check or minus when checked or mixed, the
+ * danger border when invalid (strong when checked), and the sunken surface when disabled and
+ * unchecked. Hover applies inside a `.choice` row, the label the box sits in: `space.sm` between
+ * box and label, the target size, and the disabled text colour.
+ */
+export declare const controlIndicatorStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=control-indicator.styles.d.ts.map

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

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

package/dist/styles/control-indicator.styles.js

@@ -0,0 +1,52 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * The checkbox look of the Common page (158:22): a `radius.sm` box on the default surface with a
+ * strong border, the selection colours with a drawn check or minus when checked or mixed, the
+ * danger border when invalid (strong when checked), and the sunken surface when disabled and
+ * unchecked. Hover applies inside a `.choice` row, the label the box sits in: `space.sm` between
+ * box and label, the target size, and the disabled text colour.
+ */
+export const controlIndicatorStyles = css `
+  .choice {
+    gap: ${token('space.sm')};
+    min-block-size: ${token('target.min')};
+    padding-inline: ${token('space.2xs')};
+  }
+  .choice:has(:disabled) {
+    color: ${token('color.text.disabled')};
+  }
+  .indicator {
+    font-size: ${token('icon.size.sm')};
+  }
+  .indicator-box {
+    border: ${token('border.width.default')} solid ${token('color.border.strong')};
+    border-radius: ${token('radius.sm')};
+    background: ${token('color.surface.default')};
+    transition-property: border-color, background-color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  .indicator-mark {
+    color: ${token('color.selection.foreground')};
+  }
+  .indicator-box:is(:checked, [data-state]) {
+    border-color: transparent;
+    background: ${token('color.selection.background')};
+  }
+  @media (hover: hover) {
+    .choice:hover .indicator-box:not(:checked, [data-state], :disabled) {
+      background: ${token('color.surface.hover')};
+    }
+  }
+  .indicator-box[aria-invalid='true'] {
+    border-color: ${token('color.danger.foreground')};
+  }
+  .indicator-box[aria-invalid='true']:is(:checked, [data-state]) {
+    border-width: ${token('border.width.strong')};
+  }
+  .indicator-box:disabled:not(:checked, [data-state]) {
+    background: ${token('color.surface.sunken')};
+  }
+`;
+//# sourceMappingURL=control-indicator.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control-indicator.styles.js","sourceRoot":"","sources":["../../src/styles/control-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;WAE9B,KAAK,CAAC,UAAU,CAAC;sBACN,KAAK,CAAC,YAAY,CAAC;sBACnB,KAAK,CAAC,WAAW,CAAC;;;aAG3B,KAAK,CAAC,qBAAqB,CAAC;;;iBAGxB,KAAK,CAAC,cAAc,CAAC;;;cAGxB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,WAAW,CAAC;kBACrB,KAAK,CAAC,uBAAuB,CAAC;;2BAErB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;aAGpD,KAAK,CAAC,4BAA4B,CAAC;;;;kBAI9B,KAAK,CAAC,4BAA4B,CAAC;;;;oBAIjC,KAAK,CAAC,qBAAqB,CAAC;;;;oBAI5B,KAAK,CAAC,yBAAyB,CAAC;;;oBAGhC,KAAK,CAAC,qBAAqB,CAAC;;;kBAG9B,KAAK,CAAC,sBAAsB,CAAC;;CAE9C,CAAC"}