@vielzeug/refine 1.1.1 → 1.3.0

package/dist/inputs/datagrid/datagrid.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"datagrid.css?inline.js","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  .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    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    --input-height: var(--size-7);\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    align-items: center;\n    justify-content: space-between;\n    padding: var(--size-3) var(--size-3) var(--size-2);\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  /* ── Sort / Group by popover content ────────────────────────────────────── */\n\n  .dg-pop-sort {\n    display: flex;\n    flex-direction: column;\n    padding-block-end: var(--size-2);\n  }\n\n  .dg-pop-sort-row {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1) var(--size-3);\n  }\n\n  .dg-pop-select {\n    --select-min-width: var(--size-20);\n\n    flex: 2;\n  }\n\n  .dg-pop-dir-select {\n    --select-min-width: var(--size-10);\n\n    flex: 1;\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: 0 var(--size-3) 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    --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;\n    min-width: 6rem;\n  }\n\n  .dg-pop-col-item {\n    --button-radius: var(--rounded-md);\n\n    justify-content: flex-start;\n  }\n\n  .dg-pop-col-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    max-width: 25rem;\n    padding: var(--size-3);\n  }\n\n  /* ── Footer / pagination bar ─────────────────────────────────────────────── */\n\n  .dg-footer {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-2) 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-end {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    width: fit-content;\n    margin-inline-start: auto;\n  }\n\n  .dg-page-size-wrap {\n    flex-shrink: 0;\n    width: 5rem;\n  }\n\n  .dg-page-size-select {\n    --select-min-width: 0;\n    --select-height: var(--size-7);\n    --select-font-size: var(--text-xs);\n    --select-padding-x: var(--size-2);\n  }\n\n  .dg-pagination {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\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":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"date-picker.css?inline.cjs","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n\n    position: relative;\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n  }\n\n  /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by default */\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n  .calendar {\n    position: absolute;\n    top: calc(100% + var(--size-1));\n    left: 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    pointer-events: none;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .calendar[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n  .cal-header {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    justify-content: space-between;\n    padding-block-end: var(--size-2);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .nav-btn:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-300);\n  }\n\n  .nav-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-btn {\n    flex: 1;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .cal-label-btn:hover {\n    background: var(--color-contrast-300);\n  }\n\n  .cal-label-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-month,\n  .cal-label-year {\n    display: inline-block;\n  }\n\n  .cal-label-sep {\n    display: inline-block;\n    padding-inline: var(--size-1);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n  /* Prevent display:flex from overriding the [hidden] attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  .cal-grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n  }\n\n  .cal-grid-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--size-0-5);\n    min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n  }\n\n  /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n     removes them from layout so their children still participate directly in the\n     parent's CSS grid tracks. */\n  .cal-grid [role='row'] {\n    display: contents;\n  }\n\n  .cal-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--text-sm);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .cal-cell-head {\n    height: var(--size-8);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: default;\n  }\n\n  .cal-cell-day {\n    height: var(--size-8);\n    color: var(--color-contrast-800);\n  }\n\n  .cal-cell-day:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-day:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-today] {\n    font-weight: var(--font-semibold);\n    color: var(--_day-today-color);\n  }\n\n  .cal-cell-day[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-outside] {\n    opacity: var(--_day-outside-opacity);\n  }\n\n  .cal-cell-day[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n  .cal-grid-months,\n  .cal-grid-years {\n    /* 4-column grid — same width as cal-grid-days, natural height. */\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--size-1);\n  }\n\n  .cal-cell-month,\n  .cal-cell-year {\n    height: var(--size-10);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .cal-cell-month:hover:not([data-disabled]),\n  .cal-cell-year:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-month:focus-visible,\n  .cal-cell-year:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-selected],\n  .cal-cell-year[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-disabled],\n  .cal-cell-year[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field,\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"date-picker.css?inline.js","names":[],"sources":["../../../src/inputs/date-picker/date-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--date-picker-day-outside-opacity, 0.35);\n\n    position: relative;\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--date-picker-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--date-picker-day-today-color, var(--_theme-base));\n  }\n\n  /* Make the trigger look like a button — ore-input is readonly so pointer changes to text by default */\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Calendar popup ──────────────────────────────────────────────────────── */\n\n  .calendar {\n    position: absolute;\n    top: calc(100% + var(--size-1));\n    left: 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    pointer-events: none;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--date-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .calendar[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ── Calendar header ─────────────────────────────────────────────────────── */\n\n  .cal-header {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    justify-content: space-between;\n    padding-block-end: var(--size-2);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .nav-btn:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-300);\n  }\n\n  .nav-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-btn {\n    flex: 1;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .cal-label-btn:hover {\n    background: var(--color-contrast-300);\n  }\n\n  .cal-label-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-month,\n  .cal-label-year {\n    display: inline-block;\n  }\n\n  .cal-label-sep {\n    display: inline-block;\n    padding-inline: var(--size-1);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  /* ── Day grid ────────────────────────────────────────────────────────────── */\n\n  /* Prevent display:flex from overriding the [hidden] attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  .cal-grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n  }\n\n  .cal-grid-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--size-0-5);\n    min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n  }\n\n  /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n     removes them from layout so their children still participate directly in the\n     parent's CSS grid tracks. */\n  .cal-grid [role='row'] {\n    display: contents;\n  }\n\n  .cal-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--text-sm);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .cal-cell-head {\n    height: var(--size-8);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: default;\n  }\n\n  .cal-cell-day {\n    height: var(--size-8);\n    color: var(--color-contrast-800);\n  }\n\n  .cal-cell-day:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-day:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-today] {\n    font-weight: var(--font-semibold);\n    color: var(--_day-today-color);\n  }\n\n  .cal-cell-day[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-outside] {\n    opacity: var(--_day-outside-opacity);\n  }\n\n  .cal-cell-day[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Month / Year grids ──────────────────────────────────────────────────── */\n\n  .cal-grid-months,\n  .cal-grid-years {\n    /* 4-column grid — same width as cal-grid-days, natural height. */\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--size-1);\n  }\n\n  .cal-cell-month,\n  .cal-cell-year {\n    height: var(--size-10);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .cal-cell-month:hover:not([data-disabled]),\n  .cal-cell-year:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-month:focus-visible,\n  .cal-cell-year:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-selected],\n  .cal-cell-year[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-disabled],\n  .cal-cell-year[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field,\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/file-input/file-input.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"file-input.css?inline.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-remove {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in oklch, var(--color-error) 12%, transparent));\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-1px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 8%, var(--color-canvas));\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px) scale(1.05);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-50));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--_theme-border));\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: var(--file-input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --file-input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: var(--file-input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--file-input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--file-input-bg, var(--_theme-backdrop));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--file-input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--file-input-bg, transparent);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, var(--color-contrast-200));\n  }\n\n  :host([variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/file-input/file-input.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"file-input.css?inline.js","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-remove {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in oklch, var(--color-error) 12%, transparent));\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-1px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 8%, var(--color-canvas));\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px) scale(1.05);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-50));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--_theme-border));\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: var(--file-input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --file-input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: var(--file-input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--file-input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--file-input-bg, var(--_theme-backdrop));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--file-input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--file-input-bg, transparent);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, var(--color-contrast-200));\n  }\n\n  :host([variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/form/form.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"form.css?inline.cjs","names":[],"sources":["../../../src/inputs/form/form.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  form {\n    display: grid;\n    gap: var(--form-gap, var(--size-4, 1rem));\n    align-items: start;\n  }\n}\n\n@layer refine.orientation {\n  :host([orientation='horizontal']) form {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n}\n"],"mappings":""}

package/dist/inputs/form/form.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form.css?inline.js","names":[],"sources":["../../../src/inputs/form/form.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  form {\n    display: grid;\n    gap: var(--form-gap, var(--size-4, 1rem));\n    align-items: start;\n  }\n}\n\n@layer refine.orientation {\n  :host([orientation='horizontal']) form {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n}\n"],"mappings":""}

package/dist/inputs/input/input.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.css?inline.cjs","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow, var(--shadow-2xs));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast)\n    );\n  }\n\n  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .field:focus-within .label {\n    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--input-bg, var(--color-contrast-50));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--_theme-border));\n  }\n\n  :host([variant='flat']) .field {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: var(--input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: var(--input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--input-bg, var(--_theme-backdrop));\n    --_border-color: var(--input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--input-bg, transparent);\n  }\n\n  :host([variant='outline']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--input-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    border: none;\n    border-bottom: var(--border) solid var(--_border-color);\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    border-bottom: var(--border-2) solid var(--input-focus-border-color, var(--_theme-focus));\n  }\n}\n\n@layer refine.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/input/input.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.css?inline.js","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow, var(--shadow-2xs));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast)\n    );\n  }\n\n  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .field:focus-within .label {\n    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--input-bg, var(--color-contrast-50));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--_theme-border));\n  }\n\n  :host([variant='flat']) .field {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: var(--input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: var(--input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--input-bg, var(--_theme-backdrop));\n    --_border-color: var(--input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--input-bg, transparent);\n  }\n\n  :host([variant='outline']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--input-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    border: none;\n    border-bottom: var(--border) solid var(--_border-color);\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    border-bottom: var(--border-2) solid var(--input-focus-border-color, var(--_theme-focus));\n  }\n}\n\n@layer refine.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/number-input/number-input.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"number-input.css?inline.cjs","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    width: fit-content;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .wrapper {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Align buttons to the top when the label is outside (it adds height above the field) */\n  :host([label-placement='outside']) .wrapper {\n    align-items: flex-end;\n  }\n\n  /* Spin buttons */\n  button {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-10);\n    min-width: var(--size-10);\n    height: var(--size-10);\n    min-height: var(--size-10);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: color var(--transition-fast);\n  }\n\n  button:hover:not(:disabled) {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-100);\n  }\n\n  button:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: 2px;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  .field {\n    width: var(--size-20);\n  }\n\n  :host([fullwidth]) .field {\n    flex: 1;\n    width: auto;\n    min-width: 0;\n  }\n}\n"],"mappings":""}

