@vielzeug/refine 2.2.5 → 2.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.css.js","names":[],"sources":["../../../src/content/list/list-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* `--_gap` / `--_padding` / `--_font-size` are intentionally not emitted by any mixin in this\n     component's own `styles` array — they're inherited from the parent `ore-list`'s\n     `sizeVariantMixin(LIST_SIZE_PRESET)` call the same way `ore-menu-item` inherits\n     `--_gap`/`--_font-size` from `ore-menu` (see `LIST_SIZE_PRESET`'s doc comment). The\n     `var(..., fallback)` defaults below cover standalone use outside an `ore-list`. */\n  :host {\n    --_actions-width: var(--list-item-actions-width, var(--size-24));\n    position: relative;\n    display: block;\n    overflow: hidden;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Row\n       ======================================== */\n\n  .row {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-4));\n    align-items: center;\n    width: 100%;\n    min-height: var(--_min-height, var(--size-4));\n    padding: var(--_padding, var(--size-2-5) var(--size-4));\n    padding-inline-end: var(--_padding-inline-end, var(--size-6));\n    font-size: var(--_font-size, var(--text-sm));\n    text-align: start;\n    touch-action: pan-y;\n    cursor: default;\n    outline: none;\n    background: var(--list-item-bg, var(--color-canvas));\n    border: none;\n    transform: translateX(calc(var(--_swipe-x, 0) * var(--_actions-width)));\n    transition: var(--_motion-transition, transform var(--transition-fast), background var(--transition-fast));\n  }\n\n  .leading,\n  .trailing {\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  .title {\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-400);\n    white-space: nowrap;\n  }\n\n  .description:empty {\n    display: none;\n  }\n\n  .row:hover {\n    background: var(--list-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .row:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: -2px;\n  }\n\n  /* ========================================\n       Selected / Disabled States\n       ======================================== */\n\n  :host([selected]) .row {\n    color: var(--color-primary);\n    background: var(--list-item-selected-bg, color-mix(in oklch, var(--color-primary) 10%, transparent));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n       Swipe Action Panels\n       ======================================== */\n\n  .actions {\n    position: absolute;\n    inset-block: 0;\n    display: flex;\n    align-items: stretch;\n    width: var(--_actions-width);\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  /* A single slotted action button fills the whole revealed panel — the common case (one big\n     tappable target, e.g. a full-height \"Delete\" button) rather than a small icon-sized hit area.\n     This stretches the slotted element's own light-DOM box, which is enough for plain elements\n     (a native <button>, an <a>, ...). It is NOT enough on its own for `ore-button`: its visible\n     surface is an inner `[part=\"button\"]` with a fixed height from its size preset, independent\n     of its own host box size — pass `fullheight` on the `ore-button` itself too (see its own\n     `fullheight` prop) to actually fill this panel edge-to-edge. */\n  .actions ::slotted(*) {\n    flex: 1;\n    height: 100%;\n  }\n\n  .actions-left {\n    left: 0;\n    transform: translateX(calc((var(--_swipe-x, 0) - 1) * 100%));\n  }\n\n  .actions-right {\n    right: 0;\n    transform: translateX(calc((var(--_swipe-x, 0) + 1) * 100%));\n  }\n\n  /* `:host(:has(...))` (`:has()` as `:host()`'s functional argument) is invalid — `:host()`\n     only accepts a compound selector and doesn't accept `:has()` inside it. The plain `:host`\n     pseudo-class chained directly with `:has()` (no parentheses) is the valid form. Kept as\n     separate rules (not grouped via a comma with the `[revealed]` rules) so a selector list\n     doesn't silently drop the whole rule if either half were ever invalid again. */\n  :host([revealed='left']) {\n    --_swipe-x: 1;\n  }\n\n  :host([revealed='right']) {\n    --_swipe-x: -1;\n  }\n\n  :host:has(.actions-left:focus-within) {\n    --_swipe-x: 1;\n  }\n\n  :host:has(.actions-right:focus-within) {\n    --_swipe-x: -1;\n  }\n\n  /* Suppress the transition while a drag is actively updating `--_swipe-x` inline so the row\n     and action panels track the pointer 1:1 instead of lagging behind on every move event. */\n  :host([data-dragging]) .row,\n  :host([data-dragging]) .actions-left,\n  :host([data-dragging]) .actions-right {\n    transition: none;\n  }\n\n  /* Feedback that the drag has passed into \"swipe all the way through\" territory (close to\n     CONFIRM_THRESHOLD) — set by list-item.ts's onMove once past ~85% of that distance, cleared\n     on release/cancel/commit. Visual-only; the confirm itself fires from JS regardless of CSS. */\n  :host([data-confirming]) .actions-left,\n  :host([data-confirming]) .actions-right {\n    filter: saturate(1.4) brightness(0.94);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"list-item.css.js","names":[],"sources":["../../../src/content/list/list-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* `--_gap` / `--_padding` / `--_font-size` are intentionally not emitted by any mixin in this\n     component's own `styles` array — they're inherited from the parent `ore-list`'s\n     `sizeVariantMixin(LIST_SIZE_PRESET)` call the same way `ore-menu-item` inherits\n     `--_gap`/`--_font-size` from `ore-menu` (see `LIST_SIZE_PRESET`'s doc comment). The\n     `var(..., fallback)` defaults below cover standalone use outside an `ore-list`. */\n  :host {\n    --_actions-width: var(--list-item-actions-width, var(--size-24));\n    position: relative;\n    display: block;\n    overflow: hidden;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Row\n       ======================================== */\n\n  .row {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-4));\n    align-items: center;\n    width: 100%;\n    min-height: var(--_min-height, var(--size-4));\n    padding: var(--_padding, var(--size-2-5) var(--size-4));\n    padding-inline-end: var(--_padding-inline-end, var(--size-6));\n    font-size: var(--_font-size, var(--text-sm));\n    text-align: start;\n    touch-action: pan-y;\n    cursor: default;\n    outline: none;\n    background: var(--list-item-bg, var(--color-canvas));\n    border: none;\n    transform: translateX(calc(var(--_swipe-x, 0) * var(--_actions-width)));\n    transition: var(--_motion-transition, transform var(--transition-fast), background var(--transition-fast));\n  }\n\n  :host([data-two-line]) .row {\n    min-height: var(--_min-height-two-line, var(--size-18));\n  }\n\n  :host([actionable]) .row {\n    cursor: pointer;\n  }\n\n  .leading,\n  .trailing {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .leading[hidden],\n  .trailing[hidden] {\n    display: none;\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  .title {\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  .description:empty {\n    display: none;\n  }\n\n  .row:hover {\n    background: var(--list-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .row:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: -2px;\n  }\n\n  /* ========================================\n       Selected / Disabled States\n       ======================================== */\n\n  :host([selected]) .row {\n    color: var(--color-primary);\n    background: var(--list-item-selected-bg, color-mix(in oklch, var(--color-primary) 10%, transparent));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n       Swipe Action Panels\n       ======================================== */\n\n  .actions {\n    position: absolute;\n    inset-block: 0;\n    display: flex;\n    align-items: stretch;\n    width: var(--_actions-width);\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  /* A single slotted action button fills the whole revealed panel — the common case (one big\n     tappable target, e.g. a full-height \"Delete\" button) rather than a small icon-sized hit area.\n     This stretches the slotted element's own light-DOM box, which is enough for plain elements\n     (a native <button>, an <a>, ...). It is NOT enough on its own for `ore-button`: its visible\n     surface is an inner `[part=\"button\"]` with a fixed height from its size preset, independent\n     of its own host box size — pass `fullheight` on the `ore-button` itself too (see its own\n     `fullheight` prop) to actually fill this panel edge-to-edge. */\n  .actions ::slotted(*) {\n    flex: 1;\n    height: 100%;\n  }\n\n  .actions-left {\n    left: 0;\n    transform: translateX(calc((var(--_swipe-x, 0) - 1) * 100%));\n  }\n\n  .actions-right {\n    right: 0;\n    transform: translateX(calc((var(--_swipe-x, 0) + 1) * 100%));\n  }\n\n  /* `:host(:has(...))` (`:has()` as `:host()`'s functional argument) is invalid — `:host()`\n     only accepts a compound selector and doesn't accept `:has()` inside it. The plain `:host`\n     pseudo-class chained directly with `:has()` (no parentheses) is the valid form. Kept as\n     separate rules (not grouped via a comma with the `[revealed]` rules) so a selector list\n     doesn't silently drop the whole rule if either half were ever invalid again. */\n  :host([revealed='left']) {\n    --_swipe-x: 1;\n  }\n\n  :host([revealed='right']) {\n    --_swipe-x: -1;\n  }\n\n  :host:has(.actions-left:focus-within) {\n    --_swipe-x: 1;\n  }\n\n  :host:has(.actions-right:focus-within) {\n    --_swipe-x: -1;\n  }\n\n  /* Suppress the transition while a drag is actively updating `--_swipe-x` inline so the row\n     and action panels track the pointer 1:1 instead of lagging behind on every move event. */\n  :host([data-dragging]) .row,\n  :host([data-dragging]) .actions-left,\n  :host([data-dragging]) .actions-right {\n    transition: none;\n  }\n\n  /* Feedback that the drag has passed into \"swipe all the way through\" territory (close to\n     CONFIRM_THRESHOLD) — set by list-item.ts's onMove once past ~85% of that distance, cleared\n     on release/cancel/commit. Visual-only; the confirm itself fires from JS regardless of CSS. */\n  :host([data-confirming]) .actions-left,\n  :host([data-confirming]) .actions-right {\n    filter: saturate(1.4) brightness(0.94);\n  }\n}\n"],"mappings":""}

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

@@ -2,6 +2,11 @@
 export type ListItemRevealSide = 'left' | 'right';
 /** Events emitted by the list-item component */
 export type OreListItemEvents = {
+    /** Emitted when an actionable item is activated by pointer or keyboard. */
+    activate: {
+        item: HTMLElement;
+        value: null | string;
+    };
     /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */
     conceal: {
         item: HTMLElement;
@@ -32,6 +37,8 @@ export type OreListItemEvents = {
 };
 /** List-item component properties */
 export type OreListItemProps = {
+    /** Enable pointer and Enter/Space activation with button semantics. */
+    actionable?: boolean;
     /** Disable this item — blocks pointer interaction, swipe actions, and selection */
     disabled?: boolean;
     /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */
@@ -63,11 +70,13 @@ export type OreListItemProps = {
  *
  * @element ore-list-item
  *
+ * @attr {boolean} actionable - Enable pointer and Enter/Space activation with button semantics
  * @attr {boolean} disabled - Disable this item
  * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.
  * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events
  * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'
  *
+ * @fires activate - Actionable item is activated. detail: { item: HTMLElement, value: string | null }
  * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }
  * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }
  * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../src/content/list/list-item.ts"],"names":[],"mappings":"AAqBA,sEAAsE;AACtE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,qFAAqF;IACrF,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;IAC/B;;;OAGG;IACH,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACzD,gDAAgD;IAChD,QAAQ,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,0DAA0D;IAC1D,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACxD,iGAAiG;IACjG,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;CACrD,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../src/content/list/list-item.ts"],"names":[],"mappings":"AAqBA,sEAAsE;AACtE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,qFAAqF;IACrF,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;IAC/B;;;OAGG;IACH,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACzD,gDAAgD;IAChD,QAAQ,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,0DAA0D;IAC1D,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACxD,iGAAiG;IACjG,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;CACrD,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}

package/dist/content/stats/stats.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_bg:var(--stats-bg,var(--color-canvas));--_color:var(--stats-color,var(--color-contrast-900));--_border-color:var(--stats-border-color,var(--color-divider));--_radius:var(--stats-radius,var(--rounded-lg));--_padding:var(--stats-padding,var(--size-4));--_min-height:var(--stats-min-height,var(--size-32));--_value-size:var(--stats-value-size,var(--text-2xl));--_icon-size:var(--size-9);--_gap:var(--size-3);min-width:0;display:block}.stats{box-sizing:border-box;gap:var(--_gap);width:100%;min-width:0;min-height:var(--_min-height);padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);flex-direction:column;display:flex;position:relative;overflow:hidden}.header,.body,.footer{min-width:0;display:flex}.header{gap:var(--size-2);align-items:center}.icon{flex:0 0 var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size);color:var(--_theme-base,var(--color-primary));background:var(--stats-icon-bg,var(--_theme-backdrop,var(--color-contrast-100)));border-radius:var(--rounded-md);place-items:center;display:grid}.label,.description,.trend{text-overflow:ellipsis;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.label{font-weight:var(--font-semibold);color:var(--color-contrast-700)}.body{gap:var(--size-3);flex:1;justify-content:space-between;align-items:end}.value{text-overflow:ellipsis;min-width:0;font-size:var(--_value-size);font-variant-numeric:tabular-nums;line-height:var(--leading-tight);color:inherit;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}.visual{flex:0 45%;justify-content:end;align-items:end;min-width:50%;display:flex;position:absolute;bottom:0;right:0}.footer{gap:var(--size-1);align-items:center}.trend{font-weight:var(--font-semibold);color:var(--color-contrast-700);flex-shrink:0}.trend[data-direction=up]{color:var(--stats-trend-up,var(--color-success))}.trend[data-direction=down]{color:var(--stats-trend-down,var(--color-error))}.description{min-width:0;color:var(--color-contrast-700)}.loading{z-index:2;pointer-events:none;background:linear-gradient(100deg, color-mix(in oklch, var(--_bg) 88%, var(--color-contrast-200)) 20%, color-mix(in oklch, var(--_bg) 72%, var(--color-contrast-200)) 45%, color-mix(in oklch, var(--_bg) 88%, var(--color-contrast-200)) 70%);background-size:220% 100%;display:none;position:absolute;inset:0}[hidden]{display:none}}@layer refine.variants{:host([variant=plain]) .stats{background:var(--stats-bg,transparent);border:0;border-radius:0;min-height:0}:host([variant=solid]){--_bg:var(--stats-bg,var(--_theme-base));--_color:var(--stats-color,var(--_theme-contrast));--_border-color:var(--stats-border-color,var(--_theme-base))}:host([variant=solid]) .label,:host([variant=solid]) .description,:host([variant=solid]) .trend{color:color-mix(in oklch, var(--_color) 78%, transparent)}}@layer refine.overrides{:host([loading]) .loading{animation:var(--_motion-animation,stats-loading 1.4s linear infinite);display:block}:host([loading]) .header,:host([loading]) .body,:host([loading]) .footer{visibility:hidden}:host([disabled]){pointer-events:none;opacity:.55;filter:grayscale(.35)}}@keyframes stats-loading{0%{background-position:100% 0}to{background-position:-120% 0}}`;exports.default=e;
+//# sourceMappingURL=stats.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stats.css.cjs","names":[],"sources":["../../../src/content/stats/stats.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--stats-bg, var(--color-canvas));\n    --_color: var(--stats-color, var(--color-contrast-900));\n    --_border-color: var(--stats-border-color, var(--color-divider));\n    --_radius: var(--stats-radius, var(--rounded-lg));\n    --_padding: var(--stats-padding, var(--size-4));\n    --_min-height: var(--stats-min-height, var(--size-32));\n    --_value-size: var(--stats-value-size, var(--text-2xl));\n    --_icon-size: var(--size-9);\n    --_gap: var(--size-3);\n\n    display: block;\n    min-width: 0;\n  }\n\n  .stats {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    width: 100%;\n    min-width: 0;\n    min-height: var(--_min-height);\n    padding: var(--_padding);\n    overflow: hidden;\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .header,\n  .body,\n  .footer {\n    display: flex;\n    min-width: 0;\n  }\n\n  .header {\n    gap: var(--size-2);\n    align-items: center;\n  }\n\n  .icon {\n    display: grid;\n    flex: 0 0 var(--_icon-size);\n    place-items: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    color: var(--_theme-base, var(--color-primary));\n    background: var(--stats-icon-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    border-radius: var(--rounded-md);\n  }\n\n  .label,\n  .description,\n  .trend {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n  }\n\n  .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .body {\n    flex: 1;\n    gap: var(--size-3);\n    align-items: end;\n    justify-content: space-between;\n  }\n\n  .value {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_value-size);\n    font-variant-numeric: tabular-nums;\n    line-height: var(--leading-tight);\n    color: inherit;\n    letter-spacing: -0.03em;\n    white-space: nowrap;\n  }\n\n  .visual {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    flex: 0 1 45%;\n    align-items: end;\n    justify-content: end;\n    min-width: 50%;\n  }\n\n  .footer {\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .trend {\n    flex-shrink: 0;\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .trend[data-direction='up'] {\n    color: var(--stats-trend-up, var(--color-success));\n  }\n\n  .trend[data-direction='down'] {\n    color: var(--stats-trend-down, var(--color-error));\n  }\n\n  .description {\n    min-width: 0;\n    color: var(--color-contrast-700);\n  }\n\n  .loading {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    display: none;\n    pointer-events: none;\n    background: linear-gradient(\n      100deg,\n      color-mix(in oklch, var(--_bg) 88%, var(--color-contrast-200)) 20%,\n      color-mix(in oklch, var(--_bg) 72%, var(--color-contrast-200)) 45%,\n      color-mix(in oklch, var(--_bg) 88%, var(--color-contrast-200)) 70%\n    );\n    background-size: 220% 100%;\n  }\n\n  [hidden] {\n    display: none;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='plain']) .stats {\n    min-height: 0;\n    background: var(--stats-bg, transparent);\n    border: 0;\n    border-radius: 0;\n  }\n\n  :host([variant='solid']) {\n    --_bg: var(--stats-bg, var(--_theme-base));\n    --_color: var(--stats-color, var(--_theme-contrast));\n    --_border-color: var(--stats-border-color, var(--_theme-base));\n  }\n\n  :host([variant='solid']) .label,\n  :host([variant='solid']) .description,\n  :host([variant='solid']) .trend {\n    color: color-mix(in oklch, var(--_color) 78%, transparent);\n  }\n}\n\n@layer refine.overrides {\n  :host([loading]) .loading {\n    display: block;\n    animation: var(--_motion-animation, stats-loading 1.4s linear infinite);\n  }\n\n  :host([loading]) .header,\n  :host([loading]) .body,\n  :host([loading]) .footer {\n    visibility: hidden;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.55;\n    filter: grayscale(0.35);\n  }\n}\n\n@keyframes stats-loading {\n  from {\n    background-position: 100% 0;\n  }\n\n  to {\n    background-position: -120% 0;\n  }\n}\n"],"mappings":""}

package/dist/content/stats/stats.css.js

@@ -0,0 +1,6 @@
+//#region src/content/stats/stats.css?inline
+var e = "@layer refine.base{:host{--_bg:var(--stats-bg,var(--color-canvas));--_color:var(--stats-color,var(--color-contrast-900));--_border-color:var(--stats-border-color,var(--color-divider));--_radius:var(--stats-radius,var(--rounded-lg));--_padding:var(--stats-padding,var(--size-4));--_min-height:var(--stats-min-height,var(--size-32));--_value-size:var(--stats-value-size,var(--text-2xl));--_icon-size:var(--size-9);--_gap:var(--size-3);min-width:0;display:block}.stats{box-sizing:border-box;gap:var(--_gap);width:100%;min-width:0;min-height:var(--_min-height);padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);flex-direction:column;display:flex;position:relative;overflow:hidden}.header,.body,.footer{min-width:0;display:flex}.header{gap:var(--size-2);align-items:center}.icon{flex:0 0 var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size);color:var(--_theme-base,var(--color-primary));background:var(--stats-icon-bg,var(--_theme-backdrop,var(--color-contrast-100)));border-radius:var(--rounded-md);place-items:center;display:grid}.label,.description,.trend{text-overflow:ellipsis;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.label{font-weight:var(--font-semibold);color:var(--color-contrast-700)}.body{gap:var(--size-3);flex:1;justify-content:space-between;align-items:end}.value{text-overflow:ellipsis;min-width:0;font-size:var(--_value-size);font-variant-numeric:tabular-nums;line-height:var(--leading-tight);color:inherit;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}.visual{flex:0 45%;justify-content:end;align-items:end;min-width:50%;display:flex;position:absolute;bottom:0;right:0}.footer{gap:var(--size-1);align-items:center}.trend{font-weight:var(--font-semibold);color:var(--color-contrast-700);flex-shrink:0}.trend[data-direction=up]{color:var(--stats-trend-up,var(--color-success))}.trend[data-direction=down]{color:var(--stats-trend-down,var(--color-error))}.description{min-width:0;color:var(--color-contrast-700)}.loading{z-index:2;pointer-events:none;background:linear-gradient(100deg, color-mix(in oklch, var(--_bg) 88%, var(--color-contrast-200)) 20%, color-mix(in oklch, var(--_bg) 72%, var(--color-contrast-200)) 45%, color-mix(in oklch, var(--_bg) 88%, var(--color-contrast-200)) 70%);background-size:220% 100%;display:none;position:absolute;inset:0}[hidden]{display:none}}@layer refine.variants{:host([variant=plain]) .stats{background:var(--stats-bg,transparent);border:0;border-radius:0;min-height:0}:host([variant=solid]){--_bg:var(--stats-bg,var(--_theme-base));--_color:var(--stats-color,var(--_theme-contrast));--_border-color:var(--stats-border-color,var(--_theme-base))}:host([variant=solid]) .label,:host([variant=solid]) .description,:host([variant=solid]) .trend{color:color-mix(in oklch, var(--_color) 78%, transparent)}}@layer refine.overrides{:host([loading]) .loading{animation:var(--_motion-animation,stats-loading 1.4s linear infinite);display:block}:host([loading]) .header,:host([loading]) .body,:host([loading]) .footer{visibility:hidden}:host([disabled]){pointer-events:none;opacity:.55;filter:grayscale(.35)}}@keyframes stats-loading{0%{background-position:100% 0}to{background-position:-120% 0}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=stats.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stats.css.js","names":[],"sources":["../../../src/content/stats/stats.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--stats-bg, var(--color-canvas));\n    --_color: var(--stats-color, var(--color-contrast-900));\n    --_border-color: var(--stats-border-color, var(--color-divider));\n    --_radius: var(--stats-radius, var(--rounded-lg));\n    --_padding: var(--stats-padding, var(--size-4));\n    --_min-height: var(--stats-min-height, var(--size-32));\n    --_value-size: var(--stats-value-size, var(--text-2xl));\n    --_icon-size: var(--size-9);\n    --_gap: var(--size-3);\n\n    display: block;\n    min-width: 0;\n  }\n\n  .stats {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    width: 100%;\n    min-width: 0;\n    min-height: var(--_min-height);\n    padding: var(--_padding);\n    overflow: hidden;\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .header,\n  .body,\n  .footer {\n    display: flex;\n    min-width: 0;\n  }\n\n  .header {\n    gap: var(--size-2);\n    align-items: center;\n  }\n\n  .icon {\n    display: grid;\n    flex: 0 0 var(--_icon-size);\n    place-items: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    color: var(--_theme-base, var(--color-primary));\n    background: var(--stats-icon-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    border-radius: var(--rounded-md);\n  }\n\n  .label,\n  .description,\n  .trend {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n  }\n\n  .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .body {\n    flex: 1;\n    gap: var(--size-3);\n    align-items: end;\n    justify-content: space-between;\n  }\n\n  .value {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_value-size);\n    font-variant-numeric: tabular-nums;\n    line-height: var(--leading-tight);\n    color: inherit;\n    letter-spacing: -0.03em;\n    white-space: nowrap;\n  }\n\n  .visual {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    flex: 0 1 45%;\n    align-items: end;\n    justify-content: end;\n    min-width: 50%;\n  }\n\n  .footer {\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .trend {\n    flex-shrink: 0;\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .trend[data-direction='up'] {\n    color: var(--stats-trend-up, var(--color-success));\n  }\n\n  .trend[data-direction='down'] {\n    color: var(--stats-trend-down, var(--color-error));\n  }\n\n  .description {\n    min-width: 0;\n    color: var(--color-contrast-700);\n  }\n\n  .loading {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    display: none;\n    pointer-events: none;\n    background: linear-gradient(\n      100deg,\n      color-mix(in oklch, var(--_bg) 88%, var(--color-contrast-200)) 20%,\n      color-mix(in oklch, var(--_bg) 72%, var(--color-contrast-200)) 45%,\n      color-mix(in oklch, var(--_bg) 88%, var(--color-contrast-200)) 70%\n    );\n    background-size: 220% 100%;\n  }\n\n  [hidden] {\n    display: none;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='plain']) .stats {\n    min-height: 0;\n    background: var(--stats-bg, transparent);\n    border: 0;\n    border-radius: 0;\n  }\n\n  :host([variant='solid']) {\n    --_bg: var(--stats-bg, var(--_theme-base));\n    --_color: var(--stats-color, var(--_theme-contrast));\n    --_border-color: var(--stats-border-color, var(--_theme-base));\n  }\n\n  :host([variant='solid']) .label,\n  :host([variant='solid']) .description,\n  :host([variant='solid']) .trend {\n    color: color-mix(in oklch, var(--_color) 78%, transparent);\n  }\n}\n\n@layer refine.overrides {\n  :host([loading]) .loading {\n    display: block;\n    animation: var(--_motion-animation, stats-loading 1.4s linear infinite);\n  }\n\n  :host([loading]) .header,\n  :host([loading]) .body,\n  :host([loading]) .footer {\n    visibility: hidden;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.55;\n    filter: grayscale(0.35);\n  }\n}\n\n@keyframes stats-loading {\n  from {\n    background-position: 100% 0;\n  }\n\n  to {\n    background-position: -120% 0;\n  }\n}\n"],"mappings":""}

package/dist/content/stats/stats.d.ts

@@ -0,0 +1,72 @@
+import type { ComponentSize, RoundedSize, ThemeColor } from '../../types';
+export type StatsTrendDirection = 'down' | 'neutral' | 'up';
+export type StatsVariant = 'outlined' | 'plain' | 'solid';
+export type OreStatsProps = {
+    color?: ThemeColor;
+    description?: string;
+    disabled?: boolean;
+    label?: string;
+    loading?: boolean;
+    rounded?: RoundedSize;
+    size?: ComponentSize;
+    trend?: string;
+    'trend-direction'?: StatsTrendDirection;
+    value?: string;
+    variant?: StatsVariant;
+};
+/**
+ * A focused metric card for a label, primary value, supporting context, trend, icon, and optional visual.
+ *
+ * @element ore-stats
+ *
+ * @attr {string} label - Metric label
+ * @attr {string} value - Primary metric value
+ * @attr {string} description - Supporting context
+ * @attr {string} trend - Trend text
+ * @attr {string} trend-direction - Trend direction: 'up' | 'down' | 'neutral'
+ * @attr {string} variant - Visual variant: 'outlined' | 'plain' | 'solid'
+ * @attr {string} color - Semantic theme color
+ * @attr {string} size - Size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius size
+ * @attr {boolean} loading - Show loading state
+ * @attr {boolean} disabled - Show unavailable state
+ *
+ * @slot icon - Leading metric icon
+ * @slot label - Replaces label text
+ * @slot value - Replaces value text
+ * @slot visual - Compact chart, progress, or other metric visual
+ * @slot trend - Replaces trend text
+ * @slot description - Replaces supporting context
+ *
+ * @cssprop --stats-bg - Card background
+ * @cssprop --stats-color - Card foreground color
+ * @cssprop --stats-border-color - Card border color
+ * @cssprop --stats-radius - Card border radius
+ * @cssprop --stats-padding - Card padding
+ * @cssprop --stats-min-height - Minimum card height
+ * @cssprop --stats-value-size - Primary value font size
+ * @cssprop --stats-icon-bg - Icon surface background
+ * @cssprop --stats-trend-up - Positive trend color
+ * @cssprop --stats-trend-down - Negative trend color
+ *
+ * @part card - Card surface
+ * @part loading - Loading indicator
+ * @part header - Label and icon row
+ * @part icon - Icon container
+ * @part label - Label container
+ * @part body - Value and visual row
+ * @part value - Primary value container
+ * @part visual - Visual slot container
+ * @part footer - Trend and description row
+ * @part trend - Trend container
+ * @part description - Description container
+ *
+ * @example
+ * ```html
+ * <ore-stats label="Revenue" value="$42,800" trend="+12%" trend-direction="up">
+ *   <ore-icon slot="icon" name="chart-line"></ore-icon>
+ * </ore-stats>
+ * ```
+ */
+export declare const STATS_TAG: "ore-stats";
+//# sourceMappingURL=stats.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stats.d.ts","sourceRoot":"","sources":["../../../src/content/stats/stats.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

package/dist/core/announcer.cjs

@@ -1,2 +1,2 @@
-const e=require("../styles/mixins/accessibility.css.cjs");var t=new WeakMap,n=new WeakMap,r=(t,n)=>{let r=n.createElement(`div`);return r.setAttribute(`aria-live`,t),r.setAttribute(`aria-atomic`,`true`),r.setAttribute(`data-block-announcer`,t),r.style.cssText=e.SR_ONLY_INLINE_STYLE,n.body.appendChild(r),r},i=(e,n)=>{let i=t.get(n);return i?.[e]&&!n.body.contains(i[e])&&(i[e]=void 0),i?.[e]||(i||(i={},t.set(n,i)),i[e]=r(e,n)),i[e]??null},a=(e,t={})=>{if(typeof document>`u`)return;let r=i(t.politeness??`polite`,document);if(!r)return;r.textContent=``;let a=n.get(r);a!==void 0&&clearTimeout(a);let o=setTimeout(()=>{r.textContent=e,n.delete(r)},50);n.set(r,o)};exports.announce=a;
+const e=require("../styles/mixins/accessibility.css.cjs");var t=new WeakMap,n=new WeakMap,r=(t,n)=>{if(!n.body)return null;let r=n.createElement(`div`);return r.setAttribute(`aria-live`,t),r.setAttribute(`aria-atomic`,`true`),r.setAttribute(`data-block-announcer`,t),r.style.cssText=e.SR_ONLY_INLINE_STYLE,n.body.appendChild(r),r},i=(e,n)=>{let i=t.get(n);if(i?.[e]&&!n.body?.contains(i[e])&&(i[e]=void 0),!i?.[e]){let a=r(e,n);if(!a)return null;i||(i={},t.set(n,i)),i[e]=a}return i[e]??null},a=(e,t={})=>{let r=t.document??(typeof document<`u`?document:null);if(!r)return;let a=i(t.politeness??`polite`,r);if(!a)return;a.textContent=``;let o=n.get(a);o!==void 0&&clearTimeout(o);let s=setTimeout(()=>{a.textContent=e,n.delete(a)},50);n.set(a,s)};exports.announce=a;
 //# sourceMappingURL=announcer.cjs.map

package/dist/core/announcer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"announcer.cjs","names":[],"sources":["../../src/core/announcer.ts"],"sourcesContent":["// ── Live-Region Announcer ─────────────────────────────────────────────────────\n// Programmatic announcements to screen readers without requiring a visible\n// DOM element. Used for status messages, selection feedback, and count updates\n// that live in components where the visible element is hidden or absent.\n//\n// Two visually-hidden live regions are lazily created in `<body>` — one polite,\n// one assertive. The clear-then-set pattern forces AT to re-read even identical\n// consecutive messages.\n//\n// Usage:\n// ```ts\n// import { announce } from './announcer';\n// announce(`${selectedCount} items selected`);\n// announce('Error: field is required', { politeness: 'assertive' });\n// ```\n\nimport { SR_ONLY_INLINE_STYLE } from '../styles';\n\n// ── Visually-hidden style ─────────────────────────────────────────────────────\n// Shared with the CSS-side `.sr-only` mixin — see `src/styles/mixins/accessibility.css.ts`.\n\n// ── Per-document live regions (WeakMap for automatic GC + test isolation) ────\n\ntype DocumentRegions = { assertive?: HTMLElement; polite?: HTMLElement };\n\nconst _regions = new WeakMap<Document, DocumentRegions>();\nconst _timers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();\n\n/** Creates and mounts a visually-hidden live region with the given politeness. */\nconst createRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement => {\n  const el = doc.createElement('div');\n\n  el.setAttribute('aria-live', politeness);\n  el.setAttribute('aria-atomic', 'true');\n  el.setAttribute('data-block-announcer', politeness);\n  el.style.cssText = SR_ONLY_INLINE_STYLE;\n\n  doc.body.appendChild(el);\n\n  return el;\n};\n\n/**\n * Returns the live region for the requested politeness in the given document,\n * creating it on first access. Returns `null` outside a browser context.\n */\nconst getRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement | null => {\n  let regions = _regions.get(doc);\n\n  // Re-create if this specific region was removed from the DOM (e.g. by test teardown).\n  if (regions?.[politeness] && !doc.body.contains(regions[politeness])) {\n    regions[politeness] = undefined;\n  }\n\n  if (!regions?.[politeness]) {\n    if (!regions) {\n      regions = {};\n      _regions.set(doc, regions);\n    }\n\n    regions[politeness] = createRegion(politeness, doc);\n  }\n\n  return regions[politeness] ?? null;\n};\n\n// ── Public API ────────────────────────────────────────────────────────────────\n\nexport type AnnouncePoliteness = 'assertive' | 'polite';\n\nexport type AnnounceOptions = {\n  /**\n   * `'polite'` — queues the announcement; does not interrupt ongoing speech.\n   * `'assertive'` — interrupts immediately. Use sparingly; reserve for errors.\n   *\n   * Default: `'polite'`.\n   */\n  politeness?: AnnouncePoliteness;\n};\n\n/**\n * Announces a message to screen readers via a singleton visually-hidden\n * live region. Safe to call outside a component lifecycle (no cleanup needed).\n *\n * The clear-then-set pattern (50 ms delay) forces AT to re-read even when the\n * message text hasn't changed.\n *\n * @example\n * ```ts\n * announce('3 results found');\n * announce('Session expired', { politeness: 'assertive' });\n * ```\n */\nexport const announce = (message: string, options: AnnounceOptions = {}): void => {\n  if (typeof document === 'undefined') return;\n\n  const politeness = options.politeness ?? 'polite';\n  const region = getRegion(politeness, document);\n\n  if (!region) return;\n\n  // Clear immediately so AT registers a content change, then set after a short\n  // delay. The 50 ms window is the established minimum for most AT/browser combos.\n  region.textContent = '';\n\n  // Use a per-element timer so concurrent polite + assertive announcements don't\n  // clobber each other's pending writes.\n  const existing = _timers.get(region);\n\n  if (existing !== undefined) clearTimeout(existing);\n\n  const timer = setTimeout(() => {\n    region.textContent = message;\n    _timers.delete(region);\n  }, 50);\n\n  _timers.set(region, timer);\n};\n"],"mappings":"0DAyBA,IAAM,EAAW,IAAI,QACf,EAAU,IAAI,QAGd,GAAgB,EAAoC,IAA+B,CACvF,IAAM,EAAK,EAAI,cAAc,KAAK,EASlC,OAPA,EAAG,aAAa,YAAa,CAAU,EACvC,EAAG,aAAa,cAAe,MAAM,EACrC,EAAG,aAAa,uBAAwB,CAAU,EAClD,EAAG,MAAM,QAAU,EAAA,qBAEnB,EAAI,KAAK,YAAY,CAAE,EAEhB,CACT,EAMM,GAAa,EAAoC,IAAsC,CAC3F,IAAI,EAAU,EAAS,IAAI,CAAG,EAgB9B,OAbI,IAAU,IAAe,CAAC,EAAI,KAAK,SAAS,EAAQ,EAAW,IACjE,EAAQ,GAAc,IAAA,IAGnB,IAAU,KACR,IACH,EAAU,CAAC,EACX,EAAS,IAAI,EAAK,CAAO,GAG3B,EAAQ,GAAc,EAAa,EAAY,CAAG,GAG7C,EAAQ,IAAe,IAChC,EA6Ba,GAAY,EAAiB,EAA2B,CAAC,IAAY,CAChF,GAAI,OAAO,SAAa,IAAa,OAGrC,IAAM,EAAS,EADI,EAAQ,YAAc,SACJ,QAAQ,EAE7C,GAAI,CAAC,EAAQ,OAIb,EAAO,YAAc,GAIrB,IAAM,EAAW,EAAQ,IAAI,CAAM,EAE/B,IAAa,IAAA,IAAW,aAAa,CAAQ,EAEjD,IAAM,EAAQ,eAAiB,CAC7B,EAAO,YAAc,EACrB,EAAQ,OAAO,CAAM,CACvB,EAAG,EAAE,EAEL,EAAQ,IAAI,EAAQ,CAAK,CAC3B"}
+{"version":3,"file":"announcer.cjs","names":[],"sources":["../../src/core/announcer.ts"],"sourcesContent":["// ── Live-Region Announcer ─────────────────────────────────────────────────────\n// Programmatic announcements to screen readers without requiring a visible\n// DOM element. Used for status messages, selection feedback, and count updates\n// that live in components where the visible element is hidden or absent.\n//\n// Two visually-hidden live regions are lazily created in the target document's\n// `<body>` — one polite, one assertive. The clear-then-set pattern forces AT to\n// re-read even identical consecutive messages.\n//\n// Behavior is latest-value replacement (debounce), not queueing: rapid\n// consecutive calls to the same politeness cancel pending writes so only the\n// last message survives. JavaScript cannot know when assistive technology\n// finishes speaking, so a queue would be dishonest.\n//\n// Usage:\n// ```ts\n// import { announce } from './announcer';\n// announce(`${selectedCount} items selected`);\n// announce('Error: field is required', { politeness: 'assertive' });\n// announce('Saved', { document: getHost().ownerDocument });\n// ```\n\nimport { SR_ONLY_INLINE_STYLE } from '../styles';\n\n// ── Per-document live regions (WeakMap for automatic GC + test isolation) ────\n\ntype DocumentRegions = { assertive?: HTMLElement; polite?: HTMLElement };\n\nconst _regions = new WeakMap<Document, DocumentRegions>();\nconst _timers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();\n\n/** Creates and mounts a visually-hidden live region with the given politeness. */\nconst createRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement | null => {\n  if (!doc.body) return null;\n\n  const el = doc.createElement('div');\n\n  el.setAttribute('aria-live', politeness);\n  el.setAttribute('aria-atomic', 'true');\n  el.setAttribute('data-block-announcer', politeness);\n  el.style.cssText = SR_ONLY_INLINE_STYLE;\n\n  doc.body.appendChild(el);\n\n  return el;\n};\n\n/**\n * Returns the live region for the requested politeness in the given document,\n * creating it on first access. Returns `null` outside a browser context or\n * when the document has no `<body>`.\n */\nconst getRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement | null => {\n  let regions = _regions.get(doc);\n\n  // Re-create if this specific region was removed from the DOM (e.g. by test teardown).\n  if (regions?.[politeness] && !doc.body?.contains(regions[politeness])) {\n    regions[politeness] = undefined;\n  }\n\n  if (!regions?.[politeness]) {\n    const el = createRegion(politeness, doc);\n\n    if (!el) return null;\n\n    if (!regions) {\n      regions = {};\n      _regions.set(doc, regions);\n    }\n\n    regions[politeness] = el;\n  }\n\n  return regions[politeness] ?? null;\n};\n\n// ── Public API ────────────────────────────────────────────────────────────────\n\nexport type AnnouncePoliteness = 'assertive' | 'polite';\n\nexport type AnnounceOptions = {\n  /**\n   * The document whose `<body>` will host the visually-hidden live region.\n   * Defaults to the global `document`. Pass `getHost().ownerDocument` from\n   * inside a component that may live in an iframe to announce through the\n   * correct accessibility tree.\n   */\n  document?: Document;\n  /**\n   * `'polite'` — latest-value replacement; does not interrupt ongoing speech.\n   * `'assertive'` — interrupts immediately. Use sparingly; reserve for errors.\n   *\n   * Default: `'polite'`.\n   */\n  politeness?: AnnouncePoliteness;\n};\n\n/**\n * Announces a message to screen readers via a singleton visually-hidden\n * live region. Safe to call outside a component lifecycle (no cleanup needed).\n *\n * Uses latest-value replacement: rapid consecutive calls to the same politeness\n * cancel pending writes so only the last message is spoken. The clear-then-set\n * pattern (short delay) forces AT to re-read even when the message text hasn't\n * changed.\n *\n * @example\n * ```ts\n * announce('3 results found');\n * announce('Session expired', { politeness: 'assertive' });\n * announce('Saved', { document: getHost().ownerDocument });\n * ```\n */\nexport const announce = (message: string, options: AnnounceOptions = {}): void => {\n  const doc = options.document ?? (typeof document !== 'undefined' ? document : null);\n\n  if (!doc) return;\n\n  const politeness = options.politeness ?? 'polite';\n  const region = getRegion(politeness, doc);\n\n  if (!region) return;\n\n  // Clear immediately so AT registers a content change, then set after a short\n  // delay. This is a debounce window, not a guaranteed speech timing — AT speech\n  // timing varies across browsers and screen readers.\n  region.textContent = '';\n\n  // Use a per-element timer so concurrent polite + assertive announcements don't\n  // clobber each other's pending writes.\n  const existing = _timers.get(region);\n\n  if (existing !== undefined) clearTimeout(existing);\n\n  const timer = setTimeout(() => {\n    region.textContent = message;\n    _timers.delete(region);\n  }, 50);\n\n  _timers.set(region, timer);\n};\n"],"mappings":"0DA4BA,IAAM,EAAW,IAAI,QACf,EAAU,IAAI,QAGd,GAAgB,EAAoC,IAAsC,CAC9F,GAAI,CAAC,EAAI,KAAM,OAAO,KAEtB,IAAM,EAAK,EAAI,cAAc,KAAK,EASlC,OAPA,EAAG,aAAa,YAAa,CAAU,EACvC,EAAG,aAAa,cAAe,MAAM,EACrC,EAAG,aAAa,uBAAwB,CAAU,EAClD,EAAG,MAAM,QAAU,EAAA,qBAEnB,EAAI,KAAK,YAAY,CAAE,EAEhB,CACT,EAOM,GAAa,EAAoC,IAAsC,CAC3F,IAAI,EAAU,EAAS,IAAI,CAAG,EAO9B,GAJI,IAAU,IAAe,CAAC,EAAI,MAAM,SAAS,EAAQ,EAAW,IAClE,EAAQ,GAAc,IAAA,IAGpB,CAAC,IAAU,GAAa,CAC1B,IAAM,EAAK,EAAa,EAAY,CAAG,EAEvC,GAAI,CAAC,EAAI,OAAO,KAEX,IACH,EAAU,CAAC,EACX,EAAS,IAAI,EAAK,CAAO,GAG3B,EAAQ,GAAc,CACxB,CAEA,OAAO,EAAQ,IAAe,IAChC,EAuCa,GAAY,EAAiB,EAA2B,CAAC,IAAY,CAChF,IAAM,EAAM,EAAQ,WAAa,OAAO,SAAa,IAAc,SAAW,MAE9E,GAAI,CAAC,EAAK,OAGV,IAAM,EAAS,EADI,EAAQ,YAAc,SACJ,CAAG,EAExC,GAAI,CAAC,EAAQ,OAKb,EAAO,YAAc,GAIrB,IAAM,EAAW,EAAQ,IAAI,CAAM,EAE/B,IAAa,IAAA,IAAW,aAAa,CAAQ,EAEjD,IAAM,EAAQ,eAAiB,CAC7B,EAAO,YAAc,EACrB,EAAQ,OAAO,CAAM,CACvB,EAAG,EAAE,EAEL,EAAQ,IAAI,EAAQ,CAAK,CAC3B"}

package/dist/core/announcer.d.ts

@@ -1,7 +1,14 @@
 export type AnnouncePoliteness = 'assertive' | 'polite';
 export type AnnounceOptions = {
     /**
-     * `'polite'` — queues the announcement; does not interrupt ongoing speech.
+     * The document whose `<body>` will host the visually-hidden live region.
+     * Defaults to the global `document`. Pass `getHost().ownerDocument` from
+     * inside a component that may live in an iframe to announce through the
+     * correct accessibility tree.
+     */
+    document?: Document;
+    /**
+     * `'polite'` — latest-value replacement; does not interrupt ongoing speech.
      * `'assertive'` — interrupts immediately. Use sparingly; reserve for errors.
      *
      * Default: `'polite'`.
@@ -12,13 +19,16 @@ export type AnnounceOptions = {
  * Announces a message to screen readers via a singleton visually-hidden
  * live region. Safe to call outside a component lifecycle (no cleanup needed).
  *
- * The clear-then-set pattern (50 ms delay) forces AT to re-read even when the
- * message text hasn't changed.
+ * Uses latest-value replacement: rapid consecutive calls to the same politeness
+ * cancel pending writes so only the last message is spoken. The clear-then-set
+ * pattern (short delay) forces AT to re-read even when the message text hasn't
+ * changed.
  *
  * @example
  * ```ts
  * announce('3 results found');
  * announce('Session expired', { politeness: 'assertive' });
+ * announce('Saved', { document: getHost().ownerDocument });
  * ```
  */
 export declare const announce: (message: string, options?: AnnounceOptions) => void;

package/dist/core/announcer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"announcer.d.ts","sourceRoot":"","sources":["../../src/core/announcer.ts"],"names":[],"mappings":"AAoEA,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GAAI,SAAS,MAAM,EAAE,UAAS,eAAoB,KAAG,IAwBzE,CAAC"}
+{"version":3,"file":"announcer.d.ts","sourceRoot":"","sources":["../../src/core/announcer.ts"],"names":[],"mappings":"AA8EA,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,QAAQ,GAAI,SAAS,MAAM,EAAE,UAAS,eAAoB,KAAG,IA2BzE,CAAC"}

package/dist/core/announcer.js

@@ -1,22 +1,29 @@
 import { SR_ONLY_INLINE_STYLE as e } from "../styles/mixins/accessibility.css.js";
 //#region src/core/announcer.ts
 var t = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = (t, n) => {
+	if (!n.body) return null;
 	let r = n.createElement("div");
 	return r.setAttribute("aria-live", t), r.setAttribute("aria-atomic", "true"), r.setAttribute("data-block-announcer", t), r.style.cssText = e, n.body.appendChild(r), r;
 }, i = (e, n) => {
 	let i = t.get(n);
-	return i?.[e] && !n.body.contains(i[e]) && (i[e] = void 0), i?.[e] || (i || (i = {}, t.set(n, i)), i[e] = r(e, n)), i[e] ?? null;
+	if (i?.[e] && !n.body?.contains(i[e]) && (i[e] = void 0), !i?.[e]) {
+		let a = r(e, n);
+		if (!a) return null;
+		i || (i = {}, t.set(n, i)), i[e] = a;
+	}
+	return i[e] ?? null;
 }, a = (e, t = {}) => {
-	if (typeof document > "u") return;
-	let r = i(t.politeness ?? "polite", document);
+	let r = t.document ?? (typeof document < "u" ? document : null);
 	if (!r) return;
-	r.textContent = "";
-	let a = n.get(r);
-	a !== void 0 && clearTimeout(a);
-	let o = setTimeout(() => {
-		r.textContent = e, n.delete(r);
+	let a = i(t.politeness ?? "polite", r);
+	if (!a) return;
+	a.textContent = "";
+	let o = n.get(a);
+	o !== void 0 && clearTimeout(o);
+	let s = setTimeout(() => {
+		a.textContent = e, n.delete(a);
 	}, 50);
-	n.set(r, o);
+	n.set(a, s);
 };
 //#endregion
 export { a as announce };

package/dist/core/announcer.js.map

@@ -1 +1 @@
-{"version":3,"file":"announcer.js","names":[],"sources":["../../src/core/announcer.ts"],"sourcesContent":["// ── Live-Region Announcer ─────────────────────────────────────────────────────\n// Programmatic announcements to screen readers without requiring a visible\n// DOM element. Used for status messages, selection feedback, and count updates\n// that live in components where the visible element is hidden or absent.\n//\n// Two visually-hidden live regions are lazily created in `<body>` — one polite,\n// one assertive. The clear-then-set pattern forces AT to re-read even identical\n// consecutive messages.\n//\n// Usage:\n// ```ts\n// import { announce } from './announcer';\n// announce(`${selectedCount} items selected`);\n// announce('Error: field is required', { politeness: 'assertive' });\n// ```\n\nimport { SR_ONLY_INLINE_STYLE } from '../styles';\n\n// ── Visually-hidden style ─────────────────────────────────────────────────────\n// Shared with the CSS-side `.sr-only` mixin — see `src/styles/mixins/accessibility.css.ts`.\n\n// ── Per-document live regions (WeakMap for automatic GC + test isolation) ────\n\ntype DocumentRegions = { assertive?: HTMLElement; polite?: HTMLElement };\n\nconst _regions = new WeakMap<Document, DocumentRegions>();\nconst _timers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();\n\n/** Creates and mounts a visually-hidden live region with the given politeness. */\nconst createRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement => {\n  const el = doc.createElement('div');\n\n  el.setAttribute('aria-live', politeness);\n  el.setAttribute('aria-atomic', 'true');\n  el.setAttribute('data-block-announcer', politeness);\n  el.style.cssText = SR_ONLY_INLINE_STYLE;\n\n  doc.body.appendChild(el);\n\n  return el;\n};\n\n/**\n * Returns the live region for the requested politeness in the given document,\n * creating it on first access. Returns `null` outside a browser context.\n */\nconst getRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement | null => {\n  let regions = _regions.get(doc);\n\n  // Re-create if this specific region was removed from the DOM (e.g. by test teardown).\n  if (regions?.[politeness] && !doc.body.contains(regions[politeness])) {\n    regions[politeness] = undefined;\n  }\n\n  if (!regions?.[politeness]) {\n    if (!regions) {\n      regions = {};\n      _regions.set(doc, regions);\n    }\n\n    regions[politeness] = createRegion(politeness, doc);\n  }\n\n  return regions[politeness] ?? null;\n};\n\n// ── Public API ────────────────────────────────────────────────────────────────\n\nexport type AnnouncePoliteness = 'assertive' | 'polite';\n\nexport type AnnounceOptions = {\n  /**\n   * `'polite'` — queues the announcement; does not interrupt ongoing speech.\n   * `'assertive'` — interrupts immediately. Use sparingly; reserve for errors.\n   *\n   * Default: `'polite'`.\n   */\n  politeness?: AnnouncePoliteness;\n};\n\n/**\n * Announces a message to screen readers via a singleton visually-hidden\n * live region. Safe to call outside a component lifecycle (no cleanup needed).\n *\n * The clear-then-set pattern (50 ms delay) forces AT to re-read even when the\n * message text hasn't changed.\n *\n * @example\n * ```ts\n * announce('3 results found');\n * announce('Session expired', { politeness: 'assertive' });\n * ```\n */\nexport const announce = (message: string, options: AnnounceOptions = {}): void => {\n  if (typeof document === 'undefined') return;\n\n  const politeness = options.politeness ?? 'polite';\n  const region = getRegion(politeness, document);\n\n  if (!region) return;\n\n  // Clear immediately so AT registers a content change, then set after a short\n  // delay. The 50 ms window is the established minimum for most AT/browser combos.\n  region.textContent = '';\n\n  // Use a per-element timer so concurrent polite + assertive announcements don't\n  // clobber each other's pending writes.\n  const existing = _timers.get(region);\n\n  if (existing !== undefined) clearTimeout(existing);\n\n  const timer = setTimeout(() => {\n    region.textContent = message;\n    _timers.delete(region);\n  }, 50);\n\n  _timers.set(region, timer);\n};\n"],"mappings":";;AAyBA,IAAM,oBAAW,IAAI,QAAmC,GAClD,oBAAU,IAAI,QAAoD,GAGlE,KAAgB,GAAoC,MAA+B;CACvF,IAAM,IAAK,EAAI,cAAc,KAAK;CASlC,OAPA,EAAG,aAAa,aAAa,CAAU,GACvC,EAAG,aAAa,eAAe,MAAM,GACrC,EAAG,aAAa,wBAAwB,CAAU,GAClD,EAAG,MAAM,UAAU,GAEnB,EAAI,KAAK,YAAY,CAAE,GAEhB;AACT,GAMM,KAAa,GAAoC,MAAsC;CAC3F,IAAI,IAAU,EAAS,IAAI,CAAG;CAgB9B,OAbI,IAAU,MAAe,CAAC,EAAI,KAAK,SAAS,EAAQ,EAAW,MACjE,EAAQ,KAAc,KAAA,IAGnB,IAAU,OACR,MACH,IAAU,CAAC,GACX,EAAS,IAAI,GAAK,CAAO,IAG3B,EAAQ,KAAc,EAAa,GAAY,CAAG,IAG7C,EAAQ,MAAe;AAChC,GA6Ba,KAAY,GAAiB,IAA2B,CAAC,MAAY;CAChF,IAAI,OAAO,WAAa,KAAa;CAGrC,IAAM,IAAS,EADI,EAAQ,cAAc,UACJ,QAAQ;CAE7C,IAAI,CAAC,GAAQ;CAIb,EAAO,cAAc;CAIrB,IAAM,IAAW,EAAQ,IAAI,CAAM;CAEnC,AAAI,MAAa,KAAA,KAAW,aAAa,CAAQ;CAEjD,IAAM,IAAQ,iBAAiB;EAE7B,AADA,EAAO,cAAc,GACrB,EAAQ,OAAO,CAAM;CACvB,GAAG,EAAE;CAEL,EAAQ,IAAI,GAAQ,CAAK;AAC3B"}
+{"version":3,"file":"announcer.js","names":[],"sources":["../../src/core/announcer.ts"],"sourcesContent":["// ── Live-Region Announcer ─────────────────────────────────────────────────────\n// Programmatic announcements to screen readers without requiring a visible\n// DOM element. Used for status messages, selection feedback, and count updates\n// that live in components where the visible element is hidden or absent.\n//\n// Two visually-hidden live regions are lazily created in the target document's\n// `<body>` — one polite, one assertive. The clear-then-set pattern forces AT to\n// re-read even identical consecutive messages.\n//\n// Behavior is latest-value replacement (debounce), not queueing: rapid\n// consecutive calls to the same politeness cancel pending writes so only the\n// last message survives. JavaScript cannot know when assistive technology\n// finishes speaking, so a queue would be dishonest.\n//\n// Usage:\n// ```ts\n// import { announce } from './announcer';\n// announce(`${selectedCount} items selected`);\n// announce('Error: field is required', { politeness: 'assertive' });\n// announce('Saved', { document: getHost().ownerDocument });\n// ```\n\nimport { SR_ONLY_INLINE_STYLE } from '../styles';\n\n// ── Per-document live regions (WeakMap for automatic GC + test isolation) ────\n\ntype DocumentRegions = { assertive?: HTMLElement; polite?: HTMLElement };\n\nconst _regions = new WeakMap<Document, DocumentRegions>();\nconst _timers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();\n\n/** Creates and mounts a visually-hidden live region with the given politeness. */\nconst createRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement | null => {\n  if (!doc.body) return null;\n\n  const el = doc.createElement('div');\n\n  el.setAttribute('aria-live', politeness);\n  el.setAttribute('aria-atomic', 'true');\n  el.setAttribute('data-block-announcer', politeness);\n  el.style.cssText = SR_ONLY_INLINE_STYLE;\n\n  doc.body.appendChild(el);\n\n  return el;\n};\n\n/**\n * Returns the live region for the requested politeness in the given document,\n * creating it on first access. Returns `null` outside a browser context or\n * when the document has no `<body>`.\n */\nconst getRegion = (politeness: 'assertive' | 'polite', doc: Document): HTMLElement | null => {\n  let regions = _regions.get(doc);\n\n  // Re-create if this specific region was removed from the DOM (e.g. by test teardown).\n  if (regions?.[politeness] && !doc.body?.contains(regions[politeness])) {\n    regions[politeness] = undefined;\n  }\n\n  if (!regions?.[politeness]) {\n    const el = createRegion(politeness, doc);\n\n    if (!el) return null;\n\n    if (!regions) {\n      regions = {};\n      _regions.set(doc, regions);\n    }\n\n    regions[politeness] = el;\n  }\n\n  return regions[politeness] ?? null;\n};\n\n// ── Public API ────────────────────────────────────────────────────────────────\n\nexport type AnnouncePoliteness = 'assertive' | 'polite';\n\nexport type AnnounceOptions = {\n  /**\n   * The document whose `<body>` will host the visually-hidden live region.\n   * Defaults to the global `document`. Pass `getHost().ownerDocument` from\n   * inside a component that may live in an iframe to announce through the\n   * correct accessibility tree.\n   */\n  document?: Document;\n  /**\n   * `'polite'` — latest-value replacement; does not interrupt ongoing speech.\n   * `'assertive'` — interrupts immediately. Use sparingly; reserve for errors.\n   *\n   * Default: `'polite'`.\n   */\n  politeness?: AnnouncePoliteness;\n};\n\n/**\n * Announces a message to screen readers via a singleton visually-hidden\n * live region. Safe to call outside a component lifecycle (no cleanup needed).\n *\n * Uses latest-value replacement: rapid consecutive calls to the same politeness\n * cancel pending writes so only the last message is spoken. The clear-then-set\n * pattern (short delay) forces AT to re-read even when the message text hasn't\n * changed.\n *\n * @example\n * ```ts\n * announce('3 results found');\n * announce('Session expired', { politeness: 'assertive' });\n * announce('Saved', { document: getHost().ownerDocument });\n * ```\n */\nexport const announce = (message: string, options: AnnounceOptions = {}): void => {\n  const doc = options.document ?? (typeof document !== 'undefined' ? document : null);\n\n  if (!doc) return;\n\n  const politeness = options.politeness ?? 'polite';\n  const region = getRegion(politeness, doc);\n\n  if (!region) return;\n\n  // Clear immediately so AT registers a content change, then set after a short\n  // delay. This is a debounce window, not a guaranteed speech timing — AT speech\n  // timing varies across browsers and screen readers.\n  region.textContent = '';\n\n  // Use a per-element timer so concurrent polite + assertive announcements don't\n  // clobber each other's pending writes.\n  const existing = _timers.get(region);\n\n  if (existing !== undefined) clearTimeout(existing);\n\n  const timer = setTimeout(() => {\n    region.textContent = message;\n    _timers.delete(region);\n  }, 50);\n\n  _timers.set(region, timer);\n};\n"],"mappings":";;AA4BA,IAAM,oBAAW,IAAI,QAAmC,GAClD,oBAAU,IAAI,QAAoD,GAGlE,KAAgB,GAAoC,MAAsC;CAC9F,IAAI,CAAC,EAAI,MAAM,OAAO;CAEtB,IAAM,IAAK,EAAI,cAAc,KAAK;CASlC,OAPA,EAAG,aAAa,aAAa,CAAU,GACvC,EAAG,aAAa,eAAe,MAAM,GACrC,EAAG,aAAa,wBAAwB,CAAU,GAClD,EAAG,MAAM,UAAU,GAEnB,EAAI,KAAK,YAAY,CAAE,GAEhB;AACT,GAOM,KAAa,GAAoC,MAAsC;CAC3F,IAAI,IAAU,EAAS,IAAI,CAAG;CAO9B,IAJI,IAAU,MAAe,CAAC,EAAI,MAAM,SAAS,EAAQ,EAAW,MAClE,EAAQ,KAAc,KAAA,IAGpB,CAAC,IAAU,IAAa;EAC1B,IAAM,IAAK,EAAa,GAAY,CAAG;EAEvC,IAAI,CAAC,GAAI,OAAO;EAOhB,AALK,MACH,IAAU,CAAC,GACX,EAAS,IAAI,GAAK,CAAO,IAG3B,EAAQ,KAAc;CACxB;CAEA,OAAO,EAAQ,MAAe;AAChC,GAuCa,KAAY,GAAiB,IAA2B,CAAC,MAAY;CAChF,IAAM,IAAM,EAAQ,aAAa,OAAO,WAAa,MAAc,WAAW;CAE9E,IAAI,CAAC,GAAK;CAGV,IAAM,IAAS,EADI,EAAQ,cAAc,UACJ,CAAG;CAExC,IAAI,CAAC,GAAQ;CAKb,EAAO,cAAc;CAIrB,IAAM,IAAW,EAAQ,IAAI,CAAM;CAEnC,AAAI,MAAa,KAAA,KAAW,aAAa,CAAQ;CAEjD,IAAM,IAAQ,iBAAiB;EAE7B,AADA,EAAO,cAAc,GACrB,EAAQ,OAAO,CAAM;CACvB,GAAG,EAAE;CAEL,EAAQ,IAAI,GAAQ,CAAK;AAC3B"}

package/dist/core/auto-resize.cjs

@@ -1,2 +1,2 @@
-var e=(e={})=>{let t=null,n=()=>{!t||e.enabled?.value===!1||(t.style.height=`auto`,t.style.height=`${t.scrollHeight}px`)};return{recompute:n,wire:e=>(t=e,e.addEventListener(`input`,n),requestAnimationFrame(n),()=>{e.removeEventListener(`input`,n),t===e&&(t=null)})}};exports.createAutoResize=e;
+var e=(e={})=>{let t=null,n=()=>{t&&e.enabled?.value!==!1&&(t.style.height=`auto`,t.style.height=`${t.scrollHeight}px`)};return{recompute:n,wire:e=>(t=e,e.addEventListener(`input`,n),requestAnimationFrame(n),()=>{e.removeEventListener(`input`,n),t===e&&(t=null)})}};exports.createAutoResize=e;
 //# sourceMappingURL=auto-resize.cjs.map

package/dist/core/auto-resize.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"auto-resize.cjs","names":[],"sources":["../../src/core/auto-resize.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nexport type AutoResizeOptions = {\n  /** Gates growth; omit for an always-on composer field, or pass a signal for a toggleable `auto-resize` attribute. */\n  enabled?: Readable<boolean | undefined>;\n};\n\nexport type AutoResizeControl = {\n  /** Recomputes height from the wired element's current content. No-ops when `enabled` is false or nothing is wired. */\n  recompute: () => void;\n  /** Wire onto the raw `<textarea>` when it mounts. Returns a detach function to call on unmount. */\n  wire: (el: HTMLTextAreaElement) => () => void;\n};\n\n/**\n * Grows a `<textarea>`'s height to fit its content, shared by every component that offers\n * auto-resize (`ore-textarea`, `ore-message-composer`) instead of each reimplementing it.\n *\n * Owns only height — manual-resize cursor/direction is a per-component styling concern, not\n * shared behavior, so it stays local to whichever component renders a resize handle.\n *\n * @example\n * ```ts\n * const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n *\n * onElement(textareaRef, (el) => autoResize.wire(el));\n * // after a programmatic value change that doesn't fire a native `input` event:\n * autoResize.recompute();\n * ```\n */\nexport const createAutoResize = (options: AutoResizeOptions = {}): AutoResizeControl => {\n  let wiredEl: HTMLTextAreaElement | null = null;\n\n  const recompute = (): void => {\n    if (!wiredEl || options.enabled?.value === false) return;\n\n    wiredEl.style.height = 'auto';\n    wiredEl.style.height = `${wiredEl.scrollHeight}px`;\n  };\n\n  const wire = (el: HTMLTextAreaElement): (() => void) => {\n    wiredEl = el;\n    el.addEventListener('input', recompute);\n\n    // Deferred a frame: right after mount, the browser hasn't necessarily finished laying out\n    // the textarea yet, so a synchronous `scrollHeight` read here can be stale — often reading\n    // as 0 and collapsing the field until the next real `input` event happens to correct it.\n    // `ore-textarea` has always worked around this locally with its own extra `requestAnimationFrame`\n    // call; folding the deferral into `wire()` itself means every consumer gets it for free.\n    requestAnimationFrame(recompute);\n\n    return () => {\n      el.removeEventListener('input', recompute);\n\n      if (wiredEl === el) wiredEl = null;\n    };\n  };\n\n  return { recompute, wire };\n};\n"],"mappings":"AA8BA,IAAa,GAAoB,EAA6B,CAAC,IAAyB,CACtF,IAAI,EAAsC,KAEpC,MAAwB,CACxB,CAAC,GAAW,EAAQ,SAAS,QAAU,KAE3C,EAAQ,MAAM,OAAS,OACvB,EAAQ,MAAM,OAAS,GAAG,EAAQ,aAAa,IACjD,EAoBA,MAAO,CAAE,YAAW,KAlBN,IACZ,EAAU,EACV,EAAG,iBAAiB,QAAS,CAAS,EAOtC,sBAAsB,CAAS,MAElB,CACX,EAAG,oBAAoB,QAAS,CAAS,EAErC,IAAY,IAAI,EAAU,KAChC,EAGuB,CAC3B"}
+{"version":3,"file":"auto-resize.cjs","names":[],"sources":["../../src/core/auto-resize.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nexport type AutoResizeOptions = {\n  /** Gates growth; omit for an always-on composer field, or pass a signal for a toggleable `auto-resize` attribute. */\n  enabled?: Readable<boolean | undefined>;\n};\n\nexport type AutoResizeControl = {\n  /** Recomputes height from the wired element's current content. No-ops when `enabled` is false or nothing is wired. */\n  recompute: () => void;\n  /** Wire onto the raw `<textarea>` when it mounts. Returns a detach function to call on unmount. */\n  wire: (el: HTMLTextAreaElement) => () => void;\n};\n\n/**\n * Grows a `<textarea>`'s height to fit its content, shared by every component that offers\n * auto-resize (`ore-textarea`, `ore-message-composer`) instead of each reimplementing it.\n *\n * Owns only height — manual-resize cursor/direction is a per-component styling concern, not\n * shared behavior, so it stays local to whichever component renders a resize handle.\n *\n * @example\n * ```ts\n * const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n *\n * onElement(textareaRef, (el) => autoResize.wire(el));\n * // after a programmatic value change that doesn't fire a native `input` event:\n * autoResize.recompute();\n * ```\n */\nexport const createAutoResize = (options: AutoResizeOptions = {}): AutoResizeControl => {\n  let wiredEl: HTMLTextAreaElement | null = null;\n\n  const recompute = (): void => {\n    if (!wiredEl || options.enabled?.value === false) return;\n\n    wiredEl.style.height = 'auto';\n    wiredEl.style.height = `${wiredEl.scrollHeight}px`;\n  };\n\n  const wire = (el: HTMLTextAreaElement): (() => void) => {\n    wiredEl = el;\n    el.addEventListener('input', recompute);\n\n    // Deferred a frame: right after mount, the browser hasn't necessarily finished laying out\n    // the textarea yet, so a synchronous `scrollHeight` read here can be stale — often reading\n    // as 0 and collapsing the field until the next real `input` event happens to correct it.\n    // `ore-textarea` has always worked around this locally with its own extra `requestAnimationFrame`\n    // call; folding the deferral into `wire()` itself means every consumer gets it for free.\n    requestAnimationFrame(recompute);\n\n    return () => {\n      el.removeEventListener('input', recompute);\n\n      if (wiredEl === el) wiredEl = null;\n    };\n  };\n\n  return { recompute, wire };\n};\n"],"mappings":"AA8BA,IAAa,GAAoB,EAA6B,CAAC,IAAyB,CACtF,IAAI,EAAsC,KAEpC,MAAwB,CACvB,GAAW,EAAQ,SAAS,QAAU,KAE3C,EAAQ,MAAM,OAAS,OACvB,EAAQ,MAAM,OAAS,GAAG,EAAQ,aAAa,IACjD,EAoBA,MAAO,CAAE,YAAW,KAlBN,IACZ,EAAU,EACV,EAAG,iBAAiB,QAAS,CAAS,EAOtC,sBAAsB,CAAS,MAElB,CACX,EAAG,oBAAoB,QAAS,CAAS,EAErC,IAAY,IAAI,EAAU,KAChC,EAGuB,CAC3B"}

package/dist/core/auto-resize.js

@@ -1,7 +1,7 @@
 //#region src/core/auto-resize.ts
 var e = (e = {}) => {
 	let t = null, n = () => {
-		!t || e.enabled?.value === !1 || (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`);
+		t && e.enabled?.value !== !1 && (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`);
 	};
 	return {
 		recompute: n,

package/dist/core/auto-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"auto-resize.js","names":[],"sources":["../../src/core/auto-resize.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nexport type AutoResizeOptions = {\n  /** Gates growth; omit for an always-on composer field, or pass a signal for a toggleable `auto-resize` attribute. */\n  enabled?: Readable<boolean | undefined>;\n};\n\nexport type AutoResizeControl = {\n  /** Recomputes height from the wired element's current content. No-ops when `enabled` is false or nothing is wired. */\n  recompute: () => void;\n  /** Wire onto the raw `<textarea>` when it mounts. Returns a detach function to call on unmount. */\n  wire: (el: HTMLTextAreaElement) => () => void;\n};\n\n/**\n * Grows a `<textarea>`'s height to fit its content, shared by every component that offers\n * auto-resize (`ore-textarea`, `ore-message-composer`) instead of each reimplementing it.\n *\n * Owns only height — manual-resize cursor/direction is a per-component styling concern, not\n * shared behavior, so it stays local to whichever component renders a resize handle.\n *\n * @example\n * ```ts\n * const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n *\n * onElement(textareaRef, (el) => autoResize.wire(el));\n * // after a programmatic value change that doesn't fire a native `input` event:\n * autoResize.recompute();\n * ```\n */\nexport const createAutoResize = (options: AutoResizeOptions = {}): AutoResizeControl => {\n  let wiredEl: HTMLTextAreaElement | null = null;\n\n  const recompute = (): void => {\n    if (!wiredEl || options.enabled?.value === false) return;\n\n    wiredEl.style.height = 'auto';\n    wiredEl.style.height = `${wiredEl.scrollHeight}px`;\n  };\n\n  const wire = (el: HTMLTextAreaElement): (() => void) => {\n    wiredEl = el;\n    el.addEventListener('input', recompute);\n\n    // Deferred a frame: right after mount, the browser hasn't necessarily finished laying out\n    // the textarea yet, so a synchronous `scrollHeight` read here can be stale — often reading\n    // as 0 and collapsing the field until the next real `input` event happens to correct it.\n    // `ore-textarea` has always worked around this locally with its own extra `requestAnimationFrame`\n    // call; folding the deferral into `wire()` itself means every consumer gets it for free.\n    requestAnimationFrame(recompute);\n\n    return () => {\n      el.removeEventListener('input', recompute);\n\n      if (wiredEl === el) wiredEl = null;\n    };\n  };\n\n  return { recompute, wire };\n};\n"],"mappings":";AA8BA,IAAa,KAAoB,IAA6B,CAAC,MAAyB;CACtF,IAAI,IAAsC,MAEpC,UAAwB;EACxB,CAAC,KAAW,EAAQ,SAAS,UAAU,OAE3C,EAAQ,MAAM,SAAS,QACvB,EAAQ,MAAM,SAAS,GAAG,EAAQ,aAAa;CACjD;CAoBA,OAAO;EAAE;EAAW,OAlBN,OACZ,IAAU,GACV,EAAG,iBAAiB,SAAS,CAAS,GAOtC,sBAAsB,CAAS,SAElB;GAGX,AAFA,EAAG,oBAAoB,SAAS,CAAS,GAErC,MAAY,MAAI,IAAU;EAChC;CAGuB;AAC3B"}
+{"version":3,"file":"auto-resize.js","names":[],"sources":["../../src/core/auto-resize.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nexport type AutoResizeOptions = {\n  /** Gates growth; omit for an always-on composer field, or pass a signal for a toggleable `auto-resize` attribute. */\n  enabled?: Readable<boolean | undefined>;\n};\n\nexport type AutoResizeControl = {\n  /** Recomputes height from the wired element's current content. No-ops when `enabled` is false or nothing is wired. */\n  recompute: () => void;\n  /** Wire onto the raw `<textarea>` when it mounts. Returns a detach function to call on unmount. */\n  wire: (el: HTMLTextAreaElement) => () => void;\n};\n\n/**\n * Grows a `<textarea>`'s height to fit its content, shared by every component that offers\n * auto-resize (`ore-textarea`, `ore-message-composer`) instead of each reimplementing it.\n *\n * Owns only height — manual-resize cursor/direction is a per-component styling concern, not\n * shared behavior, so it stays local to whichever component renders a resize handle.\n *\n * @example\n * ```ts\n * const autoResize = createAutoResize({ enabled: props['auto-resize'] });\n *\n * onElement(textareaRef, (el) => autoResize.wire(el));\n * // after a programmatic value change that doesn't fire a native `input` event:\n * autoResize.recompute();\n * ```\n */\nexport const createAutoResize = (options: AutoResizeOptions = {}): AutoResizeControl => {\n  let wiredEl: HTMLTextAreaElement | null = null;\n\n  const recompute = (): void => {\n    if (!wiredEl || options.enabled?.value === false) return;\n\n    wiredEl.style.height = 'auto';\n    wiredEl.style.height = `${wiredEl.scrollHeight}px`;\n  };\n\n  const wire = (el: HTMLTextAreaElement): (() => void) => {\n    wiredEl = el;\n    el.addEventListener('input', recompute);\n\n    // Deferred a frame: right after mount, the browser hasn't necessarily finished laying out\n    // the textarea yet, so a synchronous `scrollHeight` read here can be stale — often reading\n    // as 0 and collapsing the field until the next real `input` event happens to correct it.\n    // `ore-textarea` has always worked around this locally with its own extra `requestAnimationFrame`\n    // call; folding the deferral into `wire()` itself means every consumer gets it for free.\n    requestAnimationFrame(recompute);\n\n    return () => {\n      el.removeEventListener('input', recompute);\n\n      if (wiredEl === el) wiredEl = null;\n    };\n  };\n\n  return { recompute, wire };\n};\n"],"mappings":";AA8BA,IAAa,KAAoB,IAA6B,CAAC,MAAyB;CACtF,IAAI,IAAsC,MAEpC,UAAwB;EACxB,AAAC,KAAW,EAAQ,SAAS,UAAU,OAE3C,EAAQ,MAAM,SAAS,QACvB,EAAQ,MAAM,SAAS,GAAG,EAAQ,aAAa;CACjD;CAoBA,OAAO;EAAE;EAAW,OAlBN,OACZ,IAAU,GACV,EAAG,iBAAiB,SAAS,CAAS,GAOtC,sBAAsB,CAAS,SAElB;GAGX,AAFA,EAAG,oBAAoB,SAAS,CAAS,GAErC,MAAY,MAAI,IAAU;EAChC;CAGuB;AAC3B"}