@vielzeug/refine 3.2.1 → 3.3.1

package/dist/feedback/progress/progress.d.ts

@@ -14,6 +14,8 @@ export type OreProgressProps = {
     label?: string;
     /** Maximum value. Defaults to 100. */
     max?: number;
+    /** Split the linear bar into this many discrete blocks; blocks up to `value / max` are filled. Ignored when `indeterminate` or circular. */
+    segments?: number;
     /** Size variant controlling bar height */
     size?: ComponentSize;
     /** Title text.
@@ -39,6 +41,7 @@ export type OreProgressProps = {
  * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …
  * @attr {string} size    - Bar height/width: 'sm' | 'md' | 'lg'
  * @attr {string} type   - 'linear' (default) | 'circular' | 'vertical'
+ * @attr {number} segments - Split the linear bar into discrete blocks (tracks, steps, stages)
  *
  * @cssprop --progress-width  - Bar width override (vertical only)
  * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.
@@ -55,13 +58,16 @@ export type OreProgressProps = {
  * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)
  * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)
  * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)
+ * @cssprop --progress-segment-gap           - Gap between blocks when `segments` is set (default --size-1)
  *
  * @part fill - Progress fill element.
+ * @part segment - One block when `segments` is set; carries `data-filled` once reached.
  * @example
  * ```html
  * <ore-progress value="45"></ore-progress>
  * <ore-progress value="75" max="100" color="success" size="lg"></ore-progress>
  * <ore-progress indeterminate color="primary" label="Loading…"></ore-progress>
+ * <ore-progress value="2" max="6" segments="6" label="Struggle"></ore-progress>
  * ```
  */
 export declare const PROGRESS_TAG: "ore-progress";

package/dist/feedback/progress/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/feedback/progress/progress.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7D,wCAAwC;AACxC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mCAAmC;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+LAA+L;IAC/L,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;0DAGsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;+EAE2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0HAA0H;IAC1H,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/feedback/progress/progress.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7D,wCAAwC;AACxC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mCAAmC;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+LAA+L;IAC/L,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;0DAGsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4IAA4I;IAC5I,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;+EAE2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0HAA0H;IAC1H,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/feedback/toast/toast.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,1rem);--_inset-right:var(--toast-inset-right,1rem);--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,var(--z-toast));--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,.5rem);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);gap:var(--_gap);max-width:var(--_max-width);pointer-events:none;flex-direction:column;display:flex}:host([position=top-left]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:1rem;--_inset-right:auto}:host([position=top-center]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-right:1rem;--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:1rem;--_inset-left:1rem;--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:1rem;--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:1rem;--_inset-right:1rem;--_inset-left:auto;--_inset-top:auto}.toast-container{perspective:1200px;perspective-origin:50%;transition:row-gap var(--transition-normal);grid-template-rows:1fr;grid-template-columns:1fr;row-gap:0;display:grid}.toast-live-region{display:contents}:host(.hovered) .toast-container{row-gap:var(--_gap)}:host(:not(.hovered)) .toast-wrapper{grid-area:1/1;align-self:end}:host([position^=top]:not(.hovered)) .toast-wrapper{align-self:start}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}:host(:not(.hovered)) .toast-wrapper:last-child{z-index:3;transform:translateY(0)scale(1)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(2){z-index:2;pointer-events:none;transform:translateY(-8px)scale(.95)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(3){z-index:1;pointer-events:none;transform:translateY(-14px)scale(.9)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(n+4){visibility:hidden;pointer-events:none}:host([position^=top]) .toast-wrapper{transform-origin:top}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(2){transform:translateY(8px)scale(.95)}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(3){transform:translateY(14px)scale(.9)}:host(.hovered) .toast-wrapper{z-index:auto;visibility:visible;pointer-events:auto;grid-area:auto/1;align-self:stretch;transform:none}:host(.hovered) .toast-wrapper:nth-last-child(2){transition-delay:var(--duration-75)}:host(.hovered) .toast-wrapper:nth-last-child(3){transition-delay:var(--duration-100)}:host(.hovered) .toast-wrapper:nth-last-child(n+4){transition-delay:var(--duration-150)}.toast-inner{opacity:1;transition:opacity var(--toast-exit-duration,.3s) var(--ease-out);position:relative}.toast-inner.entering{opacity:0;transition:none}.toast-inner.exiting{pointer-events:none;opacity:0}ore-alert,::slotted(ore-alert){--_motion-animation:none;width:100%;box-shadow:var(--shadow-lg);margin:0}.toast-actions{gap:var(--size-4);justify-content:flex-end;display:flex}@media (width<=480px){:host{--_max-width:calc(100vw - var(--size-4));--_inset-right:var(--size-2);--_inset-left:var(--size-2)}:host([position=top-center]){--_inset-left:var(--size-2);transform:none}:host([position=top-center]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([position=top-center]):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:var(--size-2)}:host([position=bottom-center]){--_inset-left:var(--size-2);transform:none}:host([position=bottom-center]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([position=bottom-center]):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:var(--size-2)}}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,var(--size-4));--_inset-right:var(--toast-inset-right,var(--size-4));--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,var(--z-toast));--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,var(--size-2));--_enter-duration:var(--toast-enter-duration,var(--duration-200));--_exit-duration:var(--toast-exit-duration,var(--duration-200));--_offset:var(--size-3);--_progress-height:var(--toast-progress-height,3px);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);width:min(var(--_max-width), 100vw - 2 * var(--size-4));pointer-events:none;display:block}:host([position=top-left]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:var(--size-4);--_inset-right:auto}:host([position=top-center]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-right:var(--size-4);--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:var(--size-4);--_inset-left:var(--size-4);--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:var(--size-4);--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:var(--size-4);--_inset-right:var(--size-4);--_inset-left:auto;--_inset-top:auto}:host([position^=top]){--_offset:calc(-1 * var(--size-3))}.toast-container{gap:var(--_gap);flex-direction:column;display:flex}:host([position^=top]) .toast-container{flex-direction:column-reverse}.toast-live-region{display:contents}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}.toast-inner{border-radius:var(--_toast-radius,var(--rounded-md));opacity:1;transition:var(--_motion-transition,opacity var(--_exit-duration) var(--ease-out), transform var(--_exit-duration) var(--ease-out));position:relative;overflow:hidden;transform:none}.toast-inner.entering{opacity:0;transform:translateY(var(--_offset)) scale(.98);transition:none}.toast-inner:not(:is(.entering,.exiting)){transition:var(--_motion-transition,opacity var(--_enter-duration) var(--ease-out), transform var(--_enter-duration) var(--ease-out))}.toast-inner.exiting{pointer-events:none;opacity:0;transform:translateY(var(--_offset)) scale(.96)}ore-alert{--alert-shadow:var(--toast-shadow,var(--shadow-xl));width:100%;margin:0}ore-alert:not([variant=solid]){--alert-bg:var(--toast-bg,color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)))}ore-alert:not([heading])::part(close){align-self:center}.toast-progress{height:var(--_progress-height);pointer-events:none;background:var(--toast-progress-color,var(--_toast-accent));opacity:.6;transform-origin:0;animation:var(--_motion-animation,ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);position:absolute;bottom:0;left:0;right:0}.toast-container.paused .toast-progress{animation-play-state:paused}@keyframes ore-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.toast-progress{display:none}}.toast-actions{gap:var(--size-2);justify-content:flex-end;display:flex}@media (width<=480px){:host,:host([position]){--_inset-right:var(--size-3);--_inset-left:var(--size-3);width:auto;transform:none}:host([position^=bottom]){--_inset-bottom:calc(var(--size-3) + env(safe-area-inset-bottom,0px))}:host([position^=top]){--_inset-top:calc(var(--size-3) + env(safe-area-inset-top,0px))}}}`;exports.default=e;
 //# sourceMappingURL=toast.css.cjs.map

package/dist/feedback/toast/toast.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.css.cjs","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, 1rem);\n    --_inset-right: var(--toast-inset-right, 1rem);\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, var(--z-toast));\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, 0.5rem);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    max-width: var(--_max-width);\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: 1rem;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* ── Container ────────────────────────────────────────────────────────── */\n\n  .toast-container {\n    display: grid;\n    grid-template-rows: 1fr;\n    grid-template-columns: 1fr;\n    row-gap: 0;\n    perspective: 1200px;\n    perspective-origin: center center;\n    transition: row-gap var(--transition-normal);\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  :host(.hovered) .toast-container {\n    row-gap: var(--_gap);\n  }\n\n  /* ── Wrapper (layout / stacking only — no animation) ─────────────────── */\n\n  /* .toast-wrapper owns: grid position, z-index, stacking transforms.       */\n\n  /* It never has opacity or transition set on it directly.                  */\n\n  /* This keeps stacking rules and animation rules on separate elements,     */\n\n  /* eliminating all specificity conflicts and !important usage.             */\n\n  :host(:not(.hovered)) .toast-wrapper {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: end;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper {\n    align-self: start;\n  }\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* Stacking (collapsed) — 3D perspective stack */\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(1) {\n    z-index: 3;\n    transform: translateY(0) scale(1);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    z-index: 2;\n    pointer-events: none;\n    transform: translateY(-8px) scale(0.95);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    z-index: 1;\n    pointer-events: none;\n    transform: translateY(-14px) scale(0.9);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(n + 4) {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* Top positions: reverse stacking direction */\n  :host([position^='top']) .toast-wrapper {\n    transform-origin: center top;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    transform: translateY(8px) scale(0.95);\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    transform: translateY(14px) scale(0.9);\n  }\n\n  /* Expanded (hovered) — stacking transforms are released per wrapper */\n  :host(.hovered) .toast-wrapper {\n    z-index: auto;\n    visibility: visible;\n    grid-row: auto;\n    grid-column: 1;\n    align-self: stretch;\n    pointer-events: auto;\n    transform: none;\n  }\n\n  /* Staggered expand delays (applied to wrapper transform only) */\n  :host(.hovered) .toast-wrapper:nth-last-child(2) {\n    transition-delay: var(--duration-75);\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(3) {\n    transition-delay: var(--duration-100);\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(n + 4) {\n    transition-delay: var(--duration-150);\n  }\n\n  /* ── Inner (animation target only — no layout role) ──────────────────── */\n\n  /* .toast-inner owns: opacity, entry/exit transitions.                    */\n\n  /* It never participates in stacking (that's the wrapper's job).          */\n\n  /* Swipe gesture also animates .toast-inner to keep wrapper state clean.  */\n\n  .toast-inner {\n    position: relative;\n    opacity: 1;\n    transition: opacity var(--toast-exit-duration, 300ms) var(--ease-out);\n  }\n\n  /* Entry: snap to invisible with no transition, then rely on class removal to animate in */\n  .toast-inner.entering {\n    opacity: 0;\n    transition: none;\n  }\n\n  /* Exit: fade out — wrapper stays in-flow so grid doesn't snap shut prematurely */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  ::slotted(ore-alert),\n  ore-alert {\n    --_motion-animation: none;\n    width: 100%;\n    margin: 0;\n    box-shadow: var(--shadow-lg);\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-4);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: small screens ────────────────────────────────────────── */\n\n  @media (width <= 480px) {\n    :host {\n      --_max-width: calc(100vw - var(--size-4));\n      --_inset-right: var(--size-2);\n      --_inset-left: var(--size-2);\n    }\n\n    :host([position='top-center']),\n    :host([position='bottom-center']) {\n      --_inset-left: var(--size-2);\n\n      inset-inline-start: var(--size-2);\n      transform: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"toast.css.cjs","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, var(--size-4));\n    --_inset-right: var(--toast-inset-right, var(--size-4));\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, var(--z-toast));\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, var(--size-2));\n    --_enter-duration: var(--toast-enter-duration, var(--duration-200));\n    --_exit-duration: var(--toast-exit-duration, var(--duration-200));\n    --_offset: var(--size-3);\n    --_progress-height: var(--toast-progress-height, 3px);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: block;\n    width: min(var(--_max-width), 100vw - 2 * var(--size-4));\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* Top anchors slide down; bottom anchors slide up. */\n  :host([position^='top']) {\n    --_offset: calc(-1 * var(--size-3));\n  }\n\n  /* ── List ─────────────────────────────────────────────────────────────── */\n\n  /* Newest notification sits nearest the anchored edge. */\n  .toast-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n  }\n\n  :host([position^='top']) .toast-container {\n    flex-direction: column-reverse;\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  /* ── Wrapper (layout / gesture target) ────────────────────────────────── */\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* ── Inner (motion target) ────────────────────────────────────────────── */\n\n  .toast-inner {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--_toast-radius, var(--rounded-md));\n    opacity: 1;\n    transform: none;\n    transition: var(\n      --_motion-transition,\n      opacity var(--_exit-duration) var(--ease-out),\n      transform var(--_exit-duration) var(--ease-out)\n    );\n  }\n\n  /* Entry: mount invisible without a transition; removing the class animates in. */\n  .toast-inner.entering {\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.98);\n    transition: none;\n  }\n\n  .toast-inner:not(.entering, .exiting) {\n    transition: var(\n      --_motion-transition,\n      opacity var(--_enter-duration) var(--ease-out),\n      transform var(--_enter-duration) var(--ease-out)\n    );\n  }\n\n  /* Exit: fade and drift toward the anchored edge; the wrapper stays in flow until finalized. */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.96);\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  /* A floating notification must read as a layer over arbitrary content: opaque surface and real elevation.\n     --color-canvas is translucent by design (it expects a dimmed backdrop), so mix on the opaque contrast base. */\n  ore-alert {\n    --alert-shadow: var(--toast-shadow, var(--shadow-xl));\n\n    width: 100%;\n    margin: 0;\n  }\n\n  ore-alert:not([variant='solid']) {\n    --alert-bg: var(--toast-bg, color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)));\n  }\n\n  /* Single-line notifications centre the close control on the text. */\n  ore-alert:not([heading])::part(close) {\n    align-self: center;\n  }\n\n  /* ── Progress ─────────────────────────────────────────────────────────── */\n\n  .toast-progress {\n    position: absolute;\n    inset-inline: 0;\n    bottom: 0;\n    height: var(--_progress-height);\n    pointer-events: none;\n    background: var(--toast-progress-color, var(--_toast-accent));\n    opacity: 0.6;\n    transform-origin: left center;\n    animation: var(--_motion-animation, ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);\n  }\n\n  .toast-container.paused .toast-progress {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-toast-progress {\n    from {\n      transform: scaleX(1);\n    }\n\n    to {\n      transform: scaleX(0);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast-progress {\n      display: none;\n    }\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: phones use the full width above the safe area ────────── */\n\n  @media (width <= 480px) {\n    :host,\n    :host([position]) {\n      --_inset-right: var(--size-3);\n      --_inset-left: var(--size-3);\n\n      width: auto;\n      transform: none;\n    }\n\n    :host([position^='bottom']) {\n      --_inset-bottom: calc(var(--size-3) + env(safe-area-inset-bottom, 0px));\n    }\n\n    :host([position^='top']) {\n      --_inset-top: calc(var(--size-3) + env(safe-area-inset-top, 0px));\n    }\n  }\n}\n"],"mappings":""}

package/dist/feedback/toast/toast.css.js

@@ -1,5 +1,5 @@
 //#region src/feedback/toast/toast.css?inline
-var e = "@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,1rem);--_inset-right:var(--toast-inset-right,1rem);--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,var(--z-toast));--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,.5rem);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);gap:var(--_gap);max-width:var(--_max-width);pointer-events:none;flex-direction:column;display:flex}:host([position=top-left]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:1rem;--_inset-right:auto}:host([position=top-center]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-right:1rem;--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:1rem;--_inset-left:1rem;--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:1rem;--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:1rem;--_inset-right:1rem;--_inset-left:auto;--_inset-top:auto}.toast-container{perspective:1200px;perspective-origin:50%;transition:row-gap var(--transition-normal);grid-template-rows:1fr;grid-template-columns:1fr;row-gap:0;display:grid}.toast-live-region{display:contents}:host(.hovered) .toast-container{row-gap:var(--_gap)}:host(:not(.hovered)) .toast-wrapper{grid-area:1/1;align-self:end}:host([position^=top]:not(.hovered)) .toast-wrapper{align-self:start}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}:host(:not(.hovered)) .toast-wrapper:last-child{z-index:3;transform:translateY(0)scale(1)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(2){z-index:2;pointer-events:none;transform:translateY(-8px)scale(.95)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(3){z-index:1;pointer-events:none;transform:translateY(-14px)scale(.9)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(n+4){visibility:hidden;pointer-events:none}:host([position^=top]) .toast-wrapper{transform-origin:top}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(2){transform:translateY(8px)scale(.95)}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(3){transform:translateY(14px)scale(.9)}:host(.hovered) .toast-wrapper{z-index:auto;visibility:visible;pointer-events:auto;grid-area:auto/1;align-self:stretch;transform:none}:host(.hovered) .toast-wrapper:nth-last-child(2){transition-delay:var(--duration-75)}:host(.hovered) .toast-wrapper:nth-last-child(3){transition-delay:var(--duration-100)}:host(.hovered) .toast-wrapper:nth-last-child(n+4){transition-delay:var(--duration-150)}.toast-inner{opacity:1;transition:opacity var(--toast-exit-duration,.3s) var(--ease-out);position:relative}.toast-inner.entering{opacity:0;transition:none}.toast-inner.exiting{pointer-events:none;opacity:0}ore-alert,::slotted(ore-alert){--_motion-animation:none;width:100%;box-shadow:var(--shadow-lg);margin:0}.toast-actions{gap:var(--size-4);justify-content:flex-end;display:flex}@media (width<=480px){:host{--_max-width:calc(100vw - var(--size-4));--_inset-right:var(--size-2);--_inset-left:var(--size-2)}:host([position=top-center]){--_inset-left:var(--size-2);transform:none}:host([position=top-center]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([position=top-center]):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:var(--size-2)}:host([position=bottom-center]){--_inset-left:var(--size-2);transform:none}:host([position=bottom-center]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([position=bottom-center]):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:var(--size-2)}}}";
+var e = "@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,var(--size-4));--_inset-right:var(--toast-inset-right,var(--size-4));--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,var(--z-toast));--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,var(--size-2));--_enter-duration:var(--toast-enter-duration,var(--duration-200));--_exit-duration:var(--toast-exit-duration,var(--duration-200));--_offset:var(--size-3);--_progress-height:var(--toast-progress-height,3px);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);width:min(var(--_max-width), 100vw - 2 * var(--size-4));pointer-events:none;display:block}:host([position=top-left]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:var(--size-4);--_inset-right:auto}:host([position=top-center]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-right:var(--size-4);--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:var(--size-4);--_inset-left:var(--size-4);--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:var(--size-4);--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:var(--size-4);--_inset-right:var(--size-4);--_inset-left:auto;--_inset-top:auto}:host([position^=top]){--_offset:calc(-1 * var(--size-3))}.toast-container{gap:var(--_gap);flex-direction:column;display:flex}:host([position^=top]) .toast-container{flex-direction:column-reverse}.toast-live-region{display:contents}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}.toast-inner{border-radius:var(--_toast-radius,var(--rounded-md));opacity:1;transition:var(--_motion-transition,opacity var(--_exit-duration) var(--ease-out), transform var(--_exit-duration) var(--ease-out));position:relative;overflow:hidden;transform:none}.toast-inner.entering{opacity:0;transform:translateY(var(--_offset)) scale(.98);transition:none}.toast-inner:not(:is(.entering,.exiting)){transition:var(--_motion-transition,opacity var(--_enter-duration) var(--ease-out), transform var(--_enter-duration) var(--ease-out))}.toast-inner.exiting{pointer-events:none;opacity:0;transform:translateY(var(--_offset)) scale(.96)}ore-alert{--alert-shadow:var(--toast-shadow,var(--shadow-xl));width:100%;margin:0}ore-alert:not([variant=solid]){--alert-bg:var(--toast-bg,color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)))}ore-alert:not([heading])::part(close){align-self:center}.toast-progress{height:var(--_progress-height);pointer-events:none;background:var(--toast-progress-color,var(--_toast-accent));opacity:.6;transform-origin:0;animation:var(--_motion-animation,ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);position:absolute;bottom:0;left:0;right:0}.toast-container.paused .toast-progress{animation-play-state:paused}@keyframes ore-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.toast-progress{display:none}}.toast-actions{gap:var(--size-2);justify-content:flex-end;display:flex}@media (width<=480px){:host,:host([position]){--_inset-right:var(--size-3);--_inset-left:var(--size-3);width:auto;transform:none}:host([position^=bottom]){--_inset-bottom:calc(var(--size-3) + env(safe-area-inset-bottom,0px))}:host([position^=top]){--_inset-top:calc(var(--size-3) + env(safe-area-inset-top,0px))}}}";
 //#endregion
 export { e as default };
 

package/dist/feedback/toast/toast.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.css.js","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, 1rem);\n    --_inset-right: var(--toast-inset-right, 1rem);\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, var(--z-toast));\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, 0.5rem);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    max-width: var(--_max-width);\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: 1rem;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* ── Container ────────────────────────────────────────────────────────── */\n\n  .toast-container {\n    display: grid;\n    grid-template-rows: 1fr;\n    grid-template-columns: 1fr;\n    row-gap: 0;\n    perspective: 1200px;\n    perspective-origin: center center;\n    transition: row-gap var(--transition-normal);\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  :host(.hovered) .toast-container {\n    row-gap: var(--_gap);\n  }\n\n  /* ── Wrapper (layout / stacking only — no animation) ─────────────────── */\n\n  /* .toast-wrapper owns: grid position, z-index, stacking transforms.       */\n\n  /* It never has opacity or transition set on it directly.                  */\n\n  /* This keeps stacking rules and animation rules on separate elements,     */\n\n  /* eliminating all specificity conflicts and !important usage.             */\n\n  :host(:not(.hovered)) .toast-wrapper {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: end;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper {\n    align-self: start;\n  }\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* Stacking (collapsed) — 3D perspective stack */\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(1) {\n    z-index: 3;\n    transform: translateY(0) scale(1);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    z-index: 2;\n    pointer-events: none;\n    transform: translateY(-8px) scale(0.95);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    z-index: 1;\n    pointer-events: none;\n    transform: translateY(-14px) scale(0.9);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(n + 4) {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* Top positions: reverse stacking direction */\n  :host([position^='top']) .toast-wrapper {\n    transform-origin: center top;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    transform: translateY(8px) scale(0.95);\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    transform: translateY(14px) scale(0.9);\n  }\n\n  /* Expanded (hovered) — stacking transforms are released per wrapper */\n  :host(.hovered) .toast-wrapper {\n    z-index: auto;\n    visibility: visible;\n    grid-row: auto;\n    grid-column: 1;\n    align-self: stretch;\n    pointer-events: auto;\n    transform: none;\n  }\n\n  /* Staggered expand delays (applied to wrapper transform only) */\n  :host(.hovered) .toast-wrapper:nth-last-child(2) {\n    transition-delay: var(--duration-75);\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(3) {\n    transition-delay: var(--duration-100);\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(n + 4) {\n    transition-delay: var(--duration-150);\n  }\n\n  /* ── Inner (animation target only — no layout role) ──────────────────── */\n\n  /* .toast-inner owns: opacity, entry/exit transitions.                    */\n\n  /* It never participates in stacking (that's the wrapper's job).          */\n\n  /* Swipe gesture also animates .toast-inner to keep wrapper state clean.  */\n\n  .toast-inner {\n    position: relative;\n    opacity: 1;\n    transition: opacity var(--toast-exit-duration, 300ms) var(--ease-out);\n  }\n\n  /* Entry: snap to invisible with no transition, then rely on class removal to animate in */\n  .toast-inner.entering {\n    opacity: 0;\n    transition: none;\n  }\n\n  /* Exit: fade out — wrapper stays in-flow so grid doesn't snap shut prematurely */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  ::slotted(ore-alert),\n  ore-alert {\n    --_motion-animation: none;\n    width: 100%;\n    margin: 0;\n    box-shadow: var(--shadow-lg);\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-4);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: small screens ────────────────────────────────────────── */\n\n  @media (width <= 480px) {\n    :host {\n      --_max-width: calc(100vw - var(--size-4));\n      --_inset-right: var(--size-2);\n      --_inset-left: var(--size-2);\n    }\n\n    :host([position='top-center']),\n    :host([position='bottom-center']) {\n      --_inset-left: var(--size-2);\n\n      inset-inline-start: var(--size-2);\n      transform: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"toast.css.js","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, var(--size-4));\n    --_inset-right: var(--toast-inset-right, var(--size-4));\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, var(--z-toast));\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, var(--size-2));\n    --_enter-duration: var(--toast-enter-duration, var(--duration-200));\n    --_exit-duration: var(--toast-exit-duration, var(--duration-200));\n    --_offset: var(--size-3);\n    --_progress-height: var(--toast-progress-height, 3px);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: block;\n    width: min(var(--_max-width), 100vw - 2 * var(--size-4));\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* Top anchors slide down; bottom anchors slide up. */\n  :host([position^='top']) {\n    --_offset: calc(-1 * var(--size-3));\n  }\n\n  /* ── List ─────────────────────────────────────────────────────────────── */\n\n  /* Newest notification sits nearest the anchored edge. */\n  .toast-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n  }\n\n  :host([position^='top']) .toast-container {\n    flex-direction: column-reverse;\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  /* ── Wrapper (layout / gesture target) ────────────────────────────────── */\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* ── Inner (motion target) ────────────────────────────────────────────── */\n\n  .toast-inner {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--_toast-radius, var(--rounded-md));\n    opacity: 1;\n    transform: none;\n    transition: var(\n      --_motion-transition,\n      opacity var(--_exit-duration) var(--ease-out),\n      transform var(--_exit-duration) var(--ease-out)\n    );\n  }\n\n  /* Entry: mount invisible without a transition; removing the class animates in. */\n  .toast-inner.entering {\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.98);\n    transition: none;\n  }\n\n  .toast-inner:not(.entering, .exiting) {\n    transition: var(\n      --_motion-transition,\n      opacity var(--_enter-duration) var(--ease-out),\n      transform var(--_enter-duration) var(--ease-out)\n    );\n  }\n\n  /* Exit: fade and drift toward the anchored edge; the wrapper stays in flow until finalized. */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.96);\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  /* A floating notification must read as a layer over arbitrary content: opaque surface and real elevation.\n     --color-canvas is translucent by design (it expects a dimmed backdrop), so mix on the opaque contrast base. */\n  ore-alert {\n    --alert-shadow: var(--toast-shadow, var(--shadow-xl));\n\n    width: 100%;\n    margin: 0;\n  }\n\n  ore-alert:not([variant='solid']) {\n    --alert-bg: var(--toast-bg, color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)));\n  }\n\n  /* Single-line notifications centre the close control on the text. */\n  ore-alert:not([heading])::part(close) {\n    align-self: center;\n  }\n\n  /* ── Progress ─────────────────────────────────────────────────────────── */\n\n  .toast-progress {\n    position: absolute;\n    inset-inline: 0;\n    bottom: 0;\n    height: var(--_progress-height);\n    pointer-events: none;\n    background: var(--toast-progress-color, var(--_toast-accent));\n    opacity: 0.6;\n    transform-origin: left center;\n    animation: var(--_motion-animation, ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);\n  }\n\n  .toast-container.paused .toast-progress {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-toast-progress {\n    from {\n      transform: scaleX(1);\n    }\n\n    to {\n      transform: scaleX(0);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast-progress {\n      display: none;\n    }\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: phones use the full width above the safe area ────────── */\n\n  @media (width <= 480px) {\n    :host,\n    :host([position]) {\n      --_inset-right: var(--size-3);\n      --_inset-left: var(--size-3);\n\n      width: auto;\n      transform: none;\n    }\n\n    :host([position^='bottom']) {\n      --_inset-bottom: calc(var(--size-3) + env(safe-area-inset-bottom, 0px));\n    }\n\n    :host([position^='top']) {\n      --_inset-top: calc(var(--size-3) + env(safe-area-inset-top, 0px));\n    }\n  }\n}\n"],"mappings":""}

package/dist/feedback/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/feedback/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAMxB,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM1E,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACpB,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC;CACvG,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;KACzC,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC,CAAC;AA4PF,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC;AAkU9C,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAE/C,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,KAAK,IAAI,IAAI,CAAC;IACd,SAAS,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC;IACrC,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC1D,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IACzD,OAAO,CAAC,CAAC,EACP,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;QAC3C,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;KACzC,GACA,OAAO,CAAC,CAAC,CAAC,CAAC;IACd,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC5D,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC5D,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;CAC1B;AAID;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,UAA0B,GAAG,YAAY,CAgJjF;AAED,4EAA4E;AAC5E,eAAO,MAAM,KAAK,EAAE,YAAmC,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/feedback/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAMxB,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM1E,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACpB,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC;CACvG,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;KACzC,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC,CAAC;AA4QF,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC;AAmX9C,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAE/C,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,KAAK,IAAI,IAAI,CAAC;IACd,SAAS,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC;IACrC,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC1D,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IACzD,OAAO,CAAC,CAAC,EACP,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;QAC3C,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;KACzC,GACA,OAAO,CAAC,CAAC,CAAC,CAAC;IACd,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC5D,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC5D,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;CAC1B;AAID;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,UAA0B,GAAG,YAAY,CAgJjF;AAED,4EAA4E;AAC5E,eAAO,MAAM,KAAK,EAAE,YAAmC,CAAC"}

package/dist/frameworks/elements.d.ts

@@ -1,5 +1,5 @@
 // Generated from src/types/elements.d.ts. Do not edit directly.
 import type {} from '../types/elements.js';
 
-export type RefineElementTag = 'ore-accordion' | 'ore-accordion-item' | 'ore-alert' | 'ore-async' | 'ore-avatar' | 'ore-avatar-group' | 'ore-badge' | 'ore-box' | 'ore-breadcrumb' | 'ore-breadcrumb-item' | 'ore-button' | 'ore-button-group' | 'ore-calendar' | 'ore-card' | 'ore-carousel' | 'ore-carousel-slide' | 'ore-chat-message' | 'ore-checkbox' | 'ore-checkbox-group' | 'ore-chip' | 'ore-code-window' | 'ore-column' | 'ore-combobox' | 'ore-combobox-option' | 'ore-command-palette' | 'ore-command-palette-item' | 'ore-copy-command' | 'ore-datagrid' | 'ore-date-picker' | 'ore-dialog' | 'ore-drawer' | 'ore-file-input' | 'ore-grid' | 'ore-grid-item' | 'ore-icon' | 'ore-input' | 'ore-list' | 'ore-list-item' | 'ore-marquee' | 'ore-menu' | 'ore-menu-item' | 'ore-menu-separator' | 'ore-message-composer' | 'ore-navbar' | 'ore-navbar-item' | 'ore-navigation-menu' | 'ore-navigation-menu-item' | 'ore-navigation-menu-panel' | 'ore-number-input' | 'ore-otp-input' | 'ore-pagination' | 'ore-password-strength' | 'ore-popover' | 'ore-progress' | 'ore-radio' | 'ore-radio-group' | 'ore-rating' | 'ore-select' | 'ore-separator' | 'ore-sidebar' | 'ore-sidebar-group' | 'ore-sidebar-item' | 'ore-skeleton' | 'ore-slider' | 'ore-stats' | 'ore-step' | 'ore-stepper' | 'ore-switch' | 'ore-tab-item' | 'ore-tab-panel' | 'ore-table' | 'ore-tabs' | 'ore-td' | 'ore-text' | 'ore-textarea' | 'ore-th' | 'ore-time-picker' | 'ore-toast' | 'ore-tooltip' | 'ore-tr' | 'ore-typing-indicator';
+export type RefineElementTag = 'ore-accordion' | 'ore-accordion-item' | 'ore-alert' | 'ore-async' | 'ore-avatar' | 'ore-avatar-group' | 'ore-badge' | 'ore-box' | 'ore-breadcrumb' | 'ore-breadcrumb-item' | 'ore-button' | 'ore-button-group' | 'ore-calendar' | 'ore-card' | 'ore-carousel' | 'ore-carousel-slide' | 'ore-chat-message' | 'ore-checkbox' | 'ore-checkbox-group' | 'ore-chip' | 'ore-code-window' | 'ore-column' | 'ore-combobox' | 'ore-combobox-option' | 'ore-command-palette' | 'ore-command-palette-item' | 'ore-copy-command' | 'ore-counter' | 'ore-datagrid' | 'ore-date-picker' | 'ore-dialog' | 'ore-drawer' | 'ore-file-input' | 'ore-grid' | 'ore-grid-item' | 'ore-icon' | 'ore-input' | 'ore-keyboard-key' | 'ore-keyboard-shortcut' | 'ore-list' | 'ore-list-item' | 'ore-marquee' | 'ore-menu' | 'ore-menu-item' | 'ore-menu-separator' | 'ore-message-composer' | 'ore-navbar' | 'ore-navbar-item' | 'ore-navigation-menu' | 'ore-navigation-menu-item' | 'ore-navigation-menu-panel' | 'ore-number-input' | 'ore-otp-input' | 'ore-pagination' | 'ore-password-strength' | 'ore-popover' | 'ore-progress' | 'ore-qr-code' | 'ore-qr-scanner' | 'ore-radio' | 'ore-radio-group' | 'ore-rating' | 'ore-select' | 'ore-separator' | 'ore-sidebar' | 'ore-sidebar-group' | 'ore-sidebar-item' | 'ore-skeleton' | 'ore-slider' | 'ore-stats' | 'ore-step' | 'ore-stepper' | 'ore-switch' | 'ore-tab-item' | 'ore-tab-panel' | 'ore-table' | 'ore-tabs' | 'ore-td' | 'ore-text' | 'ore-textarea' | 'ore-th' | 'ore-time-picker' | 'ore-toast' | 'ore-tooltip' | 'ore-tr' | 'ore-typing-indicator';
 export type RefineElementMap = Pick<HTMLElementTagNameMap, RefineElementTag>;

package/dist/inputs/button/button.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--_gap,var(--size-2));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));text-decoration:none;display:flex;position:relative}[part=button]:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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)){border-right-width:var(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader: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)){border-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--button-gap,var(--_gap,var(--size-2)));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--button-padding,var(--_padding,var(--size-2) var(--size-4)));font-size:var(--button-font-size,var(--_font-size,var(--text-sm)));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));text-decoration:none;display:flex;position:relative}[part=button]:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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)){border-right-width:var(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader: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)){border-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}`;exports.default=e;
 //# sourceMappingURL=button.css.cjs.map