package/dist/inputs/number-input/number-input.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"number-input.css?inline.js","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    width: fit-content;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .wrapper {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Align buttons to the top when the label is outside (it adds height above the field) */\n  :host([label-placement='outside']) .wrapper {\n    align-items: flex-end;\n  }\n\n  /* Spin buttons */\n  button {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-10);\n    min-width: var(--size-10);\n    height: var(--size-10);\n    min-height: var(--size-10);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: color var(--transition-fast);\n  }\n\n  button:hover:not(:disabled) {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-100);\n  }\n\n  button:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: 2px;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  .field {\n    width: var(--size-20);\n  }\n\n  :host([fullwidth]) .field {\n    flex: 1;\n    width: auto;\n    min-width: 0;\n  }\n}\n"],"mappings":""}

package/dist/inputs/otp-input/otp-input.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"otp-input.css?inline.cjs","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_cell-bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_cell-bg);\n    border: var(--_cell-border) solid var(--_cell-border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n    box-shadow: 0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-50));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .cell,\n  :host([variant='solid']) .cell {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-100));\n    --_cell-border-color: var(--otp-cell-border-color, var(--_theme-border, var(--color-contrast-200)));\n  }\n\n  :host([variant='flat']) .cell {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --otp-cell-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .cell:focus {\n    background: var(--otp-cell-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--otp-cell-focus-border-color, color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_cell-bg: var(--otp-cell-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_cell-border-color: var(--otp-cell-border-color, color-mix(in oklch, var(--_cell-focus-border) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .cell {\n    color: var(--_theme-base);\n    caret-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .cell:hover:not(:disabled) {\n    border-color: var(--otp-cell-hover-border-color, var(--_cell-focus-border));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n  }\n\n  :host([variant='outline']) .cell {\n    box-shadow: none;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n    --_cell-border-color: var(--otp-cell-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .cell {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}

