@vielzeug/refine 26.10.0 → 26.10.1

package/dist/content/list/list.d.ts

@@ -6,21 +6,21 @@ export type ListVariant = 'bordered' | 'plain' | 'separated';
 export type ListContext = {
     /**
      * Closes every other item's swipe-revealed action panel. Called directly by an item the moment
-     * its own `revealed` attribute transitions to non-null (gesture or direct attribute set) —
+     * its own `revealed` attribute transitions to non-null (gesture or direct attribute set) :
      * replaces listening for a bubbled `reveal` event and re-deriving "is this actually my direct
      * child" with a plain function call, the same shape as `select` below.
      */
     requestReveal: (item: HTMLElement) => void;
     /**
      * Selects `value` (or clears the selection when `undefined`) and fires `change`. Called
-     * directly by an activated item — mirrors `ore-radio-group`'s `RadioGroupContext.select()`.
+     * directly by an activated item: mirrors `ore-radio-group`'s `RadioGroupContext.select()`.
      * No sibling bookkeeping needed here: every item's `selected` is *derived* from `value`, so
      * changing it here is the only thing that has to happen.
      */
     select: (value: string | undefined) => void;
     selectable: Readable<boolean>;
     /**
-     * Single source of truth for the current selection — `ore-list-item` never owns its own
+     * Single source of truth for the current selection: `ore-list-item` never owns its own
      * "selected" state; it's always derived by comparing its own `value` against this one (the
      * same shape as `ore-radio-group`'s `RadioGroupContext.value`).
      */
@@ -37,7 +37,7 @@ export type OreListEvents = {
 };
 /** List component properties */
 export type OreListProps = {
-    /** Disable the entire list — blocks pointer interaction and removes items from tab order */
+    /** Disable the entire list: blocks pointer interaction and removes items from tab order */
     disabled?: boolean;
     /**
      * Enables single-selection listbox behavior: clicking (or pressing Enter/Space on) an item
@@ -48,7 +48,7 @@ export type OreListProps = {
     /** Size applied to all items (propagated via inherited CSS custom properties) */
     size?: ComponentSize;
     /**
-     * Selected item's `value` (only meaningful when `selectable`) — the single source of truth for
+     * Selected item's `value` (only meaningful when `selectable`): the single source of truth for
      * selection. `ore-list-item` never owns its own selected state; set this directly, bind it for
      * two-way control, or read it back from `change`.
      */
@@ -57,10 +57,10 @@ export type OreListProps = {
     variant?: ListVariant;
 };
 /**
- * A vertical list container for `ore-list-item` children — plain display list by default, or a
+ * A vertical list container for `ore-list-item` children: plain display list by default, or a
  * keyboard-navigable single-select listbox via `selectable`. Each item can independently reveal
  * a left/right action panel via touch/pointer swipe (see `ore-list-item`'s `actions-left`/
- * `actions-right` slots) — useful for mobile-style row actions (archive, delete, …).
+ * `actions-right` slots): useful for mobile-style row actions (archive, delete, …).
  *
  * @element ore-list
  * @element ore-list-item - Child element for each row
@@ -68,7 +68,7 @@ export type OreListProps = {
  * @attr {boolean} disabled - Disable the entire list
  * @attr {boolean} selectable - Enable single-selection listbox behavior with arrow-key navigation
  * @attr {string} size - Size applied to all items: 'sm' | 'md' | 'lg'
- * @attr {string} value - Selected item's value (only meaningful when `selectable`) — the single source of truth for selection
+ * @attr {string} value - Selected item's value (only meaningful when `selectable`): the single source of truth for selection
  * @attr {string} variant - Visual variant: 'plain' | 'bordered' | 'separated'
  *
  * @fires change - Emitted when the selected value changes. detail: { value: string | null }

package/dist/content/list/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/content/list/list.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,qCAAqC;AACrC,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;AAE7D,sEAAsE;AACtE,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C;;;;;OAKG;IACH,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9B;;;;OAIG;IACH,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,mDAA4C,CAAC;AAElE,2CAA2C;AAC3C,MAAM,MAAM,aAAa,GAAG;IAC1B,+EAA+E;IAC/E,MAAM,EAAE;QAAE,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0IAA0I;IAC1I,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/content/list/list.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,qCAAqC;AACrC,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;AAE7D,sEAAsE;AACtE,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C;;;;;OAKG;IACH,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9B;;;;OAIG;IACH,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,mDAA4C,CAAC;AAElE,2CAA2C;AAC3C,MAAM,MAAM,aAAa,GAAG;IAC1B,+EAA+E;IAC/E,MAAM,EAAE;QAAE,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0IAA0I;IAC1I,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/content/qr-code/qr-code.d.ts

@@ -30,7 +30,7 @@ export type OreQrCodeEvents = {
     };
 };
 /**
- * Renders a QR code for `value` as inline SVG — themeable via `currentColor`,
+ * Renders a QR code for `value` as inline SVG: themeable via `currentColor`,
  * crisp at any scale, no canvas. On capacity errors the component shows an
  * error state and emits `error` rather than throwing.
  *

package/dist/content/rank-list/rank-item.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{color:var(--color-contrast-700);display:block}.row{gap:var(--size-3);min-width:0;padding-block:var(--size-1-5);font-size:var(--text-sm);align-items:center;display:flex}.rank{min-width:var(--rank-number-width,var(--size-6));font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--rank-number-color,var(--color-contrast-500));flex-shrink:0;display:block}.rank:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.rank:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.rank[hidden],.leading[hidden],.description[hidden],.trailing[hidden],.bar[hidden]{display:none}.leading{flex-shrink:0;align-items:center;display:flex}.content{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.label{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.description{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-600);white-space:nowrap;display:block;overflow:hidden}.trailing{font-size:var(--text-sm);font-variant-numeric:tabular-nums;color:var(--color-contrast-800);flex-shrink:0;font-weight:600;display:block}.bar{height:var(--rank-bar-height,var(--size-1));background:var(--rank-track-color,var(--color-contrast-100));border-radius:var(--rounded-full);margin-bottom:var(--size-1-5);display:block;overflow:hidden}.bar-fill{background:var(--rank-bar-color,var(--color-primary));width:100%;height:100%;transform:scaleX(var(--_fill,1));transform-origin:0;transition:var(--_motion-transition,transform var(--transition-fast));display:block}}`;exports.default=e;
+//# sourceMappingURL=rank-item.css.cjs.map

package/dist/content/rank-list/rank-item.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-item.css.cjs","names":[],"sources":["../../../src/content/rank-list/rank-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Text Row\n       ======================================== */\n\n  .row {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    min-width: 0;\n    padding-block: var(--size-1-5);\n    font-size: var(--text-sm);\n  }\n\n  /* The list's own order is the accessible truth, so the numeral is decorative; the fixed\n     width keeps 1-digit and 2-digit ranks from shifting the label edge. */\n  .rank {\n    display: block;\n    flex-shrink: 0;\n    min-width: var(--rank-number-width, var(--size-6));\n    font-size: var(--text-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--rank-number-color, var(--color-contrast-500));\n    text-align: end;\n  }\n\n  .rank[hidden],\n  .leading[hidden],\n  .description[hidden],\n  .trailing[hidden],\n  .bar[hidden] {\n    display: none;\n  }\n\n  .leading {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .label {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .description {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n  }\n\n  .trailing {\n    display: block;\n    flex-shrink: 0;\n    font-size: var(--text-sm);\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    color: var(--color-contrast-800);\n  }\n\n  /* ========================================\n       Proportional Bar\n       ======================================== */\n\n  .bar {\n    display: block;\n    height: var(--rank-bar-height, var(--size-1));\n    margin-block-end: var(--size-1-5);\n    overflow: hidden;\n    background: var(--rank-track-color, var(--color-contrast-100));\n    border-radius: var(--rounded-full);\n  }\n\n  /* The fill spans the full track and scales to its share: scaling (not width) keeps the\n     re-scale a transform animation, and the track's own radius + overflow clip the corners. */\n  .bar-fill {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: var(--rank-bar-color, var(--color-primary));\n    transform: scaleX(var(--_fill, 1));\n    transform-origin: 0 50%;\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n}\n"],"mappings":""}

package/dist/content/rank-list/rank-item.css.js

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{color:var(--color-contrast-700);display:block}.row{gap:var(--size-3);min-width:0;padding-block:var(--size-1-5);font-size:var(--text-sm);align-items:center;display:flex}.rank{min-width:var(--rank-number-width,var(--size-6));font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--rank-number-color,var(--color-contrast-500));flex-shrink:0;display:block}.rank:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.rank:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.rank[hidden],.leading[hidden],.description[hidden],.trailing[hidden],.bar[hidden]{display:none}.leading{flex-shrink:0;align-items:center;display:flex}.content{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.label{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.description{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-600);white-space:nowrap;display:block;overflow:hidden}.trailing{font-size:var(--text-sm);font-variant-numeric:tabular-nums;color:var(--color-contrast-800);flex-shrink:0;font-weight:600;display:block}.bar{height:var(--rank-bar-height,var(--size-1));background:var(--rank-track-color,var(--color-contrast-100));border-radius:var(--rounded-full);margin-bottom:var(--size-1-5);display:block;overflow:hidden}.bar-fill{background:var(--rank-bar-color,var(--color-primary));width:100%;height:100%;transform:scaleX(var(--_fill,1));transform-origin:0;transition:var(--_motion-transition,transform var(--transition-fast));display:block}}`;export{e as default};
+//# sourceMappingURL=rank-item.css.js.map

package/dist/content/rank-list/rank-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-item.css.js","names":[],"sources":["../../../src/content/rank-list/rank-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Text Row\n       ======================================== */\n\n  .row {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    min-width: 0;\n    padding-block: var(--size-1-5);\n    font-size: var(--text-sm);\n  }\n\n  /* The list's own order is the accessible truth, so the numeral is decorative; the fixed\n     width keeps 1-digit and 2-digit ranks from shifting the label edge. */\n  .rank {\n    display: block;\n    flex-shrink: 0;\n    min-width: var(--rank-number-width, var(--size-6));\n    font-size: var(--text-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--rank-number-color, var(--color-contrast-500));\n    text-align: end;\n  }\n\n  .rank[hidden],\n  .leading[hidden],\n  .description[hidden],\n  .trailing[hidden],\n  .bar[hidden] {\n    display: none;\n  }\n\n  .leading {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .label {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .description {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n  }\n\n  .trailing {\n    display: block;\n    flex-shrink: 0;\n    font-size: var(--text-sm);\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    color: var(--color-contrast-800);\n  }\n\n  /* ========================================\n       Proportional Bar\n       ======================================== */\n\n  .bar {\n    display: block;\n    height: var(--rank-bar-height, var(--size-1));\n    margin-block-end: var(--size-1-5);\n    overflow: hidden;\n    background: var(--rank-track-color, var(--color-contrast-100));\n    border-radius: var(--rounded-full);\n  }\n\n  /* The fill spans the full track and scales to its share: scaling (not width) keeps the\n     re-scale a transform animation, and the track's own radius + overflow clip the corners. */\n  .bar-fill {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: var(--rank-bar-color, var(--color-primary));\n    transform: scaleX(var(--_fill, 1));\n    transform-origin: 0 50%;\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n}\n"],"mappings":""}

package/dist/content/rank-list/rank-item.d.ts

@@ -0,0 +1,68 @@
+/** Rank-item component properties */
+export type OreRankItemProps = {
+    /**
+     * Show the proportional bar (default). Disable with `bar="false"` for rows whose `value` is
+     * not a comparable count (a median duration, a rating), where a scaled bar would imply a
+     * ranking the data does not support.
+     */
+    bar?: boolean;
+    /**
+     * Rank position within the parent `ore-rank-list`, starting at 1. Assigned automatically in
+     * DOM order on every rescan; a hand-written value is overwritten the moment the list syncs.
+     */
+    rank?: number;
+    /**
+     * The row's numeric value. Against the largest sibling `value` it sizes the proportional
+     * bar, and without a `trailing` slot it is also the row's own formatted display. Omit it on
+     * rows whose display is not a count (pass the formatted text in the `trailing` slot instead).
+     */
+    value?: number;
+};
+/**
+ * A single ranked row inside `ore-rank-list`: a rank numeral, an optional `leading` slot
+ * (avatar, icon), the label, a secondary `description` line, and a right-aligned `trailing`
+ * value, with a proportional bar under the row sized against the largest sibling `value`.
+ * The row is the whole visualization: the label and value stay text, so the ranking is
+ * readable and accessible with the bar treated as reinforcement, never as the only carrier.
+ *
+ * @element ore-rank-item
+ *
+ * @attr {boolean} bar - Show the proportional bar (default). Disable with `bar="false"` for non-count rows.
+ * @attr {number} rank - Rank position: assigned automatically by the parent list in DOM order; manual values are overwritten.
+ * @attr {number} value - The row's numeric value: sizes the bar against the largest sibling, and is the formatted display when no `trailing` slot is present.
+ *
+ * @slot leading - Content before the label (e.g. avatar, icon)
+ * @slot - Item label
+ * @slot description - Secondary line below the label (e.g. sample count)
+ * @slot trailing - Right-aligned value display; replaces the formatted `value`
+ *
+ * @cssprop --rank-number-color - Rank numeral color (default --color-contrast-500)
+ * @cssprop --rank-number-width - Rank numeral column width (default --size-6)
+ * @cssprop --rank-bar-color - Bar fill color (default --color-primary)
+ * @cssprop --rank-track-color - Bar track color (default --color-contrast-100)
+ * @cssprop --rank-bar-height - Bar height (default --size-1)
+ *
+ * @part row - The text row (rank, leading, label, trailing)
+ * @part rank - The rank numeral (aria-hidden: the list order carries it)
+ * @part leading - The leading slot container
+ * @part content - The label + description container
+ * @part label - The label slot container
+ * @part description - The description slot container
+ * @part trailing - The trailing value container
+ * @part bar - The bar track
+ * @part bar-fill - The bar fill
+ * @example
+ * ```html
+ * <ore-rank-item value="8">
+ *   <ore-avatar slot="leading" src="alex.png" alt="" rounded="full" size="sm"></ore-avatar>
+ *   Alex
+ * </ore-rank-item>
+ * <ore-rank-item value="6" bar="false">
+ *   Overview
+ *   <span slot="description">4 timed sessions</span>
+ *   <span slot="trailing">24m 11s</span>
+ * </ore-rank-item>
+ * ```
+ */
+export declare const RANK_ITEM_TAG: "ore-rank-item";
+//# sourceMappingURL=rank-item.d.ts.map

package/dist/content/rank-list/rank-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-item.d.ts","sourceRoot":"","sources":["../../../src/content/rank-list/rank-item.ts"],"names":[],"mappings":"AAOA,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}

package/dist/content/rank-list/rank-list.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{gap:var(--rank-list-gap,var(--size-1));flex-direction:column;display:flex}::slotted(ore-rank-item){display:block}}`;exports.default=e;
+//# sourceMappingURL=rank-list.css.cjs.map

package/dist/content/rank-list/rank-list.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-list.css.cjs","names":[],"sources":["../../../src/content/rank-list/rank-list.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--rank-list-gap, var(--size-1));\n  }\n\n  ::slotted(ore-rank-item) {\n    display: block;\n  }\n}\n"],"mappings":""}

