@vielzeug/refine 1.1.1

package/dist/inputs/datagrid/datagrid.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_row-hover-bg:var(--datagrid-row-hover-bg,color-mix(in oklch, var(--color-contrast-500) 5%, transparent));--_row-selected-bg:var(--datagrid-row-selected-bg,color-mix(in oklch, var(--_accent) 10%, transparent));--_row-selected-border:var(--datagrid-row-selected-border,var(--_accent))}.dg-scroll{max-height:var(--datagrid-max-height,none);overflow:auto}.dg-table{width:100%;font-size:var(--_font-size);table-layout:auto;border-collapse:collapse}.dg-head{z-index:2;background:var(--_header-bg);box-shadow:inset 0 calc(var(--border) * -1) 0 var(--_border-color);position:sticky;top:0}.dg-th{padding:var(--_cell-padding-y) var(--_cell-padding-x);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-align:start;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;-webkit-user-select:none;user-select:none;border-right:var(--border) solid var(--_border-color)}.dg-th[data-align=center]{text-align:center}.dg-th[data-align=right]{text-align:right}.dg-th:has(.dg-sort-btn){padding:0}.dg-sort-btn{--button-padding:var(--_cell-padding-y) var(--_cell-padding-x);--button-font-size:var(--text-xs);--button-font-weight:var(--font-semibold);--button-color:var(--color-contrast-500);--button-justify:flex-start;height:100%}.dg-th[data-align=center] .dg-sort-btn{--button-justify:center}.dg-th[data-align=right] .dg-sort-btn{--button-justify:flex-end}:host(:dir(rtl)) .dg-th{border-right:none;border-left:var(--border) solid var(--_border-color)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th{border-right:none;border-left:var(--border) solid var(--_border-color)}.dg-th:last-child,.dg-th.dg-th-check,.dg-th.dg-th-expand,.dg-th.dg-th-last{border-right:none}:host(:dir(rtl)) .dg-th:last-child,:host(:dir(rtl)) .dg-th.dg-th-check,:host(:dir(rtl)) .dg-th.dg-th-expand,:host(:dir(rtl)) .dg-th.dg-th-last{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th:last-child{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th.dg-th-check{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th.dg-th-expand{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th.dg-th-last{border-left:none}.dg-th-inner{gap:var(--size-1);align-items:center;display:flex;position:relative}.dg-th[aria-sort]:has(.dg-sort-btn:hover):not(:has(.dg-sort-btn[aria-disabled=true])){background:color-mix(in oklch, var(--color-contrast-900) 5%, transparent)}.dg-th[aria-sort=ascending] .dg-sort-icon,.dg-th[aria-sort=descending] .dg-sort-icon{color:var(--_accent)}.dg-th-check{width:var(--size-5);min-width:var(--size-5);padding:var(--_cell-padding-y) var(--_cell-padding-x)}.dg-th-check,.dg-td-check{vertical-align:middle;text-align:center}.dg-td.dg-td-check{padding:var(--size-1) 0 0}.dg-check{cursor:pointer;justify-content:center;align-items:center;gap:0;min-height:0;display:inline-flex}.dg-body .dg-tr{border-bottom:var(--border) solid var(--_border-color);transition:background var(--transition-fast)}.dg-body .dg-tr:hover:not([data-disabled],[aria-selected=true]){background:var(--_row-hover-bg)}.dg-body .dg-tr[aria-selected=true]{background:var(--_row-selected-bg)}.dg-body .dg-tr[data-selectable]{cursor:pointer;outline:none}.dg-body .dg-tr[data-selectable]:focus-visible{box-shadow:inset 0 0 0 2px var(--_row-selected-border)}.dg-body .dg-tr[data-disabled]{pointer-events:none;opacity:.45}:host([striped]) .dg-body .dg-tr:nth-child(2n){background:var(--_stripe-bg)}:host([striped]) .dg-body .dg-tr:nth-child(2n)[aria-selected=true]{background:var(--_row-selected-bg)}.dg-td{max-width:var(--datagrid-cell-max-width,32ch);padding:var(--_cell-padding-y) var(--_cell-padding-x);text-overflow:ellipsis;vertical-align:middle;color:var(--color-contrast-800);white-space:nowrap;border-right:var(--border) solid var(--_border-color);overflow:hidden}.dg-td[data-align=center]{text-align:center}.dg-td[data-align=right]{text-align:right}:host(:dir(rtl)) .dg-td{border-right:none;border-left:var(--border) solid var(--_border-color)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td{border-right:none;border-left:var(--border) solid var(--_border-color)}.dg-td:last-child,.dg-td.dg-td-check,.dg-td.dg-td-expand,.dg-td.dg-td-last{border-right:none}:host(:dir(rtl)) .dg-td:last-child,:host(:dir(rtl)) .dg-td.dg-td-check,:host(:dir(rtl)) .dg-td.dg-td-expand,:host(:dir(rtl)) .dg-td.dg-td-last{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td:last-child{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td.dg-td-check{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td.dg-td-expand{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td.dg-td-last{border-left:none}.dg-empty{padding:var(--size-12) var(--_cell-padding-x);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.dg-empty-content{gap:var(--size-4);flex-direction:column;justify-content:center;align-items:center;display:flex}.dg-empty-actions{margin-top:var(--size-2)}.dg-controls{gap:var(--size-3);height:var(--size-8);padding:var(--size-1-5) var(--_cell-padding-x);background:var(--_header-bg);border-bottom:var(--border) solid var(--_border-color);justify-content:space-between;align-items:center;display:flex}.dg-tabs{gap:var(--size-1);flex:1;align-items:center;min-width:0;display:flex;overflow:hidden}.dg-tab{--button-padding:var(--size-0-5) var(--size-2-5);--button-font-size:var(--text-xs);--button-color:var(--color-contrast-500);flex:1;min-width:0}.dg-tab--active{--button-color:var(--color-contrast-900);--button-bg:color-mix(in oklch, var(--color-contrast-500) 10%, transparent);--button-border-color:var(--_border-color);--button-border:var(--border);font-weight:var(--font-semibold)}.dg-actions{gap:var(--size-0-5);flex-shrink:0;align-items:center;display:flex}.dg-action-divider{width:var(--border);height:var(--size-4);margin-inline:var(--size-1);background:var(--_border-color);flex-shrink:0;display:inline-block}.dg-action-divider[hidden]{display:none}.dg-filter{width:100%;display:block}.dg-search{gap:var(--size-1);flex-direction:row-reverse;align-items:center;display:flex}.dg-search-input{opacity:0;width:0;transition:width var(--transition-fast), opacity var(--transition-fast);--input-height:var(--size-7);flex-shrink:0;display:block;overflow:hidden}.dg-search--open .dg-search-input{opacity:1;width:12rem;overflow:visible}@media (prefers-reduced-motion:reduce){.dg-search-input{transition:none}}.dg-action-popover{display:inline-flex}.dg-pop-header{padding:var(--size-3) var(--size-3) var(--size-2);justify-content:space-between;align-items:center;display:flex}.dg-pop-title{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-600);letter-spacing:.02em}.dg-pop-sort{padding-bottom:var(--size-2);flex-direction:column;display:flex}.dg-pop-sort-row{gap:var(--size-2);padding:var(--size-1) var(--size-3);align-items:center;display:flex}.dg-pop-select{--select-min-width:var(--size-20);flex:2}.dg-pop-dir-select{--select-min-width:var(--size-10);flex:1}.dg-pop-filter{flex-direction:column;display:flex}.dg-pop-filter-fields{padding:0 var(--size-3) var(--size-3)}.dg-pop-filter-rules{border-top:var(--border) solid var(--_border-color);padding-top:var(--size-1)}.dg-pop-filter-rules[hidden]{display:none}.dg-pop-filter-rule{gap:var(--size-2);padding:var(--size-2) var(--size-3);flex-direction:column;display:flex}.dg-pop-filter-rule-header{gap:var(--size-1-5);align-items:center;display:flex}.dg-pop-filter-field{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-800);white-space:nowrap}.dg-pop-filter-op-select{--select-min-width:0;--select-height:var(--size-6);--select-font-size:var(--text-2xs);--select-padding-x:var(--size-1-5);flex:1;min-width:6rem}.dg-pop-col-item{--button-radius:var(--rounded-md);justify-content:flex-start}.dg-pop-col-list{gap:var(--size-1);max-width:25rem;padding:var(--size-3);flex-wrap:wrap;display:flex}.dg-footer{gap:var(--size-2);padding:var(--size-2) var(--_cell-padding-x);font-size:var(--text-xs);color:var(--color-contrast-500);background:var(--_header-bg);align-items:center;display:flex}.dg-footer-info{white-space:nowrap}.dg-footer-end{gap:var(--size-2);align-items:center;width:fit-content;display:flex}.dg-footer-end:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:auto}.dg-footer-end:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.dg-page-size-wrap{flex-shrink:0;width:5rem}.dg-page-size-select{--select-min-width:0;--select-height:var(--size-7);--select-font-size:var(--text-xs);--select-padding-x:var(--size-2)}.dg-pagination{gap:var(--size-1);align-items:center;display:flex}:host(:dir(rtl)) .dg-page-btn{transform:scaleX(-1)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-page-btn{transform:scaleX(-1)}.dg-page-btn{--button-color:var(--color-contrast-600);--button-radius:var(--rounded-md);width:var(--size-7);height:var(--size-7)}.dg-page-btn:hover{--button-color:var(--color-contrast-900);--button-bg:var(--color-contrast-300)}.dg-page-btn:disabled{cursor:not-allowed;opacity:.35}.dg-page-label{padding-inline:var(--size-1);white-space:nowrap}.dg-col-resize{inset-block:calc(var(--_cell-padding-y) * -1);width:var(--size-1);cursor:col-resize;-webkit-user-select:none;user-select:none;border-radius:var(--rounded);transition:background var(--transition-fast);background:0 0;position:absolute}.dg-col-resize:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:calc((var(--_cell-padding-x) + var(--border) + 2px) * -1)}.dg-col-resize:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc((var(--_cell-padding-x) + var(--border) + 2px) * -1)}.dg-col-resize:hover,.dg-col-resize:active{background:var(--_accent,var(--color-contrast-300))}.dg-td:focus-visible,.dg-th:focus-visible{outline:2px solid var(--_row-selected-border);outline-offset:-2px}.dg-tr-expanded .dg-td-expanded{padding:var(--_cell-padding-y) var(--_cell-padding-x);box-shadow:inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-600) 4%, var(--_bg,transparent)), inset 0 calc(var(--border) * -1) 0 var(--_border-color);border:none}.dg-tr-expanded:last-child .dg-td-expanded{box-shadow:inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-900) 4%, var(--_bg,transparent))}.dg-tr:has(+.dg-tr-expanded){border-bottom:none}.dg-th-expand,.dg-td-expand{width:var(--size-8);min-width:var(--size-8);padding-block:var(--size-1) 0;padding-inline:0 var(--size-2);text-align:center;white-space:nowrap;border-left:none;border-right:none}.dg-expand-btn{--button-color:var(--color-contrast-500);--button-radius:var(--rounded-sm);width:var(--size-5);height:var(--size-5)}.dg-expand-btn:hover{--button-color:var(--color-contrast-900)}.dg-expand-btn:disabled{cursor:not-allowed;opacity:.4}.dg-loading-overlay{z-index:3;background:color-mix(in oklch, var(--_bg,white) 40%, transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);justify-content:center;align-items:center;display:none;position:absolute;inset:0}:host([loading]) .dg-loading-overlay{display:flex}:host([loading]) .dg-scroll table{pointer-events:none;opacity:.5}.dg-spin{animation:1s linear infinite dg-spin}@keyframes dg-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}`;exports.default=e;
+//# sourceMappingURL=datagrid.css?inline.cjs.map

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

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

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

@@ -0,0 +1,6 @@
+//#region src/inputs/datagrid/datagrid.css?inline
+var e = "@layer refine.base{:host{--_row-hover-bg:var(--datagrid-row-hover-bg,color-mix(in oklch, var(--color-contrast-500) 5%, transparent));--_row-selected-bg:var(--datagrid-row-selected-bg,color-mix(in oklch, var(--_accent) 10%, transparent));--_row-selected-border:var(--datagrid-row-selected-border,var(--_accent))}.dg-scroll{max-height:var(--datagrid-max-height,none);overflow:auto}.dg-table{width:100%;font-size:var(--_font-size);table-layout:auto;border-collapse:collapse}.dg-head{z-index:2;background:var(--_header-bg);box-shadow:inset 0 calc(var(--border) * -1) 0 var(--_border-color);position:sticky;top:0}.dg-th{padding:var(--_cell-padding-y) var(--_cell-padding-x);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-align:start;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;-webkit-user-select:none;user-select:none;border-right:var(--border) solid var(--_border-color)}.dg-th[data-align=center]{text-align:center}.dg-th[data-align=right]{text-align:right}.dg-th:has(.dg-sort-btn){padding:0}.dg-sort-btn{--button-padding:var(--_cell-padding-y) var(--_cell-padding-x);--button-font-size:var(--text-xs);--button-font-weight:var(--font-semibold);--button-color:var(--color-contrast-500);--button-justify:flex-start;height:100%}.dg-th[data-align=center] .dg-sort-btn{--button-justify:center}.dg-th[data-align=right] .dg-sort-btn{--button-justify:flex-end}:host(:dir(rtl)) .dg-th{border-right:none;border-left:var(--border) solid var(--_border-color)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th{border-right:none;border-left:var(--border) solid var(--_border-color)}.dg-th:last-child,.dg-th.dg-th-check,.dg-th.dg-th-expand,.dg-th.dg-th-last{border-right:none}:host(:dir(rtl)) .dg-th:last-child,:host(:dir(rtl)) .dg-th.dg-th-check,:host(:dir(rtl)) .dg-th.dg-th-expand,:host(:dir(rtl)) .dg-th.dg-th-last{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th:last-child{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th.dg-th-check{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th.dg-th-expand{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-th.dg-th-last{border-left:none}.dg-th-inner{gap:var(--size-1);align-items:center;display:flex;position:relative}.dg-th[aria-sort]:has(.dg-sort-btn:hover):not(:has(.dg-sort-btn[aria-disabled=true])){background:color-mix(in oklch, var(--color-contrast-900) 5%, transparent)}.dg-th[aria-sort=ascending] .dg-sort-icon,.dg-th[aria-sort=descending] .dg-sort-icon{color:var(--_accent)}.dg-th-check{width:var(--size-5);min-width:var(--size-5);padding:var(--_cell-padding-y) var(--_cell-padding-x)}.dg-th-check,.dg-td-check{vertical-align:middle;text-align:center}.dg-td.dg-td-check{padding:var(--size-1) 0 0}.dg-check{cursor:pointer;justify-content:center;align-items:center;gap:0;min-height:0;display:inline-flex}.dg-body .dg-tr{border-bottom:var(--border) solid var(--_border-color);transition:background var(--transition-fast)}.dg-body .dg-tr:hover:not([data-disabled],[aria-selected=true]){background:var(--_row-hover-bg)}.dg-body .dg-tr[aria-selected=true]{background:var(--_row-selected-bg)}.dg-body .dg-tr[data-selectable]{cursor:pointer;outline:none}.dg-body .dg-tr[data-selectable]:focus-visible{box-shadow:inset 0 0 0 2px var(--_row-selected-border)}.dg-body .dg-tr[data-disabled]{pointer-events:none;opacity:.45}:host([striped]) .dg-body .dg-tr:nth-child(2n){background:var(--_stripe-bg)}:host([striped]) .dg-body .dg-tr:nth-child(2n)[aria-selected=true]{background:var(--_row-selected-bg)}.dg-td{max-width:var(--datagrid-cell-max-width,32ch);padding:var(--_cell-padding-y) var(--_cell-padding-x);text-overflow:ellipsis;vertical-align:middle;color:var(--color-contrast-800);white-space:nowrap;border-right:var(--border) solid var(--_border-color);overflow:hidden}.dg-td[data-align=center]{text-align:center}.dg-td[data-align=right]{text-align:right}:host(:dir(rtl)) .dg-td{border-right:none;border-left:var(--border) solid var(--_border-color)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td{border-right:none;border-left:var(--border) solid var(--_border-color)}.dg-td:last-child,.dg-td.dg-td-check,.dg-td.dg-td-expand,.dg-td.dg-td-last{border-right:none}:host(:dir(rtl)) .dg-td:last-child,:host(:dir(rtl)) .dg-td.dg-td-check,:host(:dir(rtl)) .dg-td.dg-td-expand,:host(:dir(rtl)) .dg-td.dg-td-last{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td:last-child{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td.dg-td-check{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td.dg-td-expand{border-left:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-td.dg-td-last{border-left:none}.dg-empty{padding:var(--size-12) var(--_cell-padding-x);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.dg-empty-content{gap:var(--size-4);flex-direction:column;justify-content:center;align-items:center;display:flex}.dg-empty-actions{margin-top:var(--size-2)}.dg-controls{gap:var(--size-3);height:var(--size-8);padding:var(--size-1-5) var(--_cell-padding-x);background:var(--_header-bg);border-bottom:var(--border) solid var(--_border-color);justify-content:space-between;align-items:center;display:flex}.dg-tabs{gap:var(--size-1);flex:1;align-items:center;min-width:0;display:flex;overflow:hidden}.dg-tab{--button-padding:var(--size-0-5) var(--size-2-5);--button-font-size:var(--text-xs);--button-color:var(--color-contrast-500);flex:1;min-width:0}.dg-tab--active{--button-color:var(--color-contrast-900);--button-bg:color-mix(in oklch, var(--color-contrast-500) 10%, transparent);--button-border-color:var(--_border-color);--button-border:var(--border);font-weight:var(--font-semibold)}.dg-actions{gap:var(--size-0-5);flex-shrink:0;align-items:center;display:flex}.dg-action-divider{width:var(--border);height:var(--size-4);margin-inline:var(--size-1);background:var(--_border-color);flex-shrink:0;display:inline-block}.dg-action-divider[hidden]{display:none}.dg-filter{width:100%;display:block}.dg-search{gap:var(--size-1);flex-direction:row-reverse;align-items:center;display:flex}.dg-search-input{opacity:0;width:0;transition:width var(--transition-fast), opacity var(--transition-fast);--input-height:var(--size-7);flex-shrink:0;display:block;overflow:hidden}.dg-search--open .dg-search-input{opacity:1;width:12rem;overflow:visible}@media (prefers-reduced-motion:reduce){.dg-search-input{transition:none}}.dg-action-popover{display:inline-flex}.dg-pop-header{padding:var(--size-3) var(--size-3) var(--size-2);justify-content:space-between;align-items:center;display:flex}.dg-pop-title{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-600);letter-spacing:.02em}.dg-pop-sort{padding-bottom:var(--size-2);flex-direction:column;display:flex}.dg-pop-sort-row{gap:var(--size-2);padding:var(--size-1) var(--size-3);align-items:center;display:flex}.dg-pop-select{--select-min-width:var(--size-20);flex:2}.dg-pop-dir-select{--select-min-width:var(--size-10);flex:1}.dg-pop-filter{flex-direction:column;display:flex}.dg-pop-filter-fields{padding:0 var(--size-3) var(--size-3)}.dg-pop-filter-rules{border-top:var(--border) solid var(--_border-color);padding-top:var(--size-1)}.dg-pop-filter-rules[hidden]{display:none}.dg-pop-filter-rule{gap:var(--size-2);padding:var(--size-2) var(--size-3);flex-direction:column;display:flex}.dg-pop-filter-rule-header{gap:var(--size-1-5);align-items:center;display:flex}.dg-pop-filter-field{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-800);white-space:nowrap}.dg-pop-filter-op-select{--select-min-width:0;--select-height:var(--size-6);--select-font-size:var(--text-2xs);--select-padding-x:var(--size-1-5);flex:1;min-width:6rem}.dg-pop-col-item{--button-radius:var(--rounded-md);justify-content:flex-start}.dg-pop-col-list{gap:var(--size-1);max-width:25rem;padding:var(--size-3);flex-wrap:wrap;display:flex}.dg-footer{gap:var(--size-2);padding:var(--size-2) var(--_cell-padding-x);font-size:var(--text-xs);color:var(--color-contrast-500);background:var(--_header-bg);align-items:center;display:flex}.dg-footer-info{white-space:nowrap}.dg-footer-end{gap:var(--size-2);align-items:center;width:fit-content;display:flex}.dg-footer-end:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:auto}.dg-footer-end:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.dg-page-size-wrap{flex-shrink:0;width:5rem}.dg-page-size-select{--select-min-width:0;--select-height:var(--size-7);--select-font-size:var(--text-xs);--select-padding-x:var(--size-2)}.dg-pagination{gap:var(--size-1);align-items:center;display:flex}:host(:dir(rtl)) .dg-page-btn{transform:scaleX(-1)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .dg-page-btn{transform:scaleX(-1)}.dg-page-btn{--button-color:var(--color-contrast-600);--button-radius:var(--rounded-md);width:var(--size-7);height:var(--size-7)}.dg-page-btn:hover{--button-color:var(--color-contrast-900);--button-bg:var(--color-contrast-300)}.dg-page-btn:disabled{cursor:not-allowed;opacity:.35}.dg-page-label{padding-inline:var(--size-1);white-space:nowrap}.dg-col-resize{inset-block:calc(var(--_cell-padding-y) * -1);width:var(--size-1);cursor:col-resize;-webkit-user-select:none;user-select:none;border-radius:var(--rounded);transition:background var(--transition-fast);background:0 0;position:absolute}.dg-col-resize:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:calc((var(--_cell-padding-x) + var(--border) + 2px) * -1)}.dg-col-resize:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc((var(--_cell-padding-x) + var(--border) + 2px) * -1)}.dg-col-resize:hover,.dg-col-resize:active{background:var(--_accent,var(--color-contrast-300))}.dg-td:focus-visible,.dg-th:focus-visible{outline:2px solid var(--_row-selected-border);outline-offset:-2px}.dg-tr-expanded .dg-td-expanded{padding:var(--_cell-padding-y) var(--_cell-padding-x);box-shadow:inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-600) 4%, var(--_bg,transparent)), inset 0 calc(var(--border) * -1) 0 var(--_border-color);border:none}.dg-tr-expanded:last-child .dg-td-expanded{box-shadow:inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-900) 4%, var(--_bg,transparent))}.dg-tr:has(+.dg-tr-expanded){border-bottom:none}.dg-th-expand,.dg-td-expand{width:var(--size-8);min-width:var(--size-8);padding-block:var(--size-1) 0;padding-inline:0 var(--size-2);text-align:center;white-space:nowrap;border-left:none;border-right:none}.dg-expand-btn{--button-color:var(--color-contrast-500);--button-radius:var(--rounded-sm);width:var(--size-5);height:var(--size-5)}.dg-expand-btn:hover{--button-color:var(--color-contrast-900)}.dg-expand-btn:disabled{cursor:not-allowed;opacity:.4}.dg-loading-overlay{z-index:3;background:color-mix(in oklch, var(--_bg,white) 40%, transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);justify-content:center;align-items:center;display:none;position:absolute;inset:0}:host([loading]) .dg-loading-overlay{display:flex}:host([loading]) .dg-scroll table{pointer-events:none;opacity:.5}.dg-spin{animation:1s linear infinite dg-spin}@keyframes dg-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=datagrid.css?inline.js.map

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

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

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

@@ -0,0 +1,302 @@
+import '../../content/icon/icon';
+import '../../inputs/button/button';
+import '../../inputs/checkbox/checkbox';
+import '../../inputs/combobox/combobox';
+import '../../inputs/select/select';
+import '../../overlay/popover/popover';
+import { type DataGridColumn, type SelectionMode, type SortDirection, type SortState } from '../../headless';
+import { type FilterOption, type DataGridView } from './datagrid-controls';
+type SortMode = 'client' | 'server';
+export { COLUMN_TAG } from './datagrid-column';
+export type { DataGridView, FilterOption, FilterOperator } from './datagrid-controls';
+/**
+ * Returns the Lucide icon name for a column's sort state.
+ * Pure function — no closure dependency on ctrl.
+ */
+export declare function sortIconName(state: SortState, key: string): string;
+/**
+ * Returns the WAI-ARIA `aria-sort` value for a column.
+ * Pure function — independently unit-testable.
+ */
+export declare function ariaSortValue(state: SortState, key: string): 'ascending' | 'descending' | 'none';
+export type OreDataGridEvents<T = Record<string, unknown>> = {
+    /** Fired when the user cycles the density via the toolbar button. */
+    'density-change': {
+        density: 'compact' | 'cozy' | 'comfortable';
+    };
+    /** Fired when the active page changes. */
+    'page-change': {
+        pageIndex: number;
+        pageSize: number;
+    };
+    /** Fired when a row is expanded or collapsed. */
+    'row-expand': {
+        expanded: boolean;
+        key: string;
+    };
+    /** Fired when row selection changes. */
+    'selection-change': {
+        keys: string[];
+        rows: T[];
+    };
+    /** Fired when the sort column or direction changes. */
+    'sort-change': {
+        direction: SortDirection;
+        key: string;
+    };
+    /** Fired when the active view tab changes. detail: { id, label } */
+    'view-change': {
+        id: string;
+        label: string;
+    };
+};
+export type OreDataGridProps<T = Record<string, unknown>> = {
+    /**
+     * The ID of the currently active view. Must match an `id` in `views`.
+     * When omitted, no view is active (all data shown).
+     * @example `grid.activeView = 'open'`
+     */
+    activeView?: string;
+    /**
+     * Column definitions (imperative API). Takes precedence over `<ore-column>` children.
+     * Passing `[]` explicitly clears declarative children.
+     * Pass `undefined` (or omit) to use `<ore-column>` children instead.
+     * @example
+     * ```js
+     * grid.columns = [
+     *   { key: 'name', label: 'Name', sortable: true },
+     *   { key: 'email', label: 'Email' },
+     * ];
+     * ```
+     */
+    columns?: DataGridColumn<T>[];
+    /** Cell density: `'compact'` | `'cozy'` (default) | `'comfortable'` */
+    density?: 'compact' | 'cozy' | 'comfortable';
+    /** Disable all interaction. */
+    disabled?: boolean;
+    /** Text shown when there are no rows. */
+    emptyText?: string;
+    /**
+     * Enable row expansion. When set, each row gets a toggle button.
+     * Requires at least one column to have a `renderExpanded` function.
+     *
+     * @security The `renderExpanded` callback's returned HTML string is inserted via ore's
+     * `raw()` directive (participates in `setRawSanitizer()` if one is registered). If data
+     * originates from untrusted user input, sanitize it before returning
+     * (e.g. with DOMPurify or your CSP-compliant sanitizer).
+     */
+    expandable?: boolean;
+    /**
+     * Pre-defined filter option definitions per column key.
+     * When provided, these options replace the auto-derived ones in the Filter popover.
+     * @example
+     * ```js
+     * grid.filterOptions = [
+     *   { key: 'role', label: 'Role', options: [{ value: 'Admin' }, { value: 'Editor' }] },
+     * ];
+     * ```
+     */
+    filterOptions?: FilterOption[];
+    /** Stretch the grid to fill its container's width. */
+    fullwidth?: boolean;
+    /**
+     * Function that returns a unique string key per row.
+     * Defaults to `(row) => String(row['id'])`.
+     */
+    getRowKey?: (row: T) => string;
+    /** Accessible label for the grid. Recommended for screen readers. */
+    label?: string;
+    /** Show a busy/loading state with reduced opacity. */
+    loading?: boolean;
+    /** Number of rows per page. Defaults to `10`. Set to `0` to disable pagination. */
+    pageSize?: number;
+    /**
+     * Options for the per-page size selector rendered in the footer.
+     * When provided, a `ore-select` is shown next to the pagination controls.
+     * @example `grid.pageSizeOptions = [10, 25, 50, 100]`
+     */
+    pageSizeOptions?: number[];
+    /**
+     * 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' }];
+     * ```
+     */
+    rows?: T[];
+    /**
+     * Accessible label for the search toggle button. Supports localization.
+     * Defaults to `'Search'` (open) and `'Close search'` (close).
+     * Pass a tuple `[openLabel, closeLabel]` to override both.
+     * @example `grid.searchLabel = ['Suchen', 'Suche schließen']`
+     */
+    searchLabel?: [open: string, close: string];
+    /** Placeholder text for the inline search input in the controls bar. */
+    searchPlaceholder?: string;
+    /**
+     * Pre-selected row keys. Setting this from outside will update the internal selection.
+     * @example `grid.selectedKeys = ['1', '3']`
+     */
+    selectedKeys?: string[];
+    /** Row selection mode. */
+    selectionMode?: SelectionMode;
+    /**
+     * Whether sorting is client-side (default) or server-side.
+     * When `'server'`, `sort-change` fires but items are not sorted by the control.
+     */
+    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.
+     * Client-side sort and filter are bypassed; wire `sort-change` to `source.patch()` externally.
+     * @example
+     * ```js
+     * import { createRemoteSource } from '@vielzeug/sourcerer';
+     * const source = createRemoteSource({ fetch: (q, sig) => api.users(q, sig), limit: 20 });
+     * grid.source = source;
+     * ```
+     */
+    source?: DataGridSource<T>;
+    /** Apply alternating row backgrounds. */
+    striped?: boolean;
+    /**
+     * Named view definitions for the controls bar tab strip.
+     * Each view is a label displayed as a tab; switching tabs fires `view-change`.
+     * The consumer is responsible for restoring filter/sort state per view.
+     * @example
+     * ```js
+     * grid.views = [
+     *   { id: 'all', label: 'All' },
+     *   { id: 'open', label: 'Open' },
+     *   { id: 'mine', label: 'Mine' },
+     * ];
+     * grid.activeView = 'all';
+     * ```
+     */
+    views?: DataGridView[];
+};
+/**
+ * An accessible, keyboard-navigable data grid with sorting, pagination,
+ * single/multi row selection, inline search, filter, and named views.
+ *
+ * @element ore-datagrid
+ * @element ore-column - Optional declarative column definition child
+ *
+ * @attr {boolean} disabled - Disable all interaction
+ * @attr {boolean} loading - Show busy/loading state
+ * @attr {boolean} striped - Apply alternating row backgrounds
+ * @attr {boolean} fullwidth - Stretch the grid to fill its container's width
+ * @attr {data} search-label - Tuple [openLabel, closeLabel] for the search toggle button
+ * @attr {string} search-placeholder - Placeholder for the inline search input
+ * @attr {number} page-size - Rows per page (0 = no pagination, default 10)
+ * @attr {string} selection-mode - Row selection: 'none' | 'single' | 'multi'
+ * @attr {string} sort-mode - Sorting: 'client' (default) | 'server'
+ * @attr {string} density - Cell density: compact | cozy (default) | comfortable
+ * @attr {string} empty-text - Text shown when there are no rows
+ * @attr {string} label - Accessible label for the grid
+ * @attr {string} active-view - ID of the currently active view tab
+ *
+ * @fires selection-change - Fired when row selection changes. detail: { keys: string[], rows: T[] }
+ * @fires sort-change - Fired when sort state changes. detail: { key: string, direction: SortDirection }
+ * @fires page-change - Fired when page changes. detail: { pageIndex: number, pageSize: number }
+ * @fires row-expand - Fired when a row is expanded or collapsed. detail: { expanded: boolean; key: string }
+ * @fires view-change - Fired when the active view tab changes. detail: { id: string, label: string }
+ *
+ * @cssprop --datagrid-bg - Grid background color
+ * @cssprop --datagrid-border-color - Grid and cell border color
+ * @cssprop --datagrid-radius - Grid border radius
+ * @cssprop --datagrid-shadow - Grid box shadow
+ * @cssprop --datagrid-header-bg - Column header background
+ * @cssprop --datagrid-row-hover-bg - Row hover background
+ * @cssprop --datagrid-row-selected-bg - Selected row background
+ * @cssprop --datagrid-stripe-bg - Even-row stripe background
+ * @cssprop --datagrid-cell-padding-x - Cell horizontal padding
+ * @cssprop --datagrid-cell-padding-y - Cell vertical padding
+ * @cssprop --datagrid-cell-max-width - Maximum cell content width before truncating
+ * @cssprop --datagrid-max-height - Max scrollable height of the table area
+ * @cssprop --datagrid-font-size - Base font size for cells
+ *
+ * @part controls - The controls bar (tabs + action row)
+ * @part table - The `<table>` element
+ * @part thead - The `<thead>` element
+ * @part tbody - The `<tbody>` element
+ * @part row - A body `<tr>` element
+ * @part cell - A body `<td>` element
+ * @part footer - The pagination footer bar
+ *
+ * @example
+ * ```html
+ * <ore-datagrid id="grid" label="Users" selection-mode="multi"></ore-datagrid>
+ * <script>
+ *   const grid = document.getElementById('grid');
+ *   grid.columns = [
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'role', label: 'Role' },
+ *   ];
+ *   grid.rows = [
+ *     { id: '1', name: 'Alice', role: 'Admin' },
+ *     { id: '2', name: 'Bob',   role: 'Viewer' },
+ *   ];
+ *   grid.views = [{ id: 'all', label: 'All' }, { id: 'open', label: 'Open' }];
+ *   grid.activeView = 'all';
+ * </script>
+ * ```
+ */
+/**
+ * Minimal structural interface for a reactive data source accepted by `ore-datagrid`.
+ *
+ * Any `@vielzeug/sourcerer` source (`LocalSource<T>`, `RemoteSource<T>`, `PageNavigator<T>`)
+ * satisfies this interface automatically — no direct sourcerer import is required in refine.
+ *
+ * When `source` is set on the grid:
+ * - `rows` prop is ignored; `source.current` drives the displayed items.
+ * - Pagination is driven by `source.meta` (pageCount, pageNumber, totalItems).
+ * - Prev/next buttons call `source.prev()` / `source.next()`.
+ * - The search input calls `source.search(query)` when available.
+ * - `source.meta.isLoading` contributes to the grid's `aria-busy` state.
+ * - Client-side sort and filter are bypassed; wire `sort-change` to `source.patch()` externally.
+ *
+ * @example
+ * ```ts
+ * import { createRemoteSource } from '@vielzeug/sourcerer';
+ *
+ * const source = createRemoteSource({
+ *   fetch: (q, signal) =>
+ *     fetch(`/api/users?page=${q.page}&limit=${q.limit}&search=${q.search ?? ''}`, { signal })
+ *       .then(r => r.json()),
+ *   limit: 20,
+ * });
+ *
+ * const grid = document.querySelector('ore-datagrid');
+ * grid.source = source;
+ * ```
+ */
+export type DataGridSource<T = Record<string, unknown>> = {
+    /** Current page of items. Updated reactively after each fetch or patch. */
+    readonly current: readonly T[];
+    /** Navigate to a specific 1-indexed page number. */
+    goTo?(page: number): Promise<void>;
+    /** Pagination and loading metadata. */
+    readonly meta: {
+        readonly error: {
+            message: string;
+        } | null;
+        readonly isLoading: boolean;
+        readonly pageCount: number;
+        readonly pageNumber: number;
+        readonly pageSize: number;
+        readonly totalItems: number;
+    };
+    /** Navigate to the next page. No-op when on the last page. */
+    next?(): Promise<void>;
+    /** Navigate to the previous page. No-op when on the first page. */
+    prev?(): Promise<void>;
+    /** Debounced text search. No-op when not implemented by the source. */
+    search?(query: string, opts?: {
+        immediate?: boolean;
+    }): Promise<void>;
+    /** Subscribe to source updates. Returns an unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+};
+export declare const DATAGRID_TAG: "ore-datagrid";
+//# sourceMappingURL=datagrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid.d.ts","sourceRoot":"","sources":["../../../src/inputs/datagrid/datagrid.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,EAGL,KAAK,cAAc,EAEnB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAIxB,OAAO,EAA0B,KAAK,YAAY,EAAE,KAAK,YAAY,EAAuB,MAAM,qBAAqB,CAAC;AAIxH,KAAK,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAItF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAIlE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAIhG;AAID,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IAC3D,qEAAqE;IACrE,gBAAgB,EAAE;QAAE,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,aAAa,CAAA;KAAE,CAAC;IAClE,0CAA0C;IAC1C,aAAa,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,iDAAiD;IACjD,YAAY,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,wCAAwC;IACxC,kBAAkB,EAAE;QAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,CAAC,EAAE,CAAA;KAAE,CAAC;IAClD,uDAAuD;IACvD,aAAa,EAAE;QAAE,SAAS,EAAE,aAAa,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,oEAAoE;IACpE,aAAa,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IAC1D;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,aAAa,CAAC;IAC7C,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IAC5C,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC3B,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACxD,2EAA2E;IAC3E,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC;IAC/B,oDAAoD;IACpD,IAAI,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,uCAAuC;IACvC,QAAQ,CAAC,IAAI,EAAE;QACb,QAAQ,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QAC3C,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;QAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;QAC3B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;QAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,8DAA8D;IAC9D,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,mEAAmE;IACnE,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,uEAAuE;IACvE,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,oEAAoE;IACpE,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

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

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

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

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

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

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

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

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