@vielzeug/refine 1.7.0 → 2.0.0

package/dist/content/marquee/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/content/marquee/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC"}

package/dist/content/marquee/marquee.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_bg:var(--color-canvas);--_radius:var(--rounded-xl);background:var(--_bg);border-radius:var(--_radius);width:100%;min-height:240px;display:block;position:relative;overflow:hidden}.track{gap:var(--marquee-gap,var(--size-4));width:max-content;animation:marquee-scroll var(--_marquee-duration,20s) linear infinite;will-change:transform;flex-direction:row;align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.track:not(: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)){left:0}.track: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)){right:0}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(: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)){right:var(--size-3)}:host>.controls: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)){left:var(--size-3)}.nav-btn{pointer-events:auto}:host([direction=right]) .track{animation-direction:reverse}:host([pause-on-hover]:hover) .track{animation-play-state:paused}::slotted(*){flex:none;height:100%;position:relative}::slotted([data-marquee-clone]){pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translateX(var(--_marquee-translate,-50%))}}}@media (prefers-reduced-motion:reduce){.track{animation:none}}`;exports.default=e;
+//# sourceMappingURL=marquee.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.css.cjs","names":[],"sources":["../../../src/content/marquee/marquee.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--color-canvas);\n    --_radius: var(--rounded-xl);\n\n    position: relative;\n    display: block;\n    width: 100%;\n    min-height: 240px;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .track {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--marquee-gap, var(--size-4));\n    align-items: stretch;\n    width: max-content;\n    animation: marquee-scroll var(--_marquee-duration, 20s) linear infinite;\n    will-change: transform;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--size-0-5);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  :host > .controls {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    padding: var(--size-1-5) var(--size-2);\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n  }\n\n  .nav-btn {\n    pointer-events: auto;\n  }\n\n  :host([direction='right']) .track {\n    animation-direction: reverse;\n  }\n\n  :host([pause-on-hover]:hover) .track {\n    animation-play-state: paused;\n  }\n\n  ::slotted(*) {\n    position: relative;\n    flex: 0 0 auto;\n    height: 100%;\n  }\n\n  ::slotted([data-marquee-clone]) {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  @keyframes marquee-scroll {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(var(--_marquee-translate, -50%));\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/content/marquee/marquee.css.js

@@ -0,0 +1,6 @@
+//#region src/content/marquee/marquee.css?inline
+var e = "@layer refine.base{:host{--_bg:var(--color-canvas);--_radius:var(--rounded-xl);background:var(--_bg);border-radius:var(--_radius);width:100%;min-height:240px;display:block;position:relative;overflow:hidden}.track{gap:var(--marquee-gap,var(--size-4));width:max-content;animation:marquee-scroll var(--_marquee-duration,20s) linear infinite;will-change:transform;flex-direction:row;align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.track:not(: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)){left:0}.track: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)){right:0}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(: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)){right:var(--size-3)}:host>.controls: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)){left:var(--size-3)}.nav-btn{pointer-events:auto}:host([direction=right]) .track{animation-direction:reverse}:host([pause-on-hover]:hover) .track{animation-play-state:paused}::slotted(*){flex:none;height:100%;position:relative}::slotted([data-marquee-clone]){pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translateX(var(--_marquee-translate,-50%))}}}@media (prefers-reduced-motion:reduce){.track{animation:none}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=marquee.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.css.js","names":[],"sources":["../../../src/content/marquee/marquee.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--color-canvas);\n    --_radius: var(--rounded-xl);\n\n    position: relative;\n    display: block;\n    width: 100%;\n    min-height: 240px;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .track {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--marquee-gap, var(--size-4));\n    align-items: stretch;\n    width: max-content;\n    animation: marquee-scroll var(--_marquee-duration, 20s) linear infinite;\n    will-change: transform;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--size-0-5);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  :host > .controls {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    padding: var(--size-1-5) var(--size-2);\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n  }\n\n  .nav-btn {\n    pointer-events: auto;\n  }\n\n  :host([direction='right']) .track {\n    animation-direction: reverse;\n  }\n\n  :host([pause-on-hover]:hover) .track {\n    animation-play-state: paused;\n  }\n\n  ::slotted(*) {\n    position: relative;\n    flex: 0 0 auto;\n    height: 100%;\n  }\n\n  ::slotted([data-marquee-clone]) {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  @keyframes marquee-scroll {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(var(--_marquee-translate, -50%));\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/content/marquee/marquee.d.ts

@@ -0,0 +1,44 @@
+import type { ThemeColor } from '../../types';
+import '../icon/icon';
+import '../../inputs/button/button';
+export type MarqueeDirection = 'left' | 'right';
+export type OreMarqueeProps = {
+    /** Theme color for the navigation controls. */
+    color?: ThemeColor;
+    /** Scroll direction. Defaults to `'left'`. */
+    direction?: MarqueeDirection;
+    /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */
+    duration?: number;
+    /** Pause the ticker while it is hovered. Defaults to `false`. */
+    'pause-on-hover'?: boolean;
+    /** Show previous/next navigation controls. Defaults to `true`. */
+    'show-controls'?: boolean;
+};
+/**
+ * A CSS-driven, continuously scrolling ticker.
+ *
+ * Direct child elements are duplicated internally for a seamless loop. Cloned
+ * content is inert and hidden from assistive technology, so author interactive
+ * content only in the original children.
+ *
+ * @element ore-marquee
+ *
+ * @attr {string} color - Theme color for the navigation controls.
+ * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)
+ * @attr {string} direction - 'left' (default) | 'right'
+ * @attr {boolean} pause-on-hover - Pause while hovered (default: false)
+ * @attr {boolean} show-controls - Show previous/next controls (default: true)
+ *
+ * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))
+ *
+ * @part track - The animated ticker track.
+ * @example
+ * ```html
+ * <ore-marquee duration="24" pause-on-hover>
+ *   <span>Free shipping</span>
+ *   <span>New arrivals</span>
+ * </ore-marquee>
+ * ```
+ */
+export declare const MARQUEE_TAG: "ore-marquee";
+//# sourceMappingURL=marquee.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../src/content/marquee/marquee.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,cAAc,CAAC;AACtB,OAAO,4BAA4B,CAAC;AAGpC,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kEAAkE;IAClE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC"}

package/dist/content/stepper/_is-step-navigable.cjs

@@ -0,0 +1,2 @@
+function e(e){return!(!e.stepperClickable||e.disabled||e.linear&&e.stepperCurrentIndex>=0&&e.index>e.stepperCurrentIndex)}exports.isStepNavigable=e;
+//# sourceMappingURL=_is-step-navigable.cjs.map

package/dist/content/stepper/_is-step-navigable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_is-step-navigable.cjs","names":[],"sources":["../../../src/content/stepper/_is-step-navigable.ts"],"sourcesContent":["/**\n * Pure navigability rule shared by `ore-stepper` (building its own roving-tabindex\n * candidate list) and `ore-step` (reflecting its own `navigable` attribute for CSS/\n * testing). Kept in one place instead of duplicated inline so the two derivations\n * can't drift out of sync.\n */\nexport function isStepNavigable(options: {\n  disabled: boolean;\n  index: number;\n  linear: boolean;\n  stepperClickable: boolean;\n  stepperCurrentIndex: number;\n}): boolean {\n  if (!options.stepperClickable || options.disabled) return false;\n\n  if (options.linear && options.stepperCurrentIndex >= 0 && options.index > options.stepperCurrentIndex) return false;\n\n  return true;\n}\n"],"mappings":"AAMA,SAAgB,EAAgB,EAMpB,CAKV,MAFA,EAFI,CAAC,EAAQ,kBAAoB,EAAQ,UAErC,EAAQ,QAAU,EAAQ,qBAAuB,GAAK,EAAQ,MAAQ,EAAQ,oBAGpF"}

package/dist/content/stepper/_is-step-navigable.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Pure navigability rule shared by `ore-stepper` (building its own roving-tabindex
+ * candidate list) and `ore-step` (reflecting its own `navigable` attribute for CSS/
+ * testing). Kept in one place instead of duplicated inline so the two derivations
+ * can't drift out of sync.
+ */
+export declare function isStepNavigable(options: {
+    disabled: boolean;
+    index: number;
+    linear: boolean;
+    stepperClickable: boolean;
+    stepperCurrentIndex: number;
+}): boolean;
+//# sourceMappingURL=_is-step-navigable.d.ts.map

package/dist/content/stepper/_is-step-navigable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_is-step-navigable.d.ts","sourceRoot":"","sources":["../../../src/content/stepper/_is-step-navigable.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;CAC7B,GAAG,OAAO,CAMV"}

package/dist/content/stepper/_is-step-navigable.js

@@ -0,0 +1,8 @@
+//#region src/content/stepper/_is-step-navigable.ts
+function e(e) {
+	return !(!e.stepperClickable || e.disabled || e.linear && e.stepperCurrentIndex >= 0 && e.index > e.stepperCurrentIndex);
+}
+//#endregion
+export { e as isStepNavigable };
+
+//# sourceMappingURL=_is-step-navigable.js.map

package/dist/content/stepper/_is-step-navigable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_is-step-navigable.js","names":[],"sources":["../../../src/content/stepper/_is-step-navigable.ts"],"sourcesContent":["/**\n * Pure navigability rule shared by `ore-stepper` (building its own roving-tabindex\n * candidate list) and `ore-step` (reflecting its own `navigable` attribute for CSS/\n * testing). Kept in one place instead of duplicated inline so the two derivations\n * can't drift out of sync.\n */\nexport function isStepNavigable(options: {\n  disabled: boolean;\n  index: number;\n  linear: boolean;\n  stepperClickable: boolean;\n  stepperCurrentIndex: number;\n}): boolean {\n  if (!options.stepperClickable || options.disabled) return false;\n\n  if (options.linear && options.stepperCurrentIndex >= 0 && options.index > options.stepperCurrentIndex) return false;\n\n  return true;\n}\n"],"mappings":";AAMA,SAAgB,EAAgB,GAMpB;CAKV,OAFA,EAFI,CAAC,EAAQ,oBAAoB,EAAQ,YAErC,EAAQ,UAAU,EAAQ,uBAAuB,KAAK,EAAQ,QAAQ,EAAQ;AAGpF"}

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

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;display:flex}.label{gap:var(--size-1);min-width:0;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}`;exports.default=e;
+//# sourceMappingURL=step.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.css.cjs","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\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    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    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