package/dist/content/rank-list/rank-list.css.js

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{gap:var(--rank-list-gap,var(--size-1));flex-direction:column;display:flex}::slotted(ore-rank-item){display:block}}`;export{e as default};
+//# sourceMappingURL=rank-list.css.js.map

package/dist/content/rank-list/rank-list.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-list.css.js","names":[],"sources":["../../../src/content/rank-list/rank-list.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--rank-list-gap, var(--size-1));\n  }\n\n  ::slotted(ore-rank-item) {\n    display: block;\n  }\n}\n"],"mappings":""}

package/dist/content/rank-list/rank-list.d.ts

@@ -0,0 +1,44 @@
+import { type Readable } from '@vielzeug/ripple';
+/** Context provided by `ore-rank-list` to its `ore-rank-item` children. */
+export type RankContext = {
+    /**
+     * The largest `value` among the item children: the denominator every item divides its own
+     * `value` by to size its bar. Always at least `1`, so a list of all-zero values renders
+     * empty tracks rather than dividing by zero.
+     */
+    scale: Readable<number>;
+};
+/** Injection key for the rank context. */
+export declare const RANK_CTX: import("@vielzeug/ore").InjectionKey<RankContext>;
+/** Rank-list component properties: the list takes none; its children carry `value` and `bar`.
+ * `unknown` (not `never`) keeps the derived Vue/framework attribute types permissive. */
+export type OreRankListProps = Record<string, unknown>;
+/**
+ * A ranked display list: an ordered set of `ore-rank-item` rows where each row's proportional
+ * bar makes the ranking scannable without a separate chart. The list itself owns the two
+ * facts an item cannot know on its own: the position of each row (assigned back to the item
+ * as its `rank` prop, in DOM order) and the scale every bar is measured against (the largest
+ * child `value`, shared through context).
+ *
+ * This is a read-only data display, not a selection control: rows never receive interactive
+ * state. Order the items yourself before rendering: the list numbers them, it does not sort
+ * them.
+ *
+ * @element ore-rank-list
+ * @element ore-rank-item - Child element for each ranked row
+ *
+ * @cssprop --rank-list-gap - Vertical gap between rows (default --size-1)
+ *
+ * @slot - `ore-rank-item` elements as direct children
+ *
+ * @example
+ * ```html
+ * <ore-rank-list aria-label="Most visited pages">
+ *   <ore-rank-item value="8">Documentation</ore-rank-item>
+ *   <ore-rank-item value="6">Pricing</ore-rank-item>
+ *   <ore-rank-item value="2" bar="false">Blog<span slot="trailing">18m 24s</span></ore-rank-item>
+ * </ore-rank-list>
+ * ```
+ */
+export declare const RANK_LIST_TAG: "ore-rank-list";
+//# sourceMappingURL=rank-list.d.ts.map

package/dist/content/rank-list/rank-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-list.d.ts","sourceRoot":"","sources":["../../../src/content/rank-list/rank-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAU,MAAM,kBAAkB,CAAC;AAGzD,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,mDAA4C,CAAC;AAElE;yFACyF;AACzF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}

package/dist/content/separator/separator.d.ts

@@ -3,7 +3,7 @@ import type { ThemeColor } from '../../types';
 export type OreSeparatorProps = {
     /** Theme color tint */
     color?: ThemeColor;
-    /** Decorative only (default true) — set to false for semantic separators */
+    /** Decorative only (default true): set to false for semantic separators */
     decorative?: boolean;
     /** Optional label text centered on the separator */
     label?: string;

package/dist/content/separator/separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/content/separator/separator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,qCAAqC;AACrC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/content/separator/separator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,qCAAqC;AACrC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}

package/dist/content/speech-player/speech-player.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"speech-player.css.cjs","names":[],"sources":["../../../src/content/speech-player/speech-player.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_gap: var(--speech-player-gap, var(--size-1));\n    --_control-size: var(--speech-player-control-size, var(--size-8));\n    --_icon-color: var(--speech-player-icon-color, var(--text-color-secondary));\n    --_active-color: var(--speech-player-active-color, var(--color-primary));\n    --_hover-bg: var(--speech-player-hover-bg, var(--color-contrast-100));\n\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── controls ──────────────────────────────────────────────── */\n\n  .control {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--_control-size);\n    height: var(--_control-size);\n    padding: 0;\n    color: var(--_icon-color);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .control:hover:not(:disabled) {\n    color: var(--text-color-body);\n    background: var(--_hover-bg);\n  }\n\n  .control:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: 1px;\n  }\n\n  .control:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n\n  .control[hidden] {\n    display: none;\n  }\n\n  /* The toggle is the invitation — icon and, before the first read, the label. A bare\n     triangle asks nobody. Once engaged the label folds away; the controls are known. */\n  .control--toggle {\n    gap: var(--size-1-5);\n    padding-inline: var(--size-2);\n  }\n\n  .toggle-label {\n    font-size: var(--text-sm);\n    white-space: nowrap;\n  }\n\n  .toggle-label[hidden] {\n    display: none;\n  }\n\n  /* The gauge marks the pace control; the text names its step, and the widest step\n     sets the floor so the row never shifts while cycling. */\n  .control--rate {\n    gap: var(--size-1-5);\n    padding-inline: var(--size-2);\n    font-size: var(--text-sm);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .rate-text {\n    min-width: 5ch;\n    text-align: center;\n  }\n\n  /* While reading, the toggle carries the accent — the control's \"now playing\" state,\n     distinct from its resting tone without a heavier affordance. */\n  :host([state='playing']) .control--toggle,\n  :host([state='paused']) .control--toggle {\n    color: var(--_active-color);\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in speech-player.ts) */\n}\n"],"mappings":""}
+{"version":3,"file":"speech-player.css.cjs","names":[],"sources":["../../../src/content/speech-player/speech-player.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_gap: var(--speech-player-gap, var(--size-1));\n    --_control-size: var(--speech-player-control-size, var(--size-8));\n    --_icon-color: var(--speech-player-icon-color, var(--text-color-secondary));\n    --_active-color: var(--speech-player-active-color, var(--color-primary));\n    --_hover-bg: var(--speech-player-hover-bg, var(--color-contrast-100));\n\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── controls ──────────────────────────────────────────────── */\n\n  .control {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--_control-size);\n    height: var(--_control-size);\n    padding: 0;\n    color: var(--_icon-color);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .control:hover:not(:disabled) {\n    color: var(--text-color-body);\n    background: var(--_hover-bg);\n  }\n\n  .control:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: 1px;\n  }\n\n  .control:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n\n  .control[hidden] {\n    display: none;\n  }\n\n  /* The toggle is the invitation: icon and, before the first read, the label. A bare\n     triangle asks nobody. Once engaged the label folds away; the controls are known. */\n  .control--toggle {\n    gap: var(--size-1-5);\n    padding-inline: var(--size-2);\n  }\n\n  .toggle-label {\n    font-size: var(--text-sm);\n    white-space: nowrap;\n  }\n\n  .toggle-label[hidden] {\n    display: none;\n  }\n\n  /* The gauge marks the pace control; the text names its step, and the widest step\n     sets the floor so the row never shifts while cycling. */\n  .control--rate {\n    gap: var(--size-1-5);\n    padding-inline: var(--size-2);\n    font-size: var(--text-sm);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .rate-text {\n    min-width: 5ch;\n    text-align: center;\n  }\n\n  /* While reading, the toggle carries the accent: the control's \"now playing\" state,\n     distinct from its resting tone without a heavier affordance. */\n  :host([state='playing']) .control--toggle,\n  :host([state='paused']) .control--toggle {\n    color: var(--_active-color);\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in speech-player.ts) */\n}\n"],"mappings":""}

package/dist/content/speech-player/speech-player.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"speech-player.css.js","names":[],"sources":["../../../src/content/speech-player/speech-player.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_gap: var(--speech-player-gap, var(--size-1));\n    --_control-size: var(--speech-player-control-size, var(--size-8));\n    --_icon-color: var(--speech-player-icon-color, var(--text-color-secondary));\n    --_active-color: var(--speech-player-active-color, var(--color-primary));\n    --_hover-bg: var(--speech-player-hover-bg, var(--color-contrast-100));\n\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── controls ──────────────────────────────────────────────── */\n\n  .control {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--_control-size);\n    height: var(--_control-size);\n    padding: 0;\n    color: var(--_icon-color);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .control:hover:not(:disabled) {\n    color: var(--text-color-body);\n    background: var(--_hover-bg);\n  }\n\n  .control:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: 1px;\n  }\n\n  .control:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n\n  .control[hidden] {\n    display: none;\n  }\n\n  /* The toggle is the invitation — icon and, before the first read, the label. A bare\n     triangle asks nobody. Once engaged the label folds away; the controls are known. */\n  .control--toggle {\n    gap: var(--size-1-5);\n    padding-inline: var(--size-2);\n  }\n\n  .toggle-label {\n    font-size: var(--text-sm);\n    white-space: nowrap;\n  }\n\n  .toggle-label[hidden] {\n    display: none;\n  }\n\n  /* The gauge marks the pace control; the text names its step, and the widest step\n     sets the floor so the row never shifts while cycling. */\n  .control--rate {\n    gap: var(--size-1-5);\n    padding-inline: var(--size-2);\n    font-size: var(--text-sm);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .rate-text {\n    min-width: 5ch;\n    text-align: center;\n  }\n\n  /* While reading, the toggle carries the accent — the control's \"now playing\" state,\n     distinct from its resting tone without a heavier affordance. */\n  :host([state='playing']) .control--toggle,\n  :host([state='paused']) .control--toggle {\n    color: var(--_active-color);\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in speech-player.ts) */\n}\n"],"mappings":""}
+{"version":3,"file":"speech-player.css.js","names":[],"sources":["../../../src/content/speech-player/speech-player.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_gap: var(--speech-player-gap, var(--size-1));\n    --_control-size: var(--speech-player-control-size, var(--size-8));\n    --_icon-color: var(--speech-player-icon-color, var(--text-color-secondary));\n    --_active-color: var(--speech-player-active-color, var(--color-primary));\n    --_hover-bg: var(--speech-player-hover-bg, var(--color-contrast-100));\n\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── controls ──────────────────────────────────────────────── */\n\n  .control {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--_control-size);\n    height: var(--_control-size);\n    padding: 0;\n    color: var(--_icon-color);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .control:hover:not(:disabled) {\n    color: var(--text-color-body);\n    background: var(--_hover-bg);\n  }\n\n  .control:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: 1px;\n  }\n\n  .control:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n\n  .control[hidden] {\n    display: none;\n  }\n\n  /* The toggle is the invitation: icon and, before the first read, the label. A bare\n     triangle asks nobody. Once engaged the label folds away; the controls are known. */\n  .control--toggle {\n    gap: var(--size-1-5);\n    padding-inline: var(--size-2);\n  }\n\n  .toggle-label {\n    font-size: var(--text-sm);\n    white-space: nowrap;\n  }\n\n  .toggle-label[hidden] {\n    display: none;\n  }\n\n  /* The gauge marks the pace control; the text names its step, and the widest step\n     sets the floor so the row never shifts while cycling. */\n  .control--rate {\n    gap: var(--size-1-5);\n    padding-inline: var(--size-2);\n    font-size: var(--text-sm);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .rate-text {\n    min-width: 5ch;\n    text-align: center;\n  }\n\n  /* While reading, the toggle carries the accent: the control's \"now playing\" state,\n     distinct from its resting tone without a heavier affordance. */\n  :host([state='playing']) .control--toggle,\n  :host([state='paused']) .control--toggle {\n    color: var(--_active-color);\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in speech-player.ts) */\n}\n"],"mappings":""}

package/dist/content/speech-player/speech-player.d.ts

@@ -1,7 +1,7 @@
 export { ICON_TAG } from '../icon/icon';
-/** The player's reflected state — `unsupported` when the Web Speech API is missing. */
+/** The player's reflected state: `unsupported` when the Web Speech API is missing. */
 export type SpeechPlayerState = 'idle' | 'playing' | 'paused' | 'unsupported';
-/** The rate steps the speed control cycles through — normal, slow, fast. */
+/** The rate steps the speed control cycles through: normal, slow, fast. */
 export declare const SPEECH_RATES: readonly [1, 0.85, 1.15];
 export type SpeechRate = (typeof SPEECH_RATES)[number];
 /** Every user-facing string the component renders or announces. Override the `labels`
@@ -40,13 +40,13 @@ export type OreSpeechPlayerLabels = {
 };
 /** Speech player component properties */
 export type OreSpeechPlayerProps = {
-    /** Labels for the controls and announcements — override to localize. */
+    /** Labels for the controls and announcements: override to localize. */
     labels?: Partial<OreSpeechPlayerLabels>;
-    /** Playback rate — bind with `rate-change` to persist the listener's choice; unbound,
+    /** Playback rate: bind with `rate-change` to persist the listener's choice; unbound,
      *  the speed control cycles on its own. Values outside `SPEECH_RATES` snap into the
      *  cycle at the control's first use. */
     rate?: number;
-    /** The sentence index playback begins from — bind a persisted position so "resume"
+    /** The sentence index playback begins from: bind a persisted position so "resume"
      *  survives stops, collapses, and page loads. */
     'resume-at'?: number;
     /** The text to read aloud. */
@@ -56,11 +56,11 @@ export type OreSpeechPlayerProps = {
 export type OreSpeechPlayerEvents = {
     /** Reading finished on its own. */
     end: undefined;
-    /** The engine failed mid-read — reading stopped, but not by the listener. */
+    /** The engine failed mid-read: reading stopped, but not by the listener. */
     error: undefined;
-    /** Reading started — from the control or a `play()` call. */
+    /** Reading started: from the control or a `play()` call. */
     play: undefined;
-    /** A sentence began — carry `sentence` of `total` to the surfaces that follow the voice. */
+    /** A sentence began: carry `sentence` of `total` to the surfaces that follow the voice. */
     progress: {
         sentence: number;
         total: number;
@@ -69,26 +69,26 @@ export type OreSpeechPlayerEvents = {
     'rate-change': {
         rate: number;
     };
-    /** Reading stopped before finishing — from the control or a `stop()` call. */
+    /** Reading stopped before finishing: from the control or a `stop()` call. */
     stop: undefined;
 };
 /** Element interface exposing the imperative API for `ore-speech-player`. */
 export interface SpeechPlayerElement extends HTMLElement, OreSpeechPlayerProps {
     /** Pauses the current reading. */
     pause(): void;
-    /** Starts reading — from `resume-at` when bound, else from the beginning.
+    /** Starts reading: from `resume-at` when bound, else from the beginning.
      *  Any player already reading stops first. */
     play(): void;
     /** Stops reading and cancels pending speech. */
     stop(): void;
 }
-/** The entry's sentences — prose ends . ! or ?, closing quotes belong to the sentence
+/** The entry's sentences: prose ends . ! or ?, closing quotes belong to the sentence
  *  they end, and an unterminated tail is still a sentence. Consumers that highlight what
  *  is being read build their display from this same list, so `progress` sentence indexes
  *  map onto their own. */
 export declare function speechSentences(text: string): string[];
 /**
- * A text-to-speech player control — reads its `text` aloud through the Web Speech API.
+ * A text-to-speech player control: reads its `text` aloud through the Web Speech API.
  *
  * Renders a labeled play/pause toggle (the label folds away once engaged), a stop
  * control beside it that appears while reading, and a speed control cycling

package/dist/content/speech-player/speech-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"speech-player.d.ts","sourceRoot":"","sources":["../../../src/content/speech-player/speech-player.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,uFAAuF;AACvF,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9E,4EAA4E;AAC5E,eAAO,MAAM,YAAY,0BAA2B,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD;oDACoD;AACpD,MAAM,MAAM,qBAAqB,GAAG;IAClC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAoBF,yCAAyC;AACzC,MAAM,MAAM,oBAAoB,GAAG;IACjC,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACxC;;4CAEwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;qDACiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,qBAAqB,GAAG;IAClC,mCAAmC;IACnC,GAAG,EAAE,SAAS,CAAC;IACf,6EAA6E;IAC7E,KAAK,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC;IAChB,4FAA4F;IAC5F,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,6CAA6C;IAC7C,aAAa,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,8EAA8E;IAC9E,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,6EAA6E;AAC7E,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,oBAAoB;IAC5E,kCAAkC;IAClC,KAAK,IAAI,IAAI,CAAC;IACd;kDAC8C;IAC9C,IAAI,IAAI,IAAI,CAAC;IACb,gDAAgD;IAChD,IAAI,IAAI,IAAI,CAAC;CACd;AAMD;;;0BAG0B;AAC1B,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAStD;AA6BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,iBAAiB,EAAG,mBAA4B,CAAC"}
+{"version":3,"file":"speech-player.d.ts","sourceRoot":"","sources":["../../../src/content/speech-player/speech-player.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,sFAAsF;AACtF,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9E,2EAA2E;AAC3E,eAAO,MAAM,YAAY,0BAA2B,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD;oDACoD;AACpD,MAAM,MAAM,qBAAqB,GAAG;IAClC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAoBF,yCAAyC;AACzC,MAAM,MAAM,oBAAoB,GAAG;IACjC,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACxC;;4CAEwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;qDACiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,qBAAqB,GAAG;IAClC,mCAAmC;IACnC,GAAG,EAAE,SAAS,CAAC;IACf,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,IAAI,EAAE,SAAS,CAAC;IAChB,2FAA2F;IAC3F,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,6CAA6C;IAC7C,aAAa,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,6EAA6E;IAC7E,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,6EAA6E;AAC7E,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,oBAAoB;IAC5E,kCAAkC;IAClC,KAAK,IAAI,IAAI,CAAC;IACd;kDAC8C;IAC9C,IAAI,IAAI,IAAI,CAAC;IACb,gDAAgD;IAChD,IAAI,IAAI,IAAI,CAAC;CACd;AAMD;;;0BAG0B;AAC1B,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAStD;AA6BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,iBAAiB,EAAG,mBAA4B,CAAC"}

package/dist/content/stepper/step.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"step.css.cjs","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    max-width: 100%;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"step.css.cjs","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position: the midpoint of its own step: regardless of label length. The full\n     line between two indicators is drawn as *two* halves: this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge): each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box, so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector`: being absolutely positioned: automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size`: every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    max-width: 100%;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge: using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it: the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for): `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}

