@vielzeug/refine 26.10.0 → 26.10.5

package/dist/inputs/button/button.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonType, ComponentSize, LinkTarget, RoundedSize, ThemeColor } from '../../types';
 export declare const BUTTON_VARIANTS: readonly ["solid", "flat", "bordered", "outline", "ghost", "text", "frost"];
-/** Visual variant for ore-button — derived from BUTTON_VARIANTS for a single source of truth. */
+/** Visual variant for ore-button: derived from BUTTON_VARIANTS for a single source of truth. */
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
 /** Animated border effect for ore-button. */
 export type ButtonEffect = 'shine' | 'rainbow';
@@ -13,7 +13,7 @@ export type OreButtonProps = {
     /** Animated border effect: 'shine' (color-aware neon sweep) or 'rainbow' */
     effect?: ButtonEffect;
     /**
-     * Full height button (100% of container) — the inner `[part="button"]` fills its host's
+     * Full height button (100% of container): the inner `[part="button"]` fills its host's
      * height instead of the size preset's fixed height. Useful when the button itself is the
      * whole tappable surface of a container it doesn't otherwise control the size of (e.g. a
      * swipe-revealed row action in `ore-list-item`'s `actions-left`/`actions-right` slots).
@@ -25,7 +25,7 @@ export type OreButtonProps = {
     href?: string;
     /** Icon-only mode (square aspect ratio, no padding) */
     iconOnly?: boolean;
-    /** Accessible label for the inner button — required for icon-only buttons */
+    /** Accessible label for the inner button: required for icon-only buttons */
     label?: string;
     /** Show loading state with spinner */
     loading?: boolean;

package/dist/inputs/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/inputs/button/button.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMlG,eAAO,MAAM,eAAe,6EAA8E,CAAC;AAE3G,iGAAiG;AACjG,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,6CAA6C;AAC7C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/inputs/button/button.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMlG,eAAO,MAAM,eAAe,6EAA8E,CAAC;AAE3G,gGAAgG;AAChG,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,6CAA6C;AAC7C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.css.cjs","names":[],"sources":["../../../src/inputs/calendar/calendar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--calendar-day-outside-opacity, 0.35);\n    --_bg: var(--calendar-bg, var(--color-canvas));\n    --_border-color: var(--calendar-border-color, var(--color-contrast-200));\n    --_radius: var(--calendar-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-base));\n  }\n\n  /* ── Root panel ──────────────────────────────────────────────────────────── */\n\n  .calendar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--calendar-shadow, var(--shadow-md));\n  }\n\n  :host([fullwidth]) .calendar {\n    min-width: 0;\n  }\n\n  /* ── 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:not(:disabled) {\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  .nav-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\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:not(:disabled) {\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-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\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  /* ── Grid base ───────────────────────────────────────────────────────────── */\n\n  [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, minmax(0, 1fr));\n    gap: var(--size-0-5);\n\n    /* Reserve max height (6 week rows + 1 header) so the panel never shrinks\n       on 5-week months or when switching to month/year view. */\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  /* ── Column headers ──────────────────────────────────────────────────────── */\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  /* ── Day cells ───────────────────────────────────────────────────────────── */\n\n  .cal-cell-day {\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n    height: var(--size-10);\n    overflow: hidden;\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  /* ── Event dots (normal mode) ────────────────────────────────────────────── */\n\n  .cal-dots {\n    display: flex;\n    gap: 2px;\n    align-items: center;\n    justify-content: center;\n    margin-block-start: var(--size-0-5);\n  }\n\n  .cal-dot {\n    --badge-bg: var(--_day-selected-bg);\n    --badge-border-color: var(--_day-selected-bg);\n  }\n\n  .cal-dot-overflow {\n    font-size: 8px;\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-500);\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  /* ── Expanded variant ────────────────────────────────────────────────────── */\n\n  :host([expanded]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([expanded]) .calendar {\n    width: 100%;\n    min-width: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-header {\n    padding: var(--size-3) var(--size-4);\n  }\n\n  :host([expanded]) .cal-label-btn {\n    font-size: var(--text-base);\n  }\n\n  :host([expanded]) .cal-grid {\n    gap: 0;\n  }\n\n  :host([expanded]) .cal-grid-days {\n    gap: 0;\n    border-block-start: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell {\n    border-radius: 0;\n  }\n\n  :host([expanded]) .cal-cell-head {\n    height: var(--size-9);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell-day {\n    position: relative;\n    flex-direction: column;\n    gap: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    height: auto;\n    min-height: var(--calendar-expanded-cell-height, var(--size-28));\n    aspect-ratio: auto;\n    padding: var(--size-2);\n    font-size: var(--text-sm);\n    vertical-align: top;\n    border-block-end: var(--border) solid var(--_border-color);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Remove right border on last column */\n  :host([expanded]) .cal-cell-day:nth-child(7n) {\n    border-inline-end: none;\n  }\n\n  :host([expanded]) .cal-cell-day:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 6%, transparent);\n  }\n\n  /* Selected day — circle around the number only */\n  :host([expanded]) .cal-cell-day[data-selected] {\n    color: inherit;\n    background: transparent;\n  }\n\n  :host([expanded]) .cal-cell-day[data-selected]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-selected-bg);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Today — circle in accent colour */\n  :host([expanded]) .cal-cell-day[data-today] {\n    font-weight: inherit;\n    color: inherit;\n  }\n\n  :host([expanded]) .cal-cell-day[data-today]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-today-color);\n    border-radius: var(--rounded-full);\n  }\n\n  /* When both today AND selected — selected wins */\n  :host([expanded]) .cal-cell-day[data-today][data-selected]::before {\n    background: var(--_day-selected-bg);\n  }\n\n  /* ── Expanded event pills ────────────────────────────────────────────────── */\n\n  /* Push events below the day-number circle row */\n  :host([expanded]) .cal-events {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    width: 100%;\n    margin-block-start: var(--size-4);\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-event-pill {\n    --badge-max-width: 100%;\n    max-width: 100%;\n  }\n\n  :host([expanded]) .cal-event-pill-overflow {\n    padding-inline: var(--size-1);\n    font-size: 10px;\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n  }\n\n  /* Dots are hidden in expanded mode — pills take over */\n  :host([expanded]) .cal-dots {\n    display: none;\n  }\n\n  :host([expanded]) .cal-cell-day[data-outside] {\n    background: color-mix(in oklch, var(--color-contrast-900) 2%, transparent);\n  }\n\n  /* Expanded month / year grids */\n  :host([expanded]) .cal-grid-months,\n  :host([expanded]) .cal-grid-years {\n    gap: var(--size-2);\n    min-height: 0;\n    padding: var(--size-4);\n  }\n\n  :host([expanded]) .cal-cell-month,\n  :host([expanded]) .cal-cell-year {\n    min-height: var(--size-16);\n    font-size: var(--text-base);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--rounded-lg);\n  }\n\n  :host([expanded]) .cal-cell-month[data-selected],\n  :host([expanded]) .cal-cell-year[data-selected] {\n    border-color: transparent;\n  }\n\n  /* ── Disabled host ───────────────────────────────────────────────────────── */\n\n  :host(.is-disabled) .calendar {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"calendar.css.cjs","names":[],"sources":["../../../src/inputs/calendar/calendar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--calendar-day-outside-opacity, 0.35);\n    --_bg: var(--calendar-bg, var(--color-canvas));\n    --_border-color: var(--calendar-border-color, var(--color-contrast-200));\n    --_radius: var(--calendar-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-base));\n  }\n\n  /* ── Root panel ──────────────────────────────────────────────────────────── */\n\n  .calendar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--calendar-shadow, var(--shadow-md));\n  }\n\n  :host([fullwidth]) .calendar {\n    min-width: 0;\n  }\n\n  /* ── 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:not(:disabled) {\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  .nav-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\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:not(:disabled) {\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-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\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  /* ── Grid base ───────────────────────────────────────────────────────────── */\n\n  [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, minmax(0, 1fr));\n    gap: var(--size-0-5);\n\n    /* Reserve max height (6 week rows + 1 header) so the panel never shrinks\n       on 5-week months or when switching to month/year view. */\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  /* ── Column headers ──────────────────────────────────────────────────────── */\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  /* ── Day cells ───────────────────────────────────────────────────────────── */\n\n  .cal-cell-day {\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n    height: var(--size-10);\n    overflow: hidden;\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  /* ── Event dots (normal mode) ────────────────────────────────────────────── */\n\n  .cal-dots {\n    display: flex;\n    gap: 2px;\n    align-items: center;\n    justify-content: center;\n    margin-block-start: var(--size-0-5);\n  }\n\n  .cal-dot {\n    --badge-bg: var(--_day-selected-bg);\n    --badge-border-color: var(--_day-selected-bg);\n  }\n\n  .cal-dot-overflow {\n    font-size: 8px;\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-500);\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  /* ── Expanded variant ────────────────────────────────────────────────────── */\n\n  :host([expanded]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([expanded]) .calendar {\n    width: 100%;\n    min-width: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-header {\n    padding: var(--size-3) var(--size-4);\n  }\n\n  :host([expanded]) .cal-label-btn {\n    font-size: var(--text-base);\n  }\n\n  :host([expanded]) .cal-grid {\n    gap: 0;\n  }\n\n  :host([expanded]) .cal-grid-days {\n    gap: 0;\n    border-block-start: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell {\n    border-radius: 0;\n  }\n\n  :host([expanded]) .cal-cell-head {\n    height: var(--size-9);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell-day {\n    position: relative;\n    flex-direction: column;\n    gap: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    height: auto;\n    min-height: var(--calendar-expanded-cell-height, var(--size-28));\n    aspect-ratio: auto;\n    padding: var(--size-2);\n    font-size: var(--text-sm);\n    vertical-align: top;\n    border-block-end: var(--border) solid var(--_border-color);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Remove right border on last column */\n  :host([expanded]) .cal-cell-day:nth-child(7n) {\n    border-inline-end: none;\n  }\n\n  :host([expanded]) .cal-cell-day:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 6%, transparent);\n  }\n\n  /* Selected day: circle around the number only */\n  :host([expanded]) .cal-cell-day[data-selected] {\n    color: inherit;\n    background: transparent;\n  }\n\n  :host([expanded]) .cal-cell-day[data-selected]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-selected-bg);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Today: circle in accent colour */\n  :host([expanded]) .cal-cell-day[data-today] {\n    font-weight: inherit;\n    color: inherit;\n  }\n\n  :host([expanded]) .cal-cell-day[data-today]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-today-color);\n    border-radius: var(--rounded-full);\n  }\n\n  /* When both today AND selected: selected wins */\n  :host([expanded]) .cal-cell-day[data-today][data-selected]::before {\n    background: var(--_day-selected-bg);\n  }\n\n  /* ── Expanded event pills ────────────────────────────────────────────────── */\n\n  /* Push events below the day-number circle row */\n  :host([expanded]) .cal-events {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    width: 100%;\n    margin-block-start: var(--size-4);\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-event-pill {\n    --badge-max-width: 100%;\n    max-width: 100%;\n  }\n\n  :host([expanded]) .cal-event-pill-overflow {\n    padding-inline: var(--size-1);\n    font-size: 10px;\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n  }\n\n  /* Dots are hidden in expanded mode: pills take over */\n  :host([expanded]) .cal-dots {\n    display: none;\n  }\n\n  :host([expanded]) .cal-cell-day[data-outside] {\n    background: color-mix(in oklch, var(--color-contrast-900) 2%, transparent);\n  }\n\n  /* Expanded month / year grids */\n  :host([expanded]) .cal-grid-months,\n  :host([expanded]) .cal-grid-years {\n    gap: var(--size-2);\n    min-height: 0;\n    padding: var(--size-4);\n  }\n\n  :host([expanded]) .cal-cell-month,\n  :host([expanded]) .cal-cell-year {\n    min-height: var(--size-16);\n    font-size: var(--text-base);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--rounded-lg);\n  }\n\n  :host([expanded]) .cal-cell-month[data-selected],\n  :host([expanded]) .cal-cell-year[data-selected] {\n    border-color: transparent;\n  }\n\n  /* ── Disabled host ───────────────────────────────────────────────────────── */\n\n  :host(.is-disabled) .calendar {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.css.js","names":[],"sources":["../../../src/inputs/calendar/calendar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--calendar-day-outside-opacity, 0.35);\n    --_bg: var(--calendar-bg, var(--color-canvas));\n    --_border-color: var(--calendar-border-color, var(--color-contrast-200));\n    --_radius: var(--calendar-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-base));\n  }\n\n  /* ── Root panel ──────────────────────────────────────────────────────────── */\n\n  .calendar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--calendar-shadow, var(--shadow-md));\n  }\n\n  :host([fullwidth]) .calendar {\n    min-width: 0;\n  }\n\n  /* ── 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:not(:disabled) {\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  .nav-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\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:not(:disabled) {\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-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\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  /* ── Grid base ───────────────────────────────────────────────────────────── */\n\n  [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, minmax(0, 1fr));\n    gap: var(--size-0-5);\n\n    /* Reserve max height (6 week rows + 1 header) so the panel never shrinks\n       on 5-week months or when switching to month/year view. */\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  /* ── Column headers ──────────────────────────────────────────────────────── */\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  /* ── Day cells ───────────────────────────────────────────────────────────── */\n\n  .cal-cell-day {\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n    height: var(--size-10);\n    overflow: hidden;\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  /* ── Event dots (normal mode) ────────────────────────────────────────────── */\n\n  .cal-dots {\n    display: flex;\n    gap: 2px;\n    align-items: center;\n    justify-content: center;\n    margin-block-start: var(--size-0-5);\n  }\n\n  .cal-dot {\n    --badge-bg: var(--_day-selected-bg);\n    --badge-border-color: var(--_day-selected-bg);\n  }\n\n  .cal-dot-overflow {\n    font-size: 8px;\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-500);\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  /* ── Expanded variant ────────────────────────────────────────────────────── */\n\n  :host([expanded]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([expanded]) .calendar {\n    width: 100%;\n    min-width: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-header {\n    padding: var(--size-3) var(--size-4);\n  }\n\n  :host([expanded]) .cal-label-btn {\n    font-size: var(--text-base);\n  }\n\n  :host([expanded]) .cal-grid {\n    gap: 0;\n  }\n\n  :host([expanded]) .cal-grid-days {\n    gap: 0;\n    border-block-start: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell {\n    border-radius: 0;\n  }\n\n  :host([expanded]) .cal-cell-head {\n    height: var(--size-9);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell-day {\n    position: relative;\n    flex-direction: column;\n    gap: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    height: auto;\n    min-height: var(--calendar-expanded-cell-height, var(--size-28));\n    aspect-ratio: auto;\n    padding: var(--size-2);\n    font-size: var(--text-sm);\n    vertical-align: top;\n    border-block-end: var(--border) solid var(--_border-color);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Remove right border on last column */\n  :host([expanded]) .cal-cell-day:nth-child(7n) {\n    border-inline-end: none;\n  }\n\n  :host([expanded]) .cal-cell-day:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 6%, transparent);\n  }\n\n  /* Selected day — circle around the number only */\n  :host([expanded]) .cal-cell-day[data-selected] {\n    color: inherit;\n    background: transparent;\n  }\n\n  :host([expanded]) .cal-cell-day[data-selected]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-selected-bg);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Today — circle in accent colour */\n  :host([expanded]) .cal-cell-day[data-today] {\n    font-weight: inherit;\n    color: inherit;\n  }\n\n  :host([expanded]) .cal-cell-day[data-today]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-today-color);\n    border-radius: var(--rounded-full);\n  }\n\n  /* When both today AND selected — selected wins */\n  :host([expanded]) .cal-cell-day[data-today][data-selected]::before {\n    background: var(--_day-selected-bg);\n  }\n\n  /* ── Expanded event pills ────────────────────────────────────────────────── */\n\n  /* Push events below the day-number circle row */\n  :host([expanded]) .cal-events {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    width: 100%;\n    margin-block-start: var(--size-4);\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-event-pill {\n    --badge-max-width: 100%;\n    max-width: 100%;\n  }\n\n  :host([expanded]) .cal-event-pill-overflow {\n    padding-inline: var(--size-1);\n    font-size: 10px;\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n  }\n\n  /* Dots are hidden in expanded mode — pills take over */\n  :host([expanded]) .cal-dots {\n    display: none;\n  }\n\n  :host([expanded]) .cal-cell-day[data-outside] {\n    background: color-mix(in oklch, var(--color-contrast-900) 2%, transparent);\n  }\n\n  /* Expanded month / year grids */\n  :host([expanded]) .cal-grid-months,\n  :host([expanded]) .cal-grid-years {\n    gap: var(--size-2);\n    min-height: 0;\n    padding: var(--size-4);\n  }\n\n  :host([expanded]) .cal-cell-month,\n  :host([expanded]) .cal-cell-year {\n    min-height: var(--size-16);\n    font-size: var(--text-base);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--rounded-lg);\n  }\n\n  :host([expanded]) .cal-cell-month[data-selected],\n  :host([expanded]) .cal-cell-year[data-selected] {\n    border-color: transparent;\n  }\n\n  /* ── Disabled host ───────────────────────────────────────────────────────── */\n\n  :host(.is-disabled) .calendar {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"calendar.css.js","names":[],"sources":["../../../src/inputs/calendar/calendar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--calendar-day-outside-opacity, 0.35);\n    --_bg: var(--calendar-bg, var(--color-canvas));\n    --_border-color: var(--calendar-border-color, var(--color-contrast-200));\n    --_radius: var(--calendar-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-base));\n  }\n\n  /* ── Root panel ──────────────────────────────────────────────────────────── */\n\n  .calendar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--calendar-shadow, var(--shadow-md));\n  }\n\n  :host([fullwidth]) .calendar {\n    min-width: 0;\n  }\n\n  /* ── 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:not(:disabled) {\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  .nav-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\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:not(:disabled) {\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-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\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  /* ── Grid base ───────────────────────────────────────────────────────────── */\n\n  [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, minmax(0, 1fr));\n    gap: var(--size-0-5);\n\n    /* Reserve max height (6 week rows + 1 header) so the panel never shrinks\n       on 5-week months or when switching to month/year view. */\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  /* ── Column headers ──────────────────────────────────────────────────────── */\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  /* ── Day cells ───────────────────────────────────────────────────────────── */\n\n  .cal-cell-day {\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n    height: var(--size-10);\n    overflow: hidden;\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  /* ── Event dots (normal mode) ────────────────────────────────────────────── */\n\n  .cal-dots {\n    display: flex;\n    gap: 2px;\n    align-items: center;\n    justify-content: center;\n    margin-block-start: var(--size-0-5);\n  }\n\n  .cal-dot {\n    --badge-bg: var(--_day-selected-bg);\n    --badge-border-color: var(--_day-selected-bg);\n  }\n\n  .cal-dot-overflow {\n    font-size: 8px;\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-500);\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  /* ── Expanded variant ────────────────────────────────────────────────────── */\n\n  :host([expanded]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([expanded]) .calendar {\n    width: 100%;\n    min-width: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-header {\n    padding: var(--size-3) var(--size-4);\n  }\n\n  :host([expanded]) .cal-label-btn {\n    font-size: var(--text-base);\n  }\n\n  :host([expanded]) .cal-grid {\n    gap: 0;\n  }\n\n  :host([expanded]) .cal-grid-days {\n    gap: 0;\n    border-block-start: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell {\n    border-radius: 0;\n  }\n\n  :host([expanded]) .cal-cell-head {\n    height: var(--size-9);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell-day {\n    position: relative;\n    flex-direction: column;\n    gap: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    height: auto;\n    min-height: var(--calendar-expanded-cell-height, var(--size-28));\n    aspect-ratio: auto;\n    padding: var(--size-2);\n    font-size: var(--text-sm);\n    vertical-align: top;\n    border-block-end: var(--border) solid var(--_border-color);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Remove right border on last column */\n  :host([expanded]) .cal-cell-day:nth-child(7n) {\n    border-inline-end: none;\n  }\n\n  :host([expanded]) .cal-cell-day:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 6%, transparent);\n  }\n\n  /* Selected day: circle around the number only */\n  :host([expanded]) .cal-cell-day[data-selected] {\n    color: inherit;\n    background: transparent;\n  }\n\n  :host([expanded]) .cal-cell-day[data-selected]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-selected-bg);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Today: circle in accent colour */\n  :host([expanded]) .cal-cell-day[data-today] {\n    font-weight: inherit;\n    color: inherit;\n  }\n\n  :host([expanded]) .cal-cell-day[data-today]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-today-color);\n    border-radius: var(--rounded-full);\n  }\n\n  /* When both today AND selected: selected wins */\n  :host([expanded]) .cal-cell-day[data-today][data-selected]::before {\n    background: var(--_day-selected-bg);\n  }\n\n  /* ── Expanded event pills ────────────────────────────────────────────────── */\n\n  /* Push events below the day-number circle row */\n  :host([expanded]) .cal-events {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    width: 100%;\n    margin-block-start: var(--size-4);\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-event-pill {\n    --badge-max-width: 100%;\n    max-width: 100%;\n  }\n\n  :host([expanded]) .cal-event-pill-overflow {\n    padding-inline: var(--size-1);\n    font-size: 10px;\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n  }\n\n  /* Dots are hidden in expanded mode: pills take over */\n  :host([expanded]) .cal-dots {\n    display: none;\n  }\n\n  :host([expanded]) .cal-cell-day[data-outside] {\n    background: color-mix(in oklch, var(--color-contrast-900) 2%, transparent);\n  }\n\n  /* Expanded month / year grids */\n  :host([expanded]) .cal-grid-months,\n  :host([expanded]) .cal-grid-years {\n    gap: var(--size-2);\n    min-height: 0;\n    padding: var(--size-4);\n  }\n\n  :host([expanded]) .cal-cell-month,\n  :host([expanded]) .cal-cell-year {\n    min-height: var(--size-16);\n    font-size: var(--text-base);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--rounded-lg);\n  }\n\n  :host([expanded]) .cal-cell-month[data-selected],\n  :host([expanded]) .cal-cell-year[data-selected] {\n    border-color: transparent;\n  }\n\n  /* ── Disabled host ───────────────────────────────────────────────────────── */\n\n  :host(.is-disabled) .calendar {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/calendar/calendar.d.ts

@@ -19,7 +19,7 @@ export type CalendarEvent = {
      * Any CSS color value for the event dot / pill.
      * Defaults to the component's theme color when omitted.
      * Rendered via `styleMap()`, which strips `;`/`{`/`}` so the value can't break out of
-     * its custom-property declaration — it is not a full CSS-color syntax validator, so an
+     * its custom-property declaration: it is not a full CSS-color syntax validator, so an
      * invalid (but injection-safe) value may still render as no color.
      */
     color?: string;
@@ -50,7 +50,7 @@ export type OreCalendarProps = {
      */
     events?: CalendarEvent[];
     /**
-     * Expanded layout — large cells with top-aligned day numbers suitable
+     * Expanded layout: large cells with top-aligned day numbers suitable
      * for a full-page calendar app view.
      */
     expanded?: boolean;

package/dist/inputs/checkbox-group/checkbox-group.d.ts

@@ -10,7 +10,7 @@ export type CheckboxGroupContext = {
 };
 export declare const CHECKBOX_GROUP_CTX: import("@vielzeug/ore").InjectionKey<CheckboxGroupContext>;
 export type OreCheckboxGroupProps = {
-    /** Theme color — propagated to all child ore-checkbox elements */
+    /** Theme color: propagated to all child ore-checkbox elements */
     color?: ThemeColor;
     /** Disable all checkboxes in the group */
     disabled?: boolean;
@@ -26,7 +26,7 @@ export type OreCheckboxGroupProps = {
     orientation?: 'vertical' | 'horizontal';
     /** Mark the group as required */
     required?: boolean;
-    /** Size — propagated to all child ore-checkbox elements */
+    /** Size: propagated to all child ore-checkbox elements */
     size?: ComponentSize;
     /** Comma-separated list of currently checked values */
     values?: string;

package/dist/inputs/checkbox-group/checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAY,KAAK,QAAQ,EAAU,MAAM,kBAAkB,CAAC;AACnE,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK7D,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,4DAA8D,CAAC;AAI9F,MAAM,MAAM,qBAAqB,GAAG;IAClC,kEAAkE;IAClE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC"}
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAY,KAAK,QAAQ,EAAU,MAAM,kBAAkB,CAAC;AACnE,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK7D,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,4DAA8D,CAAC;AAI9F,MAAM,MAAM,qBAAqB,GAAG;IAClC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC"}

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    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":""}
+{"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.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    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":""}
+{"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/counter/counter.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--counter-bg,var(--color-contrast-100));--_border-color:var(--counter-border-color,var(--color-divider));--_radius:var(--counter-radius,var(--rounded-lg));--_gap:var(--counter-gap,var(--size-3));--_button-size:var(--counter-button-size,var(--size-11));--_value-size:var(--counter-value-size,var(--text-2xl));--_icon-size:var(--size-5);--_slot-icon-size:var(--counter-icon-size,var(--size-6));--_label-size:var(--text-sm);--_accent:var(--_theme-base,var(--text-color-heading));box-sizing:border-box;vertical-align:middle;min-width:0;display:inline-flex}:host([size=sm]){--_button-size:var(--counter-button-size,var(--size-10));--_value-size:var(--counter-value-size,var(--text-xl));--_icon-size:var(--size-4);--_slot-icon-size:var(--counter-icon-size,var(--size-5));--_label-size:var(--text-xs)}:host([size=lg]){--_button-size:var(--counter-button-size,var(--size-12));--_value-size:var(--counter-value-size,var(--text-3xl));--_icon-size:var(--size-6);--_slot-icon-size:var(--counter-icon-size,var(--size-8));--_label-size:var(--text-base)}.counter{box-sizing:border-box;gap:var(--size-2);min-width:0;padding:var(--size-3);color:var(--text-color-body);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);flex-direction:column;flex:1;display:flex}.header{gap:var(--size-2);align-items:center;min-width:0;display:flex}::slotted([slot=icon]){width:var(--_slot-icon-size);height:var(--_slot-icon-size);color:var(--_accent);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.label{text-overflow:ellipsis;min-width:0;font-size:var(--_label-size);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--text-color-heading);white-space:nowrap;overflow:hidden}.controls{gap:var(--_gap);justify-content:space-between;align-items:center;display:flex}.btn{all:unset;box-sizing:border-box;width:var(--_button-size);min-width:var(--_touch-target,var(--_button-size));height:var(--_button-size);min-height:var(--_touch-target,var(--_button-size));color:var(--text-color-heading);touch-action:manipulation;cursor:pointer;background:var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast), transform .12s var(--ease-spring);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.btn:hover:not(:disabled){background:var(--color-contrast-300)}.btn:active:not(:disabled){transform:scale(.94)}.btn:disabled{cursor:not-allowed;opacity:.4}:host([variant=frost]) .label,:host([variant=frost]) .value,:host([variant=frost]) .btn,:host([variant=frost]) ::slotted([slot=icon]){color:inherit}:host([variant=frost]) .btn{background:color-mix(in oklch, currentColor 18%, transparent)}:host([variant=frost]) .btn:hover:not(:disabled){background:color-mix(in oklch, currentColor 30%, transparent)}:host([variant=frost]) .btn-large{border-color:color-mix(in oklch, currentColor 45%, transparent);background:0 0}:host([variant=frost]) .hint{color:color-mix(in oklch, currentColor 80%, transparent)}.btn[hidden]{display:none}.btn-large{font-size:var(--_label-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;color:var(--text-color-secondary);border:var(--border) solid var(--_border-color);background:0 0}.btn-large:hover:not(:disabled){color:var(--text-color-heading);background:var(--color-contrast-200)}.value{min-width:2ch;font-size:var(--_value-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;line-height:var(--leading-none);color:var(--_accent);text-align:center;touch-action:manipulation;border-radius:var(--rounded-md);flex:1}.value:focus-visible{outline:2px solid var(--_theme-focus,var(--color-primary));outline-offset:2px}:host([data-bump]) .value{animation:var(--_motion-animation,counter-bump .2s var(--ease-spring))}@keyframes counter-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.hint,::slotted([slot=hint]){font-size:var(--text-xs);line-height:var(--leading-snug,1.35);color:var(--text-color-tertiary)}.hint[hidden]{display:none}:host([readonly]) .controls{justify-content:flex-start}:host([readonly]) .value{flex:0}:host([readonly]) .value: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}:host([readonly]) .value: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}}:host([variant=frost][color]) .counter{background:color-mix(in oklch, var(--_theme-base) 78%, transparent)}`;exports.default=e;
+var e=`@layer refine.base{:host{--_bg:var(--counter-bg,var(--color-contrast-100));--_border-color:var(--counter-border-color,var(--color-divider));--_radius:var(--counter-radius,var(--rounded-lg));--_gap:var(--counter-gap,var(--size-3));--_button-size:var(--counter-button-size,var(--size-11));--_value-size:var(--counter-value-size,var(--text-2xl));--_icon-size:var(--size-5);--_slot-icon-size:var(--counter-icon-size,var(--size-6));--_label-size:var(--text-sm);--_accent:var(--_theme-base,var(--text-color-heading));box-sizing:border-box;vertical-align:middle;min-width:0;display:inline-flex}:host([size=sm]){--_button-size:var(--counter-button-size,var(--size-10));--_value-size:var(--counter-value-size,var(--text-xl));--_icon-size:var(--size-4);--_slot-icon-size:var(--counter-icon-size,var(--size-5));--_label-size:var(--text-xs)}:host([size=lg]){--_button-size:var(--counter-button-size,var(--size-12));--_value-size:var(--counter-value-size,var(--text-3xl));--_icon-size:var(--size-6);--_slot-icon-size:var(--counter-icon-size,var(--size-8));--_label-size:var(--text-base)}.counter{box-sizing:border-box;gap:var(--size-2);min-width:0;padding:var(--size-3);color:var(--text-color-body);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);flex-direction:column;flex:1;display:flex}.header{gap:var(--size-2);align-items:center;min-width:0;display:flex}::slotted([slot=icon]){width:var(--_slot-icon-size);height:var(--_slot-icon-size);color:var(--_accent);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.label{text-overflow:ellipsis;min-width:0;font-size:var(--_label-size);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--text-color-heading);white-space:nowrap;overflow:hidden}.header-end{flex-shrink:0;align-items:center;display:flex}.header-end: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}.header-end: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}.controls{gap:var(--_gap);justify-content:space-between;align-items:center;display:flex}.btn{all:unset;box-sizing:border-box;width:var(--_button-size);min-width:var(--_touch-target,var(--_button-size));height:var(--_button-size);min-height:var(--_touch-target,var(--_button-size));color:var(--text-color-heading);touch-action:manipulation;cursor:pointer;background:var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast), transform .12s var(--ease-spring);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.btn:hover:not(:disabled){background:var(--color-contrast-300)}.btn:active:not(:disabled){transform:scale(.94)}.btn:disabled{cursor:not-allowed;opacity:.4}:host([variant=frost]) .label,:host([variant=frost]) .value,:host([variant=frost]) .btn,:host([variant=frost]) ::slotted([slot=icon]){color:inherit}:host([variant=frost]) .btn{background:color-mix(in oklch, currentColor 18%, transparent)}:host([variant=frost]) .btn:hover:not(:disabled){background:color-mix(in oklch, currentColor 30%, transparent)}:host([variant=frost]) .btn-large{border-color:color-mix(in oklch, currentColor 45%, transparent);background:0 0}:host([variant=frost]) .hint{color:color-mix(in oklch, currentColor 80%, transparent)}.btn[hidden]{display:none}.btn-large{font-size:var(--_label-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;color:var(--text-color-secondary);border:var(--border) solid var(--_border-color);background:0 0}.btn-large:hover:not(:disabled){color:var(--text-color-heading);background:var(--color-contrast-200)}.value{min-width:2ch;font-size:var(--_value-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;line-height:var(--leading-none);color:var(--_accent);text-align:center;touch-action:manipulation;border-radius:var(--rounded-md);flex:1}.value:focus-visible{outline:2px solid var(--_theme-focus,var(--color-primary));outline-offset:2px}:host([data-bump]) .value{animation:var(--_motion-animation,counter-bump .2s var(--ease-spring))}@keyframes counter-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.hint,::slotted([slot=hint]){font-size:var(--text-xs);line-height:var(--leading-snug,1.35);color:var(--text-color-tertiary)}.hint[hidden]{display:none}:host([readonly]) .controls{justify-content:flex-start}:host([readonly]) .value{flex:0}:host([readonly]) .value: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}:host([readonly]) .value: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}}:host([variant=frost][color]) .counter{background:color-mix(in oklch, var(--_theme-base) 78%, transparent)}`;exports.default=e;
 //# sourceMappingURL=counter.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"counter.css.cjs","names":[],"sources":["../../../src/inputs/counter/counter.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--counter-bg, var(--color-contrast-100));\n    --_border-color: var(--counter-border-color, var(--color-divider));\n    --_radius: var(--counter-radius, var(--rounded-lg));\n    --_gap: var(--counter-gap, var(--size-3));\n    --_button-size: var(--counter-button-size, var(--size-11));\n    --_value-size: var(--counter-value-size, var(--text-2xl));\n    --_icon-size: var(--size-5);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-6));\n    --_label-size: var(--text-sm);\n    --_accent: var(--_theme-base, var(--text-color-heading));\n    box-sizing: border-box;\n\n    display: inline-flex;\n    min-width: 0;\n    vertical-align: middle;\n  }\n\n  :host([size='sm']) {\n    --_button-size: var(--counter-button-size, var(--size-10));\n    --_value-size: var(--counter-value-size, var(--text-xl));\n    --_icon-size: var(--size-4);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-5));\n    --_label-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --_button-size: var(--counter-button-size, var(--size-12));\n    --_value-size: var(--counter-value-size, var(--text-3xl));\n    --_icon-size: var(--size-6);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-8));\n    --_label-size: var(--text-base);\n  }\n\n  .counter {\n    box-sizing: border-box;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 0;\n    padding: var(--size-3);\n    color: var(--text-color-body);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_slot-icon-size);\n    height: var(--_slot-icon-size);\n    color: var(--_accent);\n  }\n\n  .label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_label-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--text-color-heading);\n    white-space: nowrap;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_button-size);\n    min-width: var(--_touch-target, var(--_button-size));\n    height: var(--_button-size);\n    min-height: var(--_touch-target, var(--_button-size));\n    color: var(--text-color-heading);\n    touch-action: manipulation;\n    cursor: pointer;\n    background: var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .btn:hover:not(:disabled) {\n    background: var(--color-contrast-300);\n  }\n\n  .btn:active:not(:disabled) {\n    transform: scale(0.94);\n  }\n\n  .btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  /* Frost: the variant mixin paints the surface with its own high-contrast theme ink.\n     Keep every inner element on that same ink — the page-ink defaults (--text-color-*)\n     and the base-tinted value were written for opaque panels and fail over artwork. */\n  :host([variant='frost']) .label,\n  :host([variant='frost']) .value,\n  :host([variant='frost']) .btn {\n    color: inherit;\n  }\n\n  :host([variant='frost']) ::slotted([slot='icon']) {\n    color: inherit;\n  }\n\n  /* Solid button fills would read as opaque patches over the blur; glass tints instead. */\n  :host([variant='frost']) .btn {\n    background: color-mix(in oklch, currentColor 18%, transparent);\n  }\n\n  :host([variant='frost']) .btn:hover:not(:disabled) {\n    background: color-mix(in oklch, currentColor 30%, transparent);\n  }\n\n  :host([variant='frost']) .btn-large {\n    background: transparent;\n    border-color: color-mix(in oklch, currentColor 45%, transparent);\n  }\n\n  :host([variant='frost']) .hint {\n    color: color-mix(in oklch, currentColor 80%, transparent);\n  }\n\n  .btn[hidden] {\n    display: none;\n  }\n\n  /* Quick-step buttons: same footprint, quieter surface, numeric label instead of an icon. */\n  .btn-large {\n    font-size: var(--_label-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    color: var(--text-color-secondary);\n    background: transparent;\n    border: var(--border) solid var(--_border-color);\n  }\n\n  .btn-large:hover:not(:disabled) {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  .value {\n    flex: 1;\n    min-width: 2ch;\n    font-size: var(--_value-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    line-height: var(--leading-none);\n    color: var(--_accent);\n    text-align: center;\n    touch-action: manipulation;\n    border-radius: var(--rounded-md);\n  }\n\n  .value:focus-visible {\n    outline: 2px solid var(--_theme-focus, var(--color-primary));\n    outline-offset: 2px;\n  }\n\n  :host([data-bump]) .value {\n    animation: var(--_motion-animation, counter-bump 200ms var(--ease-spring));\n  }\n\n  @keyframes counter-bump {\n    0% {\n      transform: scale(1);\n    }\n\n    40% {\n      transform: scale(1.18);\n    }\n\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  .hint,\n  ::slotted([slot='hint']) {\n    font-size: var(--text-xs);\n    line-height: var(--leading-snug, 1.35);\n    color: var(--text-color-tertiary);\n  }\n\n  .hint[hidden] {\n    display: none;\n  }\n\n  :host([readonly]) .controls {\n    justify-content: flex-start;\n  }\n\n  :host([readonly]) .value {\n    flex: 0;\n    text-align: start;\n  }\n}\n\n/* Unlayered on purpose: the frost surface comes from the unlayered frostVariantMixin, and\n   layered rules can never beat unlayered ones. The mixin paints the tinted film at 50% alpha,\n   which lets dark artwork drag the surface below the lightness the theme ink (--_theme-content)\n   was designed against — dark ink on dark glass in dark mode, washed-out white in light mode.\n   A denser film keeps the color's own lightness dominant, so the ink pairing both themes define\n   (dark ink on the light-mode base, light ink on the dark-mode base) holds over any artwork,\n   while the blur and saturation still read as glass. */\n:host([variant='frost'][color]) .counter {\n  background: color-mix(in oklch, var(--_theme-base) 78%, transparent);\n}\n"],"mappings":""}
+{"version":3,"file":"counter.css.cjs","names":[],"sources":["../../../src/inputs/counter/counter.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--counter-bg, var(--color-contrast-100));\n    --_border-color: var(--counter-border-color, var(--color-divider));\n    --_radius: var(--counter-radius, var(--rounded-lg));\n    --_gap: var(--counter-gap, var(--size-3));\n    --_button-size: var(--counter-button-size, var(--size-11));\n    --_value-size: var(--counter-value-size, var(--text-2xl));\n    --_icon-size: var(--size-5);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-6));\n    --_label-size: var(--text-sm);\n    --_accent: var(--_theme-base, var(--text-color-heading));\n    box-sizing: border-box;\n\n    display: inline-flex;\n    min-width: 0;\n    vertical-align: middle;\n  }\n\n  :host([size='sm']) {\n    --_button-size: var(--counter-button-size, var(--size-10));\n    --_value-size: var(--counter-value-size, var(--text-xl));\n    --_icon-size: var(--size-4);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-5));\n    --_label-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --_button-size: var(--counter-button-size, var(--size-12));\n    --_value-size: var(--counter-value-size, var(--text-3xl));\n    --_icon-size: var(--size-6);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-8));\n    --_label-size: var(--text-base);\n  }\n\n  .counter {\n    box-sizing: border-box;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 0;\n    padding: var(--size-3);\n    color: var(--text-color-body);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_slot-icon-size);\n    height: var(--_slot-icon-size);\n    color: var(--_accent);\n  }\n\n  .label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_label-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--text-color-heading);\n    white-space: nowrap;\n  }\n\n  .header-end {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    margin-inline-start: auto;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_button-size);\n    min-width: var(--_touch-target, var(--_button-size));\n    height: var(--_button-size);\n    min-height: var(--_touch-target, var(--_button-size));\n    color: var(--text-color-heading);\n    touch-action: manipulation;\n    cursor: pointer;\n    background: var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .btn:hover:not(:disabled) {\n    background: var(--color-contrast-300);\n  }\n\n  .btn:active:not(:disabled) {\n    transform: scale(0.94);\n  }\n\n  .btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  /* Frost: the variant mixin paints the surface with its own high-contrast theme ink.\n     Keep every inner element on that same ink: the page-ink defaults (--text-color-*)\n     and the base-tinted value were written for opaque panels and fail over artwork. */\n  :host([variant='frost']) .label,\n  :host([variant='frost']) .value,\n  :host([variant='frost']) .btn {\n    color: inherit;\n  }\n\n  :host([variant='frost']) ::slotted([slot='icon']) {\n    color: inherit;\n  }\n\n  /* Solid button fills would read as opaque patches over the blur; glass tints instead. */\n  :host([variant='frost']) .btn {\n    background: color-mix(in oklch, currentColor 18%, transparent);\n  }\n\n  :host([variant='frost']) .btn:hover:not(:disabled) {\n    background: color-mix(in oklch, currentColor 30%, transparent);\n  }\n\n  :host([variant='frost']) .btn-large {\n    background: transparent;\n    border-color: color-mix(in oklch, currentColor 45%, transparent);\n  }\n\n  :host([variant='frost']) .hint {\n    color: color-mix(in oklch, currentColor 80%, transparent);\n  }\n\n  .btn[hidden] {\n    display: none;\n  }\n\n  /* Quick-step buttons: same footprint, quieter surface, numeric label instead of an icon. */\n  .btn-large {\n    font-size: var(--_label-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    color: var(--text-color-secondary);\n    background: transparent;\n    border: var(--border) solid var(--_border-color);\n  }\n\n  .btn-large:hover:not(:disabled) {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  .value {\n    flex: 1;\n    min-width: 2ch;\n    font-size: var(--_value-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    line-height: var(--leading-none);\n    color: var(--_accent);\n    text-align: center;\n    touch-action: manipulation;\n    border-radius: var(--rounded-md);\n  }\n\n  .value:focus-visible {\n    outline: 2px solid var(--_theme-focus, var(--color-primary));\n    outline-offset: 2px;\n  }\n\n  :host([data-bump]) .value {\n    animation: var(--_motion-animation, counter-bump 200ms var(--ease-spring));\n  }\n\n  @keyframes counter-bump {\n    0% {\n      transform: scale(1);\n    }\n\n    40% {\n      transform: scale(1.18);\n    }\n\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  .hint,\n  ::slotted([slot='hint']) {\n    font-size: var(--text-xs);\n    line-height: var(--leading-snug, 1.35);\n    color: var(--text-color-tertiary);\n  }\n\n  .hint[hidden] {\n    display: none;\n  }\n\n  :host([readonly]) .controls {\n    justify-content: flex-start;\n  }\n\n  :host([readonly]) .value {\n    flex: 0;\n    text-align: start;\n  }\n}\n\n/* Unlayered on purpose: the frost surface comes from the unlayered frostVariantMixin, and\n   layered rules can never beat unlayered ones. The mixin paints the tinted film at 50% alpha,\n   which lets dark artwork drag the surface below the lightness the theme ink (--_theme-content)\n   was designed against: dark ink on dark glass in dark mode, washed-out white in light mode.\n   A denser film keeps the color's own lightness dominant, so the ink pairing both themes define\n   (dark ink on the light-mode base, light ink on the dark-mode base) holds over any artwork,\n   while the blur and saturation still read as glass. */\n:host([variant='frost'][color]) .counter {\n  background: color-mix(in oklch, var(--_theme-base) 78%, transparent);\n}\n"],"mappings":""}

package/dist/inputs/counter/counter.css.js

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--counter-bg,var(--color-contrast-100));--_border-color:var(--counter-border-color,var(--color-divider));--_radius:var(--counter-radius,var(--rounded-lg));--_gap:var(--counter-gap,var(--size-3));--_button-size:var(--counter-button-size,var(--size-11));--_value-size:var(--counter-value-size,var(--text-2xl));--_icon-size:var(--size-5);--_slot-icon-size:var(--counter-icon-size,var(--size-6));--_label-size:var(--text-sm);--_accent:var(--_theme-base,var(--text-color-heading));box-sizing:border-box;vertical-align:middle;min-width:0;display:inline-flex}:host([size=sm]){--_button-size:var(--counter-button-size,var(--size-10));--_value-size:var(--counter-value-size,var(--text-xl));--_icon-size:var(--size-4);--_slot-icon-size:var(--counter-icon-size,var(--size-5));--_label-size:var(--text-xs)}:host([size=lg]){--_button-size:var(--counter-button-size,var(--size-12));--_value-size:var(--counter-value-size,var(--text-3xl));--_icon-size:var(--size-6);--_slot-icon-size:var(--counter-icon-size,var(--size-8));--_label-size:var(--text-base)}.counter{box-sizing:border-box;gap:var(--size-2);min-width:0;padding:var(--size-3);color:var(--text-color-body);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);flex-direction:column;flex:1;display:flex}.header{gap:var(--size-2);align-items:center;min-width:0;display:flex}::slotted([slot=icon]){width:var(--_slot-icon-size);height:var(--_slot-icon-size);color:var(--_accent);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.label{text-overflow:ellipsis;min-width:0;font-size:var(--_label-size);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--text-color-heading);white-space:nowrap;overflow:hidden}.controls{gap:var(--_gap);justify-content:space-between;align-items:center;display:flex}.btn{all:unset;box-sizing:border-box;width:var(--_button-size);min-width:var(--_touch-target,var(--_button-size));height:var(--_button-size);min-height:var(--_touch-target,var(--_button-size));color:var(--text-color-heading);touch-action:manipulation;cursor:pointer;background:var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast), transform .12s var(--ease-spring);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.btn:hover:not(:disabled){background:var(--color-contrast-300)}.btn:active:not(:disabled){transform:scale(.94)}.btn:disabled{cursor:not-allowed;opacity:.4}:host([variant=frost]) .label,:host([variant=frost]) .value,:host([variant=frost]) .btn,:host([variant=frost]) ::slotted([slot=icon]){color:inherit}:host([variant=frost]) .btn{background:color-mix(in oklch, currentColor 18%, transparent)}:host([variant=frost]) .btn:hover:not(:disabled){background:color-mix(in oklch, currentColor 30%, transparent)}:host([variant=frost]) .btn-large{border-color:color-mix(in oklch, currentColor 45%, transparent);background:0 0}:host([variant=frost]) .hint{color:color-mix(in oklch, currentColor 80%, transparent)}.btn[hidden]{display:none}.btn-large{font-size:var(--_label-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;color:var(--text-color-secondary);border:var(--border) solid var(--_border-color);background:0 0}.btn-large:hover:not(:disabled){color:var(--text-color-heading);background:var(--color-contrast-200)}.value{min-width:2ch;font-size:var(--_value-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;line-height:var(--leading-none);color:var(--_accent);text-align:center;touch-action:manipulation;border-radius:var(--rounded-md);flex:1}.value:focus-visible{outline:2px solid var(--_theme-focus,var(--color-primary));outline-offset:2px}:host([data-bump]) .value{animation:var(--_motion-animation,counter-bump .2s var(--ease-spring))}@keyframes counter-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.hint,::slotted([slot=hint]){font-size:var(--text-xs);line-height:var(--leading-snug,1.35);color:var(--text-color-tertiary)}.hint[hidden]{display:none}:host([readonly]) .controls{justify-content:flex-start}:host([readonly]) .value{flex:0}:host([readonly]) .value: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}:host([readonly]) .value: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}}:host([variant=frost][color]) .counter{background:color-mix(in oklch, var(--_theme-base) 78%, transparent)}`;export{e as default};
+var e=`@layer refine.base{:host{--_bg:var(--counter-bg,var(--color-contrast-100));--_border-color:var(--counter-border-color,var(--color-divider));--_radius:var(--counter-radius,var(--rounded-lg));--_gap:var(--counter-gap,var(--size-3));--_button-size:var(--counter-button-size,var(--size-11));--_value-size:var(--counter-value-size,var(--text-2xl));--_icon-size:var(--size-5);--_slot-icon-size:var(--counter-icon-size,var(--size-6));--_label-size:var(--text-sm);--_accent:var(--_theme-base,var(--text-color-heading));box-sizing:border-box;vertical-align:middle;min-width:0;display:inline-flex}:host([size=sm]){--_button-size:var(--counter-button-size,var(--size-10));--_value-size:var(--counter-value-size,var(--text-xl));--_icon-size:var(--size-4);--_slot-icon-size:var(--counter-icon-size,var(--size-5));--_label-size:var(--text-xs)}:host([size=lg]){--_button-size:var(--counter-button-size,var(--size-12));--_value-size:var(--counter-value-size,var(--text-3xl));--_icon-size:var(--size-6);--_slot-icon-size:var(--counter-icon-size,var(--size-8));--_label-size:var(--text-base)}.counter{box-sizing:border-box;gap:var(--size-2);min-width:0;padding:var(--size-3);color:var(--text-color-body);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);flex-direction:column;flex:1;display:flex}.header{gap:var(--size-2);align-items:center;min-width:0;display:flex}::slotted([slot=icon]){width:var(--_slot-icon-size);height:var(--_slot-icon-size);color:var(--_accent);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.label{text-overflow:ellipsis;min-width:0;font-size:var(--_label-size);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--text-color-heading);white-space:nowrap;overflow:hidden}.header-end{flex-shrink:0;align-items:center;display:flex}.header-end: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}.header-end: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}.controls{gap:var(--_gap);justify-content:space-between;align-items:center;display:flex}.btn{all:unset;box-sizing:border-box;width:var(--_button-size);min-width:var(--_touch-target,var(--_button-size));height:var(--_button-size);min-height:var(--_touch-target,var(--_button-size));color:var(--text-color-heading);touch-action:manipulation;cursor:pointer;background:var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast), transform .12s var(--ease-spring);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.btn:hover:not(:disabled){background:var(--color-contrast-300)}.btn:active:not(:disabled){transform:scale(.94)}.btn:disabled{cursor:not-allowed;opacity:.4}:host([variant=frost]) .label,:host([variant=frost]) .value,:host([variant=frost]) .btn,:host([variant=frost]) ::slotted([slot=icon]){color:inherit}:host([variant=frost]) .btn{background:color-mix(in oklch, currentColor 18%, transparent)}:host([variant=frost]) .btn:hover:not(:disabled){background:color-mix(in oklch, currentColor 30%, transparent)}:host([variant=frost]) .btn-large{border-color:color-mix(in oklch, currentColor 45%, transparent);background:0 0}:host([variant=frost]) .hint{color:color-mix(in oklch, currentColor 80%, transparent)}.btn[hidden]{display:none}.btn-large{font-size:var(--_label-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;color:var(--text-color-secondary);border:var(--border) solid var(--_border-color);background:0 0}.btn-large:hover:not(:disabled){color:var(--text-color-heading);background:var(--color-contrast-200)}.value{min-width:2ch;font-size:var(--_value-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;line-height:var(--leading-none);color:var(--_accent);text-align:center;touch-action:manipulation;border-radius:var(--rounded-md);flex:1}.value:focus-visible{outline:2px solid var(--_theme-focus,var(--color-primary));outline-offset:2px}:host([data-bump]) .value{animation:var(--_motion-animation,counter-bump .2s var(--ease-spring))}@keyframes counter-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.hint,::slotted([slot=hint]){font-size:var(--text-xs);line-height:var(--leading-snug,1.35);color:var(--text-color-tertiary)}.hint[hidden]{display:none}:host([readonly]) .controls{justify-content:flex-start}:host([readonly]) .value{flex:0}:host([readonly]) .value: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}:host([readonly]) .value: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}}:host([variant=frost][color]) .counter{background:color-mix(in oklch, var(--_theme-base) 78%, transparent)}`;export{e as default};
 //# sourceMappingURL=counter.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"counter.css.js","names":[],"sources":["../../../src/inputs/counter/counter.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--counter-bg, var(--color-contrast-100));\n    --_border-color: var(--counter-border-color, var(--color-divider));\n    --_radius: var(--counter-radius, var(--rounded-lg));\n    --_gap: var(--counter-gap, var(--size-3));\n    --_button-size: var(--counter-button-size, var(--size-11));\n    --_value-size: var(--counter-value-size, var(--text-2xl));\n    --_icon-size: var(--size-5);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-6));\n    --_label-size: var(--text-sm);\n    --_accent: var(--_theme-base, var(--text-color-heading));\n    box-sizing: border-box;\n\n    display: inline-flex;\n    min-width: 0;\n    vertical-align: middle;\n  }\n\n  :host([size='sm']) {\n    --_button-size: var(--counter-button-size, var(--size-10));\n    --_value-size: var(--counter-value-size, var(--text-xl));\n    --_icon-size: var(--size-4);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-5));\n    --_label-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --_button-size: var(--counter-button-size, var(--size-12));\n    --_value-size: var(--counter-value-size, var(--text-3xl));\n    --_icon-size: var(--size-6);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-8));\n    --_label-size: var(--text-base);\n  }\n\n  .counter {\n    box-sizing: border-box;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 0;\n    padding: var(--size-3);\n    color: var(--text-color-body);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_slot-icon-size);\n    height: var(--_slot-icon-size);\n    color: var(--_accent);\n  }\n\n  .label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_label-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--text-color-heading);\n    white-space: nowrap;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_button-size);\n    min-width: var(--_touch-target, var(--_button-size));\n    height: var(--_button-size);\n    min-height: var(--_touch-target, var(--_button-size));\n    color: var(--text-color-heading);\n    touch-action: manipulation;\n    cursor: pointer;\n    background: var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .btn:hover:not(:disabled) {\n    background: var(--color-contrast-300);\n  }\n\n  .btn:active:not(:disabled) {\n    transform: scale(0.94);\n  }\n\n  .btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  /* Frost: the variant mixin paints the surface with its own high-contrast theme ink.\n     Keep every inner element on that same ink — the page-ink defaults (--text-color-*)\n     and the base-tinted value were written for opaque panels and fail over artwork. */\n  :host([variant='frost']) .label,\n  :host([variant='frost']) .value,\n  :host([variant='frost']) .btn {\n    color: inherit;\n  }\n\n  :host([variant='frost']) ::slotted([slot='icon']) {\n    color: inherit;\n  }\n\n  /* Solid button fills would read as opaque patches over the blur; glass tints instead. */\n  :host([variant='frost']) .btn {\n    background: color-mix(in oklch, currentColor 18%, transparent);\n  }\n\n  :host([variant='frost']) .btn:hover:not(:disabled) {\n    background: color-mix(in oklch, currentColor 30%, transparent);\n  }\n\n  :host([variant='frost']) .btn-large {\n    background: transparent;\n    border-color: color-mix(in oklch, currentColor 45%, transparent);\n  }\n\n  :host([variant='frost']) .hint {\n    color: color-mix(in oklch, currentColor 80%, transparent);\n  }\n\n  .btn[hidden] {\n    display: none;\n  }\n\n  /* Quick-step buttons: same footprint, quieter surface, numeric label instead of an icon. */\n  .btn-large {\n    font-size: var(--_label-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    color: var(--text-color-secondary);\n    background: transparent;\n    border: var(--border) solid var(--_border-color);\n  }\n\n  .btn-large:hover:not(:disabled) {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  .value {\n    flex: 1;\n    min-width: 2ch;\n    font-size: var(--_value-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    line-height: var(--leading-none);\n    color: var(--_accent);\n    text-align: center;\n    touch-action: manipulation;\n    border-radius: var(--rounded-md);\n  }\n\n  .value:focus-visible {\n    outline: 2px solid var(--_theme-focus, var(--color-primary));\n    outline-offset: 2px;\n  }\n\n  :host([data-bump]) .value {\n    animation: var(--_motion-animation, counter-bump 200ms var(--ease-spring));\n  }\n\n  @keyframes counter-bump {\n    0% {\n      transform: scale(1);\n    }\n\n    40% {\n      transform: scale(1.18);\n    }\n\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  .hint,\n  ::slotted([slot='hint']) {\n    font-size: var(--text-xs);\n    line-height: var(--leading-snug, 1.35);\n    color: var(--text-color-tertiary);\n  }\n\n  .hint[hidden] {\n    display: none;\n  }\n\n  :host([readonly]) .controls {\n    justify-content: flex-start;\n  }\n\n  :host([readonly]) .value {\n    flex: 0;\n    text-align: start;\n  }\n}\n\n/* Unlayered on purpose: the frost surface comes from the unlayered frostVariantMixin, and\n   layered rules can never beat unlayered ones. The mixin paints the tinted film at 50% alpha,\n   which lets dark artwork drag the surface below the lightness the theme ink (--_theme-content)\n   was designed against — dark ink on dark glass in dark mode, washed-out white in light mode.\n   A denser film keeps the color's own lightness dominant, so the ink pairing both themes define\n   (dark ink on the light-mode base, light ink on the dark-mode base) holds over any artwork,\n   while the blur and saturation still read as glass. */\n:host([variant='frost'][color]) .counter {\n  background: color-mix(in oklch, var(--_theme-base) 78%, transparent);\n}\n"],"mappings":""}
+{"version":3,"file":"counter.css.js","names":[],"sources":["../../../src/inputs/counter/counter.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--counter-bg, var(--color-contrast-100));\n    --_border-color: var(--counter-border-color, var(--color-divider));\n    --_radius: var(--counter-radius, var(--rounded-lg));\n    --_gap: var(--counter-gap, var(--size-3));\n    --_button-size: var(--counter-button-size, var(--size-11));\n    --_value-size: var(--counter-value-size, var(--text-2xl));\n    --_icon-size: var(--size-5);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-6));\n    --_label-size: var(--text-sm);\n    --_accent: var(--_theme-base, var(--text-color-heading));\n    box-sizing: border-box;\n\n    display: inline-flex;\n    min-width: 0;\n    vertical-align: middle;\n  }\n\n  :host([size='sm']) {\n    --_button-size: var(--counter-button-size, var(--size-10));\n    --_value-size: var(--counter-value-size, var(--text-xl));\n    --_icon-size: var(--size-4);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-5));\n    --_label-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --_button-size: var(--counter-button-size, var(--size-12));\n    --_value-size: var(--counter-value-size, var(--text-3xl));\n    --_icon-size: var(--size-6);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-8));\n    --_label-size: var(--text-base);\n  }\n\n  .counter {\n    box-sizing: border-box;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 0;\n    padding: var(--size-3);\n    color: var(--text-color-body);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_slot-icon-size);\n    height: var(--_slot-icon-size);\n    color: var(--_accent);\n  }\n\n  .label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_label-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--text-color-heading);\n    white-space: nowrap;\n  }\n\n  .header-end {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    margin-inline-start: auto;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_button-size);\n    min-width: var(--_touch-target, var(--_button-size));\n    height: var(--_button-size);\n    min-height: var(--_touch-target, var(--_button-size));\n    color: var(--text-color-heading);\n    touch-action: manipulation;\n    cursor: pointer;\n    background: var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .btn:hover:not(:disabled) {\n    background: var(--color-contrast-300);\n  }\n\n  .btn:active:not(:disabled) {\n    transform: scale(0.94);\n  }\n\n  .btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  /* Frost: the variant mixin paints the surface with its own high-contrast theme ink.\n     Keep every inner element on that same ink: the page-ink defaults (--text-color-*)\n     and the base-tinted value were written for opaque panels and fail over artwork. */\n  :host([variant='frost']) .label,\n  :host([variant='frost']) .value,\n  :host([variant='frost']) .btn {\n    color: inherit;\n  }\n\n  :host([variant='frost']) ::slotted([slot='icon']) {\n    color: inherit;\n  }\n\n  /* Solid button fills would read as opaque patches over the blur; glass tints instead. */\n  :host([variant='frost']) .btn {\n    background: color-mix(in oklch, currentColor 18%, transparent);\n  }\n\n  :host([variant='frost']) .btn:hover:not(:disabled) {\n    background: color-mix(in oklch, currentColor 30%, transparent);\n  }\n\n  :host([variant='frost']) .btn-large {\n    background: transparent;\n    border-color: color-mix(in oklch, currentColor 45%, transparent);\n  }\n\n  :host([variant='frost']) .hint {\n    color: color-mix(in oklch, currentColor 80%, transparent);\n  }\n\n  .btn[hidden] {\n    display: none;\n  }\n\n  /* Quick-step buttons: same footprint, quieter surface, numeric label instead of an icon. */\n  .btn-large {\n    font-size: var(--_label-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    color: var(--text-color-secondary);\n    background: transparent;\n    border: var(--border) solid var(--_border-color);\n  }\n\n  .btn-large:hover:not(:disabled) {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  .value {\n    flex: 1;\n    min-width: 2ch;\n    font-size: var(--_value-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    line-height: var(--leading-none);\n    color: var(--_accent);\n    text-align: center;\n    touch-action: manipulation;\n    border-radius: var(--rounded-md);\n  }\n\n  .value:focus-visible {\n    outline: 2px solid var(--_theme-focus, var(--color-primary));\n    outline-offset: 2px;\n  }\n\n  :host([data-bump]) .value {\n    animation: var(--_motion-animation, counter-bump 200ms var(--ease-spring));\n  }\n\n  @keyframes counter-bump {\n    0% {\n      transform: scale(1);\n    }\n\n    40% {\n      transform: scale(1.18);\n    }\n\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  .hint,\n  ::slotted([slot='hint']) {\n    font-size: var(--text-xs);\n    line-height: var(--leading-snug, 1.35);\n    color: var(--text-color-tertiary);\n  }\n\n  .hint[hidden] {\n    display: none;\n  }\n\n  :host([readonly]) .controls {\n    justify-content: flex-start;\n  }\n\n  :host([readonly]) .value {\n    flex: 0;\n    text-align: start;\n  }\n}\n\n/* Unlayered on purpose: the frost surface comes from the unlayered frostVariantMixin, and\n   layered rules can never beat unlayered ones. The mixin paints the tinted film at 50% alpha,\n   which lets dark artwork drag the surface below the lightness the theme ink (--_theme-content)\n   was designed against: dark ink on dark glass in dark mode, washed-out white in light mode.\n   A denser film keeps the color's own lightness dominant, so the ink pairing both themes define\n   (dark ink on the light-mode base, light ink on the dark-mode base) holds over any artwork,\n   while the blur and saturation still read as glass. */\n:host([variant='frost'][color]) .counter {\n  background: color-mix(in oklch, var(--_theme-base) 78%, transparent);\n}\n"],"mappings":""}

package/dist/inputs/counter/counter.d.ts

@@ -44,7 +44,7 @@ export declare const COUNTER_HOLD_REPEAT_MS = 120;
 /**
  * A large-target tally control for counting things at a glance: `−` / value / `+` with an
  * optional icon, label and hint. Designed for touch and arm's-length use (tabletop trackers,
- * inventories, scoreboards) rather than typed form entry — use `ore-number-input` for that.
+ * inventories, scoreboards) rather than typed form entry: use `ore-number-input` for that.
  *
  * Holding any button auto-repeats. The value is announced through a live region and is
  * keyboard-operable as a spinbutton (Arrow keys, Home/End, Page Up/Down). Set `quick-steps` to add an
@@ -69,6 +69,7 @@ export declare const COUNTER_HOLD_REPEAT_MS = 120;
  * @fires change - Fired after every accepted change. detail: { value: number, delta: number }
  *
  * @slot icon - Leading icon or token artwork shown before the label
+ * @slot header-end - Trailing header action beside the label
  * @slot hint - Custom hint content (replaces the `hint` attribute)
  *
  * @cssprop --counter-value-size - Font size of the value

package/dist/inputs/counter/counter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../../src/inputs/counter/counter.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,oBAAoB;AACpB,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACzC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC"}
+{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../../src/inputs/counter/counter.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,oBAAoB;AACpB,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACzC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"datagrid.css.cjs","names":[],"sources":["../../../src/inputs/datagrid/datagrid.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    /* ── Datagrid-specific token overrides on top of tableBaseMixin ─────── */\n    --_row-hover-bg: var(--datagrid-row-hover-bg, color-mix(in oklch, var(--color-contrast-500) 5%, transparent));\n    --_row-selected-bg: var(--datagrid-row-selected-bg, color-mix(in oklch, var(--_accent) 10%, transparent));\n    --_row-selected-border: var(--datagrid-row-selected-border, var(--_accent));\n  }\n\n  /* ── Scroll wrapper ───────────────────────────────────────────────────────── */\n\n  .dg-scroll {\n    max-height: var(--datagrid-max-height, none);\n    overflow: auto;\n  }\n\n  /* ── Table ────────────────────────────────────────────────────────────────── */\n\n  .dg-table {\n    width: 100%;\n    font-size: var(--_font-size);\n    table-layout: auto;\n    border-collapse: collapse;\n  }\n\n  /* ── Head ─────────────────────────────────────────────────────────────────── */\n\n  .dg-head {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    background: var(--_header-bg);\n    box-shadow: inset 0 calc(var(--border) * -1) 0 var(--_border-color);\n  }\n\n  .dg-th {\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n    user-select: none;\n    border-right: var(--border) solid var(--_border-color);\n\n    &[data-align='center'] {\n      text-align: center;\n    }\n\n    &[data-align='right'] {\n      text-align: right;\n    }\n\n    &:has(.dg-sort-btn) {\n      padding: 0;\n    }\n  }\n\n  .dg-sort-btn {\n    --button-padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    --button-font-size: var(--text-xs);\n    --button-font-weight: var(--font-semibold);\n    --button-color: var(--color-contrast-500);\n    --button-justify: flex-start;\n\n    height: 100%;\n  }\n\n  .dg-th[data-align='center'] .dg-sort-btn {\n    --button-justify: center;\n  }\n\n  .dg-th[data-align='right'] .dg-sort-btn {\n    --button-justify: flex-end;\n  }\n\n  :host(:dir(rtl)) .dg-th,\n  :dir(rtl) .dg-th {\n    border-right: none;\n    border-left: var(--border) solid var(--_border-color);\n  }\n\n  .dg-th:last-child,\n  .dg-th.dg-th-check,\n  .dg-th.dg-th-expand,\n  .dg-th.dg-th-last {\n    border-right: none;\n  }\n\n  :host(:dir(rtl)) .dg-th:last-child,\n  :host(:dir(rtl)) .dg-th.dg-th-check,\n  :host(:dir(rtl)) .dg-th.dg-th-expand,\n  :host(:dir(rtl)) .dg-th.dg-th-last,\n  :dir(rtl) .dg-th:last-child,\n  :dir(rtl) .dg-th.dg-th-check,\n  :dir(rtl) .dg-th.dg-th-expand,\n  :dir(rtl) .dg-th.dg-th-last {\n    border-left: none;\n  }\n\n  .dg-th-inner {\n    position: relative;\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .dg-th[aria-sort]:has(.dg-sort-btn:hover):not(:has(.dg-sort-btn[aria-disabled='true'])) {\n    background: color-mix(in oklch, var(--color-contrast-900) 5%, transparent);\n  }\n\n  .dg-th[aria-sort='ascending'] .dg-sort-icon,\n  .dg-th[aria-sort='descending'] .dg-sort-icon {\n    color: var(--_accent);\n  }\n\n  /* Select-all checkbox cell */\n  .dg-th-check {\n    width: var(--size-5);\n    min-width: var(--size-5);\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n  }\n\n  .dg-th-check,\n  .dg-td-check {\n    vertical-align: middle;\n    text-align: center;\n  }\n\n  .dg-td.dg-td-check {\n    padding: var(--size-1) 0 0;\n  }\n\n  /* ore-checkbox used for select-all and row checkboxes — label-less, compact */\n  .dg-check {\n    display: inline-flex;\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n    min-height: 0;\n    cursor: pointer;\n  }\n\n  /* ── Body rows ────────────────────────────────────────────────────────────── */\n\n  .dg-body .dg-tr {\n    border-block-end: var(--border) solid var(--_border-color);\n    transition: background var(--transition-fast);\n  }\n\n  .dg-body .dg-tr:hover:not([data-disabled], [aria-selected='true']) {\n    background: var(--_row-hover-bg);\n  }\n\n  /* ── Selection ─────────────────────────────────────────────────────────────── */\n\n  .dg-body .dg-tr[aria-selected='true'] {\n    background: var(--_row-selected-bg);\n  }\n\n  .dg-body .dg-tr[data-selectable] {\n    cursor: pointer;\n    outline: none;\n  }\n\n  .dg-body .dg-tr[data-selectable]:focus-visible {\n    box-shadow: inset 0 0 0 2px var(--_row-selected-border);\n  }\n\n  .dg-body .dg-tr[data-disabled] {\n    pointer-events: none;\n    opacity: 0.45;\n  }\n\n  /* Striped rows */\n  :host([striped]) .dg-body .dg-tr:nth-child(even) {\n    background: var(--_stripe-bg);\n  }\n\n  :host([striped]) .dg-body .dg-tr:nth-child(even)[aria-selected='true'] {\n    background: var(--_row-selected-bg);\n  }\n\n  /* ── Body cells ────────────────────────────────────────────────────────────── */\n\n  .dg-td {\n    max-width: var(--datagrid-cell-max-width, 32ch);\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    color: var(--color-contrast-800);\n    white-space: nowrap;\n    border-right: var(--border) solid var(--_border-color);\n\n    &[data-align='center'] {\n      text-align: center;\n    }\n\n    &[data-align='right'] {\n      text-align: right;\n    }\n  }\n\n  :host(:dir(rtl)) .dg-td,\n  :dir(rtl) .dg-td {\n    border-right: none;\n    border-left: var(--border) solid var(--_border-color);\n  }\n\n  .dg-td:last-child,\n  .dg-td.dg-td-check,\n  .dg-td.dg-td-expand,\n  .dg-td.dg-td-last {\n    border-right: none;\n  }\n\n  :host(:dir(rtl)) .dg-td:last-child,\n  :host(:dir(rtl)) .dg-td.dg-td-check,\n  :host(:dir(rtl)) .dg-td.dg-td-expand,\n  :host(:dir(rtl)) .dg-td.dg-td-last,\n  :dir(rtl) .dg-td:last-child,\n  :dir(rtl) .dg-td.dg-td-check,\n  :dir(rtl) .dg-td.dg-td-expand,\n  :dir(rtl) .dg-td.dg-td-last {\n    border-left: none;\n  }\n\n  /* ── Empty state ──────────────────────────────────────────────────────────── */\n\n  .dg-empty {\n    padding: var(--size-12) var(--_cell-padding-x);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .dg-empty-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-4);\n    align-items: center;\n    justify-content: center;\n  }\n\n  .dg-empty-actions {\n    margin-top: var(--size-2);\n  }\n\n  /* ── Controls bar (tabs + action row) ───────────────────────────────────── */\n\n  .dg-controls {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    justify-content: space-between;\n    height: var(--size-8);\n    padding: var(--size-1-5) var(--_cell-padding-x);\n    background: var(--_header-bg);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Tab system (left) ───────────────────────────────────────────────────── */\n\n  .dg-tabs {\n    display: flex;\n    flex: 1;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .dg-tab {\n    --button-padding: var(--size-0-5) var(--size-2-5);\n    --button-font-size: var(--text-xs);\n    --button-color: var(--color-contrast-500);\n\n    flex: 1;\n    min-width: 0;\n  }\n\n  @media (max-width: 40rem) {\n    .dg-tabs {\n      overflow-x: auto;\n      overscroll-behavior-inline: contain;\n      scrollbar-width: none;\n    }\n\n    .dg-tabs::-webkit-scrollbar {\n      display: none;\n    }\n\n    .dg-tab {\n      flex: 0 0 auto;\n      min-width: max-content;\n    }\n  }\n\n  .dg-tab--active {\n    --button-color: var(--color-contrast-900);\n    --button-bg: color-mix(in oklch, var(--color-contrast-500) 10%, transparent);\n    --button-border-color: var(--_border-color);\n    --button-border: var(--border);\n\n    font-weight: var(--font-semibold);\n  }\n\n  /* ── Action bar (right) ──────────────────────────────────────────────────── */\n\n  .dg-actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-0-5);\n    align-items: center;\n  }\n\n  /* ── Shared icon button — used by action bar, search-expand clear, popover header icons ── */\n\n  .dg-action-divider {\n    display: inline-block;\n    flex-shrink: 0;\n    width: var(--border);\n    height: var(--size-4);\n    margin-inline: var(--size-1);\n    background: var(--_border-color);\n\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  .dg-filter {\n    display: block;\n    width: 100%;\n  }\n\n  /* ── Search toggle (rightmost action) ───────────────────────────────────── */\n\n  .dg-search {\n    display: flex;\n    flex-direction: row-reverse;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .dg-search-input {\n    --input-height: var(--size-7);\n    display: block;\n    flex-shrink: 0;\n    width: 0;\n    overflow: hidden;\n    opacity: 0;\n    transition:\n      width var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .dg-search--open .dg-search-input {\n    width: 12rem;\n    overflow: visible;\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dg-search-input {\n      transition: none;\n    }\n  }\n\n  /* ── ore-popover: action popover wrapper ─────────────────────────────────── */\n\n  .dg-action-popover {\n    display: inline-flex;\n  }\n\n  /* ── Popover content: shared header row ─────────────────────────────────── */\n\n  .dg-pop-header {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--size-10);\n    padding: var(--size-2) var(--size-3);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .dg-pop-title {\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-600);\n    letter-spacing: 0.02em;\n  }\n\n  .dg-pop-heading,\n  .dg-pop-heading > * {\n    display: block;\n    min-width: 0;\n  }\n\n  .dg-pop-heading small {\n    margin-block-start: var(--size-0-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  /* ── Sort / Group by popover content ────────────────────────────────────── */\n\n  .dg-pop-sort {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .dg-pop-sort-row {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n  }\n\n  .dg-pop-select,\n  .dg-pop-dir-select {\n    --input-min-width: 0;\n    --select-min-width: 0;\n    width: 0;\n    min-width: 0;\n  }\n\n  .dg-pop-select {\n    flex: 2 1 0;\n  }\n\n  .dg-pop-dir-select {\n    flex: 0 0 var(--size-28);\n    width: var(--size-28);\n  }\n\n  /* ── Filter popover content ──────────────────────────────────────────────── */\n\n  .dg-pop-filter {\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Field picker: select columns to add filter rules. */\n  .dg-pop-filter-fields {\n    padding: var(--size-2) var(--size-3);\n  }\n\n  /* ── Filter rules section ────────────────────────────────────────────────── */\n\n  .dg-pop-filter-rules {\n    padding-block-start: var(--size-1);\n    border-block-start: var(--border) solid var(--_border-color);\n\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  .dg-pop-filter-rule {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    padding: var(--size-2) var(--size-3);\n  }\n\n  .dg-pop-filter-rule-header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n  }\n\n  .dg-pop-filter-field {\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-800);\n    white-space: nowrap;\n  }\n\n  .dg-pop-filter-op-select {\n    --input-min-width: 0;\n    --select-min-width: 0;\n    --select-height: var(--size-6);\n    --select-font-size: var(--text-2xs);\n    --select-padding-x: var(--size-1-5);\n\n    flex: 1 1 0;\n    min-width: 6rem;\n  }\n\n  .dg-state-trigger {\n    position: relative;\n  }\n\n  .dg-state-trigger[data-customized]::after {\n    position: absolute;\n    inset-block-start: var(--size-1);\n    inset-inline-end: var(--size-1);\n    width: var(--size-1-5);\n    height: var(--size-1-5);\n    content: '';\n    background: var(--color-primary);\n    border: var(--border) solid var(--_header-bg);\n    border-radius: 50%;\n  }\n\n  .dg-pop-col {\n    width: 18rem;\n  }\n\n  .dg-pop-col-list {\n    display: grid;\n    gap: var(--size-0-5);\n    max-height: min(50vh, 24rem);\n    padding: var(--size-2) var(--size-3);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n\n  .dg-pop-col-item {\n    --checkbox-size: var(--size-4);\n    --checkbox-font-size: var(--text-sm);\n\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .dg-pop-col-item:hover {\n    background: var(--color-contrast-150);\n  }\n\n  .dg-pop-col-item::part(label) {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ── Footer / pagination bar ─────────────────────────────────────────────── */\n\n  .dg-footer {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1) var(--_cell-padding-x);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    background: var(--_header-bg);\n  }\n\n  .dg-footer-info {\n    white-space: nowrap;\n  }\n\n  .dg-footer-start {\n    display: flex;\n    flex: 1 1 auto;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .dg-page-size-wrap {\n    flex-shrink: 0;\n    order: -1;\n    width: var(--size-20);\n  }\n\n  .dg-page-size-select {\n    --input-height: var(--size-8);\n    --input-min-width: 0;\n    --select-min-width: 0;\n    --select-font-size: var(--text-xs);\n    --select-padding-x: var(--size-2);\n  }\n\n  .dg-pagination {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    margin-inline-start: auto;\n  }\n\n  :host(:dir(rtl)) .dg-page-btn,\n  :dir(rtl) .dg-page-btn {\n    transform: scaleX(-1);\n  }\n\n  .dg-page-btn {\n    --button-color: var(--color-contrast-600);\n    --button-radius: var(--rounded-md);\n\n    width: var(--size-7);\n    height: var(--size-7);\n  }\n\n  .dg-page-btn:hover {\n    --button-color: var(--color-contrast-900);\n    --button-bg: var(--color-contrast-300);\n  }\n\n  .dg-page-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.35;\n  }\n\n  .dg-page-label {\n    padding-inline: var(--size-1);\n    white-space: nowrap;\n  }\n\n  /* ── Column resize handle (F4) ───────────────────────────────────────────── */\n\n  .dg-col-resize {\n    position: absolute;\n    inset-block: calc(var(--_cell-padding-y) * -1);\n    inset-inline-end: calc((var(--_cell-padding-x) + var(--border) + 2px) * -1);\n    width: var(--size-1);\n    cursor: col-resize;\n    user-select: none;\n    background: transparent;\n    border-radius: var(--rounded);\n    transition: background var(--transition-fast);\n  }\n\n  .dg-col-resize:hover,\n  .dg-col-resize:active {\n    background: var(--_accent, var(--color-contrast-300));\n  }\n\n  /* ── Cell keyboard focus (ARIA grid roving tabindex) ─────────────────────── */\n\n  .dg-td:focus-visible,\n  .dg-th:focus-visible {\n    outline: 2px solid var(--_row-selected-border);\n    outline-offset: -2px;\n  }\n\n  /* ── Row expansion ────────────────────────────────────────────────────────── */\n\n  .dg-tr-expanded .dg-td-expanded {\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    border: none;\n\n    /* Paint background + bottom separator via box-shadow so it is\n       direction-agnostic and covers the host outer border on both sides. */\n    box-shadow:\n      inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-600) 4%, var(--_bg, transparent)),\n      inset 0 calc(var(--border) * -1) 0 var(--_border-color);\n  }\n\n  .dg-tr-expanded:last-child .dg-td-expanded {\n    box-shadow: inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-900) 4%, var(--_bg, transparent));\n  }\n\n  .dg-tr:has(+ .dg-tr-expanded) {\n    border-block-end: none;\n  }\n\n  .dg-th-expand,\n  .dg-td-expand {\n    width: var(--size-8);\n    min-width: var(--size-8);\n    padding-block: var(--size-1) 0;\n    padding-inline: 0 var(--size-2);\n    text-align: center;\n    white-space: nowrap;\n    border-right: none;\n    border-left: none;\n  }\n\n  .dg-expand-btn {\n    --button-color: var(--color-contrast-500);\n    --button-radius: var(--rounded-sm);\n\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .dg-expand-btn:hover {\n    --button-color: var(--color-contrast-900);\n  }\n\n  .dg-expand-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  /* ── Loading overlay ──────────────────────────────────────────────────────── */\n\n  .dg-loading-overlay {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in oklch, var(--_bg, white) 40%, transparent);\n    backdrop-filter: blur(1px);\n  }\n\n  :host([loading]) .dg-loading-overlay {\n    display: flex;\n  }\n\n  :host([loading]) .dg-scroll table {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  .dg-spin {\n    animation: dg-spin 1s linear infinite;\n  }\n\n  @keyframes dg-spin {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"datagrid.css.cjs","names":[],"sources":["../../../src/inputs/datagrid/datagrid.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    /* ── Datagrid-specific token overrides on top of tableBaseMixin ─────── */\n    --_row-hover-bg: var(--datagrid-row-hover-bg, color-mix(in oklch, var(--color-contrast-500) 5%, transparent));\n    --_row-selected-bg: var(--datagrid-row-selected-bg, color-mix(in oklch, var(--_accent) 10%, transparent));\n    --_row-selected-border: var(--datagrid-row-selected-border, var(--_accent));\n  }\n\n  /* ── Scroll wrapper ───────────────────────────────────────────────────────── */\n\n  .dg-scroll {\n    max-height: var(--datagrid-max-height, none);\n    overflow: auto;\n  }\n\n  /* ── Table ────────────────────────────────────────────────────────────────── */\n\n  .dg-table {\n    width: 100%;\n    font-size: var(--_font-size);\n    table-layout: auto;\n    border-collapse: collapse;\n  }\n\n  /* ── Head ─────────────────────────────────────────────────────────────────── */\n\n  .dg-head {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    background: var(--_header-bg);\n    box-shadow: inset 0 calc(var(--border) * -1) 0 var(--_border-color);\n  }\n\n  .dg-th {\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n    user-select: none;\n    border-right: var(--border) solid var(--_border-color);\n\n    &[data-align='center'] {\n      text-align: center;\n    }\n\n    &[data-align='right'] {\n      text-align: right;\n    }\n\n    &:has(.dg-sort-btn) {\n      padding: 0;\n    }\n  }\n\n  .dg-sort-btn {\n    --button-padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    --button-font-size: var(--text-xs);\n    --button-font-weight: var(--font-semibold);\n    --button-color: var(--color-contrast-500);\n    --button-justify: flex-start;\n\n    height: 100%;\n  }\n\n  .dg-th[data-align='center'] .dg-sort-btn {\n    --button-justify: center;\n  }\n\n  .dg-th[data-align='right'] .dg-sort-btn {\n    --button-justify: flex-end;\n  }\n\n  :host(:dir(rtl)) .dg-th,\n  :dir(rtl) .dg-th {\n    border-right: none;\n    border-left: var(--border) solid var(--_border-color);\n  }\n\n  .dg-th:last-child,\n  .dg-th.dg-th-check,\n  .dg-th.dg-th-expand,\n  .dg-th.dg-th-last {\n    border-right: none;\n  }\n\n  :host(:dir(rtl)) .dg-th:last-child,\n  :host(:dir(rtl)) .dg-th.dg-th-check,\n  :host(:dir(rtl)) .dg-th.dg-th-expand,\n  :host(:dir(rtl)) .dg-th.dg-th-last,\n  :dir(rtl) .dg-th:last-child,\n  :dir(rtl) .dg-th.dg-th-check,\n  :dir(rtl) .dg-th.dg-th-expand,\n  :dir(rtl) .dg-th.dg-th-last {\n    border-left: none;\n  }\n\n  .dg-th-inner {\n    position: relative;\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .dg-th[aria-sort]:has(.dg-sort-btn:hover):not(:has(.dg-sort-btn[aria-disabled='true'])) {\n    background: color-mix(in oklch, var(--color-contrast-900) 5%, transparent);\n  }\n\n  .dg-th[aria-sort='ascending'] .dg-sort-icon,\n  .dg-th[aria-sort='descending'] .dg-sort-icon {\n    color: var(--_accent);\n  }\n\n  /* Select-all checkbox cell */\n  .dg-th-check {\n    width: var(--size-5);\n    min-width: var(--size-5);\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n  }\n\n  .dg-th-check,\n  .dg-td-check {\n    vertical-align: middle;\n    text-align: center;\n  }\n\n  .dg-td.dg-td-check {\n    padding: var(--size-1) 0 0;\n  }\n\n  /* ore-checkbox used for select-all and row checkboxes: label-less, compact */\n  .dg-check {\n    display: inline-flex;\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n    min-height: 0;\n    cursor: pointer;\n  }\n\n  /* ── Body rows ────────────────────────────────────────────────────────────── */\n\n  .dg-body .dg-tr {\n    border-block-end: var(--border) solid var(--_border-color);\n    transition: background var(--transition-fast);\n  }\n\n  .dg-body .dg-tr:hover:not([data-disabled], [aria-selected='true']) {\n    background: var(--_row-hover-bg);\n  }\n\n  /* ── Selection ─────────────────────────────────────────────────────────────── */\n\n  .dg-body .dg-tr[aria-selected='true'] {\n    background: var(--_row-selected-bg);\n  }\n\n  .dg-body .dg-tr[data-selectable] {\n    cursor: pointer;\n    outline: none;\n  }\n\n  .dg-body .dg-tr[data-selectable]:focus-visible {\n    box-shadow: inset 0 0 0 2px var(--_row-selected-border);\n  }\n\n  .dg-body .dg-tr[data-disabled] {\n    pointer-events: none;\n    opacity: 0.45;\n  }\n\n  /* Striped rows */\n  :host([striped]) .dg-body .dg-tr:nth-child(even) {\n    background: var(--_stripe-bg);\n  }\n\n  :host([striped]) .dg-body .dg-tr:nth-child(even)[aria-selected='true'] {\n    background: var(--_row-selected-bg);\n  }\n\n  /* ── Body cells ────────────────────────────────────────────────────────────── */\n\n  .dg-td {\n    max-width: var(--datagrid-cell-max-width, 32ch);\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    color: var(--color-contrast-800);\n    white-space: nowrap;\n    border-right: var(--border) solid var(--_border-color);\n\n    &[data-align='center'] {\n      text-align: center;\n    }\n\n    &[data-align='right'] {\n      text-align: right;\n    }\n  }\n\n  :host(:dir(rtl)) .dg-td,\n  :dir(rtl) .dg-td {\n    border-right: none;\n    border-left: var(--border) solid var(--_border-color);\n  }\n\n  .dg-td:last-child,\n  .dg-td.dg-td-check,\n  .dg-td.dg-td-expand,\n  .dg-td.dg-td-last {\n    border-right: none;\n  }\n\n  :host(:dir(rtl)) .dg-td:last-child,\n  :host(:dir(rtl)) .dg-td.dg-td-check,\n  :host(:dir(rtl)) .dg-td.dg-td-expand,\n  :host(:dir(rtl)) .dg-td.dg-td-last,\n  :dir(rtl) .dg-td:last-child,\n  :dir(rtl) .dg-td.dg-td-check,\n  :dir(rtl) .dg-td.dg-td-expand,\n  :dir(rtl) .dg-td.dg-td-last {\n    border-left: none;\n  }\n\n  /* ── Empty state ──────────────────────────────────────────────────────────── */\n\n  .dg-empty {\n    padding: var(--size-12) var(--_cell-padding-x);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .dg-empty-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-4);\n    align-items: center;\n    justify-content: center;\n  }\n\n  .dg-empty-actions {\n    margin-top: var(--size-2);\n  }\n\n  /* ── Controls bar (tabs + action row) ───────────────────────────────────── */\n\n  .dg-controls {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    justify-content: space-between;\n    height: var(--size-8);\n    padding: var(--size-1-5) var(--_cell-padding-x);\n    background: var(--_header-bg);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Tab system (left) ───────────────────────────────────────────────────── */\n\n  .dg-tabs {\n    display: flex;\n    flex: 1;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .dg-tab {\n    --button-padding: var(--size-0-5) var(--size-2-5);\n    --button-font-size: var(--text-xs);\n    --button-color: var(--color-contrast-500);\n\n    flex: 1;\n    min-width: 0;\n  }\n\n  @media (max-width: 40rem) {\n    .dg-tabs {\n      overflow-x: auto;\n      overscroll-behavior-inline: contain;\n      scrollbar-width: none;\n    }\n\n    .dg-tabs::-webkit-scrollbar {\n      display: none;\n    }\n\n    .dg-tab {\n      flex: 0 0 auto;\n      min-width: max-content;\n    }\n  }\n\n  .dg-tab--active {\n    --button-color: var(--color-contrast-900);\n    --button-bg: color-mix(in oklch, var(--color-contrast-500) 10%, transparent);\n    --button-border-color: var(--_border-color);\n    --button-border: var(--border);\n\n    font-weight: var(--font-semibold);\n  }\n\n  /* ── Action bar (right) ──────────────────────────────────────────────────── */\n\n  .dg-actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-0-5);\n    align-items: center;\n  }\n\n  /* ── Shared icon button: used by action bar, search-expand clear, popover header icons ── */\n\n  .dg-action-divider {\n    display: inline-block;\n    flex-shrink: 0;\n    width: var(--border);\n    height: var(--size-4);\n    margin-inline: var(--size-1);\n    background: var(--_border-color);\n\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  .dg-filter {\n    display: block;\n    width: 100%;\n  }\n\n  /* ── Search toggle (rightmost action) ───────────────────────────────────── */\n\n  .dg-search {\n    display: flex;\n    flex-direction: row-reverse;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .dg-search-input {\n    --input-height: var(--size-7);\n    display: block;\n    flex-shrink: 0;\n    width: 0;\n    overflow: hidden;\n    opacity: 0;\n    transition:\n      width var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .dg-search--open .dg-search-input {\n    width: 12rem;\n    overflow: visible;\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dg-search-input {\n      transition: none;\n    }\n  }\n\n  /* ── ore-popover: action popover wrapper ─────────────────────────────────── */\n\n  .dg-action-popover {\n    display: inline-flex;\n  }\n\n  /* ── Popover content: shared header row ─────────────────────────────────── */\n\n  .dg-pop-header {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--size-10);\n    padding: var(--size-2) var(--size-3);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .dg-pop-title {\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-600);\n    letter-spacing: 0.02em;\n  }\n\n  .dg-pop-heading,\n  .dg-pop-heading > * {\n    display: block;\n    min-width: 0;\n  }\n\n  .dg-pop-heading small {\n    margin-block-start: var(--size-0-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  /* ── Sort / Group by popover content ────────────────────────────────────── */\n\n  .dg-pop-sort {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .dg-pop-sort-row {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n  }\n\n  .dg-pop-select,\n  .dg-pop-dir-select {\n    --input-min-width: 0;\n    --select-min-width: 0;\n    width: 0;\n    min-width: 0;\n  }\n\n  .dg-pop-select {\n    flex: 2 1 0;\n  }\n\n  .dg-pop-dir-select {\n    flex: 0 0 var(--size-28);\n    width: var(--size-28);\n  }\n\n  /* ── Filter popover content ──────────────────────────────────────────────── */\n\n  .dg-pop-filter {\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Field picker: select columns to add filter rules. */\n  .dg-pop-filter-fields {\n    padding: var(--size-2) var(--size-3);\n  }\n\n  /* ── Filter rules section ────────────────────────────────────────────────── */\n\n  .dg-pop-filter-rules {\n    padding-block-start: var(--size-1);\n    border-block-start: var(--border) solid var(--_border-color);\n\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  .dg-pop-filter-rule {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    padding: var(--size-2) var(--size-3);\n  }\n\n  .dg-pop-filter-rule-header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n  }\n\n  .dg-pop-filter-field {\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-800);\n    white-space: nowrap;\n  }\n\n  .dg-pop-filter-op-select {\n    --input-min-width: 0;\n    --select-min-width: 0;\n    --select-height: var(--size-6);\n    --select-font-size: var(--text-2xs);\n    --select-padding-x: var(--size-1-5);\n\n    flex: 1 1 0;\n    min-width: 6rem;\n  }\n\n  .dg-state-trigger {\n    position: relative;\n  }\n\n  .dg-state-trigger[data-customized]::after {\n    position: absolute;\n    inset-block-start: var(--size-1);\n    inset-inline-end: var(--size-1);\n    width: var(--size-1-5);\n    height: var(--size-1-5);\n    content: '';\n    background: var(--color-primary);\n    border: var(--border) solid var(--_header-bg);\n    border-radius: 50%;\n  }\n\n  .dg-pop-col {\n    width: 18rem;\n  }\n\n  .dg-pop-col-list {\n    display: grid;\n    gap: var(--size-0-5);\n    max-height: min(50vh, 24rem);\n    padding: var(--size-2) var(--size-3);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n\n  .dg-pop-col-item {\n    --checkbox-size: var(--size-4);\n    --checkbox-font-size: var(--text-sm);\n\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .dg-pop-col-item:hover {\n    background: var(--color-contrast-150);\n  }\n\n  .dg-pop-col-item::part(label) {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ── Footer / pagination bar ─────────────────────────────────────────────── */\n\n  .dg-footer {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1) var(--_cell-padding-x);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    background: var(--_header-bg);\n  }\n\n  .dg-footer-info {\n    white-space: nowrap;\n  }\n\n  .dg-footer-start {\n    display: flex;\n    flex: 1 1 auto;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .dg-page-size-wrap {\n    flex-shrink: 0;\n    order: -1;\n    width: var(--size-20);\n  }\n\n  .dg-page-size-select {\n    --input-height: var(--size-8);\n    --input-min-width: 0;\n    --select-min-width: 0;\n    --select-font-size: var(--text-xs);\n    --select-padding-x: var(--size-2);\n  }\n\n  .dg-pagination {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    margin-inline-start: auto;\n  }\n\n  :host(:dir(rtl)) .dg-page-btn,\n  :dir(rtl) .dg-page-btn {\n    transform: scaleX(-1);\n  }\n\n  .dg-page-btn {\n    --button-color: var(--color-contrast-600);\n    --button-radius: var(--rounded-md);\n\n    width: var(--size-7);\n    height: var(--size-7);\n  }\n\n  .dg-page-btn:hover {\n    --button-color: var(--color-contrast-900);\n    --button-bg: var(--color-contrast-300);\n  }\n\n  .dg-page-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.35;\n  }\n\n  .dg-page-label {\n    padding-inline: var(--size-1);\n    white-space: nowrap;\n  }\n\n  /* ── Column resize handle (F4) ───────────────────────────────────────────── */\n\n  .dg-col-resize {\n    position: absolute;\n    inset-block: calc(var(--_cell-padding-y) * -1);\n    inset-inline-end: calc((var(--_cell-padding-x) + var(--border) + 2px) * -1);\n    width: var(--size-1);\n    cursor: col-resize;\n    user-select: none;\n    background: transparent;\n    border-radius: var(--rounded);\n    transition: background var(--transition-fast);\n  }\n\n  .dg-col-resize:hover,\n  .dg-col-resize:active {\n    background: var(--_accent, var(--color-contrast-300));\n  }\n\n  /* ── Cell keyboard focus (ARIA grid roving tabindex) ─────────────────────── */\n\n  .dg-td:focus-visible,\n  .dg-th:focus-visible {\n    outline: 2px solid var(--_row-selected-border);\n    outline-offset: -2px;\n  }\n\n  /* ── Row expansion ────────────────────────────────────────────────────────── */\n\n  .dg-tr-expanded .dg-td-expanded {\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    border: none;\n\n    /* Paint background + bottom separator via box-shadow so it is\n       direction-agnostic and covers the host outer border on both sides. */\n    box-shadow:\n      inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-600) 4%, var(--_bg, transparent)),\n      inset 0 calc(var(--border) * -1) 0 var(--_border-color);\n  }\n\n  .dg-tr-expanded:last-child .dg-td-expanded {\n    box-shadow: inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-900) 4%, var(--_bg, transparent));\n  }\n\n  .dg-tr:has(+ .dg-tr-expanded) {\n    border-block-end: none;\n  }\n\n  .dg-th-expand,\n  .dg-td-expand {\n    width: var(--size-8);\n    min-width: var(--size-8);\n    padding-block: var(--size-1) 0;\n    padding-inline: 0 var(--size-2);\n    text-align: center;\n    white-space: nowrap;\n    border-right: none;\n    border-left: none;\n  }\n\n  .dg-expand-btn {\n    --button-color: var(--color-contrast-500);\n    --button-radius: var(--rounded-sm);\n\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .dg-expand-btn:hover {\n    --button-color: var(--color-contrast-900);\n  }\n\n  .dg-expand-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  /* ── Loading overlay ──────────────────────────────────────────────────────── */\n\n  .dg-loading-overlay {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in oklch, var(--_bg, white) 40%, transparent);\n    backdrop-filter: blur(1px);\n  }\n\n  :host([loading]) .dg-loading-overlay {\n    display: flex;\n  }\n\n  :host([loading]) .dg-scroll table {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  .dg-spin {\n    animation: dg-spin 1s linear infinite;\n  }\n\n  @keyframes dg-spin {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n"],"mappings":""}