@@ -0,0 +1,6 @@
+//#region src/content/stepper/step.css?inline
+var e = "@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;display:flex}.label{gap:var(--size-1);min-width:0;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=step.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.css.js","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\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    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    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

@@ -0,0 +1,63 @@
+import type { ComponentSize, ThemeColor } from '../../types';
+import '../icon/icon';
+export type OreStepProps = {
+    /**
+     * Theme color. Inherited from the parent `ore-stepper` when nested inside one (overrides
+     * 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. */
+    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.
+     */
+    optional?: boolean;
+    /** Orientation. Inherited from the parent `ore-stepper` when nested inside one. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Component size. Inherited from the parent `ore-stepper` when nested inside one. */
+    size?: ComponentSize;
+    /** Unique identifier, matches `ore-stepper`'s `value` attribute. */
+    value: string;
+};
+/**
+ * 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,
+ * read-only attributes on this element, not settable props.
+ *
+ * @element ore-step
+ *
+ * @attr {string} value - Unique identifier, matches the parent ore-stepper's `value` attribute
+ * @attr {boolean} disabled - Prevents navigation to this step
+ * @attr {boolean} error - Marks the step as failed/invalid
+ * @attr {boolean} optional - Renders an "(optional)" hint next to the label
+ * @attr {boolean} current - Read-only. Derived from position relative to the parent ore-stepper's `value`.
+ * @attr {boolean} completed - Read-only. Derived from position relative to the parent ore-stepper's `value`.
+ * @attr {boolean} navigable - Read-only. Derived from the parent ore-stepper's `clickable`/`linear`/`disabled`.
+ * @attr {number} index - Read-only. This step's 1-based position among its siblings.
+ * @attr {number} total - Read-only. Total sibling step count.
+ * @attr {string} color - Inherited from ore-stepper: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Inherited from ore-stepper: 'sm' | 'md' | 'lg'
+ * @attr {string} orientation - Inherited from ore-stepper: 'horizontal' | 'vertical'
+ *
+ * @slot - Step label
+ * @slot description - Optional supporting text shown below the label
+ * @slot icon - Custom icon replacing the step number/check/error indicator
+ *
+ * @part control - Clickable (or static) root element for the step
+ * @part indicator - Circular indicator holding the number/icon
+ * @part content - Wrapper around the label and description
+ * @part label - Step label element
+ * @part description - Step description element
+ * @part connector - Connector line segments (leading and trailing halves) either side of this step's indicator
+ *
+ * @example
+ * ```html
+ * <ore-step value="details">Account details</ore-step>
+ * <ore-step value="review" disabled>Review</ore-step>
+ * ```
+ */
+export declare const STEP_TAG: "ore-step";
+//# sourceMappingURL=step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/content/stepper/step.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,cAAc,CAAC;AAOtB,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"}

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

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host,nav{width:100%;display:block}.steps{align-items:flex-start;gap:0;width:100%;margin:0;padding:0;list-style:none;display:flex}.stepper-message{margin-top:var(--size-3);display:block}}@layer refine.orientation{:host([orientation=vertical]) .steps{flex-direction:column;align-items:stretch}}`;exports.default=e;
+//# sourceMappingURL=stepper.css.cjs.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,6 @@
+//#region src/content/stepper/stepper.css?inline
+var e = "@layer refine.base{:host,nav{width:100%;display:block}.steps{align-items:flex-start;gap:0;width:100%;margin:0;padding:0;list-style:none;display:flex}.stepper-message{margin-top:var(--size-3);display:block}}@layer refine.orientation{:host([orientation=vertical]) .steps{flex-direction:column;align-items:stretch}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=stepper.css.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,88 @@
+import { type Readable } from '@vielzeug/ripple';
+import type { ComponentSize, ThemeColor } from '../../types';
+/** Context provided by ore-stepper to its ore-step children. */
+export type StepperContext = {
+    clickable: Readable<boolean>;
+    color: Readable<ThemeColor | undefined>;
+    currentValue: Readable<string | undefined>;
+    linear: Readable<boolean>;
+    orientation: Readable<'horizontal' | 'vertical'>;
+    size: Readable<ComponentSize | undefined>;
+    /** Ordered `value`s of every sibling `ore-step`, used to derive index/total/completed. */
+    stepValues: Readable<string[]>;
+};
+/** Injection key for the stepper context. */
+export declare const STEPPER_CTX: import("@vielzeug/ore").InjectionKey<StepperContext>;
+export type OreStepperEvents = {
+    change: {
+        value: string;
+    };
+};
+export type OreStepperProps = {
+    /** When true, steps are clickable/keyboard-focusable for navigation. Default: display-only progress. */
+    clickable?: boolean;
+    /** Theme color for the current/completed step indicators */
+    color?: ThemeColor;
+    /** 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
+     * current one cannot be clicked or focused, even when `clickable` is set.
+     */
+    linear?: boolean;
+    /** Layout orientation — 'horizontal' (default, desktop) or 'vertical' (compact/mobile-friendly) */
+    orientation?: 'horizontal' | 'vertical';
+    /** Component size */
+    size?: ComponentSize;
+    /** The `value` of the currently active `ore-step` */
+    value?: string;
+};
+/**
+ * Displays progress through a sequence of numbered steps. Manages step selection and provides
+ * shared state (current value, clickability, theming) to its `ore-step` children via context.
+ * Can be purely informational (progress display) or interactive navigation.
+ *
+ * @element ore-stepper
+ * @element ore-step - Child element for each step (auto-discovered)
+ *
+ * @attr {string} value - The value of the currently active step
+ * @attr {boolean} clickable - Allow clicking/focusing steps to navigate
+ * @attr {boolean} linear - Restrict navigation to completed + current steps only
+ * @attr {boolean} disabled - Disables the whole stepper
+ * @attr {string} orientation - 'horizontal' (default) | 'vertical'
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Size: 'sm' | 'md' | 'lg'
+ * @attr {string} label - Accessible nav landmark label (default: 'Progress')
+ *
+ * @fires change - Emitted when the active step changes via click/keyboard. detail: { value: string }
+ *
+ * @slot - `ore-step` elements
+ *
+ * @cssprop --stepper-connector-color - Color of the connector line between steps
+ * @cssprop --stepper-connector-size - Thickness of the connector line
+ * @cssprop --stepper-gap - Gap between steps
+ *
+ * @part nav - Navigation landmark element
+ * @part list - Ordered list container holding the slotted steps
+ *
+ * @example
+ * ```html
+ * <!-- Display-only progress -->
+ * <ore-stepper value="shipping" color="primary">
+ *   <ore-step value="cart">Cart</ore-step>
+ *   <ore-step value="shipping">Shipping</ore-step>
+ *   <ore-step value="payment">Payment</ore-step>
+ * </ore-stepper>
+ *
+ * <!-- Clickable navigation, mobile-friendly vertical layout -->
+ * <ore-stepper value="shipping" clickable linear orientation="vertical">
+ *   <ore-step value="cart">Cart</ore-step>
+ *   <ore-step value="shipping">Shipping</ore-step>
+ *   <ore-step value="payment" disabled>Payment</ore-step>
+ * </ore-stepper>
+ * ```
+ */
+export declare const STEPPER_TAG: "ore-stepper";
+//# sourceMappingURL=stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/content/stepper/stepper.ts"],"names":[],"mappings":"AAaA,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAkB7D,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"}

package/dist/copy-command.cjs

@@ -1,9 +1,15 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./content/copy-command/copy-command.css.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=`ore-copy-command`;(0,n.define)(i,{props:{rounded:n.prop.string(`md`),size:n.prop.string(`md`),value:n.prop.string(``),variant:n.prop.string(`flat`)},setup(e){let t=(0,n.useEmit)(),i=(0,n.useSlots)(),a=(0,r.signal)(!1),o=(0,r.signal)(!1),s=null;(0,n.onCleanup)(()=>{s!==null&&clearTimeout(s)});let c=async()=>{let n=e.value.value??``;if(n){s!==null&&clearTimeout(s);try{await navigator.clipboard.writeText(n),a.value=!0,o.value=!1,t(`copy`,{value:n})}catch{a.value=!1,o.value=!0}s=setTimeout(()=>{a.value=!1,o.value=!1,s=null},2e3)}},l=(0,r.computed)(()=>i.has(`suffix`).value);return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./content/copy-command/copy-command.css.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=`ore-copy-command`;(0,n.define)(i,{props:{rounded:n.prop.string(`md`),size:n.prop.string(`md`),value:n.prop.string(``),variant:n.prop.string(`flat`)},setup(e){let t=(0,n.useEmit)(),i=(0,n.useSlots)(),a=(0,r.signal)(!1),o=(0,r.signal)(!1),s=null;(0,n.onCleanup)(()=>{s!==null&&clearTimeout(s)});let c=async()=>{let n=e.value.value??``;if(n){s!==null&&clearTimeout(s);try{await navigator.clipboard.writeText(n),a.value=!0,o.value=!1,t(`copy`,{value:n})}catch{a.value=!1,o.value=!0}s=setTimeout(()=>{a.value=!1,o.value=!1,s=null},2e3)}},l=(0,r.computed)(()=>i.has(`suffix`).value),u=(0,r.computed)(()=>a.value?`Copied!`:o.value?`Copy failed — press to try again`:`Copy: ${e.value.value??``}`);return n.html`
       <div class="wrapper" part="wrapper">
