@vielzeug/refine 3.3.0 → 3.3.1

package/dist/feedback/alert/alert.d.ts

@@ -12,6 +12,12 @@ export type OreAlertProps = {
     color?: ThemeColor;
     /** Show a dismissible (×) button */
     dismissible?: boolean;
+    /**
+     * Render as a passive surface inside a host that owns lifecycle and
+     * announcements (for example `ore-toast`): no live-region role, and the
+     * close button only emits `dismiss` instead of hiding the alert.
+     */
+    embedded?: boolean;
     /** Heading text shown above the content */
     heading?: string;
     /** Position action buttons to the right instead of below */
@@ -34,10 +40,11 @@ export type OreAlertProps = {
  * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
  * @attr {string} heading - Bold heading text above the content
  * @attr {boolean} dismissible - Show a close (×) button
+ * @attr {boolean} embedded - Passive surface for a host that owns lifecycle and announcements; the close button only emits `dismiss`
  * @attr {boolean} accented - Add a left accent border (flat/bordered only)
  * @attr {boolean} horizontal - Position action buttons to the right instead of below
  *
- * @fires dismiss - Fired when the alert is dismissed. detail: { originalEvent: MouseEvent }
+ * @fires dismiss - Fired when the alert is dismissed (after the exit animation, or immediately when `embedded`). detail: { originalEvent: MouseEvent }
  *
  * @slot - Default slot for the alert message content
  * @slot icon - Icon on the left side

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/feedback/alert/alert.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,yBAAyB,CAAC;AAajC,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE;QAAE,aAAa,EAAE,UAAU,CAAA;KAAE,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/feedback/alert/alert.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,yBAAyB,CAAC;AAajC,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE;QAAE,aAAa,EAAE,UAAU,CAAA;KAAE,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,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/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 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.css.js","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.js","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/date-picker/date-picker.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--date-picker-day-outside-opacity,.35);--_bg:var(--date-picker-bg,var(--color-canvas));--_border-color:var(--date-picker-border-color,var(--color-contrast-200));--_radius:var(--date-picker-radius,var(--rounded-xl));min-width:var(--date-picker-min-width,12rem);display:inline-block}:host([fullwidth]){display:block}:host([color=secondary]){--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-base));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-base))}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.calendar{z-index:var(--z-dropdown,8000);gap:var(--size-2);min-width:18rem;padding:var(--size-3);pointer-events:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--date-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));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);flex-direction:column;display:flex;position:fixed;inset:0 auto auto 0}.calendar[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.calendar[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover{color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover{background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}.cal-grid[hidden]{display:none}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,1fr);display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{height:var(--size-8);color:var(--color-contrast-800)}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.field,.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--date-picker-day-outside-opacity,.35);--_bg:var(--date-picker-bg,var(--color-canvas));--_border-color:var(--date-picker-border-color,var(--color-contrast-200));--_radius:var(--date-picker-radius,var(--rounded-xl));min-width:var(--date-picker-min-width,12rem);display:inline-block}:host([fullwidth]){min-width:0;display:block}:host([color=secondary]){--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-base));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-base))}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.calendar{z-index:var(--z-dropdown,8000);gap:var(--size-2);min-width:18rem;padding:var(--size-3);pointer-events:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--date-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));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);flex-direction:column;display:flex;position:fixed;inset:0 auto auto 0}.calendar[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.calendar[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover{color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover{background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}.cal-grid[hidden]{display:none}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,1fr);display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{height:var(--size-8);color:var(--color-contrast-800)}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.field,.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}`;exports.default=e;
 //# sourceMappingURL=date-picker.css.cjs.map

package/dist/inputs/date-picker/date-picker.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.css.cjs","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n    --_bg: var(--date-picker-bg, var(--color-canvas));\n    --_border-color: var(--date-picker-border-color, var(--color-contrast-200));\n    --_radius: var(--date-picker-radius, var(--rounded-xl));\n\n    display: inline-block;\n    min-width: var(--date-picker-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n  }\n\n  /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by\n     default. `width: 100%` matters just as much — see ore-select's own `.trigger` for why:\n     `:host` is `display: inline-block`, which never stretches its own children to fill its own\n     box the way a flex/grid container with `stretch` alignment would. */\n  .trigger {\n    width: 100%;\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n  /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n     date-picker.ts), same as ore-select's own `.dropdown`. Laid out relative to the viewport,\n     so it never affects any ancestor's box size or scrollable-overflow area — `absolute`\n     positioned relative to the host did, once the host sat near a scroll/clip ancestor's edge. */\n  .calendar {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 8000);\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    pointer-events: none;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\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  .calendar[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  /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n  .cal-header {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    justify-content: space-between;\n    padding-block-end: var(--size-2);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .nav-btn:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-300);\n  }\n\n  .nav-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-btn {\n    flex: 1;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .cal-label-btn:hover {\n    background: var(--color-contrast-300);\n  }\n\n  .cal-label-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-month,\n  .cal-label-year {\n    display: inline-block;\n  }\n\n  .cal-label-sep {\n    display: inline-block;\n    padding-inline: var(--size-1);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n  /* Prevent display:flex from overriding the [hidden] attribute */\n  .cal-grid[hidden] {\n    display: none;\n  }\n\n  .cal-grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n  }\n\n  .cal-grid-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--size-0-5);\n    min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n  }\n\n  /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n     removes them from layout so their children still participate directly in the\n     parent's CSS grid tracks. */\n  .cal-grid [role='row'] {\n    display: contents;\n  }\n\n  .cal-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--text-sm);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .cal-cell-head {\n    height: var(--size-8);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: default;\n  }\n\n  .cal-cell-day {\n    height: var(--size-8);\n    color: var(--color-contrast-800);\n  }\n\n  .cal-cell-day:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-day:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-today] {\n    font-weight: var(--font-semibold);\n    color: var(--_day-today-color);\n  }\n\n  .cal-cell-day[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-outside] {\n    opacity: var(--_day-outside-opacity);\n  }\n\n  .cal-cell-day[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n  .cal-grid-months,\n  .cal-grid-years {\n    /* 4-column grid — same width as cal-grid-days, natural height. */\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--size-1);\n  }\n\n  .cal-cell-month,\n  .cal-cell-year {\n    height: var(--size-10);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .cal-cell-month:hover:not([data-disabled]),\n  .cal-cell-year:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-month:focus-visible,\n  .cal-cell-year:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-selected],\n  .cal-cell-year[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-disabled],\n  .cal-cell-year[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field,\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"date-picker.css.cjs","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n    --_bg: var(--date-picker-bg, var(--color-canvas));\n    --_border-color: var(--date-picker-border-color, var(--color-contrast-200));\n    --_radius: var(--date-picker-radius, var(--rounded-xl));\n\n    display: inline-block;\n    min-width: var(--date-picker-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    min-width: 0;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n  }\n\n  /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by\n     default. `width: 100%` matters just as much — see ore-select's own `.trigger` for why:\n     `:host` is `display: inline-block`, which never stretches its own children to fill its own\n     box the way a flex/grid container with `stretch` alignment would. */\n  .trigger {\n    width: 100%;\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n  /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n     date-picker.ts), same as ore-select's own `.dropdown`. Laid out relative to the viewport,\n     so it never affects any ancestor's box size or scrollable-overflow area — `absolute`\n     positioned relative to the host did, once the host sat near a scroll/clip ancestor's edge. */\n  .calendar {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 8000);\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    pointer-events: none;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\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  .calendar[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  /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n  .cal-header {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    justify-content: space-between;\n    padding-block-end: var(--size-2);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .nav-btn:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-300);\n  }\n\n  .nav-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-btn {\n    flex: 1;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .cal-label-btn:hover {\n    background: var(--color-contrast-300);\n  }\n\n  .cal-label-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-month,\n  .cal-label-year {\n    display: inline-block;\n  }\n\n  .cal-label-sep {\n    display: inline-block;\n    padding-inline: var(--size-1);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n  /* Prevent display:flex from overriding the [hidden] attribute */\n  .cal-grid[hidden] {\n    display: none;\n  }\n\n  .cal-grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n  }\n\n  .cal-grid-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--size-0-5);\n    min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n  }\n\n  /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n     removes them from layout so their children still participate directly in the\n     parent's CSS grid tracks. */\n  .cal-grid [role='row'] {\n    display: contents;\n  }\n\n  .cal-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--text-sm);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .cal-cell-head {\n    height: var(--size-8);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: default;\n  }\n\n  .cal-cell-day {\n    height: var(--size-8);\n    color: var(--color-contrast-800);\n  }\n\n  .cal-cell-day:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-day:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-today] {\n    font-weight: var(--font-semibold);\n    color: var(--_day-today-color);\n  }\n\n  .cal-cell-day[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-outside] {\n    opacity: var(--_day-outside-opacity);\n  }\n\n  .cal-cell-day[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n  .cal-grid-months,\n  .cal-grid-years {\n    /* 4-column grid — same width as cal-grid-days, natural height. */\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--size-1);\n  }\n\n  .cal-cell-month,\n  .cal-cell-year {\n    height: var(--size-10);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .cal-cell-month:hover:not([data-disabled]),\n  .cal-cell-year:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-month:focus-visible,\n  .cal-cell-year:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-selected],\n  .cal-cell-year[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-disabled],\n  .cal-cell-year[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field,\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/date-picker/date-picker.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/date-picker/date-picker.css?inline
-var e = "@layer refine.base{:host{--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--date-picker-day-outside-opacity,.35);--_bg:var(--date-picker-bg,var(--color-canvas));--_border-color:var(--date-picker-border-color,var(--color-contrast-200));--_radius:var(--date-picker-radius,var(--rounded-xl));min-width:var(--date-picker-min-width,12rem);display:inline-block}:host([fullwidth]){display:block}:host([color=secondary]){--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-base));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-base))}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.calendar{z-index:var(--z-dropdown,8000);gap:var(--size-2);min-width:18rem;padding:var(--size-3);pointer-events:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--date-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));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);flex-direction:column;display:flex;position:fixed;inset:0 auto auto 0}.calendar[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.calendar[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover{color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover{background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}.cal-grid[hidden]{display:none}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,1fr);display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{height:var(--size-8);color:var(--color-contrast-800)}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.field,.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}";
+var e = "@layer refine.base{:host{--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-focus));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-focus));--_day-outside-opacity:var(--date-picker-day-outside-opacity,.35);--_bg:var(--date-picker-bg,var(--color-canvas));--_border-color:var(--date-picker-border-color,var(--color-contrast-200));--_radius:var(--date-picker-radius,var(--rounded-xl));min-width:var(--date-picker-min-width,12rem);display:inline-block}:host([fullwidth]){min-width:0;display:block}:host([color=secondary]){--_day-selected-bg:var(--date-picker-day-selected-bg,var(--_theme-base));--_day-today-color:var(--date-picker-day-today-color,var(--_theme-base))}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.calendar{z-index:var(--z-dropdown,8000);gap:var(--size-2);min-width:18rem;padding:var(--size-3);pointer-events:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--date-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));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);flex-direction:column;display:flex;position:fixed;inset:0 auto auto 0}.calendar[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.calendar[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cal-header{gap:var(--size-1);border-bottom:var(--border) solid var(--_border-color);padding-bottom:var(--size-2);justify-content:space-between;align-items:center;display:flex}.nav-btn{width:var(--size-8);height:var(--size-8);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.nav-btn:hover{color:var(--color-contrast-900);background:var(--color-contrast-300)}.nav-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-btn{padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast);background:0 0;border:none;outline:none;flex:1}.cal-label-btn:hover{background:var(--color-contrast-300)}.cal-label-btn:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-label-month,.cal-label-year{display:inline-block}.cal-label-sep{padding-inline:var(--size-1);font-weight:var(--font-normal);color:var(--color-contrast-400);display:inline-block}.cal-grid[hidden]{display:none}.cal-grid{gap:var(--size-0-5);flex-direction:column;display:flex}.cal-grid-days{gap:var(--size-0-5);min-height:calc(7 * var(--size-10) + 6 * var(--size-0-5));grid-template-columns:repeat(7,1fr);display:grid}.cal-grid [role=row]{display:contents}.cal-cell{font-size:var(--text-sm);cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.cal-cell-head{height:var(--size-8);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:default}.cal-cell-day{height:var(--size-8);color:var(--color-contrast-800)}.cal-cell-day:hover:not([data-disabled]){color:var(--color-contrast-900);background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-day:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-day[data-today]{font-weight:var(--font-semibold);color:var(--_day-today-color)}.cal-cell-day[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-day[data-outside]{opacity:var(--_day-outside-opacity)}.cal-cell-day[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}.cal-grid-months,.cal-grid-years{gap:var(--size-1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cal-cell-month,.cal-cell-year{height:var(--size-10);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-md)}.cal-cell-month:hover:not([data-disabled]),.cal-cell-year:hover:not([data-disabled]){background:color-mix(in oklch, var(--_day-selected-bg) 15%, transparent)}.cal-cell-month:focus-visible,.cal-cell-year:focus-visible{box-shadow:0 0 0 2px var(--_day-selected-bg)}.cal-cell-month[data-selected],.cal-cell-year[data-selected]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_day-selected-bg)}.cal-cell-month[data-disabled],.cal-cell-year[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.field,.nav-btn,.cal-label-btn,.cal-cell{transition:none}}}";
 //#endregion
 export { e as default };
 

package/dist/inputs/date-picker/date-picker.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.css.js","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n    --_bg: var(--date-picker-bg, var(--color-canvas));\n    --_border-color: var(--date-picker-border-color, var(--color-contrast-200));\n    --_radius: var(--date-picker-radius, var(--rounded-xl));\n\n    display: inline-block;\n    min-width: var(--date-picker-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n  }\n\n  /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by\n     default. `width: 100%` matters just as much — see ore-select's own `.trigger` for why:\n     `:host` is `display: inline-block`, which never stretches its own children to fill its own\n     box the way a flex/grid container with `stretch` alignment would. */\n  .trigger {\n    width: 100%;\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n  /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n     date-picker.ts), same as ore-select's own `.dropdown`. Laid out relative to the viewport,\n     so it never affects any ancestor's box size or scrollable-overflow area — `absolute`\n     positioned relative to the host did, once the host sat near a scroll/clip ancestor's edge. */\n  .calendar {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 8000);\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    pointer-events: none;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\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  .calendar[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  /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n  .cal-header {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    justify-content: space-between;\n    padding-block-end: var(--size-2);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .nav-btn:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-300);\n  }\n\n  .nav-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-btn {\n    flex: 1;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .cal-label-btn:hover {\n    background: var(--color-contrast-300);\n  }\n\n  .cal-label-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-month,\n  .cal-label-year {\n    display: inline-block;\n  }\n\n  .cal-label-sep {\n    display: inline-block;\n    padding-inline: var(--size-1);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n  /* Prevent display:flex from overriding the [hidden] attribute */\n  .cal-grid[hidden] {\n    display: none;\n  }\n\n  .cal-grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n  }\n\n  .cal-grid-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--size-0-5);\n    min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n  }\n\n  /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n     removes them from layout so their children still participate directly in the\n     parent's CSS grid tracks. */\n  .cal-grid [role='row'] {\n    display: contents;\n  }\n\n  .cal-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--text-sm);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .cal-cell-head {\n    height: var(--size-8);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: default;\n  }\n\n  .cal-cell-day {\n    height: var(--size-8);\n    color: var(--color-contrast-800);\n  }\n\n  .cal-cell-day:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-day:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-today] {\n    font-weight: var(--font-semibold);\n    color: var(--_day-today-color);\n  }\n\n  .cal-cell-day[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-outside] {\n    opacity: var(--_day-outside-opacity);\n  }\n\n  .cal-cell-day[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n  .cal-grid-months,\n  .cal-grid-years {\n    /* 4-column grid — same width as cal-grid-days, natural height. */\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--size-1);\n  }\n\n  .cal-cell-month,\n  .cal-cell-year {\n    height: var(--size-10);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .cal-cell-month:hover:not([data-disabled]),\n  .cal-cell-year:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-month:focus-visible,\n  .cal-cell-year:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-selected],\n  .cal-cell-year[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-disabled],\n  .cal-cell-year[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field,\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"date-picker.css.js","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n    --_bg: var(--date-picker-bg, var(--color-canvas));\n    --_border-color: var(--date-picker-border-color, var(--color-contrast-200));\n    --_radius: var(--date-picker-radius, var(--rounded-xl));\n\n    display: inline-block;\n    min-width: var(--date-picker-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    min-width: 0;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n  }\n\n  /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by\n     default. `width: 100%` matters just as much — see ore-select's own `.trigger` for why:\n     `:host` is `display: inline-block`, which never stretches its own children to fill its own\n     box the way a flex/grid container with `stretch` alignment would. */\n  .trigger {\n    width: 100%;\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n  /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n     date-picker.ts), same as ore-select's own `.dropdown`. Laid out relative to the viewport,\n     so it never affects any ancestor's box size or scrollable-overflow area — `absolute`\n     positioned relative to the host did, once the host sat near a scroll/clip ancestor's edge. */\n  .calendar {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 8000);\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    pointer-events: none;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\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  .calendar[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  /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n  .cal-header {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    justify-content: space-between;\n    padding-block-end: var(--size-2);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .nav-btn:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-300);\n  }\n\n  .nav-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-btn {\n    flex: 1;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .cal-label-btn:hover {\n    background: var(--color-contrast-300);\n  }\n\n  .cal-label-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-month,\n  .cal-label-year {\n    display: inline-block;\n  }\n\n  .cal-label-sep {\n    display: inline-block;\n    padding-inline: var(--size-1);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n  /* Prevent display:flex from overriding the [hidden] attribute */\n  .cal-grid[hidden] {\n    display: none;\n  }\n\n  .cal-grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n  }\n\n  .cal-grid-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--size-0-5);\n    min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n  }\n\n  /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n     removes them from layout so their children still participate directly in the\n     parent's CSS grid tracks. */\n  .cal-grid [role='row'] {\n    display: contents;\n  }\n\n  .cal-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--text-sm);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .cal-cell-head {\n    height: var(--size-8);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: default;\n  }\n\n  .cal-cell-day {\n    height: var(--size-8);\n    color: var(--color-contrast-800);\n  }\n\n  .cal-cell-day:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-day:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-today] {\n    font-weight: var(--font-semibold);\n    color: var(--_day-today-color);\n  }\n\n  .cal-cell-day[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-outside] {\n    opacity: var(--_day-outside-opacity);\n  }\n\n  .cal-cell-day[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n  .cal-grid-months,\n  .cal-grid-years {\n    /* 4-column grid — same width as cal-grid-days, natural height. */\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--size-1);\n  }\n\n  .cal-cell-month,\n  .cal-cell-year {\n    height: var(--size-10);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .cal-cell-month:hover:not([data-disabled]),\n  .cal-cell-year:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-month:focus-visible,\n  .cal-cell-year:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-selected],\n  .cal-cell-year[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-disabled],\n  .cal-cell-year[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field,\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/input/input.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_label-block-inset:var(--input-label-block-inset,var(--size-2));--_label-inset:var(--input-label-inset,var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--_label-block-inset);position:absolute}:host(:not([label-placement=outside])) .label: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(--_label-inset)}:host(:not([label-placement=outside])) .label: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(--_label-inset)}:host(:not([label-placement=outside])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--_label-block-inset) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-600);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;min-height:var(--size-6);font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter: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}.char-counter: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}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:none}:host([error]:not([error=""])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;flex-shrink:0;display:none}.field-spinner: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}.field-spinner: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}:host([loading]) .field-spinner{display:inline-block}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{box-shadow:none;background:0 0;border:none;border-radius:0}:host([variant=text]) .field:focus-within{box-shadow:none}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}`;exports.default=e;
+var e=`@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_label-block-inset:var(--input-label-block-inset,var(--size-2));--_label-inset:var(--input-label-inset,var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--_label-block-inset);position:absolute}:host(:not([label-placement=outside])) .label: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(--_label-inset)}:host(:not([label-placement=outside])) .label: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(--_label-inset)}:host(:not([label-placement=outside])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--_label-block-inset) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-600);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;min-height:var(--size-6);text-overflow:ellipsis;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter: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}.char-counter: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}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:none}:host([error]:not([error=""])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;flex-shrink:0;display:none}.field-spinner: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}.field-spinner: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}:host([loading]) .field-spinner{display:inline-block}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{box-shadow:none;background:0 0;border:none;border-radius:0}:host([variant=text]) .field:focus-within{box-shadow:none}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([fullwidth]){width:100%;min-width:0}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}`;exports.default=e;
 //# sourceMappingURL=input.css.cjs.map