package/dist/inputs/otp-input/otp-input.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"otp-input.css?inline.js","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_cell-bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_cell-bg);\n    border: var(--_cell-border) solid var(--_cell-border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n    box-shadow: 0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-50));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .cell,\n  :host([variant='solid']) .cell {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-100));\n    --_cell-border-color: var(--otp-cell-border-color, var(--_theme-border, var(--color-contrast-200)));\n  }\n\n  :host([variant='flat']) .cell {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --otp-cell-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .cell:focus {\n    background: var(--otp-cell-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--otp-cell-focus-border-color, color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_cell-bg: var(--otp-cell-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_cell-border-color: var(--otp-cell-border-color, color-mix(in oklch, var(--_cell-focus-border) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .cell {\n    color: var(--_theme-base);\n    caret-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .cell:hover:not(:disabled) {\n    border-color: var(--otp-cell-hover-border-color, var(--_cell-focus-border));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n  }\n\n  :host([variant='outline']) .cell {\n    box-shadow: none;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n    --_cell-border-color: var(--otp-cell-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .cell {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio/radio.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio.css?inline.cjs","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio/radio.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio.css?inline.js","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio-group/radio-group.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-group.css?inline.cjs","names":[],"sources":["../../../src/inputs/radio-group/radio-group.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: none;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-600);\n  }\n\n  legend[hidden] {\n    display: none;\n  }\n\n  .radio-group-items {\n    display: flex;\n    flex-direction: var(--radio-group-direction, column);\n    gap: var(--radio-group-gap, var(--size-2));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .error-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  :host([orientation='horizontal']) .radio-group-items {\n    --radio-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio-group/radio-group.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-group.css?inline.js","names":[],"sources":["../../../src/inputs/radio-group/radio-group.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: none;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-600);\n  }\n\n  legend[hidden] {\n    display: none;\n  }\n\n  .radio-group-items {\n    display: flex;\n    flex-direction: var(--radio-group-direction, column);\n    gap: var(--radio-group-gap, var(--size-2));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .error-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  :host([orientation='horizontal']) .radio-group-items {\n    --radio-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/inputs/rating/rating.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"rating.css?inline.cjs","names":[],"sources":["../../../src/inputs/rating/rating.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_star-size: var(--rating-star-size, var(--size-7));\n    --_color-empty: var(--rating-color-empty, var(--color-contrast-200));\n    --_color-filled: var(--rating-color-filled, var(--_theme-base, var(--color-warning)));\n    --_gap: var(--rating-gap, var(--size-0_5));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  .stars {\n    position: relative;\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  .sparkle-layer {\n    position: absolute;\n    inset: 0;\n    overflow: visible;\n    pointer-events: none;\n  }\n\n  .sparkle {\n    position: absolute;\n    pointer-events: none;\n    background: var(--_color-filled);\n    border-radius: 50%;\n    animation: var(--_motion-animation, sparkle-fly var(--_dur, 500ms) var(--ease-out) forwards);\n  }\n\n  @keyframes sparkle-fly {\n    from {\n      opacity: 0.9;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0);\n    }\n  }\n\n  .star-btn {\n    all: unset;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_star-size);\n    min-width: var(--_touch-target);\n    height: var(--_star-size);\n    min-height: var(--_touch-target);\n    color: var(--_color-empty);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .star-btn[data-filled] {\n    color: var(--_color-filled);\n  }\n\n  :host([solid]) .star-btn ore-icon::part(svg) {\n    fill: none;\n  }\n\n  :host([solid]) .star-btn[data-filled] ore-icon::part(svg) {\n    fill: currentcolor;\n  }\n\n  .star-btn:hover:not([disabled]),\n  .star-btn:focus-visible:not([disabled]) {\n    transform: scale(1.08);\n  }\n\n  .star-btn:focus-visible {\n    outline: var(--border-2) solid var(--_color-filled);\n    outline-offset: var(--border-2);\n  }\n\n  .star-btn[disabled] {\n    cursor: default;\n  }\n\n  :host([readonly]) .star-btn,\n  :host([disabled]) .star-btn {\n    pointer-events: none;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_star-size: var(--size-5);\n  }\n\n  :host([size='lg']) {\n    --_star-size: var(--size-9);\n  }\n\n  @media (forced-colors: active) {\n    /* Distinguish filled vs unfilled stars with system button colors */\n    .star-btn {\n      color: ButtonText;\n    }\n\n    .star-btn[data-filled] {\n      color: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .star-btn:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    margin-block-start: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sparkle {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/inputs/rating/rating.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rating.css?inline.js","names":[],"sources":["../../../src/inputs/rating/rating.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_star-size: var(--rating-star-size, var(--size-7));\n    --_color-empty: var(--rating-color-empty, var(--color-contrast-200));\n    --_color-filled: var(--rating-color-filled, var(--_theme-base, var(--color-warning)));\n    --_gap: var(--rating-gap, var(--size-0_5));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  .stars {\n    position: relative;\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  .sparkle-layer {\n    position: absolute;\n    inset: 0;\n    overflow: visible;\n    pointer-events: none;\n  }\n\n  .sparkle {\n    position: absolute;\n    pointer-events: none;\n    background: var(--_color-filled);\n    border-radius: 50%;\n    animation: var(--_motion-animation, sparkle-fly var(--_dur, 500ms) var(--ease-out) forwards);\n  }\n\n  @keyframes sparkle-fly {\n    from {\n      opacity: 0.9;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0);\n    }\n  }\n\n  .star-btn {\n    all: unset;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_star-size);\n    min-width: var(--_touch-target);\n    height: var(--_star-size);\n    min-height: var(--_touch-target);\n    color: var(--_color-empty);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .star-btn[data-filled] {\n    color: var(--_color-filled);\n  }\n\n  :host([solid]) .star-btn ore-icon::part(svg) {\n    fill: none;\n  }\n\n  :host([solid]) .star-btn[data-filled] ore-icon::part(svg) {\n    fill: currentcolor;\n  }\n\n  .star-btn:hover:not([disabled]),\n  .star-btn:focus-visible:not([disabled]) {\n    transform: scale(1.08);\n  }\n\n  .star-btn:focus-visible {\n    outline: var(--border-2) solid var(--_color-filled);\n    outline-offset: var(--border-2);\n  }\n\n  .star-btn[disabled] {\n    cursor: default;\n  }\n\n  :host([readonly]) .star-btn,\n  :host([disabled]) .star-btn {\n    pointer-events: none;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_star-size: var(--size-5);\n  }\n\n  :host([size='lg']) {\n    --_star-size: var(--size-9);\n  }\n\n  @media (forced-colors: active) {\n    /* Distinguish filled vs unfilled stars with system button colors */\n    .star-btn {\n      color: ButtonText;\n    }\n\n    .star-btn[data-filled] {\n      color: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .star-btn:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    margin-block-start: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sparkle {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/inputs/select/select.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"select.css?inline.cjs","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-block;\n    min-width: var(--select-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n  }\n\n  /* Hide native <option> elements — we render our own UI */\n  ::slotted(option),\n  ::slotted(optgroup) {\n    display: none;\n  }\n\n  /* ore-input is readonly so pointer defaults to text — override to pointer */\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* Chips slot inside ore-input prefix */\n  .chips-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .chips-row[hidden] {\n    display: none;\n  }\n\n  /* Suffix: loader (left) + chevron (right) */\n  .trigger-suffix {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .trigger-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--transition-fast);\n  }\n\n  :host([open]) .trigger-icon {\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: var(--z-dropdown, 8000);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    max-height: 260px;\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    background: var(--color-canvas);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n\n    /* Hidden by default */\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  .options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\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 to keep option rows compact and readable. */\n  .option > span:first-child {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--color-contrast-100);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n  }\n\n  .option[data-selected] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n  }\n\n  .option[data-selected][data-focused] {\n    background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\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    opacity: 1;\n  }\n\n  /* ========================================\n       Option Groups\n       ======================================== */\n\n  .optgroup-label {\n    padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  /* ========================================\n       Loading / No-Results\n       ======================================== */\n\n  .dropdown-loading,\n  .dropdown-empty {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-500);\n    text-align: center;\n  }\n}\n"],"mappings":""}

package/dist/inputs/select/select.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select.css?inline.js","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-block;\n    min-width: var(--select-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n  }\n\n  /* Hide native <option> elements — we render our own UI */\n  ::slotted(option),\n  ::slotted(optgroup) {\n    display: none;\n  }\n\n  /* ore-input is readonly so pointer defaults to text — override to pointer */\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* Chips slot inside ore-input prefix */\n  .chips-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .chips-row[hidden] {\n    display: none;\n  }\n\n  /* Suffix: loader (left) + chevron (right) */\n  .trigger-suffix {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .trigger-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--transition-fast);\n  }\n\n  :host([open]) .trigger-icon {\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: var(--z-dropdown, 8000);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    max-height: 260px;\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    background: var(--color-canvas);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n\n    /* Hidden by default */\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  .options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\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 to keep option rows compact and readable. */\n  .option > span:first-child {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--color-contrast-100);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n  }\n\n  .option[data-selected] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n  }\n\n  .option[data-selected][data-focused] {\n    background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\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    opacity: 1;\n  }\n\n  /* ========================================\n       Option Groups\n       ======================================== */\n\n  .optgroup-label {\n    padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  /* ========================================\n       Loading / No-Results\n       ======================================== */\n\n  .dropdown-loading,\n  .dropdown-empty {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-500);\n    text-align: center;\n  }\n}\n"],"mappings":""}

package/dist/inputs/slider/slider.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider.css?inline.cjs","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-3));\n    --_track: var(--slider-track-bg, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb-bg, var(--color-contrast-100));\n    --_thumb-size: calc(var(--_size) - var(--size-1));\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    width: 100%;\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  height: var(--_size);\n  min-height: var(--_touch-target);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition:\n    left var(--transition-normal),\n    width var(--transition-normal);\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition:\n    box-shadow var(--transition-normal),\n    transform var(--transition-fast),\n    left var(--transition-normal);\n  will-change: transform;\n}\n\n:host([data-dragging]) .slider-thumb {\n  transition:\n    box-shadow var(--transition-normal),\n    transform var(--transition-fast);\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  cursor: grabbing;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: 2px;\n  box-shadow: var(--_shadow);\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  /* Replace box-shadow focus ring with outline for sole-thumb focus visibility */\n  :host(:focus-visible) .slider-thumb-sole {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer refine.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n.helper-text[hidden] {\n  display: none;\n}\n\n.helper-text {\n  width: 100%;\n  font-size: var(--text-xs);\n  line-height: var(--leading-tight);\n  color: var(--color-contrast-500);\n}\n\n.helper-text[role='alert'] {\n  color: var(--color-error);\n}\n\n@media (pointer: coarse) {\n  :host {\n    --_thumb-size: calc(var(--_size) + var(--size-2));\n    --_size: var(--size-7);\n  }\n}\n"],"mappings":""}

package/dist/inputs/slider/slider.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider.css?inline.js","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-3));\n    --_track: var(--slider-track-bg, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb-bg, var(--color-contrast-100));\n    --_thumb-size: calc(var(--_size) - var(--size-1));\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    width: 100%;\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  height: var(--_size);\n  min-height: var(--_touch-target);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition:\n    left var(--transition-normal),\n    width var(--transition-normal);\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition:\n    box-shadow var(--transition-normal),\n    transform var(--transition-fast),\n    left var(--transition-normal);\n  will-change: transform;\n}\n\n:host([data-dragging]) .slider-thumb {\n  transition:\n    box-shadow var(--transition-normal),\n    transform var(--transition-fast);\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  cursor: grabbing;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: 2px;\n  box-shadow: var(--_shadow);\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  /* Replace box-shadow focus ring with outline for sole-thumb focus visibility */\n  :host(:focus-visible) .slider-thumb-sole {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer refine.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n.helper-text[hidden] {\n  display: none;\n}\n\n.helper-text {\n  width: 100%;\n  font-size: var(--text-xs);\n  line-height: var(--leading-tight);\n  color: var(--color-contrast-500);\n}\n\n.helper-text[role='alert'] {\n  color: var(--color-error);\n}\n\n@media (pointer: coarse) {\n  :host {\n    --_thumb-size: calc(var(--_size) + var(--size-2));\n    --_size: var(--size-7);\n  }\n}\n"],"mappings":""}

package/dist/inputs/switch/switch.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch.css?inline.cjs","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track-bg, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb-bg, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--size-11);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible ~ .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-checked-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_width) + var(--size-2-5));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n"],"mappings":""}