-        <button class="command" part="command" type="button" :aria-label="${(0,r.computed)(()=>a.value?`Copied!`:o.value?`Copy failed — press to try again`:`Copy: ${e.value.value??``}`)}" @click=${c}>
+        <button class="command" part="command" type="button" aria-label="${u}" @click=${c}>
           <code class="command-text" part="command-text">${e.value}</code>
           <span class="copy-icon" part="copy-icon" aria-hidden="true">
-            ${()=>a.value?n.html`<ore-icon name="check" size="14" class="icon-copied" aria-hidden="true"></ore-icon>`:o.value?n.html`<ore-icon name="circle-alert" size="14" class="icon-failed" aria-hidden="true"></ore-icon>`:n.html`<ore-icon name="copy" size="14" aria-hidden="true"></ore-icon>`}
+            ${()=>a.value?n.html`
+                  <ore-icon name="check" size="14" class="icon-copied" aria-hidden="true"></ore-icon>
+                `:o.value?n.html`
+                  <ore-icon name="circle-alert" size="14" class="icon-failed" aria-hidden="true"></ore-icon>
+                `:n.html`
+                <ore-icon name="copy" size="14" aria-hidden="true"></ore-icon>
+              `}
           </span>
         </button>
         <div class="suffix" part="suffix" ?hidden="${()=>!l.value}">

