@vielzeug/refine 26.10.0 → 26.10.5

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

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

package/dist/inputs/datagrid/datagrid.d.ts

@@ -12,12 +12,12 @@ export type { DataGridLabels } from './datagrid-labels';
 export type { DataGridColumn, DataGridView, FilterOperator, FilterOption } from './datagrid-model';
 /**
  * Returns the Lucide icon name for a column's sort state.
- * Pure function — no closure dependency on the grid model.
+ * Pure function: no closure dependency on the grid model.
  */
 export declare function sortIconName(state: SortState, key: string): string;
 /**
  * Returns the WAI-ARIA `aria-sort` value for a column.
- * Pure function — independently unit-testable.
+ * Pure function: independently unit-testable.
  */
 export declare function ariaSortValue(state: SortState, key: string): 'ascending' | 'descending' | 'none';
 export type OreDataGridEvents<T = Record<string, unknown>> = {
@@ -119,7 +119,7 @@ export type OreDataGridProps<T = Record<string, unknown>> = {
      */
     pageSizeOptions?: number[];
     /**
-     * Row data. Pass as a JS property — not serialisable to an HTML attribute.
+     * Row data. Pass as a JS property: not serialisable to an HTML attribute.
      * @example
      * ```js
      * grid.rows = [{ id: '1', name: 'Alice', email: 'alice@example.com' }];
@@ -149,7 +149,7 @@ export type OreDataGridProps<T = Record<string, unknown>> = {
     sortMode?: SortMode;
     /**
      * A reactive data source from `@vielzeug/sourcerer` (or any compatible object).
-     * When set, the source drives row data, pagination, and search — the `rows` prop is ignored.
+     * When set, the source drives row data, pagination, and search: the `rows` prop is ignored.
      * Client-side sort and filter are bypassed; update source params from grid events externally.
      * @example
      * ```js
@@ -248,7 +248,7 @@ export type OreDataGridProps<T = Record<string, unknown>> = {
 /**
  * Minimal structural interface for a reactive data source accepted by `ore-datagrid`.
  *
- * Any page-shaped `@vielzeug/sourcerer` source satisfies this interface automatically — no direct
+ * Any page-shaped `@vielzeug/sourcerer` source satisfies this interface automatically: no direct
  * sourcerer import is required in refine.
  *
  * When `source` is set on the grid:

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

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

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

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

package/dist/inputs/date-picker/date-picker.d.ts

@@ -38,7 +38,7 @@ export type OreDatePickerProps = {
     size?: ComponentSize;
     /**
      * Shows an inline green check icon inside the field to confirm the value has
-     * passed validation. Ignored while `error` is set — an error always wins.
+     * passed validation. Ignored while `error` is set: an error always wins.
      */
     success?: boolean;
     /**

package/dist/inputs/file-input/file-input-upload.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"file-input-upload.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd/drop';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n  if (bytes === 0) return '0 B';\n\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n  error: string | null;\n  loaded: number;\n  speedBps: number;\n  status: FileUploadStatus;\n  total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n  if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n  const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n  if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n  return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n  file: File,\n  ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\n/** Why a file never made it into the queue: wrong type for `accept`, or over `max-size`. */\nexport type FileRejectReason = 'size' | 'type';\n\nexport type FileQueueOptions = {\n  accept: Readable<string | undefined>;\n  disabled: Readable<boolean>;\n  /** Document whose `<body>` hosts the announcer live region. Defaults to the global `document`. */\n  document?: Document;\n  maxFiles: Readable<number>;\n  maxSize: Readable<number>;\n  multiple: Readable<boolean>;\n  onChange: (files: File[], originalEvent?: Event) => void;\n  /**\n   * Called with the files an `addFiles` call refused — nothing was added for them — so the\n   * consumer can say so instead of the pick failing silently. `files[i]` pairs with\n   * `reasons[i]`.\n   */\n  onReject?: (files: File[], reasons: FileRejectReason[], originalEvent?: Event) => void;\n  onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n  onUploadError: (file: File, error: unknown) => void;\n  onUploadProgress: (file: File, loaded: number, total: number) => void;\n  onUploadSuccess: (file: File) => void;\n  upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n  addFiles(newFiles: File[], originalEvent?: Event): void;\n  dispose(): void;\n  readonly files: Readable<File[]>;\n  fileState(file: File): FileUploadState;\n  removeFile(file: File, originalEvent?: Event): void;\n  /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n   * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n   * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a\n   * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n   * hear that the old file is gone. */\n  replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n  retryUpload(file: File): void;\n  statusIconName(file: File): string;\n  uploadMetaText(file: File): string;\n  uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together — they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n  const files = signal<File[]>([]);\n  const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n  const controllers = new Map<File, AbortController>();\n\n  function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n    let s = stateSignals.get(file);\n\n    if (!s) {\n      s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n      stateSignals.set(file, s);\n    }\n\n    return s;\n  }\n\n  function fileState(file: File): FileUploadState {\n    return stateSignal(file).value;\n  }\n\n  function patchState(file: File, patch: Partial<FileUploadState>): void {\n    const s = stateSignal(file);\n\n    s.value = { ...s.value, ...patch };\n  }\n\n  // Each file gets its own `AbortController` and its own promise chain — nothing here `await`s\n  // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n  function startUpload(file: File, resumeFrom = 0): void {\n    if (options.disabled.value) return;\n\n    const uploadFn = options.upload.value;\n\n    if (!uploadFn) return;\n\n    controllers.get(file)?.abort();\n\n    const controller = new AbortController();\n\n    controllers.set(file, controller);\n    patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n    // Rolling (exponential-moving-average) speed estimate rather than a naive\n    // `loaded / elapsedSinceStart` average — the latter drags heavily behind the file's actual\n    // *current* rate right after a slow start or a mid-transfer stall.\n    let lastSampleAt = performance.now();\n    let lastSampleLoaded = resumeFrom;\n\n    uploadFn(file, {\n      onProgress: (loaded, total) => {\n        if (controller.signal.aborted) return;\n\n        const now = performance.now();\n        const elapsedSeconds = (now - lastSampleAt) / 1000;\n        const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n        const previousBps = fileState(file).speedBps;\n        const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n        lastSampleAt = now;\n        lastSampleLoaded = loaded;\n        patchState(file, { loaded, speedBps, total: total || file.size });\n        options.onUploadProgress(file, loaded, total || file.size);\n      },\n      resumeFrom,\n      signal: controller.signal,\n    })\n      .then(() => {\n        if (controller.signal.aborted) return;\n\n        patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n        announce(`${file.name} uploaded successfully.`, { document: options.document });\n        options.onUploadSuccess(file);\n      })\n      .catch((error: unknown) => {\n        if (controller.signal.aborted) return;\n\n        const message = error instanceof Error ? error.message : String(error);\n\n        patchState(file, { error: message, speedBps: 0, status: 'error' });\n        announce(`${file.name} failed to upload: ${message}`, {\n          document: options.document,\n          politeness: 'assertive',\n        });\n        options.onUploadError(file, error);\n      });\n  }\n\n  // Resumes from the last byte offset this file actually reached, not from 0 — see\n  // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n  // consumer-supplied.\n  function retryUpload(file: File): void {\n    if (options.disabled.value) return;\n\n    startUpload(file, fileState(file).loaded);\n  }\n\n  // Aborts + drops upload state for any file no longer in `files` — covers plain removal, a\n  // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n  // for another. One cleanup path instead of duplicating it at every call site that can shrink\n  // `files`.\n  function dropOrphanedState(activeFiles: File[]): void {\n    const keep = new Set(activeFiles);\n\n    for (const file of stateSignals.keys()) {\n      if (keep.has(file)) continue;\n\n      controllers.get(file)?.abort();\n      controllers.delete(file);\n      stateSignals.delete(file);\n    }\n  }\n\n  const filesWatch = watch(files, dropOrphanedState);\n\n  function addFiles(newFiles: File[], originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    const isMultiple = options.multiple.value;\n    let incoming = Array.from(newFiles);\n\n    if (!isMultiple) incoming = incoming.slice(0, 1);\n\n    const acceptList = parseAccept(options.accept.value);\n    const maxSize = options.maxSize.value;\n\n    // Validation failures are reported, never swallowed: a pick the queue refuses must be\n    // heard by the consumer, or the interaction reads as if nothing happened.\n    const accepted: File[] = [];\n    const rejectedFiles: File[] = [];\n    const rejectReasons: FileRejectReason[] = [];\n\n    for (const file of incoming) {\n      if (!matchesAccept(file, acceptList)) {\n        rejectedFiles.push(file);\n        rejectReasons.push('type');\n      } else if (!isFileSizeAllowed(file, maxSize)) {\n        rejectedFiles.push(file);\n        rejectReasons.push('size');\n      } else {\n        accepted.push(file);\n      }\n    }\n\n    if (rejectedFiles.length) options.onReject?.(rejectedFiles, rejectReasons, originalEvent);\n\n    let updated: File[] = isMultiple ? [...files.value] : [];\n    const added: File[] = [];\n\n    for (const f of accepted) {\n      if (!updated.includes(f)) {\n        updated.push(f);\n        added.push(f);\n      }\n    }\n\n    const maxFiles = options.maxFiles.value;\n\n    if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n    files.value = updated;\n    options.onChange(files.value, originalEvent);\n\n    for (const f of added) {\n      if (files.value.includes(f)) startUpload(f);\n    }\n  }\n\n  function removeFile(file: File, originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    files.value = files.value.filter((f) => f !== file);\n    options.onRemove(file, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n  }\n\n  function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n    if (options.disabled.value) return false;\n\n    const acceptList = parseAccept(options.accept.value);\n\n    if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n    files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n    options.onRemove(oldFile, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n    startUpload(newFile);\n\n    return true;\n  }\n\n  function uploadPercent(file: File): number {\n    const state = fileState(file);\n\n    if (state.total <= 0) return 0;\n\n    return Math.min(100, Math.round((state.loaded / state.total) * 100));\n  }\n\n  // Speed + ETA on one line — percent itself is rendered separately (e.g. `<ore-progress>`'s\n  // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n  function uploadMetaText(file: File): string {\n    const state = fileState(file);\n\n    return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n  }\n\n  function statusIconName(file: File): string {\n    const status = fileState(file).status;\n\n    if (status === 'success') return 'check';\n\n    if (status === 'error') return 'alert-circle';\n\n    return 'file';\n  }\n\n  function dispose(): void {\n    filesWatch.dispose();\n\n    for (const controller of controllers.values()) controller.abort();\n\n    controllers.clear();\n    stateSignals.clear();\n  }\n\n  return {\n    addFiles,\n    dispose,\n    fileState,\n    files,\n    removeFile,\n    replaceFile,\n    retryUpload,\n    statusIconName,\n    uploadMetaText,\n    uploadPercent,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"file-input-upload.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd/drop';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n  if (bytes === 0) return '0 B';\n\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file: see `createFileQueue`: not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n  error: string | null;\n  loaded: number;\n  speedBps: number;\n  status: FileUploadStatus;\n  total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n  if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n  const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n  if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n  return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport: this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file: the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n  file: File,\n  ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\n/** Why a file never made it into the queue: wrong type for `accept`, or over `max-size`. */\nexport type FileRejectReason = 'size' | 'type';\n\nexport type FileQueueOptions = {\n  accept: Readable<string | undefined>;\n  disabled: Readable<boolean>;\n  /** Document whose `<body>` hosts the announcer live region. Defaults to the global `document`. */\n  document?: Document;\n  maxFiles: Readable<number>;\n  maxSize: Readable<number>;\n  multiple: Readable<boolean>;\n  onChange: (files: File[], originalEvent?: Event) => void;\n  /**\n   * Called with the files an `addFiles` call refused: nothing was added for them, so the\n   * consumer can say so instead of the pick failing silently. `files[i]` pairs with\n   * `reasons[i]`.\n   */\n  onReject?: (files: File[], reasons: FileRejectReason[], originalEvent?: Event) => void;\n  onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n  onUploadError: (file: File, error: unknown) => void;\n  onUploadProgress: (file: File, loaded: number, total: number) => void;\n  onUploadSuccess: (file: File) => void;\n  upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n  addFiles(newFiles: File[], originalEvent?: Event): void;\n  dispose(): void;\n  readonly files: Readable<File[]>;\n  fileState(file: File): FileUploadState;\n  removeFile(file: File, originalEvent?: Event): void;\n  /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n   * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n   * for `oldFile`: a replace is a removal-and-add that happen to land in the same slot, and a\n   * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n   * hear that the old file is gone. */\n  replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n  retryUpload(file: File): void;\n  statusIconName(file: File): string;\n  uploadMetaText(file: File): string;\n  uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together: they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n  const files = signal<File[]>([]);\n  const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n  const controllers = new Map<File, AbortController>();\n\n  function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n    let s = stateSignals.get(file);\n\n    if (!s) {\n      s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n      stateSignals.set(file, s);\n    }\n\n    return s;\n  }\n\n  function fileState(file: File): FileUploadState {\n    return stateSignal(file).value;\n  }\n\n  function patchState(file: File, patch: Partial<FileUploadState>): void {\n    const s = stateSignal(file);\n\n    s.value = { ...s.value, ...patch };\n  }\n\n  // Each file gets its own `AbortController` and its own promise chain: nothing here `await`s\n  // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n  function startUpload(file: File, resumeFrom = 0): void {\n    if (options.disabled.value) return;\n\n    const uploadFn = options.upload.value;\n\n    if (!uploadFn) return;\n\n    controllers.get(file)?.abort();\n\n    const controller = new AbortController();\n\n    controllers.set(file, controller);\n    patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n    // Rolling (exponential-moving-average) speed estimate rather than a naive\n    // `loaded / elapsedSinceStart` average: the latter drags heavily behind the file's actual\n    // *current* rate right after a slow start or a mid-transfer stall.\n    let lastSampleAt = performance.now();\n    let lastSampleLoaded = resumeFrom;\n\n    uploadFn(file, {\n      onProgress: (loaded, total) => {\n        if (controller.signal.aborted) return;\n\n        const now = performance.now();\n        const elapsedSeconds = (now - lastSampleAt) / 1000;\n        const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n        const previousBps = fileState(file).speedBps;\n        const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n        lastSampleAt = now;\n        lastSampleLoaded = loaded;\n        patchState(file, { loaded, speedBps, total: total || file.size });\n        options.onUploadProgress(file, loaded, total || file.size);\n      },\n      resumeFrom,\n      signal: controller.signal,\n    })\n      .then(() => {\n        if (controller.signal.aborted) return;\n\n        patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n        announce(`${file.name} uploaded successfully.`, { document: options.document });\n        options.onUploadSuccess(file);\n      })\n      .catch((error: unknown) => {\n        if (controller.signal.aborted) return;\n\n        const message = error instanceof Error ? error.message : String(error);\n\n        patchState(file, { error: message, speedBps: 0, status: 'error' });\n        announce(`${file.name} failed to upload: ${message}`, {\n          document: options.document,\n          politeness: 'assertive',\n        });\n        options.onUploadError(file, error);\n      });\n  }\n\n  // Resumes from the last byte offset this file actually reached, not from 0: see\n  // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n  // consumer-supplied.\n  function retryUpload(file: File): void {\n    if (options.disabled.value) return;\n\n    startUpload(file, fileState(file).loaded);\n  }\n\n  // Aborts + drops upload state for any file no longer in `files`: covers plain removal, a\n  // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n  // for another. One cleanup path instead of duplicating it at every call site that can shrink\n  // `files`.\n  function dropOrphanedState(activeFiles: File[]): void {\n    const keep = new Set(activeFiles);\n\n    for (const file of stateSignals.keys()) {\n      if (keep.has(file)) continue;\n\n      controllers.get(file)?.abort();\n      controllers.delete(file);\n      stateSignals.delete(file);\n    }\n  }\n\n  const filesWatch = watch(files, dropOrphanedState);\n\n  function addFiles(newFiles: File[], originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    const isMultiple = options.multiple.value;\n    let incoming = Array.from(newFiles);\n\n    if (!isMultiple) incoming = incoming.slice(0, 1);\n\n    const acceptList = parseAccept(options.accept.value);\n    const maxSize = options.maxSize.value;\n\n    // Validation failures are reported, never swallowed: a pick the queue refuses must be\n    // heard by the consumer, or the interaction reads as if nothing happened.\n    const accepted: File[] = [];\n    const rejectedFiles: File[] = [];\n    const rejectReasons: FileRejectReason[] = [];\n\n    for (const file of incoming) {\n      if (!matchesAccept(file, acceptList)) {\n        rejectedFiles.push(file);\n        rejectReasons.push('type');\n      } else if (!isFileSizeAllowed(file, maxSize)) {\n        rejectedFiles.push(file);\n        rejectReasons.push('size');\n      } else {\n        accepted.push(file);\n      }\n    }\n\n    if (rejectedFiles.length) options.onReject?.(rejectedFiles, rejectReasons, originalEvent);\n\n    let updated: File[] = isMultiple ? [...files.value] : [];\n    const added: File[] = [];\n\n    for (const f of accepted) {\n      if (!updated.includes(f)) {\n        updated.push(f);\n        added.push(f);\n      }\n    }\n\n    const maxFiles = options.maxFiles.value;\n\n    if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n    files.value = updated;\n    options.onChange(files.value, originalEvent);\n\n    for (const f of added) {\n      if (files.value.includes(f)) startUpload(f);\n    }\n  }\n\n  function removeFile(file: File, originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    files.value = files.value.filter((f) => f !== file);\n    options.onRemove(file, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n  }\n\n  function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n    if (options.disabled.value) return false;\n\n    const acceptList = parseAccept(options.accept.value);\n\n    if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n    files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n    options.onRemove(oldFile, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n    startUpload(newFile);\n\n    return true;\n  }\n\n  function uploadPercent(file: File): number {\n    const state = fileState(file);\n\n    if (state.total <= 0) return 0;\n\n    return Math.min(100, Math.round((state.loaded / state.total) * 100));\n  }\n\n  // Speed + ETA on one line: percent itself is rendered separately (e.g. `<ore-progress>`'s\n  // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n  function uploadMetaText(file: File): string {\n    const state = fileState(file);\n\n    return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n  }\n\n  function statusIconName(file: File): string {\n    const status = fileState(file).status;\n\n    if (status === 'success') return 'check';\n\n    if (status === 'error') return 'alert-circle';\n\n    return 'file';\n  }\n\n  function dispose(): void {\n    filesWatch.dispose();\n\n    for (const controller of controllers.values()) controller.abort();\n\n    controllers.clear();\n    stateSignals.clear();\n  }\n\n  return {\n    addFiles,\n    dispose,\n    fileState,\n    files,\n    removeFile,\n    replaceFile,\n    retryUpload,\n    statusIconName,\n    uploadMetaText,\n    uploadPercent,\n  };\n}\n"],"mappings":"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"}

package/dist/inputs/file-input/file-input-upload.d.ts

@@ -3,7 +3,7 @@ export declare const formatBytes: (bytes: number) => string;
 /** Upload lifecycle status for a single file. `idle` covers both "no `upload` handler wired up"
  * (picker-only mode, fully supported) and "not started yet". */
 export type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';
-/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one
+/** Per-file upload snapshot. One reactive signal per file: see `createFileQueue`: not one
  * signal holding a map, so a progress tick for one file never invalidates another's bindings. */
 export type FileUploadState = {
     error: string | null;
@@ -13,7 +13,7 @@ export type FileUploadState = {
     total: number;
 };
 /**
- * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,
+ * Consumer-supplied transport: this component has no built-in network layer (zero-dependency,
  * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).
  * This function is the seam between the UI's upload lifecycle (progress, retry, per-file
  * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3
@@ -23,7 +23,7 @@ export type FileUploadState = {
  * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that
  * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use
  * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and
- * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either
+ * simply re-send the whole file: the UI still shows a resumed-from-N-bytes experience either
  * way, since the file itself was never dropped from memory.
  */
 export type FileUploadFn = (file: File, ctx: {
@@ -43,7 +43,7 @@ export type FileQueueOptions = {
     multiple: Readable<boolean>;
     onChange: (files: File[], originalEvent?: Event) => void;
     /**
-     * Called with the files an `addFiles` call refused — nothing was added for them — so the
+     * Called with the files an `addFiles` call refused: nothing was added for them, so the
      * consumer can say so instead of the pick failing silently. `files[i]` pairs with
      * `reasons[i]`.
      */
@@ -62,7 +62,7 @@ export type FileQueue = {
     removeFile(file: File, originalEvent?: Event): void;
     /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place
      * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`
-     * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a
+     * for `oldFile`: a replace is a removal-and-add that happen to land in the same slot, and a
      * consumer listening only for removal (e.g. to clean up a server-side record) still needs to
      * hear that the old file is gone. */
     replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;
@@ -72,7 +72,7 @@ export type FileQueue = {
     uploadPercent(file: File): number;
 };
 /**
- * Owns file selection *and* the opt-in upload lifecycle together — they were never really
+ * Owns file selection *and* the opt-in upload lifecycle together: they were never really
  * separable (adding a file starts its upload; removing one must abort it; replacing one is both
  * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s
  * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`

package/dist/inputs/file-input/file-input-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input-upload.js","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd/drop';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n  if (bytes === 0) return '0 B';\n\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n  error: string | null;\n  loaded: number;\n  speedBps: number;\n  status: FileUploadStatus;\n  total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n  if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n  const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n  if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n  return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n  file: File,\n  ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\n/** Why a file never made it into the queue: wrong type for `accept`, or over `max-size`. */\nexport type FileRejectReason = 'size' | 'type';\n\nexport type FileQueueOptions = {\n  accept: Readable<string | undefined>;\n  disabled: Readable<boolean>;\n  /** Document whose `<body>` hosts the announcer live region. Defaults to the global `document`. */\n  document?: Document;\n  maxFiles: Readable<number>;\n  maxSize: Readable<number>;\n  multiple: Readable<boolean>;\n  onChange: (files: File[], originalEvent?: Event) => void;\n  /**\n   * Called with the files an `addFiles` call refused — nothing was added for them — so the\n   * consumer can say so instead of the pick failing silently. `files[i]` pairs with\n   * `reasons[i]`.\n   */\n  onReject?: (files: File[], reasons: FileRejectReason[], originalEvent?: Event) => void;\n  onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n  onUploadError: (file: File, error: unknown) => void;\n  onUploadProgress: (file: File, loaded: number, total: number) => void;\n  onUploadSuccess: (file: File) => void;\n  upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n  addFiles(newFiles: File[], originalEvent?: Event): void;\n  dispose(): void;\n  readonly files: Readable<File[]>;\n  fileState(file: File): FileUploadState;\n  removeFile(file: File, originalEvent?: Event): void;\n  /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n   * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n   * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a\n   * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n   * hear that the old file is gone. */\n  replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n  retryUpload(file: File): void;\n  statusIconName(file: File): string;\n  uploadMetaText(file: File): string;\n  uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together — they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n  const files = signal<File[]>([]);\n  const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n  const controllers = new Map<File, AbortController>();\n\n  function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n    let s = stateSignals.get(file);\n\n    if (!s) {\n      s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n      stateSignals.set(file, s);\n    }\n\n    return s;\n  }\n\n  function fileState(file: File): FileUploadState {\n    return stateSignal(file).value;\n  }\n\n  function patchState(file: File, patch: Partial<FileUploadState>): void {\n    const s = stateSignal(file);\n\n    s.value = { ...s.value, ...patch };\n  }\n\n  // Each file gets its own `AbortController` and its own promise chain — nothing here `await`s\n  // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n  function startUpload(file: File, resumeFrom = 0): void {\n    if (options.disabled.value) return;\n\n    const uploadFn = options.upload.value;\n\n    if (!uploadFn) return;\n\n    controllers.get(file)?.abort();\n\n    const controller = new AbortController();\n\n    controllers.set(file, controller);\n    patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n    // Rolling (exponential-moving-average) speed estimate rather than a naive\n    // `loaded / elapsedSinceStart` average — the latter drags heavily behind the file's actual\n    // *current* rate right after a slow start or a mid-transfer stall.\n    let lastSampleAt = performance.now();\n    let lastSampleLoaded = resumeFrom;\n\n    uploadFn(file, {\n      onProgress: (loaded, total) => {\n        if (controller.signal.aborted) return;\n\n        const now = performance.now();\n        const elapsedSeconds = (now - lastSampleAt) / 1000;\n        const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n        const previousBps = fileState(file).speedBps;\n        const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n        lastSampleAt = now;\n        lastSampleLoaded = loaded;\n        patchState(file, { loaded, speedBps, total: total || file.size });\n        options.onUploadProgress(file, loaded, total || file.size);\n      },\n      resumeFrom,\n      signal: controller.signal,\n    })\n      .then(() => {\n        if (controller.signal.aborted) return;\n\n        patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n        announce(`${file.name} uploaded successfully.`, { document: options.document });\n        options.onUploadSuccess(file);\n      })\n      .catch((error: unknown) => {\n        if (controller.signal.aborted) return;\n\n        const message = error instanceof Error ? error.message : String(error);\n\n        patchState(file, { error: message, speedBps: 0, status: 'error' });\n        announce(`${file.name} failed to upload: ${message}`, {\n          document: options.document,\n          politeness: 'assertive',\n        });\n        options.onUploadError(file, error);\n      });\n  }\n\n  // Resumes from the last byte offset this file actually reached, not from 0 — see\n  // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n  // consumer-supplied.\n  function retryUpload(file: File): void {\n    if (options.disabled.value) return;\n\n    startUpload(file, fileState(file).loaded);\n  }\n\n  // Aborts + drops upload state for any file no longer in `files` — covers plain removal, a\n  // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n  // for another. One cleanup path instead of duplicating it at every call site that can shrink\n  // `files`.\n  function dropOrphanedState(activeFiles: File[]): void {\n    const keep = new Set(activeFiles);\n\n    for (const file of stateSignals.keys()) {\n      if (keep.has(file)) continue;\n\n      controllers.get(file)?.abort();\n      controllers.delete(file);\n      stateSignals.delete(file);\n    }\n  }\n\n  const filesWatch = watch(files, dropOrphanedState);\n\n  function addFiles(newFiles: File[], originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    const isMultiple = options.multiple.value;\n    let incoming = Array.from(newFiles);\n\n    if (!isMultiple) incoming = incoming.slice(0, 1);\n\n    const acceptList = parseAccept(options.accept.value);\n    const maxSize = options.maxSize.value;\n\n    // Validation failures are reported, never swallowed: a pick the queue refuses must be\n    // heard by the consumer, or the interaction reads as if nothing happened.\n    const accepted: File[] = [];\n    const rejectedFiles: File[] = [];\n    const rejectReasons: FileRejectReason[] = [];\n\n    for (const file of incoming) {\n      if (!matchesAccept(file, acceptList)) {\n        rejectedFiles.push(file);\n        rejectReasons.push('type');\n      } else if (!isFileSizeAllowed(file, maxSize)) {\n        rejectedFiles.push(file);\n        rejectReasons.push('size');\n      } else {\n        accepted.push(file);\n      }\n    }\n\n    if (rejectedFiles.length) options.onReject?.(rejectedFiles, rejectReasons, originalEvent);\n\n    let updated: File[] = isMultiple ? [...files.value] : [];\n    const added: File[] = [];\n\n    for (const f of accepted) {\n      if (!updated.includes(f)) {\n        updated.push(f);\n        added.push(f);\n      }\n    }\n\n    const maxFiles = options.maxFiles.value;\n\n    if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n    files.value = updated;\n    options.onChange(files.value, originalEvent);\n\n    for (const f of added) {\n      if (files.value.includes(f)) startUpload(f);\n    }\n  }\n\n  function removeFile(file: File, originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    files.value = files.value.filter((f) => f !== file);\n    options.onRemove(file, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n  }\n\n  function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n    if (options.disabled.value) return false;\n\n    const acceptList = parseAccept(options.accept.value);\n\n    if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n    files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n    options.onRemove(oldFile, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n    startUpload(newFile);\n\n    return true;\n  }\n\n  function uploadPercent(file: File): number {\n    const state = fileState(file);\n\n    if (state.total <= 0) return 0;\n\n    return Math.min(100, Math.round((state.loaded / state.total) * 100));\n  }\n\n  // Speed + ETA on one line — percent itself is rendered separately (e.g. `<ore-progress>`'s\n  // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n  function uploadMetaText(file: File): string {\n    const state = fileState(file);\n\n    return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n  }\n\n  function statusIconName(file: File): string {\n    const status = fileState(file).status;\n\n    if (status === 'success') return 'check';\n\n    if (status === 'error') return 'alert-circle';\n\n    return 'file';\n  }\n\n  function dispose(): void {\n    filesWatch.dispose();\n\n    for (const controller of controllers.values()) controller.abort();\n\n    controllers.clear();\n    stateSignals.clear();\n  }\n\n  return {\n    addFiles,\n    dispose,\n    fileState,\n    files,\n    removeFile,\n    replaceFile,\n    retryUpload,\n    statusIconName,\n    uploadMetaText,\n    uploadPercent,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"file-input-upload.js","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd/drop';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n  if (bytes === 0) return '0 B';\n\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file: see `createFileQueue`: not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n  error: string | null;\n  loaded: number;\n  speedBps: number;\n  status: FileUploadStatus;\n  total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n  if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n  const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n  if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n  return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport: this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file: the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n  file: File,\n  ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\n/** Why a file never made it into the queue: wrong type for `accept`, or over `max-size`. */\nexport type FileRejectReason = 'size' | 'type';\n\nexport type FileQueueOptions = {\n  accept: Readable<string | undefined>;\n  disabled: Readable<boolean>;\n  /** Document whose `<body>` hosts the announcer live region. Defaults to the global `document`. */\n  document?: Document;\n  maxFiles: Readable<number>;\n  maxSize: Readable<number>;\n  multiple: Readable<boolean>;\n  onChange: (files: File[], originalEvent?: Event) => void;\n  /**\n   * Called with the files an `addFiles` call refused: nothing was added for them, so the\n   * consumer can say so instead of the pick failing silently. `files[i]` pairs with\n   * `reasons[i]`.\n   */\n  onReject?: (files: File[], reasons: FileRejectReason[], originalEvent?: Event) => void;\n  onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n  onUploadError: (file: File, error: unknown) => void;\n  onUploadProgress: (file: File, loaded: number, total: number) => void;\n  onUploadSuccess: (file: File) => void;\n  upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n  addFiles(newFiles: File[], originalEvent?: Event): void;\n  dispose(): void;\n  readonly files: Readable<File[]>;\n  fileState(file: File): FileUploadState;\n  removeFile(file: File, originalEvent?: Event): void;\n  /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n   * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n   * for `oldFile`: a replace is a removal-and-add that happen to land in the same slot, and a\n   * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n   * hear that the old file is gone. */\n  replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n  retryUpload(file: File): void;\n  statusIconName(file: File): string;\n  uploadMetaText(file: File): string;\n  uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together: they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n  const files = signal<File[]>([]);\n  const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n  const controllers = new Map<File, AbortController>();\n\n  function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n    let s = stateSignals.get(file);\n\n    if (!s) {\n      s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n      stateSignals.set(file, s);\n    }\n\n    return s;\n  }\n\n  function fileState(file: File): FileUploadState {\n    return stateSignal(file).value;\n  }\n\n  function patchState(file: File, patch: Partial<FileUploadState>): void {\n    const s = stateSignal(file);\n\n    s.value = { ...s.value, ...patch };\n  }\n\n  // Each file gets its own `AbortController` and its own promise chain: nothing here `await`s\n  // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n  function startUpload(file: File, resumeFrom = 0): void {\n    if (options.disabled.value) return;\n\n    const uploadFn = options.upload.value;\n\n    if (!uploadFn) return;\n\n    controllers.get(file)?.abort();\n\n    const controller = new AbortController();\n\n    controllers.set(file, controller);\n    patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n    // Rolling (exponential-moving-average) speed estimate rather than a naive\n    // `loaded / elapsedSinceStart` average: the latter drags heavily behind the file's actual\n    // *current* rate right after a slow start or a mid-transfer stall.\n    let lastSampleAt = performance.now();\n    let lastSampleLoaded = resumeFrom;\n\n    uploadFn(file, {\n      onProgress: (loaded, total) => {\n        if (controller.signal.aborted) return;\n\n        const now = performance.now();\n        const elapsedSeconds = (now - lastSampleAt) / 1000;\n        const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n        const previousBps = fileState(file).speedBps;\n        const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n        lastSampleAt = now;\n        lastSampleLoaded = loaded;\n        patchState(file, { loaded, speedBps, total: total || file.size });\n        options.onUploadProgress(file, loaded, total || file.size);\n      },\n      resumeFrom,\n      signal: controller.signal,\n    })\n      .then(() => {\n        if (controller.signal.aborted) return;\n\n        patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n        announce(`${file.name} uploaded successfully.`, { document: options.document });\n        options.onUploadSuccess(file);\n      })\n      .catch((error: unknown) => {\n        if (controller.signal.aborted) return;\n\n        const message = error instanceof Error ? error.message : String(error);\n\n        patchState(file, { error: message, speedBps: 0, status: 'error' });\n        announce(`${file.name} failed to upload: ${message}`, {\n          document: options.document,\n          politeness: 'assertive',\n        });\n        options.onUploadError(file, error);\n      });\n  }\n\n  // Resumes from the last byte offset this file actually reached, not from 0: see\n  // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n  // consumer-supplied.\n  function retryUpload(file: File): void {\n    if (options.disabled.value) return;\n\n    startUpload(file, fileState(file).loaded);\n  }\n\n  // Aborts + drops upload state for any file no longer in `files`: covers plain removal, a\n  // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n  // for another. One cleanup path instead of duplicating it at every call site that can shrink\n  // `files`.\n  function dropOrphanedState(activeFiles: File[]): void {\n    const keep = new Set(activeFiles);\n\n    for (const file of stateSignals.keys()) {\n      if (keep.has(file)) continue;\n\n      controllers.get(file)?.abort();\n      controllers.delete(file);\n      stateSignals.delete(file);\n    }\n  }\n\n  const filesWatch = watch(files, dropOrphanedState);\n\n  function addFiles(newFiles: File[], originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    const isMultiple = options.multiple.value;\n    let incoming = Array.from(newFiles);\n\n    if (!isMultiple) incoming = incoming.slice(0, 1);\n\n    const acceptList = parseAccept(options.accept.value);\n    const maxSize = options.maxSize.value;\n\n    // Validation failures are reported, never swallowed: a pick the queue refuses must be\n    // heard by the consumer, or the interaction reads as if nothing happened.\n    const accepted: File[] = [];\n    const rejectedFiles: File[] = [];\n    const rejectReasons: FileRejectReason[] = [];\n\n    for (const file of incoming) {\n      if (!matchesAccept(file, acceptList)) {\n        rejectedFiles.push(file);\n        rejectReasons.push('type');\n      } else if (!isFileSizeAllowed(file, maxSize)) {\n        rejectedFiles.push(file);\n        rejectReasons.push('size');\n      } else {\n        accepted.push(file);\n      }\n    }\n\n    if (rejectedFiles.length) options.onReject?.(rejectedFiles, rejectReasons, originalEvent);\n\n    let updated: File[] = isMultiple ? [...files.value] : [];\n    const added: File[] = [];\n\n    for (const f of accepted) {\n      if (!updated.includes(f)) {\n        updated.push(f);\n        added.push(f);\n      }\n    }\n\n    const maxFiles = options.maxFiles.value;\n\n    if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n    files.value = updated;\n    options.onChange(files.value, originalEvent);\n\n    for (const f of added) {\n      if (files.value.includes(f)) startUpload(f);\n    }\n  }\n\n  function removeFile(file: File, originalEvent?: Event): void {\n    if (options.disabled.value) return;\n\n    files.value = files.value.filter((f) => f !== file);\n    options.onRemove(file, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n  }\n\n  function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n    if (options.disabled.value) return false;\n\n    const acceptList = parseAccept(options.accept.value);\n\n    if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n    files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n    options.onRemove(oldFile, files.value, originalEvent);\n    options.onChange(files.value, originalEvent);\n    startUpload(newFile);\n\n    return true;\n  }\n\n  function uploadPercent(file: File): number {\n    const state = fileState(file);\n\n    if (state.total <= 0) return 0;\n\n    return Math.min(100, Math.round((state.loaded / state.total) * 100));\n  }\n\n  // Speed + ETA on one line: percent itself is rendered separately (e.g. `<ore-progress>`'s\n  // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n  function uploadMetaText(file: File): string {\n    const state = fileState(file);\n\n    return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n  }\n\n  function statusIconName(file: File): string {\n    const status = fileState(file).status;\n\n    if (status === 'success') return 'check';\n\n    if (status === 'error') return 'alert-circle';\n\n    return 'file';\n  }\n\n  function dispose(): void {\n    filesWatch.dispose();\n\n    for (const controller of controllers.values()) controller.abort();\n\n    controllers.clear();\n    stateSignals.clear();\n  }\n\n  return {\n    addFiles,\n    dispose,\n    fileState,\n    files,\n    removeFile,\n    replaceFile,\n    retryUpload,\n    statusIconName,\n    uploadMetaText,\n    uploadPercent,\n  };\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"file-input.css.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  /* Signal 01: the copy itself during an active drag, not just the border/glow. */\n  .dropzone-title-active {\n    color: var(--_theme-focus, var(--color-primary));\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: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\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-actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-0-5);\n  }\n\n  .file-remove,\n  .file-action {\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  /* Signal 03/04: retry and replace share one neutral-hover treatment — distinct from remove's\n     error-red hover so the destructive action doesn't blend in with the recovery ones. */\n  .file-action:hover {\n    color: var(--_theme-focus, var(--color-primary));\n    background: var(--_theme-backdrop, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  /* ========================================\n       Upload Status (Signals 02, 03, 04)\n       ======================================== */\n\n  .file-progress-meta {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-error-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-error);\n    white-space: nowrap;\n  }\n\n  .file-item[data-status='success'] .file-icon {\n    color: var(--color-success);\n  }\n\n  .file-item[data-status='error'] .file-icon {\n    color: var(--color-error);\n  }\n\n  .file-item[data-status='error'] {\n    border-color: color-mix(in oklch, var(--color-error) 40%, var(--color-contrast-200));\n  }\n\n  /* ========================================\n       File Gallery (preview grid)\n       ======================================== */\n\n  .file-grid {\n    --_thumb-size: var(--file-input-thumb-size, var(--size-24));\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--_thumb-size), 1fr));\n    gap: var(--size-2);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-card {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .file-thumb-frame {\n    position: relative;\n    display: block;\n  }\n\n  .file-thumb {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    object-fit: cover;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n  }\n\n  .file-thumb-generic {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .file-card[data-status='uploading'] .file-thumb {\n    opacity: 0.6;\n  }\n\n  .file-card[data-status='error'] .file-thumb {\n    border-color: color-mix(in oklch, var(--color-error) 50%, var(--color-contrast-200));\n  }\n\n  .file-card-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  /* Signal 04: a small badge over the thumbnail corner — an explicit success/error indicator\n     next to the visual proof itself, not just a caption line below it. */\n  .file-status-badge {\n    position: absolute;\n    top: var(--size-1);\n    left: var(--size-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    color: var(--color-canvas);\n    border-radius: var(--rounded-full);\n  }\n\n  .file-status-badge-success {\n    background: var(--color-success);\n  }\n\n  .file-status-badge-error {\n    background: var(--color-error);\n  }\n\n  .file-card-actions {\n    position: absolute;\n    top: var(--size-1);\n    right: var(--size-1);\n    display: flex;\n    gap: var(--size-0-5);\n  }\n\n  .file-card-action {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    padding: 0;\n    color: var(--color-contrast-50);\n    cursor: pointer;\n    background: color-mix(in oklch, var(--color-contrast-900) 55%, transparent);\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .file-card-remove:hover {\n    color: var(--color-canvas);\n    background: var(--color-error);\n  }\n\n  .file-card-action:not(.file-card-remove):hover {\n    color: var(--color-canvas);\n    background: var(--color-primary);\n  }\n\n  .file-card .file-progress-meta,\n  .file-card .file-error-text {\n    text-align: center;\n    white-space: normal;\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%, transparent);\n    border-color: var(--_theme-focus, var(--color-primary));\n    border-style: solid;\n\n    /* A genuine glow (not the same subtle ring `:focus-visible` uses above) — a soft inner\n       ring plus a wider, brighter halo, so an active drag reads unmistakably differently from\n       a merely-focused, idle dropzone. */\n    box-shadow:\n      0 0 0 3px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 25%, transparent),\n      0 0 20px 2px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 45%, transparent);\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  /* Signal 03: an in-field icon alongside the border shift — never color alone. */\n  .dropzone-icon[data-status='error'] {\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 — a near-invisible border, deliberately weaker than bordered's\n     70%-focus border (matches button.css's flat/bordered split) so the two\n     don't read as the same box at a glance. */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\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\n  /* Borderless at rest — only reveals a border on hover (the border-*width* stays reserved via\n     a transparent color, not `none`, so revealing it on hover never shifts layout). Focus\n     already gets its own themed border + glow from the generic `:focus-visible` rule above,\n     regardless of variant, so it needs no ghost-specific override here. */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, transparent);\n  }\n\n  :host(:not([disabled])[variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n    border-color: var(--file-input-hover-border-color, var(--color-contrast-200));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .dropzone {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n}\n\n:host([disabled]) .dropzone-icon,\n:host([disabled]) .dropzone-title,\n:host([disabled]) .dropzone-hint,\n:host([disabled]) .dropzone-title u {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) .label-outside {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}
+{"version":3,"file":"file-input.css.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  /* Signal 01: the copy itself during an active drag, not just the border/glow. */\n  .dropzone-title-active {\n    color: var(--_theme-focus, var(--color-primary));\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: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\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-actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-0-5);\n  }\n\n  .file-remove,\n  .file-action {\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  /* Signal 03/04: retry and replace share one neutral-hover treatment: distinct from remove's\n     error-red hover so the destructive action doesn't blend in with the recovery ones. */\n  .file-action:hover {\n    color: var(--_theme-focus, var(--color-primary));\n    background: var(--_theme-backdrop, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  /* ========================================\n       Upload Status (Signals 02, 03, 04)\n       ======================================== */\n\n  .file-progress-meta {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-error-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-error);\n    white-space: nowrap;\n  }\n\n  .file-item[data-status='success'] .file-icon {\n    color: var(--color-success);\n  }\n\n  .file-item[data-status='error'] .file-icon {\n    color: var(--color-error);\n  }\n\n  .file-item[data-status='error'] {\n    border-color: color-mix(in oklch, var(--color-error) 40%, var(--color-contrast-200));\n  }\n\n  /* ========================================\n       File Gallery (preview grid)\n       ======================================== */\n\n  .file-grid {\n    --_thumb-size: var(--file-input-thumb-size, var(--size-24));\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--_thumb-size), 1fr));\n    gap: var(--size-2);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-card {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .file-thumb-frame {\n    position: relative;\n    display: block;\n  }\n\n  .file-thumb {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    object-fit: cover;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n  }\n\n  .file-thumb-generic {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .file-card[data-status='uploading'] .file-thumb {\n    opacity: 0.6;\n  }\n\n  .file-card[data-status='error'] .file-thumb {\n    border-color: color-mix(in oklch, var(--color-error) 50%, var(--color-contrast-200));\n  }\n\n  .file-card-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  /* Signal 04: a small badge over the thumbnail corner: an explicit success/error indicator\n     next to the visual proof itself, not just a caption line below it. */\n  .file-status-badge {\n    position: absolute;\n    top: var(--size-1);\n    left: var(--size-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    color: var(--color-canvas);\n    border-radius: var(--rounded-full);\n  }\n\n  .file-status-badge-success {\n    background: var(--color-success);\n  }\n\n  .file-status-badge-error {\n    background: var(--color-error);\n  }\n\n  .file-card-actions {\n    position: absolute;\n    top: var(--size-1);\n    right: var(--size-1);\n    display: flex;\n    gap: var(--size-0-5);\n  }\n\n  .file-card-action {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    padding: 0;\n    color: var(--color-contrast-50);\n    cursor: pointer;\n    background: color-mix(in oklch, var(--color-contrast-900) 55%, transparent);\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .file-card-remove:hover {\n    color: var(--color-canvas);\n    background: var(--color-error);\n  }\n\n  .file-card-action:not(.file-card-remove):hover {\n    color: var(--color-canvas);\n    background: var(--color-primary);\n  }\n\n  .file-card .file-progress-meta,\n  .file-card .file-error-text {\n    text-align: center;\n    white-space: normal;\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%, transparent);\n    border-color: var(--_theme-focus, var(--color-primary));\n    border-style: solid;\n\n    /* A genuine glow (not the same subtle ring `:focus-visible` uses above): a soft inner\n       ring plus a wider, brighter halo, so an active drag reads unmistakably differently from\n       a merely-focused, idle dropzone. */\n    box-shadow:\n      0 0 0 3px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 25%, transparent),\n      0 0 20px 2px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 45%, transparent);\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  /* Signal 03: an in-field icon alongside the border shift: never color alone. */\n  .dropzone-icon[data-status='error'] {\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: a near-invisible border, deliberately weaker than bordered's\n     70%-focus border (matches button.css's flat/bordered split) so the two\n     don't read as the same box at a glance. */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\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\n  /* Borderless at rest: only reveals a border on hover (the border-*width* stays reserved via\n     a transparent color, not `none`, so revealing it on hover never shifts layout). Focus\n     already gets its own themed border + glow from the generic `:focus-visible` rule above,\n     regardless of variant, so it needs no ghost-specific override here. */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, transparent);\n  }\n\n  :host(:not([disabled])[variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n    border-color: var(--file-input-hover-border-color, var(--color-contrast-200));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State: intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op: this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .dropzone {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n}\n\n:host([disabled]) .dropzone-icon,\n:host([disabled]) .dropzone-title,\n:host([disabled]) .dropzone-hint,\n:host([disabled]) .dropzone-title u {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) .label-outside {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}