package/dist/inputs/button/button.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.css.cjs","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--_padding, var(--size-2) var(--size-4));\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n     (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n     external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n     without moving the visible button surface at all. Both declarations are needed. */\n  :host([fullheight]) {\n    display: flex;\n    height: 100%;\n  }\n\n  :host([fullheight]) [part='button'] {\n    height: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover,\n  [part='button']:active {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* ...nor on :active — stay borderless even though the shared rule above now\n     adds a halo to :active too (physical press transform below still applies,\n     this only cancels border-color/box-shadow). */\n  :host([variant='ghost']) [part='button']:active,\n  :host([variant='text']) [part='button']:active {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button.css.cjs","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--button-gap, var(--_gap, var(--size-2)));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--button-padding, var(--_padding, var(--size-2) var(--size-4)));\n    font-size: var(--button-font-size, var(--_font-size, var(--text-sm)));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n     (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n     external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n     without moving the visible button surface at all. Both declarations are needed. */\n  :host([fullheight]) {\n    display: flex;\n    height: 100%;\n  }\n\n  :host([fullheight]) [part='button'] {\n    height: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover,\n  [part='button']:active {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* ...nor on :active — stay borderless even though the shared rule above now\n     adds a halo to :active too (physical press transform below still applies,\n     this only cancels border-color/box-shadow). */\n  :host([variant='ghost']) [part='button']:active,\n  :host([variant='text']) [part='button']:active {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}

package/dist/inputs/button/button.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/button/button.css?inline
-var e = "@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--_gap,var(--size-2));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));text-decoration:none;display:flex;position:relative}[part=button]:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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)){border-right-width:var(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader: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)){border-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}";
+var e = "@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--button-gap,var(--_gap,var(--size-2)));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--button-padding,var(--_padding,var(--size-2) var(--size-4)));font-size:var(--button-font-size,var(--_font-size,var(--text-sm)));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));text-decoration:none;display:flex;position:relative}[part=button]:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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)){border-right-width:var(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader: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)){border-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}";
 //#endregion
 export { e as default };
 

package/dist/inputs/button/button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.css.js","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--_padding, var(--size-2) var(--size-4));\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n     (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n     external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n     without moving the visible button surface at all. Both declarations are needed. */\n  :host([fullheight]) {\n    display: flex;\n    height: 100%;\n  }\n\n  :host([fullheight]) [part='button'] {\n    height: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover,\n  [part='button']:active {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* ...nor on :active — stay borderless even though the shared rule above now\n     adds a halo to :active too (physical press transform below still applies,\n     this only cancels border-color/box-shadow). */\n  :host([variant='ghost']) [part='button']:active,\n  :host([variant='text']) [part='button']:active {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button.css.js","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--button-gap, var(--_gap, var(--size-2)));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--button-padding, var(--_padding, var(--size-2) var(--size-4)));\n    font-size: var(--button-font-size, var(--_font-size, var(--text-sm)));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n     (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n     external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n     without moving the visible button surface at all. Both declarations are needed. */\n  :host([fullheight]) {\n    display: flex;\n    height: 100%;\n  }\n\n  :host([fullheight]) [part='button'] {\n    height: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover,\n  [part='button']:active {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* ...nor on :active — stay borderless even though the shared rule above now\n     adds a halo to :active too (physical press transform below still applies,\n     this only cancels border-color/box-shadow). */\n  :host([variant='ghost']) [part='button']:active,\n  :host([variant='text']) [part='button']:active {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}

package/dist/inputs/combobox/combobox.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_dropdown-bg:var(--combobox-dropdown-bg,var(--color-canvas));--_dropdown-border-color:var(--combobox-dropdown-border-color,var(--color-contrast-200));--_option-hover-bg:var(--combobox-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--combobox-option-focus-bg,color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100)));--_option-selected-bg:var(--combobox-option-selected-bg,color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50)));--_option-selected-focus-bg:var(--combobox-option-selected-focus-bg,color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100)));min-width:var(--combobox-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}:host([fullwidth]){width:100%;display:block}.trigger::part(input){cursor:text}.trigger::part(field){height:auto;min-height:var(--input-height,var(--size-10))}.trigger::part(input-row){row-gap:var(--size-1);flex-wrap:wrap;align-items:center}.chips-row,.chips-list{display:contents}ore-chip:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:var(--size-1)}ore-chip: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)){margin-left:var(--size-1)}.combobox-suffix{gap:var(--size-1);flex-shrink:0;align-items:center;display:flex}.clear-btn{color:var(--color-contrast-400);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.clear-btn[hidden]{display:none}.clear-btn:hover{color:var(--color-contrast-600)}.combobox-suffix-end{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.chevron{transition:var(--_motion-transition,transform var(--transition-fast));flex-shrink:0;align-items:center;display:inline-flex}:host([open]) .chevron{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader: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)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;max-height:min(16rem,50dvh);padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;scrollbar-width:thin;background:var(--_dropdown-bg);border:var(--border) solid var(--_dropdown-border-color);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);margin:0;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.dropdown:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:not(:is(.option-check,.option-icon)){text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.disabled-reason:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.option:hover:not([data-disabled]){background:var(--_option-hover-bg)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:var(--_option-focus-bg)}.option[data-selected],.option[aria-selected=true]{font-weight:var(--font-medium);color:var(--_theme-base);background:var(--_option-selected-bg)}.option[data-selected][data-focused],.option[aria-selected=true][data-focused]{background:var(--_option-selected-focus-bg)}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check,.option[aria-selected=true] .option-check{opacity:1}.no-results,.no-results-create,.dropdown-loading{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.no-results-create{gap:var(--size-1-5);width:100%;padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);color:var(--_theme-content,var(--color-primary-content));cursor:pointer;border-radius:var(--rounded-sm);background:0 0;border:0;align-items:center;display:flex}.no-results-create:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.no-results-create:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.no-results-create:hover,.no-results-create[data-focused]{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 10%, transparent)}.option-icon{flex-shrink:0;align-items:center;display:inline-flex}::slotted(ore-combobox-option){display:none}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_dropdown-bg:var(--combobox-dropdown-bg,var(--color-canvas));--_dropdown-border-color:var(--combobox-dropdown-border-color,var(--color-contrast-200));--_option-hover-bg:var(--combobox-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--combobox-option-focus-bg,color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100)));--_option-selected-bg:var(--combobox-option-selected-bg,color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50)));--_option-selected-focus-bg:var(--combobox-option-selected-focus-bg,color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100)));min-width:var(--combobox-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}:host([fullwidth]){width:100%;min-width:0;display:block}.trigger::part(input){cursor:text}.trigger::part(field){height:auto;min-height:var(--input-height,var(--size-10))}.trigger::part(input-row){row-gap:var(--size-1);flex-wrap:wrap;align-items:center}.chips-row,.chips-list{display:contents}ore-chip:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:var(--size-1)}ore-chip: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)){margin-left:var(--size-1)}.combobox-suffix{gap:var(--size-1);flex-shrink:0;align-items:center;display:flex}.clear-btn{color:var(--color-contrast-400);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.clear-btn[hidden]{display:none}.clear-btn:hover{color:var(--color-contrast-600)}.combobox-suffix-end{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.chevron{transition:var(--_motion-transition,transform var(--transition-fast));flex-shrink:0;align-items:center;display:inline-flex}:host([open]) .chevron{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader: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)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;max-height:min(16rem,50dvh);padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;scrollbar-width:thin;background:var(--_dropdown-bg);border:var(--border) solid var(--_dropdown-border-color);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);margin:0;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.dropdown:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:not(:is(.option-check,.option-icon)){text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.disabled-reason:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.option:hover:not([data-disabled]){background:var(--_option-hover-bg)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:var(--_option-focus-bg)}.option[data-selected],.option[aria-selected=true]{font-weight:var(--font-medium);color:var(--_theme-base);background:var(--_option-selected-bg)}.option[data-selected][data-focused],.option[aria-selected=true][data-focused]{background:var(--_option-selected-focus-bg)}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check,.option[aria-selected=true] .option-check{opacity:1}.no-results,.no-results-create,.dropdown-loading{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.no-results-create{gap:var(--size-1-5);width:100%;padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);color:var(--_theme-content,var(--color-primary-content));cursor:pointer;border-radius:var(--rounded-sm);background:0 0;border:0;align-items:center;display:flex}.no-results-create:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.no-results-create:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.no-results-create:hover,.no-results-create[data-focused]{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 10%, transparent)}.option-icon{flex-shrink:0;align-items:center;display:inline-flex}::slotted(ore-combobox-option){display:none}}`;exports.default=e;
 //# sourceMappingURL=combobox.css.cjs.map

package/dist/inputs/combobox/combobox.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.css.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_dropdown-bg: var(--combobox-dropdown-bg, var(--color-canvas));\n    --_dropdown-border-color: var(--combobox-dropdown-border-color, var(--color-contrast-200));\n    --_option-hover-bg: var(--combobox-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --combobox-option-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))\n    );\n    --_option-selected-bg: var(\n      --combobox-option-selected-bg,\n      color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))\n    );\n    --_option-selected-focus-bg: var(\n      --combobox-option-selected-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))\n    );\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--combobox-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in combobox.ts) */\n\n  /* ore-input cursor override so the field still feels like a text input */\n  .trigger::part(input) {\n    cursor: text;\n  }\n\n  /* Allow the field to grow vertically when chips wrap to multiple rows. */\n  .trigger::part(field) {\n    height: auto;\n    min-height: var(--input-height, var(--size-10));\n  }\n\n  /* Wrap chips + input across rows; suffix stays on same row as input.\n     Only row-gap is set here — column spacing between chips is handled\n     via margin on ore-chip so the empty prefix slot adds no extra offset\n     (which would shift the input rightward vs the inset label). */\n  .trigger::part(input-row) {\n    flex-wrap: wrap;\n    row-gap: var(--size-1);\n    align-items: center;\n  }\n\n  /* ========================================\n       Chips (prefix slot)\n       ======================================== */\n\n  /* display:contents removes chips-row from the flex layout so chips\n     become direct flex items of input-row — no extra gap before input\n     when there are no chips (fixes inset-label alignment). */\n  .chips-row {\n    display: contents;\n  }\n\n  /* chips-list is also display:contents so individual ore-chip elements\n     are the direct flex items, wrapping inline with the search input. */\n  .chips-list {\n    display: contents;\n  }\n\n  /* Trailing space after each chip covers both inter-chip spacing and\n     the gap between the last chip and the search input. */\n  ore-chip {\n    margin-inline-end: var(--size-1);\n  }\n\n  /* ========================================\n       Suffix: clear button + loader + chevron\n       ======================================== */\n\n  .combobox-suffix {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .clear-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    padding: 0;\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: none;\n    border: 0;\n  }\n\n  .clear-btn[hidden] {\n    display: none;\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-600);\n  }\n\n  .combobox-suffix-end {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .chevron {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown / Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    max-height: min(16rem, 50dvh);\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    scrollbar-width: thin;\n    background: var(--_dropdown-bg);\n    border: var(--border) solid var(--_dropdown-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels so options always stay single-line (fixed virtualizer row height). */\n  .option > span:not(.option-check, .option-icon) {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .disabled-reason {\n    flex: 0 1 45%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--text-color-tertiary);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: var(--_option-focus-bg);\n  }\n\n  .option[data-selected],\n  .option[aria-selected='true'] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: var(--_option-selected-bg);\n  }\n\n  .option[data-selected][data-focused],\n  .option[aria-selected='true'][data-focused] {\n    background: var(--_option-selected-focus-bg);\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-500);\n    cursor: not-allowed;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check,\n  .option[aria-selected='true'] .option-check {\n    opacity: 1;\n  }\n\n  .no-results,\n  .no-results-create,\n  .dropdown-loading {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .no-results-create {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: 100%;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--_theme-content, var(--color-primary-content));\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--rounded-sm);\n  }\n\n  .no-results-create:hover,\n  .no-results-create[data-focused] {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 10%, transparent);\n  }\n\n  /* ========================================\n       Option Icon\n       ======================================== */\n\n  .option-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  /* ========================================\n       Slotted option elements (hidden data nodes)\n       ======================================== */\n\n  ::slotted(ore-combobox-option) {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"combobox.css.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_dropdown-bg: var(--combobox-dropdown-bg, var(--color-canvas));\n    --_dropdown-border-color: var(--combobox-dropdown-border-color, var(--color-contrast-200));\n    --_option-hover-bg: var(--combobox-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --combobox-option-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))\n    );\n    --_option-selected-bg: var(\n      --combobox-option-selected-bg,\n      color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))\n    );\n    --_option-selected-focus-bg: var(\n      --combobox-option-selected-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))\n    );\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--combobox-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n    min-width: 0;\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in combobox.ts) */\n\n  /* ore-input cursor override so the field still feels like a text input */\n  .trigger::part(input) {\n    cursor: text;\n  }\n\n  /* Allow the field to grow vertically when chips wrap to multiple rows. */\n  .trigger::part(field) {\n    height: auto;\n    min-height: var(--input-height, var(--size-10));\n  }\n\n  /* Wrap chips + input across rows; suffix stays on same row as input.\n     Only row-gap is set here — column spacing between chips is handled\n     via margin on ore-chip so the empty prefix slot adds no extra offset\n     (which would shift the input rightward vs the inset label). */\n  .trigger::part(input-row) {\n    flex-wrap: wrap;\n    row-gap: var(--size-1);\n    align-items: center;\n  }\n\n  /* ========================================\n       Chips (prefix slot)\n       ======================================== */\n\n  /* display:contents removes chips-row from the flex layout so chips\n     become direct flex items of input-row — no extra gap before input\n     when there are no chips (fixes inset-label alignment). */\n  .chips-row {\n    display: contents;\n  }\n\n  /* chips-list is also display:contents so individual ore-chip elements\n     are the direct flex items, wrapping inline with the search input. */\n  .chips-list {\n    display: contents;\n  }\n\n  /* Trailing space after each chip covers both inter-chip spacing and\n     the gap between the last chip and the search input. */\n  ore-chip {\n    margin-inline-end: var(--size-1);\n  }\n\n  /* ========================================\n       Suffix: clear button + loader + chevron\n       ======================================== */\n\n  .combobox-suffix {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .clear-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    padding: 0;\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: none;\n    border: 0;\n  }\n\n  .clear-btn[hidden] {\n    display: none;\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-600);\n  }\n\n  .combobox-suffix-end {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .chevron {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown / Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    max-height: min(16rem, 50dvh);\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    scrollbar-width: thin;\n    background: var(--_dropdown-bg);\n    border: var(--border) solid var(--_dropdown-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels so options always stay single-line (fixed virtualizer row height). */\n  .option > span:not(.option-check, .option-icon) {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .disabled-reason {\n    flex: 0 1 45%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--text-color-tertiary);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: var(--_option-focus-bg);\n  }\n\n  .option[data-selected],\n  .option[aria-selected='true'] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: var(--_option-selected-bg);\n  }\n\n  .option[data-selected][data-focused],\n  .option[aria-selected='true'][data-focused] {\n    background: var(--_option-selected-focus-bg);\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-500);\n    cursor: not-allowed;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check,\n  .option[aria-selected='true'] .option-check {\n    opacity: 1;\n  }\n\n  .no-results,\n  .no-results-create,\n  .dropdown-loading {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .no-results-create {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: 100%;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--_theme-content, var(--color-primary-content));\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--rounded-sm);\n  }\n\n  .no-results-create:hover,\n  .no-results-create[data-focused] {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 10%, transparent);\n  }\n\n  /* ========================================\n       Option Icon\n       ======================================== */\n\n  .option-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  /* ========================================\n       Slotted option elements (hidden data nodes)\n       ======================================== */\n\n  ::slotted(ore-combobox-option) {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/inputs/combobox/combobox.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/combobox/combobox.css?inline
-var e = "@layer refine.base{:host{--_dropdown-bg:var(--combobox-dropdown-bg,var(--color-canvas));--_dropdown-border-color:var(--combobox-dropdown-border-color,var(--color-contrast-200));--_option-hover-bg:var(--combobox-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--combobox-option-focus-bg,color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100)));--_option-selected-bg:var(--combobox-option-selected-bg,color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50)));--_option-selected-focus-bg:var(--combobox-option-selected-focus-bg,color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100)));min-width:var(--combobox-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}:host([fullwidth]){width:100%;display:block}.trigger::part(input){cursor:text}.trigger::part(field){height:auto;min-height:var(--input-height,var(--size-10))}.trigger::part(input-row){row-gap:var(--size-1);flex-wrap:wrap;align-items:center}.chips-row,.chips-list{display:contents}ore-chip:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:var(--size-1)}ore-chip: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)){margin-left:var(--size-1)}.combobox-suffix{gap:var(--size-1);flex-shrink:0;align-items:center;display:flex}.clear-btn{color:var(--color-contrast-400);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.clear-btn[hidden]{display:none}.clear-btn:hover{color:var(--color-contrast-600)}.combobox-suffix-end{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.chevron{transition:var(--_motion-transition,transform var(--transition-fast));flex-shrink:0;align-items:center;display:inline-flex}:host([open]) .chevron{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader: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)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;max-height:min(16rem,50dvh);padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;scrollbar-width:thin;background:var(--_dropdown-bg);border:var(--border) solid var(--_dropdown-border-color);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);margin:0;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.dropdown:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:not(:is(.option-check,.option-icon)){text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.disabled-reason:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.option:hover:not([data-disabled]){background:var(--_option-hover-bg)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:var(--_option-focus-bg)}.option[data-selected],.option[aria-selected=true]{font-weight:var(--font-medium);color:var(--_theme-base);background:var(--_option-selected-bg)}.option[data-selected][data-focused],.option[aria-selected=true][data-focused]{background:var(--_option-selected-focus-bg)}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check,.option[aria-selected=true] .option-check{opacity:1}.no-results,.no-results-create,.dropdown-loading{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.no-results-create{gap:var(--size-1-5);width:100%;padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);color:var(--_theme-content,var(--color-primary-content));cursor:pointer;border-radius:var(--rounded-sm);background:0 0;border:0;align-items:center;display:flex}.no-results-create:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.no-results-create:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.no-results-create:hover,.no-results-create[data-focused]{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 10%, transparent)}.option-icon{flex-shrink:0;align-items:center;display:inline-flex}::slotted(ore-combobox-option){display:none}}";
+var e = "@layer refine.base{:host{--_dropdown-bg:var(--combobox-dropdown-bg,var(--color-canvas));--_dropdown-border-color:var(--combobox-dropdown-border-color,var(--color-contrast-200));--_option-hover-bg:var(--combobox-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--combobox-option-focus-bg,color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100)));--_option-selected-bg:var(--combobox-option-selected-bg,color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50)));--_option-selected-focus-bg:var(--combobox-option-selected-focus-bg,color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100)));min-width:var(--combobox-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}:host([fullwidth]){width:100%;min-width:0;display:block}.trigger::part(input){cursor:text}.trigger::part(field){height:auto;min-height:var(--input-height,var(--size-10))}.trigger::part(input-row){row-gap:var(--size-1);flex-wrap:wrap;align-items:center}.chips-row,.chips-list{display:contents}ore-chip:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:var(--size-1)}ore-chip: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)){margin-left:var(--size-1)}.combobox-suffix{gap:var(--size-1);flex-shrink:0;align-items:center;display:flex}.clear-btn{color:var(--color-contrast-400);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.clear-btn[hidden]{display:none}.clear-btn:hover{color:var(--color-contrast-600)}.combobox-suffix-end{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.chevron{transition:var(--_motion-transition,transform var(--transition-fast));flex-shrink:0;align-items:center;display:inline-flex}:host([open]) .chevron{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader: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)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;max-height:min(16rem,50dvh);padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;scrollbar-width:thin;background:var(--_dropdown-bg);border:var(--border) solid var(--_dropdown-border-color);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);margin:0;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.dropdown:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:not(:is(.option-check,.option-icon)){text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.disabled-reason:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.option:hover:not([data-disabled]){background:var(--_option-hover-bg)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:var(--_option-focus-bg)}.option[data-selected],.option[aria-selected=true]{font-weight:var(--font-medium);color:var(--_theme-base);background:var(--_option-selected-bg)}.option[data-selected][data-focused],.option[aria-selected=true][data-focused]{background:var(--_option-selected-focus-bg)}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check,.option[aria-selected=true] .option-check{opacity:1}.no-results,.no-results-create,.dropdown-loading{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.no-results-create{gap:var(--size-1-5);width:100%;padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);color:var(--_theme-content,var(--color-primary-content));cursor:pointer;border-radius:var(--rounded-sm);background:0 0;border:0;align-items:center;display:flex}.no-results-create:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.no-results-create:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.no-results-create:hover,.no-results-create[data-focused]{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 10%, transparent)}.option-icon{flex-shrink:0;align-items:center;display:inline-flex}::slotted(ore-combobox-option){display:none}}";
 //#endregion
 export { e as default };