package/dist/copy-command.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"copy-command.cjs","names":[],"sources":["../src/content/copy-command/copy-command.ts"],"sourcesContent":["import { define, html, prop, onCleanup, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport { srOnlyMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './copy-command.css?inline';\n\n/** Copy command component properties */\nexport type OreCopyCommandProps = {\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /** The command string to display and copy to clipboard */\n  value?: string;\n  /** Visual style variant */\n  variant?: 'flat' | 'bordered' | 'ghost';\n};\n\n/** Copy command component events */\nexport type OreCopyCommandEvents = {\n  /** Emitted when the command is successfully copied to the clipboard */\n  copy: { value: string };\n};\n\n/**\n * A styled, copy-to-clipboard command display component.\n * Shows a command string in a monospace code block with a copy button.\n * Clicking the component copies the value to the clipboard, shows a transient\n * check-mark confirmation, and emits a `copy` event.\n *\n * @element ore-copy-command\n *\n * @attr {string} value - The command string to display and copy\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual style: 'flat' | 'bordered' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires copy - Emitted on successful clipboard write. detail: { value: string }\n *\n * @slot suffix - Optional controls appended after the copy button (e.g. a cycle button)\n *\n * @cssprop --copy-command-bg - Background color of the command block\n * @cssprop --copy-command-color - Text color of the command string\n * @cssprop --copy-command-border-color - Border color\n * @cssprop --copy-command-radius - Border radius (overrides the `rounded` attribute)\n * @cssprop --copy-command-padding - Inner padding of the command button\n * @cssprop --copy-command-font-size - Font size of the command string\n * @cssprop --copy-command-icon-color - Color of the copy/check icon\n * @cssprop --copy-command-hover-bg - Background on hover\n *\n * @part wrapper - Outer flex container\n * @part command - The copy button element\n * @part command-text - The `<code>` element displaying the command string\n * @part copy-icon - The icon wrapper span\n * @part suffix - Suffix slot container\n *\n * @example\n * ```html\n * <ore-copy-command value=\"npm install @vielzeug/ripple\"></ore-copy-command>\n *\n * <ore-copy-command value=\"npx -y @vielzeug/codex\" size=\"sm\" variant=\"bordered\"></ore-copy-command>\n *\n * <!-- With a suffix slot (e.g. a cycle button) -->\n * <ore-copy-command value=\"npm install @vielzeug/ripple\">\n *   <button slot=\"suffix\" type=\"button\" aria-label=\"Next package\">›</button>\n * </ore-copy-command>\n * ```\n */\nexport const COPY_COMMAND_TAG = 'ore-copy-command' as const;\n\ndefine<OreCopyCommandProps>(COPY_COMMAND_TAG, {\n  props: {\n    rounded: prop.string<RoundedSize>('md'),\n    size: prop.string<ComponentSize>('md'),\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'bordered' | 'ghost'>('flat'),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreCopyCommandEvents>();\n    const slots = useSlots();\n\n    const copied = signal(false);\n    const copyFailed = signal(false);\n    let resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n    onCleanup(() => {\n      if (resetTimer !== null) clearTimeout(resetTimer);\n    });\n\n    const handleCopy = async () => {\n      const text = props.value.value ?? '';\n\n      if (!text) return;\n\n      if (resetTimer !== null) clearTimeout(resetTimer);\n\n      try {\n        await navigator.clipboard.writeText(text);\n        copied.value = true;\n        copyFailed.value = false;\n        emit('copy', { value: text });\n      } catch {\n        // Clipboard access denied or unavailable (e.g. insecure context) — surface it instead of failing silently\n        copied.value = false;\n        copyFailed.value = true;\n      }\n\n      resetTimer = setTimeout(() => {\n        copied.value = false;\n        copyFailed.value = false;\n        resetTimer = null;\n      }, 2000);\n    };\n\n    const hasSuffix = computed(() => slots.has('suffix').value);\n    const btnLabel = computed(() => {\n      if (copied.value) return 'Copied!';\n\n      if (copyFailed.value) return 'Copy failed — press to try again';\n\n      return `Copy: ${props.value.value ?? ''}`;\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\">\n        <button class=\"command\" part=\"command\" type=\"button\" :aria-label=\"${btnLabel}\" @click=${handleCopy}>\n          <code class=\"command-text\" part=\"command-text\">${props.value}</code>\n          <span class=\"copy-icon\" part=\"copy-icon\" aria-hidden=\"true\">\n            ${() => {\n              if (copied.value)\n                return html`<ore-icon name=\"check\" size=\"14\" class=\"icon-copied\" aria-hidden=\"true\"></ore-icon>`;\n\n              if (copyFailed.value)\n                return html`<ore-icon name=\"circle-alert\" size=\"14\" class=\"icon-failed\" aria-hidden=\"true\"></ore-icon>`;\n\n              return html`<ore-icon name=\"copy\" size=\"14\" aria-hidden=\"true\"></ore-icon>`;\n            }}\n          </span>\n        </button>\n        <div class=\"suffix\" part=\"suffix\" ?hidden=\"${() => !hasSuffix.value}\">\n          <slot name=\"suffix\"></slot>\n        </div>\n      </div>\n      <div role=\"status\" class=\"sr-only\">\n        ${() => {\n          if (copied.value) return 'Copied to clipboard.';\n\n          if (copyFailed.value) return 'Copy failed. Select the command text and copy it manually.';\n\n          return '';\n        }}\n      </div>\n    `;\n  },\n\n  styles: [srOnlyMixin, componentStyles],\n});\n"],"mappings":"kPAuEA,IAAa,EAAmB,gCAEJ,EAAkB,CAC5C,MAAO,CACL,QAAS,EAAA,KAAK,OAAoB,IAAI,EACtC,KAAM,EAAA,KAAK,OAAsB,IAAI,EACrC,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAsC,MAAM,CAC5D,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAqC,EACrC,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,GAAA,EAAA,EAAA,OAAA,CAAgB,EAAK,EACrB,GAAA,EAAA,EAAA,OAAA,CAAoB,EAAK,EAC3B,EAAmD,MAEvD,EAAA,EAAA,UAAA,KAAgB,CACV,IAAe,MAAM,aAAa,CAAU,CAClD,CAAC,EAED,IAAM,EAAa,SAAY,CAC7B,IAAM,EAAO,EAAM,MAAM,OAAS,GAE7B,KAEL,CAAI,IAAe,MAAM,aAAa,CAAU,EAEhD,GAAI,CACF,MAAM,UAAU,UAAU,UAAU,CAAI,EACxC,EAAO,MAAQ,GACf,EAAW,MAAQ,GACnB,EAAK,OAAQ,CAAE,MAAO,CAAK,CAAC,CAC9B,MAAQ,CAEN,EAAO,MAAQ,GACf,EAAW,MAAQ,EACrB,CAEA,EAAa,eAAiB,CAC5B,EAAO,MAAQ,GACf,EAAW,MAAQ,GACnB,EAAa,IACf,EAAG,GAAI,CAjByC,CAkBlD,EAEM,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,IAAI,QAAQ,CAAC,CAAC,KAAK,EAS1D,MAAO,GAAA,IAAI;;+FAPL,EAAO,MAAc,UAErB,EAAW,MAAc,mCAEtB,SAAS,EAAM,MAAM,OAAS,IAKiC,EAAS,WAAW,EAAW;2DAChD,EAAM,MAAM;;kBAGrD,EAAO,MACF,EAAA,IAAI,sFAET,EAAW,MACN,EAAA,IAAI,6FAEN,EAAA,IAAI,iEACX;;;yDAG6C,CAAC,EAAU,MAAM;;;;;cAM9D,EAAO,MAAc,uBAErB,EAAW,MAAc,6DAEtB,GACP;;KAGR,EAEA,OAAQ,CAAC,EAAA,YAAa,EAAA,OAAe,CACvC,CAAC"}
+{"version":3,"file":"copy-command.cjs","names":[],"sources":["../src/content/copy-command/copy-command.ts"],"sourcesContent":["import { define, html, prop, onCleanup, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport { srOnlyMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './copy-command.css?inline';\n\n/** Copy command component properties */\nexport type OreCopyCommandProps = {\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /** The command string to display and copy to clipboard */\n  value?: string;\n  /** Visual style variant */\n  variant?: 'flat' | 'bordered' | 'ghost';\n};\n\n/** Copy command component events */\nexport type OreCopyCommandEvents = {\n  /** Emitted when the command is successfully copied to the clipboard */\n  copy: { value: string };\n};\n\n/**\n * A styled, copy-to-clipboard command display component.\n * Shows a command string in a monospace code block with a copy button.\n * Clicking the component copies the value to the clipboard, shows a transient\n * check-mark confirmation, and emits a `copy` event.\n *\n * @element ore-copy-command\n *\n * @attr {string} value - The command string to display and copy\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual style: 'flat' | 'bordered' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires copy - Emitted on successful clipboard write. detail: { value: string }\n *\n * @slot suffix - Optional controls appended after the copy button (e.g. a cycle button)\n *\n * @cssprop --copy-command-bg - Background color of the command block\n * @cssprop --copy-command-color - Text color of the command string\n * @cssprop --copy-command-border-color - Border color\n * @cssprop --copy-command-radius - Border radius (overrides the `rounded` attribute)\n * @cssprop --copy-command-padding - Inner padding of the command button\n * @cssprop --copy-command-font-size - Font size of the command string\n * @cssprop --copy-command-icon-color - Color of the copy/check icon\n * @cssprop --copy-command-hover-bg - Background on hover\n *\n * @part wrapper - Outer flex container\n * @part command - The copy button element\n * @part command-text - The `<code>` element displaying the command string\n * @part copy-icon - The icon wrapper span\n * @part suffix - Suffix slot container\n *\n * @example\n * ```html\n * <ore-copy-command value=\"npm install @vielzeug/ripple\"></ore-copy-command>\n *\n * <ore-copy-command value=\"npx -y @vielzeug/codex\" size=\"sm\" variant=\"bordered\"></ore-copy-command>\n *\n * <!-- With a suffix slot (e.g. a cycle button) -->\n * <ore-copy-command value=\"npm install @vielzeug/ripple\">\n *   <button slot=\"suffix\" type=\"button\" aria-label=\"Next package\">›</button>\n * </ore-copy-command>\n * ```\n */\nexport const COPY_COMMAND_TAG = 'ore-copy-command' as const;\n\ndefine<OreCopyCommandProps>(COPY_COMMAND_TAG, {\n  props: {\n    rounded: prop.string<RoundedSize>('md'),\n    size: prop.string<ComponentSize>('md'),\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'bordered' | 'ghost'>('flat'),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreCopyCommandEvents>();\n    const slots = useSlots();\n\n    const copied = signal(false);\n    const copyFailed = signal(false);\n    let resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n    onCleanup(() => {\n      if (resetTimer !== null) clearTimeout(resetTimer);\n    });\n\n    const handleCopy = async () => {\n      const text = props.value.value ?? '';\n\n      if (!text) return;\n\n      if (resetTimer !== null) clearTimeout(resetTimer);\n\n      try {\n        await navigator.clipboard.writeText(text);\n        copied.value = true;\n        copyFailed.value = false;\n        emit('copy', { value: text });\n      } catch {\n        // Clipboard access denied or unavailable (e.g. insecure context) — surface it instead of failing silently\n        copied.value = false;\n        copyFailed.value = true;\n      }\n\n      resetTimer = setTimeout(() => {\n        copied.value = false;\n        copyFailed.value = false;\n        resetTimer = null;\n      }, 2000);\n    };\n\n    const hasSuffix = computed(() => slots.has('suffix').value);\n    const btnLabel = computed(() => {\n      if (copied.value) return 'Copied!';\n\n      if (copyFailed.value) return 'Copy failed — press to try again';\n\n      return `Copy: ${props.value.value ?? ''}`;\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\">\n        <button class=\"command\" part=\"command\" type=\"button\" aria-label=\"${btnLabel}\" @click=${handleCopy}>\n          <code class=\"command-text\" part=\"command-text\">${props.value}</code>\n          <span class=\"copy-icon\" part=\"copy-icon\" aria-hidden=\"true\">\n            ${() => {\n              if (copied.value)\n                return html`\n                  <ore-icon name=\"check\" size=\"14\" class=\"icon-copied\" aria-hidden=\"true\"></ore-icon>\n                `;\n\n              if (copyFailed.value)\n                return html`\n                  <ore-icon name=\"circle-alert\" size=\"14\" class=\"icon-failed\" aria-hidden=\"true\"></ore-icon>\n                `;\n\n              return html`\n                <ore-icon name=\"copy\" size=\"14\" aria-hidden=\"true\"></ore-icon>\n              `;\n            }}\n          </span>\n        </button>\n        <div class=\"suffix\" part=\"suffix\" ?hidden=\"${() => !hasSuffix.value}\">\n          <slot name=\"suffix\"></slot>\n        </div>\n      </div>\n      <div role=\"status\" class=\"sr-only\">\n        ${() => {\n          if (copied.value) return 'Copied to clipboard.';\n\n          if (copyFailed.value) return 'Copy failed. Select the command text and copy it manually.';\n\n          return '';\n        }}\n      </div>\n    `;\n  },\n\n  styles: [srOnlyMixin, componentStyles],\n});\n"],"mappings":"kPAuEA,IAAa,EAAmB,oBAEhC,EAAA,EAAA,OAAA,CAA4B,EAAkB,CAC5C,MAAO,CACL,QAAS,EAAA,KAAK,OAAoB,IAAI,EACtC,KAAM,EAAA,KAAK,OAAsB,IAAI,EACrC,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAsC,MAAM,CAC5D,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAO,EAAA,QAAA,CAA8B,EACrC,GAAA,EAAQ,EAAA,SAAA,CAAS,EAEjB,GAAA,EAAS,EAAA,OAAA,CAAO,EAAK,EACrB,GAAA,EAAa,EAAA,OAAA,CAAO,EAAK,EAC3B,EAAmD,MAEvD,EAAA,EAAA,UAAA,KAAgB,CACV,IAAe,MAAM,aAAa,CAAU,CAClD,CAAC,EAED,IAAM,EAAa,SAAY,CAC7B,IAAM,EAAO,EAAM,MAAM,OAAS,GAE7B,KAEL,CAAI,IAAe,MAAM,aAAa,CAAU,EAEhD,GAAI,CACF,MAAM,UAAU,UAAU,UAAU,CAAI,EACxC,EAAO,MAAQ,GACf,EAAW,MAAQ,GACnB,EAAK,OAAQ,CAAE,MAAO,CAAK,CAAC,CAC9B,MAAQ,CAEN,EAAO,MAAQ,GACf,EAAW,MAAQ,EACrB,CAEA,EAAa,eAAiB,CAC5B,EAAO,MAAQ,GACf,EAAW,MAAQ,GACnB,EAAa,IACf,EAAG,GAAI,CAjByC,CAkBlD,EAEM,GAAA,EAAY,EAAA,SAAA,KAAe,EAAM,IAAI,QAAQ,CAAC,CAAC,KAAK,EACpD,GAAA,EAAW,EAAA,SAAA,KACX,EAAO,MAAc,UAErB,EAAW,MAAc,mCAEtB,SAAS,EAAM,MAAM,OAAS,IACtC,EAED,MAAO,GAAA,IAAI;;2EAE4D,EAAS,WAAW,EAAW;2DAC/C,EAAM,MAAM;;kBAGrD,EAAO,MACF,EAAA,IAAI;;kBAIT,EAAW,MACN,EAAA,IAAI;;kBAIN,EAAA,IAAI;;gBAGX;;;yDAG6C,CAAC,EAAU,MAAM;;;;;cAM9D,EAAO,MAAc,uBAErB,EAAW,MAAc,6DAEtB,GACP;;KAGR,EAEA,OAAQ,CAAC,EAAA,YAAa,EAAA,OAAe,CACvC,CAAC"}