package/dist/inputs/switch/switch.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch.css?inline.js","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track-bg, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb-bg, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--size-11);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible ~ .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-checked-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_width) + var(--size-2-5));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n"],"mappings":""}

package/dist/inputs/textarea/textarea.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"textarea.css?inline.cjs","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-50));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--_theme-border));\n  }\n\n  :host([variant='flat']) .field {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: var(--textarea-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --textarea-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: var(--textarea-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--textarea-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--textarea-bg, var(--_theme-backdrop));\n    --_border-color: var(--textarea-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) textarea {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) textarea::placeholder {\n    color: var(--textarea-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--textarea-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--textarea-bg, transparent);\n  }\n\n  :host([variant='outline']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--textarea-bg, transparent);\n    --_border-color: var(--textarea-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--textarea-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/textarea/textarea.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"textarea.css?inline.js","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-50));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--_theme-border));\n  }\n\n  :host([variant='flat']) .field {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: var(--textarea-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --textarea-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: var(--textarea-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--textarea-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--textarea-bg, var(--_theme-backdrop));\n    --_border-color: var(--textarea-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) textarea {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) textarea::placeholder {\n    color: var(--textarea-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--textarea-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--textarea-bg, transparent);\n  }\n\n  :host([variant='outline']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--textarea-bg, transparent);\n    --_border-color: var(--textarea-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--textarea-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/time-picker/time-picker.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"time-picker.css?inline.cjs","names":[],"sources":["../../../src/inputs/time-picker/time-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-focus));\n    --_hover-bg: var(--time-picker-option-hover-bg, color-mix(in oklch, var(--_selected-bg) 12%, transparent));\n\n    position: relative;\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-base));\n  }\n\n  /* Prevent display:flex/grid from overriding [hidden] attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ── Trigger ─────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Dropdown ────────────────────────────────────────────────────────────── */\n\n  .dropdown {\n    position: absolute;\n    top: calc(100% + var(--size-1));\n    left: 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    min-width: 12rem;\n    overflow: hidden;\n    pointer-events: none;\n    background: var(--time-picker-bg, var(--_bg));\n    border: var(--border) solid var(--time-picker-border-color, var(--_border-color));\n    border-radius: var(--time-picker-radius, var(--_radius));\n    box-shadow: var(--time-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .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  /* ── Columns row ────────────────────────────────────────────────────────── */\n\n  .cols-row {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  /* ── Columns (hours / sep / minutes / [period]) ──────────────────────────── */\n\n  .col,\n  .col-sep {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .col {\n    flex: 1;\n    min-width: var(--size-14);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .col-period {\n    flex: 0 0 auto;\n    min-width: var(--size-16);\n  }\n\n  /* ── Column header label ─────────────────────────────────────────────────── */\n\n  .col-label {\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-400);\n    text-align: center;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Scrollable option list ──────────────────────────────────────────────── */\n\n  .col-scroll {\n    width: 100%;\n    max-height: 11rem;\n    padding-block: var(--size-1);\n    overflow-y: auto;\n    scrollbar-width: thin;\n  }\n\n  /* ── Separator between hours and minutes ─────────────────────────────────── */\n\n  .col-sep {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding-block-start: var(--size-8); /* visually align with first option row */\n    padding-inline: var(--size-0-5);\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    user-select: none;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Option cells ────────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--size-8);\n    padding-inline: var(--size-2);\n    margin-inline: var(--size-1);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .option:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: var(--_hover-bg);\n  }\n\n  .option:focus-visible {\n    box-shadow: 0 0 0 2px var(--_selected-bg);\n  }\n\n  .option[aria-selected='true'] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_selected-bg);\n  }\n\n  .option[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .option {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/time-picker/time-picker.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"time-picker.css?inline.js","names":[],"sources":["../../../src/inputs/time-picker/time-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-focus));\n    --_hover-bg: var(--time-picker-option-hover-bg, color-mix(in oklch, var(--_selected-bg) 12%, transparent));\n\n    position: relative;\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-base));\n  }\n\n  /* Prevent display:flex/grid from overriding [hidden] attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ── Trigger ─────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Dropdown ────────────────────────────────────────────────────────────── */\n\n  .dropdown {\n    position: absolute;\n    top: calc(100% + var(--size-1));\n    left: 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    min-width: 12rem;\n    overflow: hidden;\n    pointer-events: none;\n    background: var(--time-picker-bg, var(--_bg));\n    border: var(--border) solid var(--time-picker-border-color, var(--_border-color));\n    border-radius: var(--time-picker-radius, var(--_radius));\n    box-shadow: var(--time-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .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  /* ── Columns row ────────────────────────────────────────────────────────── */\n\n  .cols-row {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  /* ── Columns (hours / sep / minutes / [period]) ──────────────────────────── */\n\n  .col,\n  .col-sep {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .col {\n    flex: 1;\n    min-width: var(--size-14);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .col-period {\n    flex: 0 0 auto;\n    min-width: var(--size-16);\n  }\n\n  /* ── Column header label ─────────────────────────────────────────────────── */\n\n  .col-label {\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-400);\n    text-align: center;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Scrollable option list ──────────────────────────────────────────────── */\n\n  .col-scroll {\n    width: 100%;\n    max-height: 11rem;\n    padding-block: var(--size-1);\n    overflow-y: auto;\n    scrollbar-width: thin;\n  }\n\n  /* ── Separator between hours and minutes ─────────────────────────────────── */\n\n  .col-sep {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding-block-start: var(--size-8); /* visually align with first option row */\n    padding-inline: var(--size-0-5);\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    user-select: none;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Option cells ────────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--size-8);\n    padding-inline: var(--size-2);\n    margin-inline: var(--size-1);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .option:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: var(--_hover-bg);\n  }\n\n  .option:focus-visible {\n    box-shadow: 0 0 0 2px var(--_selected-bg);\n  }\n\n  .option[aria-selected='true'] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_selected-bg);\n  }\n\n  .option[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .option {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/layout/box/box.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"box.css?inline.cjs","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Glass */\n  :host([variant='glass']:not([color])) {\n    --_bg: color-mix(in oklch, var(--color-secondary) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent);\n  }\n\n  :host([variant='glass'][color]) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--_theme-contrast) 15%, transparent);\n    --_color: var(--_theme-content);\n  }\n\n  :host([variant='glass']) .box {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Subtle hover for solid/default + color (glass & frost manage their own hover) */\n  :host([color]:not([variant='glass'], [variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/box/box.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"box.css?inline.js","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Glass */\n  :host([variant='glass']:not([color])) {\n    --_bg: color-mix(in oklch, var(--color-secondary) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent);\n  }\n\n  :host([variant='glass'][color]) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--_theme-contrast) 15%, transparent);\n    --_color: var(--_theme-content);\n  }\n\n  :host([variant='glass']) .box {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Subtle hover for solid/default + color (glass & frost manage their own hover) */\n  :host([color]:not([variant='glass'], [variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid/grid.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid.css?inline.cjs","names":[],"sources":["../../../src/layout/grid/grid.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cols: var(--grid-cols, repeat(auto-fit, minmax(250px, 1fr)));\n    --_rows: var(--grid-rows, auto);\n    --_gap: var(--grid-gap, var(--size-4));\n    --_row-gap: var(--grid-row-gap, var(--_gap));\n    --_col-gap: var(--grid-col-gap, var(--_gap));\n\n    display: grid;\n    grid-template-rows: var(--_rows);\n    grid-template-columns: var(--_cols);\n    grid-auto-flow: row;\n    gap: var(--_row-gap) var(--_col-gap);\n  }\n\n  :host([gap='none']) {\n    --_row-gap: 0;\n    --_col-gap: 0;\n  }\n\n  :host([gap='xs']) {\n    --_row-gap: var(--size-1);\n    --_col-gap: var(--size-1);\n  }\n\n  :host([gap='sm']) {\n    --_row-gap: var(--size-2);\n    --_col-gap: var(--size-2);\n  }\n\n  :host([gap='md']) {\n    --_row-gap: var(--size-4);\n    --_col-gap: var(--size-4);\n  }\n\n  :host([gap='lg']) {\n    --_row-gap: var(--size-6);\n    --_col-gap: var(--size-6);\n  }\n\n  :host([gap='xl']) {\n    --_row-gap: var(--size-8);\n    --_col-gap: var(--size-8);\n  }\n\n  :host([gap='2xl']) {\n    --_row-gap: var(--size-12);\n    --_col-gap: var(--size-12);\n  }\n\n  :host([align='start']) {\n    align-items: start;\n  }\n\n  :host([align='center']) {\n    align-items: center;\n  }\n\n  :host([align='end']) {\n    align-items: end;\n  }\n\n  :host([align='stretch']) {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) {\n    align-items: baseline;\n  }\n\n  :host([justify='start']) {\n    justify-items: start;\n  }\n\n  :host([justify='center']) {\n    justify-items: center;\n  }\n\n  :host([justify='end']) {\n    justify-items: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-items: stretch;\n  }\n\n  :host([flow='row']) {\n    grid-auto-flow: row;\n  }\n\n  :host([flow='column']) {\n    grid-auto-flow: column;\n  }\n\n  :host([flow='row-dense']) {\n    grid-auto-flow: row dense;\n  }\n\n  :host([flow='column-dense']) {\n    grid-auto-flow: column dense;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid/grid.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid.css?inline.js","names":[],"sources":["../../../src/layout/grid/grid.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cols: var(--grid-cols, repeat(auto-fit, minmax(250px, 1fr)));\n    --_rows: var(--grid-rows, auto);\n    --_gap: var(--grid-gap, var(--size-4));\n    --_row-gap: var(--grid-row-gap, var(--_gap));\n    --_col-gap: var(--grid-col-gap, var(--_gap));\n\n    display: grid;\n    grid-template-rows: var(--_rows);\n    grid-template-columns: var(--_cols);\n    grid-auto-flow: row;\n    gap: var(--_row-gap) var(--_col-gap);\n  }\n\n  :host([gap='none']) {\n    --_row-gap: 0;\n    --_col-gap: 0;\n  }\n\n  :host([gap='xs']) {\n    --_row-gap: var(--size-1);\n    --_col-gap: var(--size-1);\n  }\n\n  :host([gap='sm']) {\n    --_row-gap: var(--size-2);\n    --_col-gap: var(--size-2);\n  }\n\n  :host([gap='md']) {\n    --_row-gap: var(--size-4);\n    --_col-gap: var(--size-4);\n  }\n\n  :host([gap='lg']) {\n    --_row-gap: var(--size-6);\n    --_col-gap: var(--size-6);\n  }\n\n  :host([gap='xl']) {\n    --_row-gap: var(--size-8);\n    --_col-gap: var(--size-8);\n  }\n\n  :host([gap='2xl']) {\n    --_row-gap: var(--size-12);\n    --_col-gap: var(--size-12);\n  }\n\n  :host([align='start']) {\n    align-items: start;\n  }\n\n  :host([align='center']) {\n    align-items: center;\n  }\n\n  :host([align='end']) {\n    align-items: end;\n  }\n\n  :host([align='stretch']) {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) {\n    align-items: baseline;\n  }\n\n  :host([justify='start']) {\n    justify-items: start;\n  }\n\n  :host([justify='center']) {\n    justify-items: center;\n  }\n\n  :host([justify='end']) {\n    justify-items: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-items: stretch;\n  }\n\n  :host([flow='row']) {\n    grid-auto-flow: row;\n  }\n\n  :host([flow='column']) {\n    grid-auto-flow: column;\n  }\n\n  :host([flow='row-dense']) {\n    grid-auto-flow: row dense;\n  }\n\n  :host([flow='column-dense']) {\n    grid-auto-flow: column dense;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid-item/grid-item.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid-item.css?inline.cjs","names":[],"sources":["../../../src/layout/grid-item/grid-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n}\n\n@layer refine.utilities {\n  :host([align='start']) {\n    align-self: start;\n  }\n\n  :host([align='center']) {\n    align-self: center;\n  }\n\n  :host([align='end']) {\n    align-self: end;\n  }\n\n  :host([align='stretch']) {\n    align-self: stretch;\n  }\n\n  :host([justify='start']) {\n    justify-self: start;\n  }\n\n  :host([justify='center']) {\n    justify-self: center;\n  }\n\n  :host([justify='end']) {\n    justify-self: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-self: stretch;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid-item/grid-item.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid-item.css?inline.js","names":[],"sources":["../../../src/layout/grid-item/grid-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n}\n\n@layer refine.utilities {\n  :host([align='start']) {\n    align-self: start;\n  }\n\n  :host([align='center']) {\n    align-self: center;\n  }\n\n  :host([align='end']) {\n    align-self: end;\n  }\n\n  :host([align='stretch']) {\n    align-self: stretch;\n  }\n\n  :host([justify='start']) {\n    justify-self: start;\n  }\n\n  :host([justify='center']) {\n    justify-self: center;\n  }\n\n  :host([justify='end']) {\n    justify-self: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-self: stretch;\n  }\n}\n"],"mappings":""}

package/dist/layout/navbar/navbar.css?inline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"navbar.css?inline.cjs","names":[],"sources":["../../../src/layout/navbar/navbar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_navbar-height: var(--navbar-height, var(--size-14));\n    --_navbar-width: var(--navbar-width, min(100%, 80rem));\n    --_navbar-offset: var(--navbar-offset, var(--size-3));\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-color: var(--navbar-color, var(--color-contrast-900));\n    --_navbar-border-color: var(--navbar-border-color, var(--color-divider));\n    --_navbar-shadow: var(--navbar-shadow, var(--shadow-md));\n    --_navbar-radius: var(--navbar-radius, var(--rounded-lg));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    color: var(--_navbar-color);\n  }\n\n  :host([data-mode='sticky']) {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-sticky, 40);\n  }\n\n  :host([data-mode='floating']) {\n    position: fixed;\n    inset-inline: var(--_navbar-offset);\n    top: var(--_navbar-offset);\n    z-index: var(--z-sticky, 40);\n  }\n\n  /* Preview mode: use absolute positioning so component stays within container bounds */\n  :host([data-preview-mode][data-mode='floating']) {\n    position: absolute;\n    inset-inline: var(--_navbar-offset);\n    top: auto;\n  }\n\n  :host([floating][sticky][data-scrolled]) {\n    inset-inline: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  :host([data-preview-mode][floating][sticky][data-scrolled]) {\n    position: absolute;\n    inset-inline: 0;\n    top: auto;\n    width: auto;\n  }\n\n  :host > nav {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .navbar {\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    min-height: var(--_navbar-height);\n    padding: var(--size-2) var(--size-4);\n    margin-inline: auto;\n    overflow: auto hidden;\n    color: inherit;\n    white-space: nowrap;\n    background: var(--_navbar-bg);\n    border-top: none;\n    border-right: none;\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: none;\n    border-radius: 0;\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal)\n    );\n  }\n\n  :host([data-mode='floating']) .navbar {\n    border-top: var(--border) solid var(--_navbar-border-color);\n    border-right: var(--border) solid var(--_navbar-border-color);\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--_navbar-radius);\n  }\n\n  :host([data-mode='sticky']) .navbar,\n  :host([floating][sticky][data-scrolled]) .navbar {\n    max-width: 100%;\n    border-inline: none;\n    border-radius: 0;\n  }\n\n  :host([data-mode-transitioning][data-mode='sticky']) .navbar {\n    animation: navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out);\n  }\n\n  :host([data-mode-transitioning][data-mode='floating']) .navbar {\n    animation: navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out);\n  }\n\n  .navbar-logo,\n  .navbar-start,\n  .navbar-center,\n  .navbar-end {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  .navbar-logo {\n    flex: 0 0 auto;\n  }\n\n  .navbar-start {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n  }\n\n  .navbar-center {\n    display: flex;\n    flex: 0 1 auto;\n    gap: var(--size-1);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .navbar-end {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  .mobile-toggle {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-9);\n    height: var(--size-9);\n    padding: 0;\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    background: transparent;\n    border: var(--border) solid transparent;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .mobile-toggle:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-100);\n    border-color: var(--color-contrast-200);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .mobile-menu-panel {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: none;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    padding: var(--size-2);\n    margin-block-start: var(--size-2);\n    margin-inline: auto;\n    background: var(--_navbar-bg);\n    border: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transform-origin: top;\n    animation: navbar-mobile-in var(--transition-fast) var(--ease-out);\n  }\n\n  :host([data-mobile][data-mobile-open]) .mobile-menu-panel {\n    display: grid;\n    gap: var(--size-1);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='floating']) .mobile-menu-panel {\n    margin-block-start: var(--size-1-5);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='sticky']) .mobile-menu-panel,\n  :host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel {\n    position: absolute;\n    inset-inline: 0;\n    top: 100%;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    border-inline: none;\n    border-top: none;\n    border-radius: 0 0 var(--rounded-md) var(--rounded-md);\n  }\n\n  :host([data-mobile]) .mobile-toggle {\n    display: inline-flex;\n    order: -1;\n  }\n\n  :host([data-mobile]) .navbar-start,\n  :host([data-mobile]) .navbar-center,\n  :host([data-mobile]) .navbar-end {\n    display: none;\n  }\n\n  :host([data-mobile][data-mobile-open]) .navbar {\n    border-bottom-right-radius: var(--rounded-md);\n    border-bottom-left-radius: var(--rounded-md);\n  }\n\n  @starting-style {\n    .mobile-menu-panel {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  @keyframes navbar-mobile-in {\n    from {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes navbar-floating-to-sticky {\n    from {\n      opacity: 0.92;\n      transform: translateY(6px) scale(0.985);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes navbar-sticky-to-floating {\n    from {\n      opacity: 0.95;\n      transform: translateY(-2px) scale(1);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(0.99);\n    }\n  }\n\n  .item {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--navbar-item-color, var(--color-contrast-700));\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--navbar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--navbar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    color: var(--navbar-item-active-color, var(--color-primary));\n    background: var(--navbar-item-active-bg, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: transparent;\n  }\n\n  .item-icon,\n  .item-end {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .item-label {\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  :host([navbar-mobile]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([navbar-mobile]) .item {\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='flat']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 88%, transparent);\n    --_navbar-shadow: none;\n  }\n\n  :host([variant='bordered']) {\n    --_navbar-bg: var(--color-canvas);\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 32%, transparent);\n  }\n\n  :host([variant='outline']) {\n    --_navbar-bg: transparent;\n    --_navbar-shadow: none;\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 40%, transparent);\n  }\n\n  :host([variant='glass']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 70%, transparent);\n    --navbar-backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([color]) {\n    --_navbar-border-color: color-mix(in oklch, var(--_theme-border) 30%, transparent);\n  }\n}\n\n@media (width <= 768px) {\n  @layer refine.base {\n    :host([data-mode='floating']) {\n      inset-inline: var(--size-2);\n      top: var(--size-2);\n    }\n\n    :host([floating][sticky][data-scrolled]) {\n      inset-inline: 0;\n      top: 0;\n    }\n  }\n}\n"],"mappings":""}

package/dist/layout/navbar/navbar.css?inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navbar.css?inline.js","names":[],"sources":["../../../src/layout/navbar/navbar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_navbar-height: var(--navbar-height, var(--size-14));\n    --_navbar-width: var(--navbar-width, min(100%, 80rem));\n    --_navbar-offset: var(--navbar-offset, var(--size-3));\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-color: var(--navbar-color, var(--color-contrast-900));\n    --_navbar-border-color: var(--navbar-border-color, var(--color-divider));\n    --_navbar-shadow: var(--navbar-shadow, var(--shadow-md));\n    --_navbar-radius: var(--navbar-radius, var(--rounded-lg));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    color: var(--_navbar-color);\n  }\n\n  :host([data-mode='sticky']) {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-sticky, 40);\n  }\n\n  :host([data-mode='floating']) {\n    position: fixed;\n    inset-inline: var(--_navbar-offset);\n    top: var(--_navbar-offset);\n    z-index: var(--z-sticky, 40);\n  }\n\n  /* Preview mode: use absolute positioning so component stays within container bounds */\n  :host([data-preview-mode][data-mode='floating']) {\n    position: absolute;\n    inset-inline: var(--_navbar-offset);\n    top: auto;\n  }\n\n  :host([floating][sticky][data-scrolled]) {\n    inset-inline: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  :host([data-preview-mode][floating][sticky][data-scrolled]) {\n    position: absolute;\n    inset-inline: 0;\n    top: auto;\n    width: auto;\n  }\n\n  :host > nav {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .navbar {\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    min-height: var(--_navbar-height);\n    padding: var(--size-2) var(--size-4);\n    margin-inline: auto;\n    overflow: auto hidden;\n    color: inherit;\n    white-space: nowrap;\n    background: var(--_navbar-bg);\n    border-top: none;\n    border-right: none;\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: none;\n    border-radius: 0;\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal)\n    );\n  }\n\n  :host([data-mode='floating']) .navbar {\n    border-top: var(--border) solid var(--_navbar-border-color);\n    border-right: var(--border) solid var(--_navbar-border-color);\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--_navbar-radius);\n  }\n\n  :host([data-mode='sticky']) .navbar,\n  :host([floating][sticky][data-scrolled]) .navbar {\n    max-width: 100%;\n    border-inline: none;\n    border-radius: 0;\n  }\n\n  :host([data-mode-transitioning][data-mode='sticky']) .navbar {\n    animation: navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out);\n  }\n\n  :host([data-mode-transitioning][data-mode='floating']) .navbar {\n    animation: navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out);\n  }\n\n  .navbar-logo,\n  .navbar-start,\n  .navbar-center,\n  .navbar-end {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  .navbar-logo {\n    flex: 0 0 auto;\n  }\n\n  .navbar-start {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n  }\n\n  .navbar-center {\n    display: flex;\n    flex: 0 1 auto;\n    gap: var(--size-1);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .navbar-end {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  .mobile-toggle {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-9);\n    height: var(--size-9);\n    padding: 0;\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    background: transparent;\n    border: var(--border) solid transparent;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .mobile-toggle:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-100);\n    border-color: var(--color-contrast-200);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .mobile-menu-panel {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: none;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    padding: var(--size-2);\n    margin-block-start: var(--size-2);\n    margin-inline: auto;\n    background: var(--_navbar-bg);\n    border: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transform-origin: top;\n    animation: navbar-mobile-in var(--transition-fast) var(--ease-out);\n  }\n\n  :host([data-mobile][data-mobile-open]) .mobile-menu-panel {\n    display: grid;\n    gap: var(--size-1);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='floating']) .mobile-menu-panel {\n    margin-block-start: var(--size-1-5);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='sticky']) .mobile-menu-panel,\n  :host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel {\n    position: absolute;\n    inset-inline: 0;\n    top: 100%;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    border-inline: none;\n    border-top: none;\n    border-radius: 0 0 var(--rounded-md) var(--rounded-md);\n  }\n\n  :host([data-mobile]) .mobile-toggle {\n    display: inline-flex;\n    order: -1;\n  }\n\n  :host([data-mobile]) .navbar-start,\n  :host([data-mobile]) .navbar-center,\n  :host([data-mobile]) .navbar-end {\n    display: none;\n  }\n\n  :host([data-mobile][data-mobile-open]) .navbar {\n    border-bottom-right-radius: var(--rounded-md);\n    border-bottom-left-radius: var(--rounded-md);\n  }\n\n  @starting-style {\n    .mobile-menu-panel {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  @keyframes navbar-mobile-in {\n    from {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes navbar-floating-to-sticky {\n    from {\n      opacity: 0.92;\n      transform: translateY(6px) scale(0.985);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes navbar-sticky-to-floating {\n    from {\n      opacity: 0.95;\n      transform: translateY(-2px) scale(1);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(0.99);\n    }\n  }\n\n  .item {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--navbar-item-color, var(--color-contrast-700));\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--navbar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--navbar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    color: var(--navbar-item-active-color, var(--color-primary));\n    background: var(--navbar-item-active-bg, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: transparent;\n  }\n\n  .item-icon,\n  .item-end {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .item-label {\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  :host([navbar-mobile]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([navbar-mobile]) .item {\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='flat']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 88%, transparent);\n    --_navbar-shadow: none;\n  }\n\n  :host([variant='bordered']) {\n    --_navbar-bg: var(--color-canvas);\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 32%, transparent);\n  }\n\n  :host([variant='outline']) {\n    --_navbar-bg: transparent;\n    --_navbar-shadow: none;\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 40%, transparent);\n  }\n\n  :host([variant='glass']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 70%, transparent);\n    --navbar-backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([color]) {\n    --_navbar-border-color: color-mix(in oklch, var(--_theme-border) 30%, transparent);\n  }\n}\n\n@media (width <= 768px) {\n  @layer refine.base {\n    :host([data-mode='floating']) {\n      inset-inline: var(--size-2);\n      top: var(--size-2);\n    }\n\n    :host([floating][sticky][data-scrolled]) {\n      inset-inline: 0;\n      top: 0;\n    }\n  }\n}\n"],"mappings":""}