package/dist/content/stepper/step.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"step.css.js","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    max-width: 100%;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"step.css.js","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position: the midpoint of its own step: regardless of label length. The full\n     line between two indicators is drawn as *two* halves: this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge): each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box, so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector`: being absolutely positioned: automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size`: every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    max-width: 100%;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge: using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it: the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for): `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}

package/dist/content/stepper/step.d.ts

@@ -6,13 +6,13 @@ export type OreStepProps = {
      * this value); only takes effect on its own when `ore-step` is rendered standalone.
      */
     color?: ThemeColor;
-    /** Disables this step — it cannot be navigated to and is skipped by keyboard navigation. */
+    /** Disables this step: it cannot be navigated to and is skipped by keyboard navigation. */
     disabled?: boolean;
     /** Marks this step as failed/invalid. Overrides the completed/current indicator visuals. */
     error?: boolean;
     /**
      * Marks this step as optional. Renders a small "(optional)" hint next to the label.
-     * Purely presentational — has no effect on navigation.
+     * Purely presentational: has no effect on navigation.
      */
     optional?: boolean;
     /** Orientation. Inherited from the parent `ore-stepper` when nested inside one. */
@@ -24,7 +24,7 @@ export type OreStepProps = {
 };
 /**
  * A single step trigger. Must be placed as a direct child of `ore-stepper`, which provides
- * this step's current/completed/navigable/index/total state via context — those are derived,
+ * this step's current/completed/navigable/index/total state via context: those are derived,
  * read-only attributes on this element, not settable props.
  *
  * @element ore-step

package/dist/content/stepper/step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/content/stepper/step.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK7D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sFAAsF;IACtF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/content/stepper/step.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK7D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sFAAsF;IACtF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/content/stepper/stepper.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.css.cjs","names":[],"sources":["../../../src/content/stepper/stepper.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  nav {\n    display: block;\n    width: 100%;\n  }\n\n  .steps {\n    /* Spacing between steps comes from each ore-step's own `padding-inline-start` /\n       `padding-block-start` (see step.css), not a flex `gap` here — that lets each step's\n       connector line be drawn from its own edge to its own indicator using the exact same\n       length it was given room for, with no separate gap value to keep in sync by hand. */\n    display: flex;\n    gap: 0;\n    align-items: flex-start;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .stepper-message {\n    display: block;\n    margin-top: var(--size-3);\n  }\n}\n\n@layer refine.orientation {\n  :host([orientation='vertical']) .steps {\n    flex-direction: column;\n    align-items: stretch;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"stepper.css.cjs","names":[],"sources":["../../../src/content/stepper/stepper.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  nav {\n    display: block;\n    width: 100%;\n  }\n\n  .steps {\n    /* Spacing between steps comes from each ore-step's own `padding-inline-start` /\n       `padding-block-start` (see step.css), not a flex `gap` here, that lets each step's\n       connector line be drawn from its own edge to its own indicator using the exact same\n       length it was given room for, with no separate gap value to keep in sync by hand. */\n    display: flex;\n    gap: 0;\n    align-items: flex-start;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .stepper-message {\n    display: block;\n    margin-top: var(--size-3);\n  }\n}\n\n@layer refine.orientation {\n  :host([orientation='vertical']) .steps {\n    flex-direction: column;\n    align-items: stretch;\n  }\n}\n"],"mappings":""}

package/dist/content/stepper/stepper.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.css.js","names":[],"sources":["../../../src/content/stepper/stepper.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  nav {\n    display: block;\n    width: 100%;\n  }\n\n  .steps {\n    /* Spacing between steps comes from each ore-step's own `padding-inline-start` /\n       `padding-block-start` (see step.css), not a flex `gap` here — that lets each step's\n       connector line be drawn from its own edge to its own indicator using the exact same\n       length it was given room for, with no separate gap value to keep in sync by hand. */\n    display: flex;\n    gap: 0;\n    align-items: flex-start;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .stepper-message {\n    display: block;\n    margin-top: var(--size-3);\n  }\n}\n\n@layer refine.orientation {\n  :host([orientation='vertical']) .steps {\n    flex-direction: column;\n    align-items: stretch;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"stepper.css.js","names":[],"sources":["../../../src/content/stepper/stepper.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  nav {\n    display: block;\n    width: 100%;\n  }\n\n  .steps {\n    /* Spacing between steps comes from each ore-step's own `padding-inline-start` /\n       `padding-block-start` (see step.css), not a flex `gap` here, that lets each step's\n       connector line be drawn from its own edge to its own indicator using the exact same\n       length it was given room for, with no separate gap value to keep in sync by hand. */\n    display: flex;\n    gap: 0;\n    align-items: flex-start;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .stepper-message {\n    display: block;\n    margin-top: var(--size-3);\n  }\n}\n\n@layer refine.orientation {\n  :host([orientation='vertical']) .steps {\n    flex-direction: column;\n    align-items: stretch;\n  }\n}\n"],"mappings":""}

package/dist/content/stepper/stepper.d.ts

@@ -23,16 +23,16 @@ export type OreStepperProps = {
     clickable?: boolean;
     /** Theme color for the current/completed step indicators */
     color?: ThemeColor;
-    /** Disables the whole stepper — no step is navigable regardless of `clickable` */
+    /** Disables the whole stepper: no step is navigable regardless of `clickable` */
     disabled?: boolean;
     /** Accessible label for the nav landmark */
     label?: string;
     /**
-     * Restricts navigation to completed steps and the current step — steps ahead of the
+     * Restricts navigation to completed steps and the current step: steps ahead of the
      * current one cannot be clicked or focused, even when `clickable` is set.
      */
     linear?: boolean;
-    /** Layout orientation — 'horizontal' (default, desktop) or 'vertical' (compact/mobile-friendly) */
+    /** Layout orientation: 'horizontal' (default, desktop) or 'vertical' (compact/mobile-friendly) */
     orientation?: 'horizontal' | 'vertical';
     /** Component size */
     size?: ComponentSize;

package/dist/content/stepper/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/content/stepper/stepper.ts"],"names":[],"mappings":"AAaA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAG1E,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAe7D,gEAAgE;AAChE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,YAAY,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3C,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,WAAW,EAAE,QAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;IACjD,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,0FAA0F;IAC1F,UAAU,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;CAChC,CAAC;AACF,6CAA6C;AAC7C,eAAO,MAAM,WAAW,sDAAkD,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,wGAAwG;IACxG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mGAAmG;IACnG,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/content/stepper/stepper.ts"],"names":[],"mappings":"AAaA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAG1E,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAe7D,gEAAgE;AAChE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,YAAY,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3C,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,WAAW,EAAE,QAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;IACjD,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,0FAA0F;IAC1F,UAAU,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;CAChC,CAAC;AACF,6CAA6C;AAC7C,eAAO,MAAM,WAAW,sDAAkD,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,wGAAwG;IACxG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kGAAkG;IAClG,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC"}