package/dist/copy-command.js

@@ -29,13 +29,19 @@ n(u, {
 					a.value = !1, u.value = !1, d = null;
 				}, 2e3);
 			}
-		}, p = c(() => n.has("suffix").value);
+		}, p = c(() => n.has("suffix").value), m = c(() => a.value ? "Copied!" : u.value ? "Copy failed — press to try again" : `Copy: ${e.value.value ?? ""}`);
 		return r`
       <div class="wrapper" part="wrapper">
-        <button class="command" part="command" type="button" :aria-label="${c(() => a.value ? "Copied!" : u.value ? "Copy failed — press to try again" : `Copy: ${e.value.value ?? ""}`)}" @click=${f}>
+        <button class="command" part="command" type="button" aria-label="${m}" @click=${f}>
           <code class="command-text" part="command-text">${e.value}</code>
           <span class="copy-icon" part="copy-icon" aria-hidden="true">
-            ${() => a.value ? r`<ore-icon name="check" size="14" class="icon-copied" aria-hidden="true"></ore-icon>` : u.value ? r`<ore-icon name="circle-alert" size="14" class="icon-failed" aria-hidden="true"></ore-icon>` : r`<ore-icon name="copy" size="14" aria-hidden="true"></ore-icon>`}
+            ${() => a.value ? r`
+                  <ore-icon name="check" size="14" class="icon-copied" aria-hidden="true"></ore-icon>
+                ` : u.value ? r`
+                  <ore-icon name="circle-alert" size="14" class="icon-failed" aria-hidden="true"></ore-icon>
+                ` : r`
+                <ore-icon name="copy" size="14" aria-hidden="true"></ore-icon>
+              `}
           </span>
         </button>
         <div class="suffix" part="suffix" ?hidden="${() => !p.value}">

package/dist/copy-command.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-command.js","names":[],"sources":["../src/content/copy-command/copy-command.ts"],"sourcesContent":["import { define, html, prop, onCleanup, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport { srOnlyMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './copy-command.css?inline';\n\n/** Copy command component properties */\nexport type OreCopyCommandProps = {\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /** The command string to display and copy to clipboard */\n  value?: string;\n  /** Visual style variant */\n  variant?: 'flat' | 'bordered' | 'ghost';\n};\n\n/** Copy command component events */\nexport type OreCopyCommandEvents = {\n  /** Emitted when the command is successfully copied to the clipboard */\n  copy: { value: string };\n};\n\n/**\n * A styled, copy-to-clipboard command display component.\n * Shows a command string in a monospace code block with a copy button.\n * Clicking the component copies the value to the clipboard, shows a transient\n * check-mark confirmation, and emits a `copy` event.\n *\n * @element ore-copy-command\n *\n * @attr {string} value - The command string to display and copy\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual style: 'flat' | 'bordered' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires copy - Emitted on successful clipboard write. detail: { value: string }\n *\n * @slot suffix - Optional controls appended after the copy button (e.g. a cycle button)\n *\n * @cssprop --copy-command-bg - Background color of the command block\n * @cssprop --copy-command-color - Text color of the command string\n * @cssprop --copy-command-border-color - Border color\n * @cssprop --copy-command-radius - Border radius (overrides the `rounded` attribute)\n * @cssprop --copy-command-padding - Inner padding of the command button\n * @cssprop --copy-command-font-size - Font size of the command string\n * @cssprop --copy-command-icon-color - Color of the copy/check icon\n * @cssprop --copy-command-hover-bg - Background on hover\n *\n * @part wrapper - Outer flex container\n * @part command - The copy button element\n * @part command-text - The `<code>` element displaying the command string\n * @part copy-icon - The icon wrapper span\n * @part suffix - Suffix slot container\n *\n * @example\n * ```html\n * <ore-copy-command value=\"npm install @vielzeug/ripple\"></ore-copy-command>\n *\n * <ore-copy-command value=\"npx -y @vielzeug/codex\" size=\"sm\" variant=\"bordered\"></ore-copy-command>\n *\n * <!-- With a suffix slot (e.g. a cycle button) -->\n * <ore-copy-command value=\"npm install @vielzeug/ripple\">\n *   <button slot=\"suffix\" type=\"button\" aria-label=\"Next package\">›</button>\n * </ore-copy-command>\n * ```\n */\nexport const COPY_COMMAND_TAG = 'ore-copy-command' as const;\n\ndefine<OreCopyCommandProps>(COPY_COMMAND_TAG, {\n  props: {\n    rounded: prop.string<RoundedSize>('md'),\n    size: prop.string<ComponentSize>('md'),\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'bordered' | 'ghost'>('flat'),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreCopyCommandEvents>();\n    const slots = useSlots();\n\n    const copied = signal(false);\n    const copyFailed = signal(false);\n    let resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n    onCleanup(() => {\n      if (resetTimer !== null) clearTimeout(resetTimer);\n    });\n\n    const handleCopy = async () => {\n      const text = props.value.value ?? '';\n\n      if (!text) return;\n\n      if (resetTimer !== null) clearTimeout(resetTimer);\n\n      try {\n        await navigator.clipboard.writeText(text);\n        copied.value = true;\n        copyFailed.value = false;\n        emit('copy', { value: text });\n      } catch {\n        // Clipboard access denied or unavailable (e.g. insecure context) — surface it instead of failing silently\n        copied.value = false;\n        copyFailed.value = true;\n      }\n\n      resetTimer = setTimeout(() => {\n        copied.value = false;\n        copyFailed.value = false;\n        resetTimer = null;\n      }, 2000);\n    };\n\n    const hasSuffix = computed(() => slots.has('suffix').value);\n    const btnLabel = computed(() => {\n      if (copied.value) return 'Copied!';\n\n      if (copyFailed.value) return 'Copy failed — press to try again';\n\n      return `Copy: ${props.value.value ?? ''}`;\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\">\n        <button class=\"command\" part=\"command\" type=\"button\" :aria-label=\"${btnLabel}\" @click=${handleCopy}>\n          <code class=\"command-text\" part=\"command-text\">${props.value}</code>\n          <span class=\"copy-icon\" part=\"copy-icon\" aria-hidden=\"true\">\n            ${() => {\n              if (copied.value)\n                return html`<ore-icon name=\"check\" size=\"14\" class=\"icon-copied\" aria-hidden=\"true\"></ore-icon>`;\n\n              if (copyFailed.value)\n                return html`<ore-icon name=\"circle-alert\" size=\"14\" class=\"icon-failed\" aria-hidden=\"true\"></ore-icon>`;\n\n              return html`<ore-icon name=\"copy\" size=\"14\" aria-hidden=\"true\"></ore-icon>`;\n            }}\n          </span>\n        </button>\n        <div class=\"suffix\" part=\"suffix\" ?hidden=\"${() => !hasSuffix.value}\">\n          <slot name=\"suffix\"></slot>\n        </div>\n      </div>\n      <div role=\"status\" class=\"sr-only\">\n        ${() => {\n          if (copied.value) return 'Copied to clipboard.';\n\n          if (copyFailed.value) return 'Copy failed. Select the command text and copy it manually.';\n\n          return '';\n        }}\n      </div>\n    `;\n  },\n\n  styles: [srOnlyMixin, componentStyles],\n});\n"],"mappings":";;;;;AAuEA,IAAa,IAAmB;AAEhC,EAA4B,GAAkB;CAC5C,OAAO;EACL,SAAS,EAAK,OAAoB,IAAI;EACtC,MAAM,EAAK,OAAsB,IAAI;EACrC,OAAO,EAAK,OAAO,EAAE;EACrB,SAAS,EAAK,OAAsC,MAAM;CAC5D;CAEA,MAAM,GAAO;EACX,IAAM,IAAO,EAA8B,GACrC,IAAQ,EAAS,GAEjB,IAAS,EAAO,EAAK,GACrB,IAAa,EAAO,EAAK,GAC3B,IAAmD;EAEvD,QAAgB;GACd,AAAI,MAAe,QAAM,aAAa,CAAU;EAClD,CAAC;EAED,IAAM,IAAa,YAAY;GAC7B,IAAM,IAAO,EAAM,MAAM,SAAS;GAE7B,OAEL;IAAI,MAAe,QAAM,aAAa,CAAU;IAEhD,IAAI;KAIF,AAHA,MAAM,UAAU,UAAU,UAAU,CAAI,GACxC,EAAO,QAAQ,IACf,EAAW,QAAQ,IACnB,EAAK,QAAQ,EAAE,OAAO,EAAK,CAAC;IAC9B,QAAQ;KAGN,AADA,EAAO,QAAQ,IACf,EAAW,QAAQ;IACrB;IAEA,IAAa,iBAAiB;KAG5B,AAFA,EAAO,QAAQ,IACf,EAAW,QAAQ,IACnB,IAAa;IACf,GAAG,GAAI;GAjByC;EAkBlD,GAEM,IAAY,QAAe,EAAM,IAAI,QAAQ,CAAC,CAAC,KAAK;EAS1D,OAAO,CAAI;;4EARM,QACX,EAAO,QAAc,YAErB,EAAW,QAAc,qCAEtB,SAAS,EAAM,MAAM,SAAS,IAKiC,EAAS,WAAW,EAAW;2DAChD,EAAM,MAAM;;oBAGrD,EAAO,QACF,CAAI,wFAET,EAAW,QACN,CAAI,+FAEN,CAAI,iEACX;;;2DAG6C,CAAC,EAAU,MAAM;;;;;gBAM9D,EAAO,QAAc,yBAErB,EAAW,QAAc,+DAEtB,GACP;;;CAGR;CAEA,QAAQ,CAAC,GAAa,CAAe;AACvC,CAAC"}
+{"version":3,"file":"copy-command.js","names":[],"sources":["../src/content/copy-command/copy-command.ts"],"sourcesContent":["import { define, html, prop, onCleanup, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport { srOnlyMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './copy-command.css?inline';\n\n/** Copy command component properties */\nexport type OreCopyCommandProps = {\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /** The command string to display and copy to clipboard */\n  value?: string;\n  /** Visual style variant */\n  variant?: 'flat' | 'bordered' | 'ghost';\n};\n\n/** Copy command component events */\nexport type OreCopyCommandEvents = {\n  /** Emitted when the command is successfully copied to the clipboard */\n  copy: { value: string };\n};\n\n/**\n * A styled, copy-to-clipboard command display component.\n * Shows a command string in a monospace code block with a copy button.\n * Clicking the component copies the value to the clipboard, shows a transient\n * check-mark confirmation, and emits a `copy` event.\n *\n * @element ore-copy-command\n *\n * @attr {string} value - The command string to display and copy\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual style: 'flat' | 'bordered' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires copy - Emitted on successful clipboard write. detail: { value: string }\n *\n * @slot suffix - Optional controls appended after the copy button (e.g. a cycle button)\n *\n * @cssprop --copy-command-bg - Background color of the command block\n * @cssprop --copy-command-color - Text color of the command string\n * @cssprop --copy-command-border-color - Border color\n * @cssprop --copy-command-radius - Border radius (overrides the `rounded` attribute)\n * @cssprop --copy-command-padding - Inner padding of the command button\n * @cssprop --copy-command-font-size - Font size of the command string\n * @cssprop --copy-command-icon-color - Color of the copy/check icon\n * @cssprop --copy-command-hover-bg - Background on hover\n *\n * @part wrapper - Outer flex container\n * @part command - The copy button element\n * @part command-text - The `<code>` element displaying the command string\n * @part copy-icon - The icon wrapper span\n * @part suffix - Suffix slot container\n *\n * @example\n * ```html\n * <ore-copy-command value=\"npm install @vielzeug/ripple\"></ore-copy-command>\n *\n * <ore-copy-command value=\"npx -y @vielzeug/codex\" size=\"sm\" variant=\"bordered\"></ore-copy-command>\n *\n * <!-- With a suffix slot (e.g. a cycle button) -->\n * <ore-copy-command value=\"npm install @vielzeug/ripple\">\n *   <button slot=\"suffix\" type=\"button\" aria-label=\"Next package\">›</button>\n * </ore-copy-command>\n * ```\n */\nexport const COPY_COMMAND_TAG = 'ore-copy-command' as const;\n\ndefine<OreCopyCommandProps>(COPY_COMMAND_TAG, {\n  props: {\n    rounded: prop.string<RoundedSize>('md'),\n    size: prop.string<ComponentSize>('md'),\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'bordered' | 'ghost'>('flat'),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreCopyCommandEvents>();\n    const slots = useSlots();\n\n    const copied = signal(false);\n    const copyFailed = signal(false);\n    let resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n    onCleanup(() => {\n      if (resetTimer !== null) clearTimeout(resetTimer);\n    });\n\n    const handleCopy = async () => {\n      const text = props.value.value ?? '';\n\n      if (!text) return;\n\n      if (resetTimer !== null) clearTimeout(resetTimer);\n\n      try {\n        await navigator.clipboard.writeText(text);\n        copied.value = true;\n        copyFailed.value = false;\n        emit('copy', { value: text });\n      } catch {\n        // Clipboard access denied or unavailable (e.g. insecure context) — surface it instead of failing silently\n        copied.value = false;\n        copyFailed.value = true;\n      }\n\n      resetTimer = setTimeout(() => {\n        copied.value = false;\n        copyFailed.value = false;\n        resetTimer = null;\n      }, 2000);\n    };\n\n    const hasSuffix = computed(() => slots.has('suffix').value);\n    const btnLabel = computed(() => {\n      if (copied.value) return 'Copied!';\n\n      if (copyFailed.value) return 'Copy failed — press to try again';\n\n      return `Copy: ${props.value.value ?? ''}`;\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\">\n        <button class=\"command\" part=\"command\" type=\"button\" aria-label=\"${btnLabel}\" @click=${handleCopy}>\n          <code class=\"command-text\" part=\"command-text\">${props.value}</code>\n          <span class=\"copy-icon\" part=\"copy-icon\" aria-hidden=\"true\">\n            ${() => {\n              if (copied.value)\n                return html`\n                  <ore-icon name=\"check\" size=\"14\" class=\"icon-copied\" aria-hidden=\"true\"></ore-icon>\n                `;\n\n              if (copyFailed.value)\n                return html`\n                  <ore-icon name=\"circle-alert\" size=\"14\" class=\"icon-failed\" aria-hidden=\"true\"></ore-icon>\n                `;\n\n              return html`\n                <ore-icon name=\"copy\" size=\"14\" aria-hidden=\"true\"></ore-icon>\n              `;\n            }}\n          </span>\n        </button>\n        <div class=\"suffix\" part=\"suffix\" ?hidden=\"${() => !hasSuffix.value}\">\n          <slot name=\"suffix\"></slot>\n        </div>\n      </div>\n      <div role=\"status\" class=\"sr-only\">\n        ${() => {\n          if (copied.value) return 'Copied to clipboard.';\n\n          if (copyFailed.value) return 'Copy failed. Select the command text and copy it manually.';\n\n          return '';\n        }}\n      </div>\n    `;\n  },\n\n  styles: [srOnlyMixin, componentStyles],\n});\n"],"mappings":";;;;;AAuEA,IAAa,IAAmB;AAEhC,EAA4B,GAAkB;CAC5C,OAAO;EACL,SAAS,EAAK,OAAoB,IAAI;EACtC,MAAM,EAAK,OAAsB,IAAI;EACrC,OAAO,EAAK,OAAO,EAAE;EACrB,SAAS,EAAK,OAAsC,MAAM;CAC5D;CAEA,MAAM,GAAO;EACX,IAAM,IAAO,EAA8B,GACrC,IAAQ,EAAS,GAEjB,IAAS,EAAO,EAAK,GACrB,IAAa,EAAO,EAAK,GAC3B,IAAmD;EAEvD,QAAgB;GACd,AAAI,MAAe,QAAM,aAAa,CAAU;EAClD,CAAC;EAED,IAAM,IAAa,YAAY;GAC7B,IAAM,IAAO,EAAM,MAAM,SAAS;GAE7B,OAEL;IAAI,MAAe,QAAM,aAAa,CAAU;IAEhD,IAAI;KAIF,AAHA,MAAM,UAAU,UAAU,UAAU,CAAI,GACxC,EAAO,QAAQ,IACf,EAAW,QAAQ,IACnB,EAAK,QAAQ,EAAE,OAAO,EAAK,CAAC;IAC9B,QAAQ;KAGN,AADA,EAAO,QAAQ,IACf,EAAW,QAAQ;IACrB;IAEA,IAAa,iBAAiB;KAG5B,AAFA,EAAO,QAAQ,IACf,EAAW,QAAQ,IACnB,IAAa;IACf,GAAG,GAAI;GAjByC;EAkBlD,GAEM,IAAY,QAAe,EAAM,IAAI,QAAQ,CAAC,CAAC,KAAK,GACpD,IAAW,QACX,EAAO,QAAc,YAErB,EAAW,QAAc,qCAEtB,SAAS,EAAM,MAAM,SAAS,IACtC;EAED,OAAO,CAAI;;2EAE4D,EAAS,WAAW,EAAW;2DAC/C,EAAM,MAAM;;oBAGrD,EAAO,QACF,CAAI;;oBAIT,EAAW,QACN,CAAI;;oBAIN,CAAI;;gBAGX;;;2DAG6C,CAAC,EAAU,MAAM;;;;;gBAM9D,EAAO,QAAc,yBAErB,EAAW,QAAc,+DAEtB,GACP;;;CAGR;CAEA,QAAQ,CAAC,GAAa,CAAe;AACvC,CAAC"}

package/dist/{headless → core}/_internal.d.ts

@@ -1,17 +1,15 @@
 /**
  * Internal barrel — primitives used by refine components but not intended as
- * public API. Not exported from `headless/index.ts`.
+ * public API. Not exported from `core/index.ts`.
  *
  * Import via the full path, e.g.:
- *   import { createInteraction } from '../../headless/_internal';
+ *   import { createInteraction } from '../../core/_internal';
  */
 export { createDropdownPositioner, type DropdownPositionerOptions } from './positioner';
 export { createInteraction, dispatchKeyboardAction, type Interaction, type InteractionOptions, type KeyboardDispatchOptions, type PressTrigger, } from './keyboard';
 export { createListControl, type ListControl, type ListKeyAction, type ListNavigationAction, type ListNavigationOptions, } from './nav';
-export { createOverlayControl, type OverlayControl, type OverlayControlOptions, type OverlayPositioner, } from './overlay';
+export { createListboxDropdown, type ListboxDropdown, type ListboxDropdownOptions, type ListboxDropdownPlacementOptions, } from './option-list';
 export { createTypeahead, type Typeahead, type TypeaheadOptions } from './typeahead';
 export { parseStringTriggers } from './parse';
 export { syncedSignal } from './signals';
-export { createSelectionControl, type SelectionControl, type SelectionControlOptions } from './selection-control';
-export { createSortControl, type SortControl, type SortControlOptions } from './sort-control';
 //# sourceMappingURL=_internal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_internal.d.ts","sourceRoot":"","sources":["../../src/core/_internal.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,wBAAwB,EAAE,KAAK,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,EACL,iBAAiB,EACjB,sBAAsB,EACtB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,YAAY,GAClB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,iBAAiB,EACjB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,OAAO,CAAC;AACf,OAAO,EACL,qBAAqB,EACrB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,+BAA+B,GACrC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/core/announcer.cjs.map

@@ -0,0 +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"}

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

@@ -0,0 +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"}

package/dist/{headless → core}/announcer.js

@@ -1,5 +1,5 @@
 import { SR_ONLY_INLINE_STYLE as e } from "../styles/mixins/accessibility.css.js";
-//#region src/headless/announcer.ts
+//#region src/core/announcer.ts
 var t = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ 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, n.body.appendChild(r), r;