snice 7.8.0 → 7.9.0

package/dist/cdn/table/snice-table.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.7.0
+ * snice v7.8.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.
@@ -675,7 +675,7 @@ class FormLabelAssociation {
     }
 }
 
-var cssContent$k = ":host([hidden]){display:none}:host{display:inline-block;width:100%;max-width:100%;box-sizing:border-box;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);color-scheme:light dark}.input-wrapper{position:relative;width:100%;max-width:100%;height:100%;box-sizing:border-box}:host([align]) .input-wrapper{display:flex;flex-direction:column}:host([align=top]) .input-wrapper{justify-content:flex-start}:host([align=center]) .input-wrapper{justify-content:center}:host([align=bottom]) .input-wrapper{justify-content:flex-end}.input-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;box-sizing:border-box;transition:all var(--snice-transition-fast, 150ms) ease}:host([stretch]) .input-wrapper{display:flex;flex-direction:column}:host([stretch]) .input-container{flex:1}:host([stretch]) .input{height:100%}.input{flex:1;min-width:0;box-sizing:border-box;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);background:var(--snice-color-surface-container-lowest,rgb(248 247 245));color:var(--snice-color-text,rgb(23 23 23));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);transition:border-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease),box-shadow var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease),background-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease);outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:focus-visible{border-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.input:hover:not(:focus):not(:disabled){border-color:var(--snice-color-border-hover,rgb(204 204 204))}.input:disabled{background:var(--snice-color-surface-container-low,rgb(250 250 250));color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:not-allowed;opacity:.6}.input::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82));opacity:.7}.input--small{padding:.375rem .625rem;font-size:var(--snice-font-size-sm, .875rem);min-height:2rem}.input--medium{padding:.5rem .75rem;font-size:var(--snice-font-size-md, 1rem);min-height:2.5rem}.input--large{padding:.625rem .875rem;font-size:var(--snice-font-size-lg, 1.125rem);min-height:3rem}.input--outlined{background:var(--snice-color-surface-container-lowest,rgb(248 247 245));border:1px solid var(--snice-color-border,rgb(226 226 226))}.input--filled{background:var(--snice-color-surface-container-low,rgb(250 250 250));border:1px solid transparent;border-bottom-color:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem) var(--snice-border-radius-md,.25rem) 0 0}.input--filled:focus-visible{background:var(--snice-color-surface-hover,rgb(245 245 245));border-bottom-color:var(--snice-color-primary,rgb(37 99 235))}.input--underlined{background:0 0;border:none;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:0;padding-left:0;padding-right:0;box-shadow:none}.input-container:has(.input--underlined){position:relative}.input-container:has(.input--underlined)::after{content:'';position:absolute;left:50%;right:50%;bottom:-1px;height:2px;background:var(--snice-color-primary,rgb(37 99 235));transition:left .2s var(--snice-ease-out, ease),right .2s var(--snice-ease-out, ease);pointer-events:none}.input-container:has(.input--underlined:focus-visible)::after{left:0;right:0}.input--underlined:focus-visible{border-bottom-color:var(--snice-color-border,rgb(226 226 226));box-shadow:none}.input--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.input--invalid:focus-visible{border-color:var(--snice-color-danger,rgb(220 38 38));box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-color-danger-alpha,rgb(220 38 38 / .4)),var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05))}.input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}.input::-webkit-calendar-picker-indicator:hover{opacity:1}.input--with-prefix-icon{padding-left:2.5rem}.input--clearable,.input--with-suffix-icon{padding-right:2.5rem}.input--with-suffix-icon.input--clearable{padding-right:4rem}.label{display:block;margin-bottom:.25rem;font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);line-height:var(--snice-line-height-normal, 1.5);color:var(--snice-color-text,rgb(23 23 23));text-align:left}:host([label-align=center]) .label{text-align:center}:host([label-align=right]) .label{text-align:right}.label--required::after{content:' *';color:var(--snice-color-danger,rgb(220 38 38))}.error-text,.helper-text{display:block;margin-top:.25rem;font-size:var(--snice-font-size-xs, .75rem)}.helper-text{color:var(--snice-color-text-secondary,rgb(82 82 82))}.error-text{color:var(--snice-color-danger,rgb(220 38 38))}.icon-slot{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none;opacity:.7}.icon-slot:empty{display:none}.icon-slot--prefix{left:.625rem}.icon-slot--suffix{right:.625rem}.icon{display:flex;align-items:center;justify-content:center;overflow:hidden;width:1.5rem;height:1.5rem;font-size:1.25rem;line-height:1;color:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:1.25rem;line-height:1}.icon-slot ::slotted(svg){width:1.5rem;height:1.5rem}.icon-slot ::slotted(img){width:1.5rem;height:1.5rem;object-fit:contain}.clear-button{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm,.125rem);color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease;opacity:0;visibility:hidden}.clear-button:hover{background:var(--snice-color-surface-hover,rgb(245 245 245));color:var(--snice-color-text,rgb(23 23 23))}.input-container:hover .clear-button--visible,.input:focus-visible~.clear-button--visible{opacity:1;visibility:visible}.clear-button--with-suffix{right:2rem}.password-toggle{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm,.125rem);color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease}.password-toggle:hover{background:var(--snice-color-surface-hover,rgb(245 245 245));color:var(--snice-color-text,rgb(23 23 23))}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button,.input[type=search]::-webkit-search-decoration,.input[type=search]::-webkit-search-results-button,.input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.input-container:focus-within{z-index:1}.input--loading{cursor:wait}.spinner{position:absolute;right:.75rem;width:1em;height:1em;pointer-events:none}.input--with-suffix-icon .spinner{right:2.5rem}.spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+var cssContent$l = ":host([hidden]){display:none}:host{display:inline-block;width:100%;max-width:100%;box-sizing:border-box;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);color-scheme:light dark}.input-wrapper{position:relative;width:100%;max-width:100%;height:100%;box-sizing:border-box}:host([align]) .input-wrapper{display:flex;flex-direction:column}:host([align=top]) .input-wrapper{justify-content:flex-start}:host([align=center]) .input-wrapper{justify-content:center}:host([align=bottom]) .input-wrapper{justify-content:flex-end}.input-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;box-sizing:border-box;transition:all var(--snice-transition-fast, 150ms) ease}:host([stretch]) .input-wrapper{display:flex;flex-direction:column}:host([stretch]) .input-container{flex:1}:host([stretch]) .input{height:100%}.input{flex:1;min-width:0;box-sizing:border-box;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);background:var(--snice-color-surface-container-lowest,rgb(248 247 245));color:var(--snice-color-text,rgb(23 23 23));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);transition:border-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease),box-shadow var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease),background-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease);outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:focus-visible{border-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.input:hover:not(:focus):not(:disabled){border-color:var(--snice-color-border-hover,rgb(204 204 204))}.input:disabled{background:var(--snice-color-surface-container-low,rgb(250 250 250));color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:not-allowed;opacity:.6}.input::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82));opacity:.7}.input--small{padding:.375rem .625rem;font-size:var(--snice-font-size-sm, .875rem);min-height:2rem}.input--medium{padding:.5rem .75rem;font-size:var(--snice-font-size-md, 1rem);min-height:2.5rem}.input--large{padding:.625rem .875rem;font-size:var(--snice-font-size-lg, 1.125rem);min-height:3rem}.input--outlined{background:var(--snice-color-surface-container-lowest,rgb(248 247 245));border:1px solid var(--snice-color-border,rgb(226 226 226))}.input--filled{background:var(--snice-color-surface-container-low,rgb(250 250 250));border:1px solid transparent;border-bottom-color:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem) var(--snice-border-radius-md,.25rem) 0 0}.input--filled:focus-visible{background:var(--snice-color-surface-hover,rgb(245 245 245));border-bottom-color:var(--snice-color-primary,rgb(37 99 235))}.input--underlined{background:0 0;border:none;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:0;padding-left:0;padding-right:0;box-shadow:none}.input-container:has(.input--underlined){position:relative}.input-container:has(.input--underlined)::after{content:'';position:absolute;left:50%;right:50%;bottom:-1px;height:2px;background:var(--snice-color-primary,rgb(37 99 235));transition:left .2s var(--snice-ease-out, ease),right .2s var(--snice-ease-out, ease);pointer-events:none}.input-container:has(.input--underlined:focus-visible)::after{left:0;right:0}.input--underlined:focus-visible{border-bottom-color:var(--snice-color-border,rgb(226 226 226));box-shadow:none}.input--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.input--invalid:focus-visible{border-color:var(--snice-color-danger,rgb(220 38 38));box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-color-danger-alpha,rgb(220 38 38 / .4)),var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05))}.input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}.input::-webkit-calendar-picker-indicator:hover{opacity:1}.input--with-prefix-icon{padding-left:2.5rem}.input--clearable,.input--with-suffix-icon{padding-right:2.5rem}.input--with-suffix-icon.input--clearable{padding-right:4rem}.label{display:block;margin-bottom:.25rem;font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);line-height:var(--snice-line-height-normal, 1.5);color:var(--snice-color-text,rgb(23 23 23));text-align:left}:host([label-align=center]) .label{text-align:center}:host([label-align=right]) .label{text-align:right}.label--required::after{content:' *';color:var(--snice-color-danger,rgb(220 38 38))}.error-text,.helper-text{display:block;margin-top:.25rem;font-size:var(--snice-font-size-xs, .75rem)}.helper-text{color:var(--snice-color-text-secondary,rgb(82 82 82))}.error-text{color:var(--snice-color-danger,rgb(220 38 38))}.icon-slot{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none;opacity:.7}.icon-slot:empty{display:none}.icon-slot--prefix{left:.625rem}.icon-slot--suffix{right:.625rem}.icon{display:flex;align-items:center;justify-content:center;overflow:hidden;width:1.5rem;height:1.5rem;font-size:1.25rem;line-height:1;color:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:1.25rem;line-height:1}.icon-slot ::slotted(svg){width:1.5rem;height:1.5rem}.icon-slot ::slotted(img){width:1.5rem;height:1.5rem;object-fit:contain}.clear-button{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm,.125rem);color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease;opacity:0;visibility:hidden}.clear-button:hover{background:var(--snice-color-surface-hover,rgb(245 245 245));color:var(--snice-color-text,rgb(23 23 23))}.input-container:hover .clear-button--visible,.input:focus-visible~.clear-button--visible{opacity:1;visibility:visible}.clear-button--with-suffix{right:2rem}.password-toggle{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm,.125rem);color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease}.password-toggle:hover{background:var(--snice-color-surface-hover,rgb(245 245 245));color:var(--snice-color-text,rgb(23 23 23))}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button,.input[type=search]::-webkit-search-decoration,.input[type=search]::-webkit-search-results-button,.input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.input-container:focus-within{z-index:1}.input--loading{cursor:wait}.spinner{position:absolute;right:.75rem;width:1em;height:1em;pointer-events:none}.input--with-suffix-icon .spinner{right:2.5rem}.spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
 
 (() => {
     let _classDecorators = [element('snice-input', { formAssociated: true, delegatesFocus: true })];
@@ -1141,7 +1141,7 @@ var cssContent$k = ":host([hidden]){display:none}:host{display:inline-block;widt
     `;
         }
         styles() {
-            return css /*css*/ `${cssContent$k}`;
+            return css /*css*/ `${cssContent$l}`;
         }
         init() {
             // Preserve a value assigned before custom-element upgrade. The own data
@@ -1610,7 +1610,7 @@ var cssContent$k = ":host([hidden]){display:none}:host{display:inline-block;widt
     return _classThis;
 })();
 
-var cssContent$j = ":host([hidden]){display:none}:host{display:inline-block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);position:relative;width:100%;max-width:18.75rem}[hidden]{display:none!important}img[src=\"\"]{display:none}.select-wrapper{position:relative;width:100%}.select-label{display:block;margin-bottom:.25rem;font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);line-height:var(--snice-line-height-normal, 1.5);color:var(--snice-color-text,rgb(23 23 23));text-align:left}.select-label--required::after{content:' *';color:var(--snice-color-danger,rgb(220 38 38))}.select-error-text,.select-helper-text{display:block;margin-top:var(--snice-spacing-2xs,.25rem);font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-normal,400);line-height:var(--snice-line-height-normal, 1.5)}.select-helper-text{color:var(--snice-color-text-secondary,rgb(82 82 82))}.select-error-text{color:var(--snice-color-danger,rgb(220 38 38))}.select-trigger{box-sizing:border-box;min-width:0;width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--snice-color-surface-container-lowest,rgb(248 247 245));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease;position:relative;text-align:left;font-family:inherit;color:var(--snice-color-text,rgb(23 23 23))}.select-trigger--small{padding:.375rem 2rem .375rem .625rem;font-size:var(--snice-font-size-sm, .875rem);min-height:2rem}.select-trigger--medium{padding:.5rem 2.25rem .5rem .75rem;font-size:var(--snice-font-size-md, 1rem);min-height:var(--snice-select-min-height,2.5rem)}.select-trigger--large{padding:.625rem 2.5rem .625rem .875rem;font-size:var(--snice-font-size-lg, 1.125rem);min-height:3rem}.select-trigger:hover:not(.select-trigger--disabled){border-color:var(--snice-color-border-hover,rgb(180 180 180))}.select-trigger:focus-visible{outline:2px solid var(--snice-color-primary,rgb(37 99 235));outline-offset:2px;border-color:var(--snice-color-primary,rgb(37 99 235))}.select-trigger--open{border-color:var(--snice-color-primary,rgb(37 99 235))}.select-trigger--disabled{background:var(--snice-color-surface-container-low,rgb(245 245 245));cursor:not-allowed;opacity:.6}.select-trigger--readonly{background:var(--snice-color-surface-container-low,rgb(245 245 245));cursor:default}.select-trigger--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.select-placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82))}.select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-value--single{display:flex;align-items:center;gap:.5rem}.select-value-icon{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}.select-value--multiple{display:flex;gap:.25rem;flex-wrap:wrap}.select-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;background:var(--snice-color-primary-subtle,rgb(219 234 254));color:var(--snice-color-primary,rgb(37 99 235));border-radius:var(--snice-border-radius-sm,.125rem);font-size:var(--snice-font-size-xs, .75rem)}.select-tag-icon{width:.75rem;height:.75rem;object-fit:contain;flex-shrink:0}.select-tag-remove{cursor:pointer;padding:0;background:0 0;border:none;color:inherit;font-size:.75rem;line-height:1}.select-tag-remove:hover{opacity:.7}.select-icons{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem;pointer-events:none;z-index:1}.select-clear{padding:.125rem;background:0 0;border:none;cursor:pointer;color:var(--snice-color-text-secondary,rgb(82 82 82));display:flex;align-items:center;justify-content:center;border-radius:var(--snice-border-radius-sm,.125rem);pointer-events:auto}.select-clear:hover{background:var(--snice-color-surface-container-low,rgb(245 245 245));color:var(--snice-color-text,rgb(23 23 23))}.select-arrow{transition:transform var(--snice-transition-fast, 150ms) ease;color:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none}.select-arrow--open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:100%;margin-top:.25rem;left:0;right:0;background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1));z-index:1000;opacity:0;transform:translateY(-8px) scaleY(.95);transform-origin:top;pointer-events:none;transition:opacity var(--snice-transition-fast, 150ms) ease,transform var(--snice-transition-fast, 150ms) ease;display:flex;flex-direction:column;overflow:hidden}.select-dropdown--open{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}.select-search{padding:.5rem;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));flex-shrink:0}.select-search-input{width:100%;padding:.375rem .625rem;background:var(--snice-color-surface-container-lowest,rgb(248 247 245));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-sm,.125rem);font-size:var(--snice-font-size-sm, .875rem);font-family:inherit;color:var(--snice-color-text,rgb(23 23 23));box-sizing:border-box}.select-search-input:focus-visible{outline:0;border-color:var(--snice-color-primary,rgb(37 99 235))}.select-options{max-height:12.5rem;overflow-y:auto;overflow-x:hidden;padding:.25rem;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--snice-color-border,rgb(226 226 226)) var(--snice-color-surface-container-low,rgb(245 245 245))}.select-options::-webkit-scrollbar-track{background:var(--snice-color-surface-container-low,rgb(245 245 245));border-radius:var(--snice-border-radius-md,.25rem);margin:.25rem 0}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);border:2px solid var(--snice-color-surface,rgb(255 255 255))}.select-option{padding:.5rem .75rem;cursor:pointer;border-radius:var(--snice-border-radius-sm,.125rem);transition:background var(--snice-transition-fast, 150ms) ease;display:flex;align-items:center;gap:.5rem}.select-option:hover:not(.select-option--disabled){background:var(--snice-color-surface-container-low,rgb(245 245 245))}.select-option--selected{background:var(--snice-color-primary-subtle,rgb(219 234 254));color:var(--snice-color-primary,rgb(37 99 235));font-weight:var(--snice-font-weight-medium,500)}.select-option--focused{background:var(--snice-color-surface-container-low,rgb(245 245 245));outline:2px solid var(--snice-color-primary,rgb(37 99 235));outline-offset:-2px}.select-option--disabled{opacity:.5;cursor:not-allowed}.select-option-icon{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}.select-option-check{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-label{flex:1}.select-no-options{padding:1rem;text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.select-native{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:var(--snice-color-surface-container-low,rgb(245 245 245));border-radius:3px}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:3px}.select-options::-webkit-scrollbar-thumb:hover{background:var(--snice-color-border-hover,rgb(180 180 180))}.select-trigger--loading{cursor:wait;opacity:.7}.select-spinner{display:inline-block;width:.875rem;height:.875rem;margin-right:.25rem}.select-spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.select-freetext-input{flex:1;border:none;outline:0;background:0 0;font-family:inherit;font-size:inherit;color:var(--snice-color-text,rgb(23 23 23));padding:0;min-width:0;width:100%}.select-freetext-input::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82))}.select-editable-container{position:relative;display:flex;align-items:center;width:100%}.select-editable-input{width:100%;box-sizing:border-box;font-family:inherit;background:var(--snice-color-surface-container-lowest,rgb(248 247 245));color:var(--snice-color-text,rgb(23 23 23));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);transition:all var(--snice-transition-fast, 150ms) ease;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select-editable-input--small{padding:.375rem 2rem .375rem .625rem;font-size:var(--snice-font-size-sm, .875rem);min-height:2rem}.select-editable-input--medium{padding:.5rem 2.25rem .5rem .75rem;font-size:var(--snice-font-size-md, 1rem);min-height:2.5rem}.select-editable-input--large{padding:.625rem 2.5rem .625rem .875rem;font-size:var(--snice-font-size-lg, 1.125rem);min-height:3rem}.select-editable-input:hover:not(:disabled){border-color:var(--snice-color-border-hover,rgb(180 180 180))}.select-editable-input:focus-visible{border-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.select-editable-input--open{border-color:var(--snice-color-primary,rgb(37 99 235))}.select-editable-input--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.select-editable-input:disabled{background:var(--snice-color-surface-container-low,rgb(245 245 245));color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:not-allowed;opacity:.6}.select-editable-input:read-only{background:var(--snice-color-surface-container-low,rgb(245 245 245));cursor:default}.select-editable-input::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82));opacity:.7}.select-editable-arrow{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none;transition:transform var(--snice-transition-fast, 150ms) ease}.select-editable-arrow--open{transform:translateY(-50%) rotate(180deg)}.select-loading-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.select-loading-spinner{display:inline-block;width:1rem;height:1rem;flex-shrink:0}.select-loading-spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid var(--snice-color-border,rgb(226 226 226));border-top-color:var(--snice-color-primary,rgb(37 99 235));border-radius:50%;animation:.6s linear infinite spin}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+var cssContent$k = ":host([hidden]){display:none}:host{display:inline-block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);position:relative;width:100%;max-width:18.75rem}[hidden]{display:none!important}img[src=\"\"]{display:none}.select-wrapper{position:relative;width:100%}.select-label{display:block;margin-bottom:.25rem;font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);line-height:var(--snice-line-height-normal, 1.5);color:var(--snice-color-text,rgb(23 23 23));text-align:left}.select-label--required::after{content:' *';color:var(--snice-color-danger,rgb(220 38 38))}.select-error-text,.select-helper-text{display:block;margin-top:var(--snice-spacing-2xs,.25rem);font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-normal,400);line-height:var(--snice-line-height-normal, 1.5)}.select-helper-text{color:var(--snice-color-text-secondary,rgb(82 82 82))}.select-error-text{color:var(--snice-color-danger,rgb(220 38 38))}.select-trigger{box-sizing:border-box;min-width:0;width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--snice-color-surface-container-lowest,rgb(248 247 245));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease;position:relative;text-align:left;font-family:inherit;color:var(--snice-color-text,rgb(23 23 23))}.select-trigger--small{padding:.375rem 2rem .375rem .625rem;font-size:var(--snice-font-size-sm, .875rem);min-height:2rem}.select-trigger--medium{padding:.5rem 2.25rem .5rem .75rem;font-size:var(--snice-font-size-md, 1rem);min-height:var(--snice-select-min-height,2.5rem)}.select-trigger--large{padding:.625rem 2.5rem .625rem .875rem;font-size:var(--snice-font-size-lg, 1.125rem);min-height:3rem}.select-trigger:hover:not(.select-trigger--disabled){border-color:var(--snice-color-border-hover,rgb(180 180 180))}.select-trigger:focus-visible{outline:2px solid var(--snice-color-primary,rgb(37 99 235));outline-offset:2px;border-color:var(--snice-color-primary,rgb(37 99 235))}.select-trigger--open{border-color:var(--snice-color-primary,rgb(37 99 235))}.select-trigger--disabled{background:var(--snice-color-surface-container-low,rgb(245 245 245));cursor:not-allowed;opacity:.6}.select-trigger--readonly{background:var(--snice-color-surface-container-low,rgb(245 245 245));cursor:default}.select-trigger--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.select-placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82))}.select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-value--single{display:flex;align-items:center;gap:.5rem}.select-value-icon{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}.select-value--multiple{display:flex;gap:.25rem;flex-wrap:wrap}.select-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;background:var(--snice-color-primary-subtle,rgb(219 234 254));color:var(--snice-color-primary,rgb(37 99 235));border-radius:var(--snice-border-radius-sm,.125rem);font-size:var(--snice-font-size-xs, .75rem)}.select-tag-icon{width:.75rem;height:.75rem;object-fit:contain;flex-shrink:0}.select-tag-remove{cursor:pointer;padding:0;background:0 0;border:none;color:inherit;font-size:.75rem;line-height:1}.select-tag-remove:hover{opacity:.7}.select-icons{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem;pointer-events:none;z-index:1}.select-clear{padding:.125rem;background:0 0;border:none;cursor:pointer;color:var(--snice-color-text-secondary,rgb(82 82 82));display:flex;align-items:center;justify-content:center;border-radius:var(--snice-border-radius-sm,.125rem);pointer-events:auto}.select-clear:hover{background:var(--snice-color-surface-container-low,rgb(245 245 245));color:var(--snice-color-text,rgb(23 23 23))}.select-arrow{transition:transform var(--snice-transition-fast, 150ms) ease;color:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none}.select-arrow--open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:100%;margin-top:.25rem;left:0;right:0;background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1));z-index:1000;opacity:0;transform:translateY(-8px) scaleY(.95);transform-origin:top;pointer-events:none;transition:opacity var(--snice-transition-fast, 150ms) ease,transform var(--snice-transition-fast, 150ms) ease;display:flex;flex-direction:column;overflow:hidden}.select-dropdown--open{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}.select-search{padding:.5rem;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));flex-shrink:0}.select-search-input{width:100%;padding:.375rem .625rem;background:var(--snice-color-surface-container-lowest,rgb(248 247 245));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-sm,.125rem);font-size:var(--snice-font-size-sm, .875rem);font-family:inherit;color:var(--snice-color-text,rgb(23 23 23));box-sizing:border-box}.select-search-input:focus-visible{outline:0;border-color:var(--snice-color-primary,rgb(37 99 235))}.select-options{max-height:12.5rem;overflow-y:auto;overflow-x:hidden;padding:.25rem;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--snice-color-border,rgb(226 226 226)) var(--snice-color-surface-container-low,rgb(245 245 245))}.select-options::-webkit-scrollbar-track{background:var(--snice-color-surface-container-low,rgb(245 245 245));border-radius:var(--snice-border-radius-md,.25rem);margin:.25rem 0}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);border:2px solid var(--snice-color-surface,rgb(255 255 255))}.select-option{padding:.5rem .75rem;cursor:pointer;border-radius:var(--snice-border-radius-sm,.125rem);transition:background var(--snice-transition-fast, 150ms) ease;display:flex;align-items:center;gap:.5rem}.select-option:hover:not(.select-option--disabled){background:var(--snice-color-surface-container-low,rgb(245 245 245))}.select-option--selected{background:var(--snice-color-primary-subtle,rgb(219 234 254));color:var(--snice-color-primary,rgb(37 99 235));font-weight:var(--snice-font-weight-medium,500)}.select-option--focused{background:var(--snice-color-surface-container-low,rgb(245 245 245));outline:2px solid var(--snice-color-primary,rgb(37 99 235));outline-offset:-2px}.select-option--disabled{opacity:.5;cursor:not-allowed}.select-option-icon{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}.select-option-check{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-label{flex:1}.select-no-options{padding:1rem;text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.select-native{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:var(--snice-color-surface-container-low,rgb(245 245 245));border-radius:3px}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:3px}.select-options::-webkit-scrollbar-thumb:hover{background:var(--snice-color-border-hover,rgb(180 180 180))}.select-trigger--loading{cursor:wait;opacity:.7}.select-spinner{display:inline-block;width:.875rem;height:.875rem;margin-right:.25rem}.select-spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.select-freetext-input{flex:1;border:none;outline:0;background:0 0;font-family:inherit;font-size:inherit;color:var(--snice-color-text,rgb(23 23 23));padding:0;min-width:0;width:100%}.select-freetext-input::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82))}.select-editable-container{position:relative;display:flex;align-items:center;width:100%}.select-editable-input{width:100%;box-sizing:border-box;font-family:inherit;background:var(--snice-color-surface-container-lowest,rgb(248 247 245));color:var(--snice-color-text,rgb(23 23 23));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);transition:all var(--snice-transition-fast, 150ms) ease;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select-editable-input--small{padding:.375rem 2rem .375rem .625rem;font-size:var(--snice-font-size-sm, .875rem);min-height:2rem}.select-editable-input--medium{padding:.5rem 2.25rem .5rem .75rem;font-size:var(--snice-font-size-md, 1rem);min-height:2.5rem}.select-editable-input--large{padding:.625rem 2.5rem .625rem .875rem;font-size:var(--snice-font-size-lg, 1.125rem);min-height:3rem}.select-editable-input:hover:not(:disabled){border-color:var(--snice-color-border-hover,rgb(180 180 180))}.select-editable-input:focus-visible{border-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.select-editable-input--open{border-color:var(--snice-color-primary,rgb(37 99 235))}.select-editable-input--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.select-editable-input:disabled{background:var(--snice-color-surface-container-low,rgb(245 245 245));color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:not-allowed;opacity:.6}.select-editable-input:read-only{background:var(--snice-color-surface-container-low,rgb(245 245 245));cursor:default}.select-editable-input::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82));opacity:.7}.select-editable-arrow{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));pointer-events:none;transition:transform var(--snice-transition-fast, 150ms) ease}.select-editable-arrow--open{transform:translateY(-50%) rotate(180deg)}.select-loading-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.select-loading-spinner{display:inline-block;width:1rem;height:1rem;flex-shrink:0}.select-loading-spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid var(--snice-color-border,rgb(226 226 226));border-top-color:var(--snice-color-primary,rgb(37 99 235));border-radius:50%;animation:.6s linear infinite spin}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
 
 (() => {
     let _classDecorators = [element('snice-select', { formAssociated: true, delegatesFocus: true })];
@@ -1953,14 +1953,11 @@ var cssContent$j = ":host([hidden]){display:none}:host{display:inline-block;font
         get interactionDisabled() {
             return this.disabled || this.formDisabled || this.loading;
         }
-        /** Merged options: programmatic `options` array + child `<snice-option>` elements */
+        /** The documented option list: child `<snice-option>` elements win over the `options` array */
         get mergedOptions() {
-            // Child options take precedence if both provided (slot wins)
-            if (this.childOptions.length > 0 && this.options.length > 0) {
-                // Merge: children first, then programmatic options not already present
-                const childValues = new Set(this.childOptions.map(o => o.value));
-                return [...this.childOptions, ...this.options.filter(o => !childValues.has(o.value))];
-            }
+            // "Children take precedence over `options` array" — when children are
+            // present they are the list, so a later `options` assignment cannot
+            // append to or reorder what the author declared in markup.
             return this.childOptions.length > 0 ? this.childOptions : this.options;
         }
         /**
@@ -2171,7 +2168,7 @@ var cssContent$j = ":host([hidden]){display:none}:host{display:inline-block;font
                 option.setAttribute('data-value', opt.value);
                 option.setAttribute('role', 'option');
                 option.setAttribute('aria-selected', String(isSelected));
-                option.setAttribute('aria-disabled', String(opt.disabled));
+                option.setAttribute('aria-disabled', String(Boolean(opt.disabled)));
                 option.setAttribute('part', 'option');
                 const check = document.createElement('span');
                 check.className = 'select-option-check';
@@ -2191,7 +2188,7 @@ var cssContent$j = ":host([hidden]){display:none}:host{display:inline-block;font
             return fragment;
         }
         styles() {
-            return css `${cssContent$j}`;
+            return css `${cssContent$k}`;
         }
         init() {
             // Read options from child snice-option elements
@@ -3051,7 +3048,7 @@ var cssContent$j = ":host([hidden]){display:none}:host{display:inline-block;font
     return _classThis;
 })();
 
-var cssContent$i = ":host([hidden]){display:none}:host{display:inline-block;position:relative;width:auto;cursor:pointer}:host([disabled]){cursor:not-allowed}:host([justify-text=start]) .button{justify-content:flex-start}:host([justify-text=end]) .button{justify-content:flex-end}:host([justify-text=center]) .button{justify-content:center}.button{display:inline-flex;align-items:center;justify-content:center;width:100%;border:1px solid;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-weight:var(--snice-font-weight-medium,500);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;box-shadow:var(--snice-shadow-xs,0 1px 2px 0 rgb(0 0 0 / .03));transition:color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),background-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),border-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),box-shadow var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),transform 180ms var(--snice-ease-spring, cubic-bezier(.34,1.56,.64,1));cursor:inherit;position:relative}.button::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--snice-gradient-convex,none);pointer-events:none}.button:active:not(.button--disabled){transition:color 50ms var(--snice-ease-out, ease),background-color 50ms var(--snice-ease-out, ease),border-color 50ms var(--snice-ease-out, ease),box-shadow 50ms var(--snice-ease-out, ease),transform 80ms var(--snice-ease-out, ease);transform:translateY(0) scale(.97)}.button:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.button--disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.button--small{font-size:var(--snice-font-size-sm, .875rem);height:2rem;padding:0 var(--snice-spacing-sm,.75rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--medium{font-size:var(--snice-font-size-md, 1rem);height:2.5rem;padding:0 var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--large{font-size:var(--snice-font-size-lg, 1.125rem);height:3rem;padding:0 var(--snice-spacing-lg,1.5rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--default{background-color:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));border-color:var(--snice-color-border,rgb(226 226 226))}.button--default:hover:not(.button--disabled){background-color:var(--snice-color-surface-container-low,rgb(250 250 250));border-color:var(--snice-color-border-hover,rgb(204 204 204));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--default:active:not(.button--disabled){background-color:var(--snice-color-surface-container,rgb(248 248 248));border-color:var(--snice-color-border-hover,rgb(204 204 204));box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--primary{background-color:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.button--primary:hover:not(.button--disabled){background-color:var(--snice-color-primary-hover,rgb(29 78 216));border-color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--primary:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--success{background-color:var(--snice-color-success,rgb(22 163 74));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-success,rgb(22 163 74))}.button--success:hover:not(.button--disabled){background-color:var(--snice-color-success-hover,rgb(21 128 61));border-color:var(--snice-color-success-hover,rgb(21 128 61));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--success:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-success,rgb(22 163 74)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-success,rgb(22 163 74)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--warning{background-color:var(--snice-color-warning,rgb(202 138 4));color:var(--button-warning-text,rgb(69 26 3));border-color:var(--snice-color-warning,rgb(202 138 4))}.button--warning:hover:not(.button--disabled){background-color:var(--snice-color-warning-hover,rgb(161 98 7));border-color:var(--snice-color-warning-hover,rgb(161 98 7));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--warning:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-warning,rgb(202 138 4)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-warning,rgb(202 138 4)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--danger{background-color:var(--snice-color-danger,rgb(220 38 38));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-danger,rgb(220 38 38))}.button--danger:hover:not(.button--disabled){background-color:var(--snice-color-danger-hover,rgb(185 28 28));border-color:var(--snice-color-danger-hover,rgb(185 28 28));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--danger:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-danger,rgb(220 38 38)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-danger,rgb(220 38 38)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--text{background-color:transparent;color:var(--snice-color-primary,rgb(37 99 235));border-color:transparent;box-shadow:none}.button--text::before{display:none}.button--text:hover:not(.button--disabled){background-color:var(--snice-color-primary-alpha,rgb(37 99 235 / .1));color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:none;transform:none}.button--text:active:not(.button--disabled){background-color:var(--snice-color-primary-alpha-strong,rgb(37 99 235 / .15));box-shadow:none;transform:none}.button--outline{box-shadow:none}.button--outline::before{display:none}.button--outline.button--default{background-color:transparent;color:var(--snice-color-text,rgb(23 23 23))}.button--outline.button--primary{background-color:transparent;color:var(--snice-color-primary,rgb(37 99 235))}.button--outline.button--success{background-color:transparent;color:var(--snice-color-success,rgb(22 163 74))}.button--outline.button--warning{background-color:transparent;color:var(--snice-color-warning,rgb(202 138 4))}.button--outline.button--danger{background-color:transparent;color:var(--snice-color-danger,rgb(220 38 38))}.button--outline.button--default:hover:not(.button--disabled){background-color:var(--snice-color-surface-hover,rgb(245 245 245));box-shadow:none;transform:none}.button--outline.button--primary:hover:not(.button--disabled){background-color:var(--snice-color-primary-subtle,rgb(239 246 255));color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:none;transform:none}.button--outline.button--success:hover:not(.button--disabled){background-color:var(--snice-color-success-subtle,rgb(220 252 231));color:var(--snice-color-success-hover,rgb(21 128 61));box-shadow:none;transform:none}.button--outline.button--warning:hover:not(.button--disabled){background-color:var(--snice-color-warning-subtle,rgb(254 249 195));color:var(--snice-color-warning-hover,rgb(161 98 7));box-shadow:none;transform:none}.button--outline.button--danger:hover:not(.button--disabled){background-color:var(--snice-color-danger-subtle,rgb(254 226 226));color:var(--snice-color-danger-hover,rgb(185 28 28));box-shadow:none;transform:none}.button--outline:active:not(.button--disabled){background-color:var(--snice-color-primary-subtle-hover,var(--snice-color-surface-active,rgb(235 235 235)));box-shadow:none;transform:none}.button--pill{border-radius:var(--snice-border-radius-pill,9999px)}.button--circle{border-radius:var(--snice-border-radius-circle,50%);width:var(--size);padding:0}.button--small.button--circle{--size:2rem}.button--medium.button--circle{--size:2.5rem}.button--large.button--circle{--size:3rem}.button--loading{position:relative;cursor:wait}.button--loading .label{visibility:hidden}.spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1em;height:1em}.button--loading .spinner{display:block}.spinner::after{content:'';display:block;width:100%;height:100%;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.icon-slot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;line-height:1}.icon-slot:empty{display:none}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;line-height:1}.icon img{width:100%;height:100%;object-fit:contain}.icon svg{width:100%;height:100%}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:1.25em;line-height:1}.icon-slot ::slotted(svg){width:1.25em;height:1.25em}.icon-slot ::slotted(img){width:1.25em;height:1.25em;object-fit:contain}.button--icon-start .icon,.button--icon-start .icon-slot{margin-right:.5em}.button--icon-end .icon,.button--icon-end .icon-slot{margin-left:.5em}.button--circle .icon,.button--circle .icon-slot{margin:0;transform:none;width:auto;height:auto}.button--circle .icon svg{width:1.25em;height:1.25em}.button--circle .icon-slot ::slotted(*){font-size:1.25em;line-height:1;display:flex;align-items:center;justify-content:center}.button--circle .icon-slot ::slotted(svg){width:1.25em;height:1.25em}@media (prefers-reduced-motion:reduce){.icon-slot,.spinner,button,button:active{transition-duration:0s!important;animation-duration:0s!important}button:active{transform:none}}";
+var cssContent$j = ":host([hidden]){display:none}:host{display:inline-block;position:relative;width:auto;cursor:pointer}:host([disabled]){cursor:not-allowed}:host([justify-text=start]) .button{justify-content:flex-start}:host([justify-text=end]) .button{justify-content:flex-end}:host([justify-text=center]) .button{justify-content:center}.button{display:inline-flex;align-items:center;justify-content:center;width:100%;border:1px solid;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-weight:var(--snice-font-weight-medium,500);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;box-shadow:var(--snice-shadow-xs,0 1px 2px 0 rgb(0 0 0 / .03));transition:color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),background-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),border-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),box-shadow var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),transform 180ms var(--snice-ease-spring, cubic-bezier(.34,1.56,.64,1));cursor:inherit;position:relative}.button::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--snice-gradient-convex,none);pointer-events:none}.button:active:not(.button--disabled){transition:color 50ms var(--snice-ease-out, ease),background-color 50ms var(--snice-ease-out, ease),border-color 50ms var(--snice-ease-out, ease),box-shadow 50ms var(--snice-ease-out, ease),transform 80ms var(--snice-ease-out, ease);transform:translateY(0) scale(.97)}.button:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.button--disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.button--small{font-size:var(--snice-font-size-sm, .875rem);height:2rem;padding:0 var(--snice-spacing-sm,.75rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--medium{font-size:var(--snice-font-size-md, 1rem);height:2.5rem;padding:0 var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--large{font-size:var(--snice-font-size-lg, 1.125rem);height:3rem;padding:0 var(--snice-spacing-lg,1.5rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--default{background-color:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));border-color:var(--snice-color-border,rgb(226 226 226))}.button--default:hover:not(.button--disabled){background-color:var(--snice-color-surface-container-low,rgb(250 250 250));border-color:var(--snice-color-border-hover,rgb(204 204 204));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--default:active:not(.button--disabled){background-color:var(--snice-color-surface-container,rgb(248 248 248));border-color:var(--snice-color-border-hover,rgb(204 204 204));box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--primary{background-color:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.button--primary:hover:not(.button--disabled){background-color:var(--snice-color-primary-hover,rgb(29 78 216));border-color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--primary:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--success{background-color:var(--snice-color-success,rgb(22 163 74));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-success,rgb(22 163 74))}.button--success:hover:not(.button--disabled){background-color:var(--snice-color-success-hover,rgb(21 128 61));border-color:var(--snice-color-success-hover,rgb(21 128 61));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--success:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-success,rgb(22 163 74)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-success,rgb(22 163 74)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--warning{background-color:var(--snice-color-warning,rgb(202 138 4));color:var(--button-warning-text,rgb(69 26 3));border-color:var(--snice-color-warning,rgb(202 138 4))}.button--warning:hover:not(.button--disabled){background-color:var(--snice-color-warning-hover,rgb(161 98 7));border-color:var(--snice-color-warning-hover,rgb(161 98 7));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--warning:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-warning,rgb(202 138 4)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-warning,rgb(202 138 4)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--danger{background-color:var(--snice-color-danger,rgb(220 38 38));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-danger,rgb(220 38 38))}.button--danger:hover:not(.button--disabled){background-color:var(--snice-color-danger-hover,rgb(185 28 28));border-color:var(--snice-color-danger-hover,rgb(185 28 28));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--danger:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-danger,rgb(220 38 38)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-danger,rgb(220 38 38)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--text{background-color:transparent;color:var(--snice-color-primary,rgb(37 99 235));border-color:transparent;box-shadow:none}.button--text::before{display:none}.button--text:hover:not(.button--disabled){background-color:var(--snice-color-primary-alpha,rgb(37 99 235 / .1));color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:none;transform:none}.button--text:active:not(.button--disabled){background-color:var(--snice-color-primary-alpha-strong,rgb(37 99 235 / .15));box-shadow:none;transform:none}.button--outline{box-shadow:none}.button--outline::before{display:none}.button--outline.button--default{background-color:transparent;color:var(--snice-color-text,rgb(23 23 23))}.button--outline.button--primary{background-color:transparent;color:var(--snice-color-primary,rgb(37 99 235))}.button--outline.button--success{background-color:transparent;color:var(--snice-color-success,rgb(22 163 74))}.button--outline.button--warning{background-color:transparent;color:var(--snice-color-warning,rgb(202 138 4))}.button--outline.button--danger{background-color:transparent;color:var(--snice-color-danger,rgb(220 38 38))}.button--outline.button--default:hover:not(.button--disabled){background-color:var(--snice-color-surface-hover,rgb(245 245 245));box-shadow:none;transform:none}.button--outline.button--primary:hover:not(.button--disabled){background-color:var(--snice-color-primary-subtle,rgb(239 246 255));color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:none;transform:none}.button--outline.button--success:hover:not(.button--disabled){background-color:var(--snice-color-success-subtle,rgb(220 252 231));color:var(--snice-color-success-hover,rgb(21 128 61));box-shadow:none;transform:none}.button--outline.button--warning:hover:not(.button--disabled){background-color:var(--snice-color-warning-subtle,rgb(254 249 195));color:var(--snice-color-warning-hover,rgb(161 98 7));box-shadow:none;transform:none}.button--outline.button--danger:hover:not(.button--disabled){background-color:var(--snice-color-danger-subtle,rgb(254 226 226));color:var(--snice-color-danger-hover,rgb(185 28 28));box-shadow:none;transform:none}.button--outline:active:not(.button--disabled){background-color:var(--snice-color-primary-subtle-hover,var(--snice-color-surface-active,rgb(235 235 235)));box-shadow:none;transform:none}.button--pill{border-radius:var(--snice-border-radius-pill,9999px)}.button--circle{border-radius:var(--snice-border-radius-circle,50%);width:var(--size);padding:0}.button--small.button--circle{--size:2rem}.button--medium.button--circle{--size:2.5rem}.button--large.button--circle{--size:3rem}.button--loading{position:relative;cursor:wait}.button--loading .label{visibility:hidden}.spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1em;height:1em}.button--loading .spinner{display:block}.spinner::after{content:'';display:block;width:100%;height:100%;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.icon-slot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;line-height:1}.icon-slot:empty{display:none}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;line-height:1}.icon img{width:100%;height:100%;object-fit:contain}.icon svg{width:100%;height:100%}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:1.25em;line-height:1}.icon-slot ::slotted(svg){width:1.25em;height:1.25em}.icon-slot ::slotted(img){width:1.25em;height:1.25em;object-fit:contain}.button--icon-start .icon,.button--icon-start .icon-slot{margin-right:.5em}.button--icon-end .icon,.button--icon-end .icon-slot{margin-left:.5em}.button--circle .icon,.button--circle .icon-slot{margin:0;transform:none;width:auto;height:auto}.button--circle .icon svg{width:1.25em;height:1.25em}.button--circle .icon-slot ::slotted(*){font-size:1.25em;line-height:1;display:flex;align-items:center;justify-content:center}.button--circle .icon-slot ::slotted(svg){width:1.25em;height:1.25em}@media (prefers-reduced-motion:reduce){.icon-slot,.spinner,button,button:active{transition-duration:0s!important;animation-duration:0s!important}button:active{transform:none}}";
 
 (() => {
     let _classDecorators = [element('snice-button', { formAssociated: true, delegatesFocus: true })];
@@ -3314,7 +3311,7 @@ var cssContent$i = ":host([hidden]){display:none}:host{display:inline-block;posi
             this.formDisabled = disabled;
         }
         styles() {
-            return css /*css*/ `${cssContent$i}`;
+            return css /*css*/ `${cssContent$j}`;
         }
         // Keep these methods for backwards compatibility if needed
         setLoading(loading) {
@@ -3351,7 +3348,7 @@ var cssContent$i = ":host([hidden]){display:none}:host{display:inline-block;posi
     return _classThis;
 })();
 
-var cssContent$h = ":host([hidden]){display:none}:host{display:inline-flex;align-items:center;align-self:flex-end;min-height:2.5rem;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}:host([size=small]){min-height:2rem;align-self:center}:host([size=large]){min-height:3rem;align-self:center}:host([compact]){min-height:0;align-self:center}.checkbox-wrapper{display:inline-flex;align-items:center;position:relative;cursor:pointer;user-select:none;min-height:1.25rem}.checkbox-wrapper--disabled{cursor:not-allowed;opacity:.6}.checkbox-input{position:absolute;opacity:0;left:0;top:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;pointer-events:all}.checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--snice-color-surface-container-lowest,rgb(248 247 245));border:2px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-sm,.125rem);transition:all var(--snice-transition-fast, 150ms) ease}.checkbox--small{width:1rem;height:1rem}.checkbox--medium{width:1.25rem;height:1.25rem}.checkbox--large{width:1.5rem;height:1.5rem}.checkbox-input:checked~.checkbox{background:var(--snice-color-primary,rgb(37 99 235));border-color:var(--snice-color-primary,rgb(37 99 235))}.checkbox-input:focus-visible~.checkbox{box-shadow:0 0 0 3px var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline:2px solid var(--snice-color-primary,rgb(37 99 235));outline-offset:2px}.checkbox-input:disabled~.checkbox{background:var(--snice-color-surface-container-low,rgb(250 250 250));border-color:var(--snice-color-border,rgb(226 226 226))}.checkbox-input:disabled:checked~.checkbox{background:var(--snice-color-text-secondary,rgb(82 82 82));border-color:var(--snice-color-text-secondary,rgb(82 82 82))}.checkbox--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.checkbox-input:checked~.checkbox--invalid{background:var(--snice-color-danger,rgb(220 38 38));border-color:var(--snice-color-danger,rgb(220 38 38))}.checkbox-icon{position:absolute;display:none;color:var(--snice-color-text-inverse,rgb(250 250 250))}.checkbox-input:checked~.checkbox .checkbox-icon--check{display:block}.checkbox--indeterminate .checkbox-icon--check{display:none!important}.checkbox--indeterminate .checkbox-icon--indeterminate{display:block!important}.checkbox--small .checkbox-icon{width:.75rem;height:.75rem}.checkbox--medium .checkbox-icon{width:.875rem;height:.875rem}.checkbox--large .checkbox-icon{width:1.125rem;height:1.125rem}.checkbox-label{margin-left:.5rem;color:var(--snice-color-text,rgb(23 23 23));cursor:pointer}.checkbox-label--small{font-size:var(--snice-font-size-sm, .875rem)}.checkbox-label--medium{font-size:var(--snice-font-size-md, 1rem)}.checkbox-label--large{font-size:var(--snice-font-size-lg, 1.125rem)}.checkbox-wrapper--disabled .checkbox-label{color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:not-allowed}.checkbox-label--required::after{content:' *';color:var(--snice-color-danger,rgb(220 38 38))}.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox{border-color:var(--snice-color-primary,rgb(37 99 235))}.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox-input:checked~.checkbox{background:var(--snice-color-primary-hover,rgb(29 78 216));border-color:var(--snice-color-primary-hover,rgb(29 78 216))}.checkbox-wrapper--loading{cursor:wait;opacity:.7}.checkbox--loading{cursor:wait}.checkbox-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}.checkbox-spinner::after{content:'';display:block;width:.75em;height:.75em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+var cssContent$i = ":host([hidden]){display:none}:host{display:inline-flex;align-items:center;align-self:flex-end;min-height:2.5rem;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}:host([size=small]){min-height:2rem;align-self:center}:host([size=large]){min-height:3rem;align-self:center}:host([compact]){min-height:0;align-self:center}.checkbox-wrapper{display:inline-flex;align-items:center;position:relative;cursor:pointer;user-select:none;min-height:1.25rem}.checkbox-wrapper--disabled{cursor:not-allowed;opacity:.6}.checkbox-input{position:absolute;opacity:0;left:0;top:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;pointer-events:all}.checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--snice-color-surface-container-lowest,rgb(248 247 245));border:2px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-sm,.125rem);transition:all var(--snice-transition-fast, 150ms) ease}.checkbox--small{width:1rem;height:1rem}.checkbox--medium{width:1.25rem;height:1.25rem}.checkbox--large{width:1.5rem;height:1.5rem}.checkbox-input:checked~.checkbox{background:var(--snice-color-primary,rgb(37 99 235));border-color:var(--snice-color-primary,rgb(37 99 235))}.checkbox-input:focus-visible~.checkbox{box-shadow:0 0 0 3px var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline:2px solid var(--snice-color-primary,rgb(37 99 235));outline-offset:2px}.checkbox-input:disabled~.checkbox{background:var(--snice-color-surface-container-low,rgb(250 250 250));border-color:var(--snice-color-border,rgb(226 226 226))}.checkbox-input:disabled:checked~.checkbox{background:var(--snice-color-text-secondary,rgb(82 82 82));border-color:var(--snice-color-text-secondary,rgb(82 82 82))}.checkbox--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.checkbox-input:checked~.checkbox--invalid{background:var(--snice-color-danger,rgb(220 38 38));border-color:var(--snice-color-danger,rgb(220 38 38))}.checkbox-icon{position:absolute;display:none;color:var(--snice-color-text-inverse,rgb(250 250 250))}.checkbox-input:checked~.checkbox .checkbox-icon--check{display:block}.checkbox--indeterminate .checkbox-icon--check{display:none!important}.checkbox--indeterminate .checkbox-icon--indeterminate{display:block!important}.checkbox--small .checkbox-icon{width:.75rem;height:.75rem}.checkbox--medium .checkbox-icon{width:.875rem;height:.875rem}.checkbox--large .checkbox-icon{width:1.125rem;height:1.125rem}.checkbox-label{margin-left:.5rem;color:var(--snice-color-text,rgb(23 23 23));cursor:pointer}.checkbox-label--small{font-size:var(--snice-font-size-sm, .875rem)}.checkbox-label--medium{font-size:var(--snice-font-size-md, 1rem)}.checkbox-label--large{font-size:var(--snice-font-size-lg, 1.125rem)}.checkbox-wrapper--disabled .checkbox-label{color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:not-allowed}.checkbox-label--required::after{content:' *';color:var(--snice-color-danger,rgb(220 38 38))}.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox{border-color:var(--snice-color-primary,rgb(37 99 235))}.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox-input:checked~.checkbox{background:var(--snice-color-primary-hover,rgb(29 78 216));border-color:var(--snice-color-primary-hover,rgb(29 78 216))}.checkbox-wrapper--loading{cursor:wait;opacity:.7}.checkbox--loading{cursor:wait}.checkbox-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}.checkbox-spinner::after{content:'';display:block;width:.75em;height:.75em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
 
 (() => {
     let _classDecorators = [element('snice-checkbox', { formAssociated: true, delegatesFocus: true })];
@@ -3767,7 +3764,7 @@ var cssContent$h = ":host([hidden]){display:none}:host{display:inline-flex;align
             };
         }
         styles() {
-            return css /*css*/ `${cssContent$h}`;
+            return css /*css*/ `${cssContent$i}`;
         }
         // Public API
         focus() {
@@ -3829,7 +3826,7 @@ var cssContent$h = ":host([hidden]){display:none}:host{display:inline-flex;align
     return _classThis;
 })();
 
-var cssContent$g = ":host{--modal-z-index:1000;--modal-backdrop-bg:var(--snice-modal-backdrop, rgb(0 0 0 / 0.6));--modal-backdrop-blur:6px;--modal-panel-bg:var(--snice-color-surface-container-highest, var(--snice-color-surface, rgb(255 255 255)));--modal-panel-shadow:var(--snice-shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));--modal-border-radius:var(--snice-border-radius-lg, 8px);--modal-padding:var(--snice-spacing-lg, 1.5rem);--modal-transition-duration:200ms}.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--modal-z-index);display:flex;align-items:center;justify-content:center;padding:var(--modal-padding);pointer-events:none;opacity:0;visibility:hidden}.modal--open{pointer-events:auto;opacity:1;visibility:visible}.modal__backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--modal-backdrop-bg);backdrop-filter:blur(var(--modal-backdrop-blur));-webkit-backdrop-filter:blur(var(--modal-backdrop-blur));opacity:0;transition:opacity 180ms var(--snice-ease-out, ease)}.modal--open .modal__backdrop{opacity:1}.modal__panel{position:relative;background:var(--modal-panel-bg);border-radius:var(--modal-border-radius);box-shadow:var(--modal-panel-shadow);display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--modal-padding));opacity:0;transform:scale(.96) translateY(1rem);transition:opacity 260ms var(--snice-ease-out, ease) 80ms,transform 320ms var(--snice-ease-spring, cubic-bezier(.34,1.56,.64,1)) 80ms;z-index:1}.modal--open .modal__panel{opacity:1;transform:scale(1) translateY(0)}.modal--open .modal__panel>*{animation:snice-modal-content-in 240ms var(--snice-ease-out,ease) backwards}.modal--open .modal__header{animation-delay:140ms}.modal--open .modal__body{animation-delay:180ms}.modal--open .modal__footer{animation-delay:220ms}@keyframes snice-modal-content-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.modal__panel--small{width:100%;max-width:25rem}.modal__panel--medium{width:100%;max-width:37.5rem}.modal__panel--large{width:100%;max-width:56.25rem}.modal__panel--fullscreen{width:calc(100vw - 2 * var(--modal-padding));height:calc(100vh - 2 * var(--modal-padding));max-width:none}.modal__header{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);display:flex;align-items:center;justify-content:space-between;padding:var(--modal-padding);padding-bottom:var(--snice-spacing-sm,.5rem)}.modal__header--empty{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);display:none}::slotted([slot=header]){flex:1;margin:0;font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23))}.modal__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;margin-left:auto;background:0 0;border:none;border-radius:var(--snice-border-radius-md,6px);color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.modal__close:hover{background:var(--snice-color-surface-hover,rgb(241 241 241));color:var(--snice-color-text,rgb(23 23 23))}.modal__close:focus-visible{outline:2px solid var(--snice-color-primary,rgb(37 99 235));outline-offset:2px}.modal__close svg{width:1.125rem;height:1.125rem}.modal__body{flex:1;padding:var(--modal-padding);overflow-y:auto;color:var(--snice-color-text,rgb(23 23 23))}.modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--snice-spacing-sm,.5rem);padding:var(--modal-padding);padding-top:var(--snice-spacing-sm,.5rem)}.modal__footer--empty{display:none}.modal__header--empty+.modal__body{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);padding-top:var(--modal-padding)}.modal__body:has(+ .modal__footer--empty){padding-bottom:var(--modal-padding)}@keyframes slideUp{from{opacity:0;transform:translateY(6.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@media (max-width:640px){.modal{padding:0}.modal__panel:not(.modal__panel--fullscreen){width:100%;height:100%;max-width:none;max-height:none;border-radius:0}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+var cssContent$h = ":host{--modal-z-index:1000;--modal-backdrop-bg:var(--snice-modal-backdrop, rgb(0 0 0 / 0.6));--modal-backdrop-blur:6px;--modal-panel-bg:var(--snice-color-surface-container-highest, var(--snice-color-surface, rgb(255 255 255)));--modal-panel-shadow:var(--snice-shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));--modal-border-radius:var(--snice-border-radius-lg, 8px);--modal-padding:var(--snice-spacing-lg, 1.5rem);--modal-transition-duration:200ms}.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--modal-z-index);display:flex;align-items:center;justify-content:center;padding:var(--modal-padding);pointer-events:none;opacity:0;visibility:hidden}.modal--open{pointer-events:auto;opacity:1;visibility:visible}.modal__backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--modal-backdrop-bg);backdrop-filter:blur(var(--modal-backdrop-blur));-webkit-backdrop-filter:blur(var(--modal-backdrop-blur));opacity:0;transition:opacity 180ms var(--snice-ease-out, ease)}.modal--open .modal__backdrop{opacity:1}.modal__panel{position:relative;background:var(--modal-panel-bg);border-radius:var(--modal-border-radius);box-shadow:var(--modal-panel-shadow);display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--modal-padding));opacity:0;transform:scale(.96) translateY(1rem);transition:opacity 260ms var(--snice-ease-out, ease) 80ms,transform 320ms var(--snice-ease-spring, cubic-bezier(.34,1.56,.64,1)) 80ms;z-index:1}.modal--open .modal__panel{opacity:1;transform:scale(1) translateY(0)}.modal--open .modal__panel>*{animation:snice-modal-content-in 240ms var(--snice-ease-out,ease) backwards}.modal--open .modal__header{animation-delay:140ms}.modal--open .modal__body{animation-delay:180ms}.modal--open .modal__footer{animation-delay:220ms}@keyframes snice-modal-content-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.modal__panel--small{width:100%;max-width:25rem}.modal__panel--medium{width:100%;max-width:37.5rem}.modal__panel--large{width:100%;max-width:56.25rem}.modal__panel--fullscreen{width:calc(100vw - 2 * var(--modal-padding));height:calc(100vh - 2 * var(--modal-padding));max-width:none}.modal__header{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);display:flex;align-items:center;justify-content:space-between;padding:var(--modal-padding);padding-bottom:var(--snice-spacing-sm,.5rem)}.modal__header--empty{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);display:none}::slotted([slot=header]){flex:1;margin:0;font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23))}.modal__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;margin-left:auto;background:0 0;border:none;border-radius:var(--snice-border-radius-md,6px);color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.modal__close:hover{background:var(--snice-color-surface-hover,rgb(241 241 241));color:var(--snice-color-text,rgb(23 23 23))}.modal__close:focus-visible{outline:2px solid var(--snice-color-primary,rgb(37 99 235));outline-offset:2px}.modal__close svg{width:1.125rem;height:1.125rem}.modal__body{flex:1;padding:var(--modal-padding);overflow-y:auto;color:var(--snice-color-text,rgb(23 23 23))}.modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--snice-spacing-sm,.5rem);padding:var(--modal-padding);padding-top:var(--snice-spacing-sm,.5rem)}.modal__footer--empty{display:none}.modal__header--empty+.modal__body{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);padding-top:var(--modal-padding)}.modal__body:has(+ .modal__footer--empty){padding-bottom:var(--modal-padding)}@keyframes slideUp{from{opacity:0;transform:translateY(6.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@media (max-width:640px){.modal{padding:0}.modal__panel:not(.modal__panel--fullscreen){width:100%;height:100%;max-width:none;max-height:none;border-radius:0}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
 
 (() => {
     let _classDecorators = [element('snice-modal')];
@@ -4002,7 +3999,7 @@ var cssContent$g = ":host{--modal-z-index:1000;--modal-backdrop-bg:var(--snice-m
     `;
         }
         styles() {
-            return css /*css*/ `${cssContent$g}`;
+            return css /*css*/ `${cssContent$h}`;
         }
         init() {
             // Make sure modal state is properly initialized
@@ -4136,7 +4133,7 @@ var cssContent$g = ":host{--modal-z-index:1000;--modal-backdrop-bg:var(--snice-m
     return _classThis;
 })();
 
-var cssContent$f = ":host([hidden]){display:none}:host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82));animation:snice-empty-in 360ms var(--snice-ease-out,ease) backwards}@keyframes snice-empty-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-state--small{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem)}.empty-state--medium{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem)}.empty-state--large{padding:var(--snice-spacing-3xl,4rem) var(--snice-spacing-2xl,2.5rem)}.empty-state__icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--snice-spacing-lg,1.5rem);position:relative;width:calc(var(--snice-font-size-4xl,4rem) * 1.8);height:calc(var(--snice-font-size-4xl,4rem) * 1.8)}.empty-state__icon-wrapper::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--snice-color-border,#ddd) 70%,transparent);animation:18s linear infinite snice-empty-halo}@keyframes snice-empty-halo{to{transform:rotate(360deg)}}.empty-state__icon{font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon svg{width:1em;height:1em;display:block}.empty-state__icon-wrapper ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem)}.empty-state__icon-wrapper ::slotted(img){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem);object-fit:contain}.empty-state--small .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-md,1rem);width:calc(var(--snice-font-size-3xl,3rem) * 1.8);height:calc(var(--snice-font-size-3xl,3rem) * 1.8)}.empty-state--small .empty-state__icon{font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(img),.empty-state--small .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-3xl,3rem);height:var(--snice-font-size-3xl,3rem)}.empty-state--large .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-xl,2rem);width:calc(var(--snice-font-size-3xl,5rem) * 1.8);height:calc(var(--snice-font-size-3xl,5rem) * 1.8)}.empty-state--large .empty-state__icon{font-size:var(--snice-font-size-3xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-3xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(img),.empty-state--large .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-3xl,5rem);height:var(--snice-font-size-3xl,5rem)}.empty-state__title{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-lg, 1.25rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin:0 0 var(--snice-spacing-xs,.5rem) 0}.empty-state--small .empty-state__title{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-md, 1.125rem);margin-bottom:var(--snice-spacing-2xs,.375rem)}.empty-state--large .empty-state__title{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-xl, 1.5rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.empty-state__description{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin:0 0 var(--snice-spacing-lg,1.5rem) 0;max-width:32rem;line-height:var(--snice-line-height-normal, 1.5)}.empty-state--small .empty-state__description{font-size:var(--snice-font-size-xs, .8125rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__description{font-size:var(--snice-font-size-md, 1rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-md,.375rem);text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.empty-state__action:hover{background:var(--snice-color-primary-hover,rgb(29 78 216))}.empty-state--small .empty-state__action{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .8125rem)}.empty-state--large .empty-state__action{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}.empty-state__extra ::slotted(*){margin-top:var(--snice-spacing-md,1rem)}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+var cssContent$g = ":host([hidden]){display:none}:host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82));animation:snice-empty-in 360ms var(--snice-ease-out,ease) backwards}@keyframes snice-empty-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-state--small{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem)}.empty-state--medium{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem)}.empty-state--large{padding:var(--snice-spacing-3xl,4rem) var(--snice-spacing-2xl,2.5rem)}.empty-state__icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--snice-spacing-lg,1.5rem);position:relative;width:calc(var(--snice-font-size-4xl,4rem) * 1.8);height:calc(var(--snice-font-size-4xl,4rem) * 1.8)}.empty-state__icon-wrapper::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--snice-color-border,#ddd) 70%,transparent);animation:18s linear infinite snice-empty-halo}@keyframes snice-empty-halo{to{transform:rotate(360deg)}}.empty-state__icon{font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon svg{width:1em;height:1em;display:block}.empty-state__icon-wrapper ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem)}.empty-state__icon-wrapper ::slotted(img){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem);object-fit:contain}.empty-state--small .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-md,1rem);width:calc(var(--snice-font-size-3xl,3rem) * 1.8);height:calc(var(--snice-font-size-3xl,3rem) * 1.8)}.empty-state--small .empty-state__icon{font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(img),.empty-state--small .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-3xl,3rem);height:var(--snice-font-size-3xl,3rem)}.empty-state--large .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-xl,2rem);width:calc(var(--snice-font-size-3xl,5rem) * 1.8);height:calc(var(--snice-font-size-3xl,5rem) * 1.8)}.empty-state--large .empty-state__icon{font-size:var(--snice-font-size-3xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-3xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(img),.empty-state--large .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-3xl,5rem);height:var(--snice-font-size-3xl,5rem)}.empty-state__title{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-lg, 1.25rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin:0 0 var(--snice-spacing-xs,.5rem) 0}.empty-state--small .empty-state__title{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-md, 1.125rem);margin-bottom:var(--snice-spacing-2xs,.375rem)}.empty-state--large .empty-state__title{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-xl, 1.5rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.empty-state__description{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin:0 0 var(--snice-spacing-lg,1.5rem) 0;max-width:32rem;line-height:var(--snice-line-height-normal, 1.5)}.empty-state--small .empty-state__description{font-size:var(--snice-font-size-xs, .8125rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__description{font-size:var(--snice-font-size-md, 1rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-md,.375rem);text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.empty-state__action:hover{background:var(--snice-color-primary-hover,rgb(29 78 216))}.empty-state--small .empty-state__action{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .8125rem)}.empty-state--large .empty-state__action{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}.empty-state__extra ::slotted(*){margin-top:var(--snice-spacing-md,1rem)}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
 
 (() => {
     let _classDecorators = [element('snice-empty-state')];
@@ -4231,7 +4228,7 @@ var cssContent$f = ":host([hidden]){display:none}:host{display:block;font-family
     `;
         }
         styles() {
-            return css /*css*/ `${cssContent$f}`;
+            return css /*css*/ `${cssContent$g}`;
         }
         handleActionClick(e) {
             if (!this.actionHref) {
@@ -4256,6 +4253,265 @@ var cssContent$f = ":host([hidden]){display:none}:host{display:block;font-family
     return _classThis;
 })();
 
+var cssContent$f = ":host([hidden]){display:none}:host{--progress-height:0.5rem;--progress-radius:4px;--progress-bg:var(--snice-color-border, rgb(226 226 226));--progress-color:var(--snice-color-primary, rgb(37 99 235));--progress-animation-duration:1.5s;display:inline-block;width:100%}:host([variant=circular]){width:auto}.progress{position:relative;width:100%;background:var(--progress-bg);border-radius:var(--progress-radius);overflow:hidden}.progress--linear{height:var(--progress-height)}.progress__bar{height:100%;background:var(--progress-color);border-radius:var(--progress-radius);transition:width .3s;position:relative;overflow:hidden}:host([size=small]){--progress-height:0.25rem;--progress-spinner-size:1.5rem;--progress-spinner-stroke:3px}:host([size=medium]){--progress-height:0.5rem;--progress-spinner-size:2.5rem;--progress-spinner-stroke:4px}:host([size=large]){--progress-height:0.75rem;--progress-spinner-size:3.5rem;--progress-spinner-stroke:5px}:host([size=xl]){--progress-height:1rem;--progress-spinner-size:5rem;--progress-spinner-stroke:6px}:host([size=xxl]){--progress-height:1.25rem;--progress-spinner-size:7.5rem;--progress-spinner-stroke:8px}:host([size=xxxl]){--progress-height:1.5rem;--progress-spinner-size:10rem;--progress-spinner-stroke:10px}:host([color=primary]){--progress-color:var(--snice-color-primary, rgb(37 99 235))}:host([color=success]){--progress-color:var(--snice-color-success, rgb(22 163 74))}:host([color=warning]){--progress-color:var(--snice-color-warning, rgb(217 119 6))}:host([color=error]){--progress-color:var(--snice-color-danger, rgb(220 38 38))}:host([color=info]){--progress-color:var(--snice-color-primary, rgb(37 99 235))}:host([striped]) .progress__bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(45deg,rgb(255 255 255 / .15) 25%,transparent 25%,transparent 50%,rgb(255 255 255 / .15) 50%,rgb(255 255 255 / .15) 75%,transparent 75%,transparent);background-size:1rem 1rem}:host([animated]) .progress__bar::after{animation:progress-stripes var(--progress-animation-duration) linear infinite}@keyframes progress-stripes{from{background-position:1rem 0}to{background-position:0 0}}:host([indeterminate]) .progress__bar{width:30%!important;animation:progress-indeterminate var(--progress-animation-duration) ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.progress__label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75rem;font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text-inverse,rgb(255 255 255));white-space:nowrap;z-index:1}.progress--with-label{height:calc(var(--progress-height) + .5rem);min-height:1.25rem}.progress--circular{display:inline-block;width:var(--progress-spinner-size,2.5rem);height:var(--progress-spinner-size,2.5rem);position:relative;background:0 0}.progress__circle{transform:rotate(-90deg);width:100%;height:100%;background:0 0;shape-rendering:geometricPrecision}.progress__circle-bar,.progress__circle-bg{fill:none;stroke-width:var(--progress-spinner-stroke,4px);shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke}.progress__circle-bg{stroke:var(--progress-bg);opacity:var(--progress-track-opacity, .2)}.progress__circle-bar{stroke:var(--progress-color);stroke-linecap:round;transition:stroke-dashoffset .3s}:host([variant=circular][indeterminate]) .progress__circle{animation:2s linear infinite progress-rotate}:host([variant=circular][indeterminate]) .progress__circle-bar{animation:1.5s ease-in-out infinite progress-dash}@keyframes progress-rotate{100%{transform:rotate(270deg)}}@keyframes progress-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.progress__circle-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.625rem;font-weight:var(--snice-font-weight-semibold,600);color:var(--progress-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([size=small]) .progress__circle-label{font-size:.375rem}:host([size=medium]) .progress__circle-label{font-size:.625rem}:host([size=large]) .progress__circle-label{font-size:1rem}:host([size=xl]) .progress__circle-label{font-size:1.25rem}:host([size=xxl]) .progress__circle-label{font-size:1.75rem}:host([size=xxxl]) .progress__circle-label{font-size:2.25rem}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+(() => {
+    let _classDecorators = [element('snice-progress')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _indeterminate_decorators;
+    let _indeterminate_initializers = [];
+    let _indeterminate_extraInitializers = [];
+    let _showLabel_decorators;
+    let _showLabel_initializers = [];
+    let _showLabel_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _striped_decorators;
+    let _striped_initializers = [];
+    let _striped_extraInitializers = [];
+    let _animated_decorators;
+    let _animated_initializers = [];
+    let _animated_extraInitializers = [];
+    let _thickness_decorators;
+    let _thickness_initializers = [];
+    let _thickness_extraInitializers = [];
+    let _progressBar_decorators;
+    let _progressBar_initializers = [];
+    let _progressBar_extraInitializers = [];
+    let _circleBar_decorators;
+    let _circleBar_initializers = [];
+    let _circleBar_extraInitializers = [];
+    let _labelElement_decorators;
+    let _labelElement_initializers = [];
+    let _labelElement_extraInitializers = [];
+    let _circleLabelElement_decorators;
+    let _circleLabelElement_initializers = [];
+    let _circleLabelElement_extraInitializers = [];
+    let _render_decorators;
+    let _styles_decorators;
+    let _handleProgressChange_decorators;
+    let _handleThicknessChange_decorators;
+    let _handleColorChange_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, 0));
+            this.max = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _max_initializers, 100));
+            this.variant = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _variant_initializers, 'linear'));
+            this.size = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.color = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _color_initializers, 'primary'));
+            this.indeterminate = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _indeterminate_initializers, false));
+            this.showLabel = (__runInitializers(this, _indeterminate_extraInitializers), __runInitializers(this, _showLabel_initializers, false));
+            this.label = (__runInitializers(this, _showLabel_extraInitializers), __runInitializers(this, _label_initializers, ''));
+            this.striped = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _striped_initializers, false));
+            this.animated = (__runInitializers(this, _striped_extraInitializers), __runInitializers(this, _animated_initializers, false));
+            this.thickness = (__runInitializers(this, _animated_extraInitializers), __runInitializers(this, _thickness_initializers, 4));
+            this.progressBar = (__runInitializers(this, _thickness_extraInitializers), __runInitializers(this, _progressBar_initializers, void 0));
+            this.circleBar = (__runInitializers(this, _progressBar_extraInitializers), __runInitializers(this, _circleBar_initializers, void 0));
+            this.labelElement = (__runInitializers(this, _circleBar_extraInitializers), __runInitializers(this, _labelElement_initializers, void 0));
+            this.circleLabelElement = (__runInitializers(this, _labelElement_extraInitializers), __runInitializers(this, _circleLabelElement_initializers, void 0));
+            this.radius = (__runInitializers(this, _circleLabelElement_extraInitializers), 0);
+            this.circumference = 0;
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _value_decorators = [property({ type: Number, })];
+            _max_decorators = [property({ type: Number, })];
+            _variant_decorators = [property({})];
+            _size_decorators = [property({})];
+            _color_decorators = [property({})];
+            _indeterminate_decorators = [property({ type: Boolean, })];
+            _showLabel_decorators = [property({ type: Boolean, attribute: 'show-label', })];
+            _label_decorators = [property({})];
+            _striped_decorators = [property({ type: Boolean, })];
+            _animated_decorators = [property({ type: Boolean, })];
+            _thickness_decorators = [property({ type: Number, })];
+            _progressBar_decorators = [query('.progress__bar')];
+            _circleBar_decorators = [query('.progress__circle-bar')];
+            _labelElement_decorators = [query('.progress__label')];
+            _circleLabelElement_decorators = [query('.progress__circle-label')];
+            _render_decorators = [render()];
+            _styles_decorators = [styles()];
+            _handleProgressChange_decorators = [watch('value', 'max', 'indeterminate', { immediate: false })];
+            _handleThicknessChange_decorators = [watch('thickness')];
+            _handleColorChange_decorators = [watch('color')];
+            __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleProgressChange_decorators, { kind: "method", name: "handleProgressChange", static: false, private: false, access: { has: obj => "handleProgressChange" in obj, get: obj => obj.handleProgressChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleThicknessChange_decorators, { kind: "method", name: "handleThicknessChange", static: false, private: false, access: { has: obj => "handleThicknessChange" in obj, get: obj => obj.handleThicknessChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleColorChange_decorators, { kind: "method", name: "handleColorChange", static: false, private: false, access: { has: obj => "handleColorChange" in obj, get: obj => obj.handleColorChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
+            __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(null, null, _indeterminate_decorators, { kind: "field", name: "indeterminate", static: false, private: false, access: { has: obj => "indeterminate" in obj, get: obj => obj.indeterminate, set: (obj, value) => { obj.indeterminate = value; } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
+            __esDecorate(null, null, _showLabel_decorators, { kind: "field", name: "showLabel", static: false, private: false, access: { has: obj => "showLabel" in obj, get: obj => obj.showLabel, set: (obj, value) => { obj.showLabel = value; } }, metadata: _metadata }, _showLabel_initializers, _showLabel_extraInitializers);
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _striped_decorators, { kind: "field", name: "striped", static: false, private: false, access: { has: obj => "striped" in obj, get: obj => obj.striped, set: (obj, value) => { obj.striped = value; } }, metadata: _metadata }, _striped_initializers, _striped_extraInitializers);
+            __esDecorate(null, null, _animated_decorators, { kind: "field", name: "animated", static: false, private: false, access: { has: obj => "animated" in obj, get: obj => obj.animated, set: (obj, value) => { obj.animated = value; } }, metadata: _metadata }, _animated_initializers, _animated_extraInitializers);
+            __esDecorate(null, null, _thickness_decorators, { kind: "field", name: "thickness", static: false, private: false, access: { has: obj => "thickness" in obj, get: obj => obj.thickness, set: (obj, value) => { obj.thickness = value; } }, metadata: _metadata }, _thickness_initializers, _thickness_extraInitializers);
+            __esDecorate(null, null, _progressBar_decorators, { kind: "field", name: "progressBar", static: false, private: false, access: { has: obj => "progressBar" in obj, get: obj => obj.progressBar, set: (obj, value) => { obj.progressBar = value; } }, metadata: _metadata }, _progressBar_initializers, _progressBar_extraInitializers);
+            __esDecorate(null, null, _circleBar_decorators, { kind: "field", name: "circleBar", static: false, private: false, access: { has: obj => "circleBar" in obj, get: obj => obj.circleBar, set: (obj, value) => { obj.circleBar = value; } }, metadata: _metadata }, _circleBar_initializers, _circleBar_extraInitializers);
+            __esDecorate(null, null, _labelElement_decorators, { kind: "field", name: "labelElement", static: false, private: false, access: { has: obj => "labelElement" in obj, get: obj => obj.labelElement, set: (obj, value) => { obj.labelElement = value; } }, metadata: _metadata }, _labelElement_initializers, _labelElement_extraInitializers);
+            __esDecorate(null, null, _circleLabelElement_decorators, { kind: "field", name: "circleLabelElement", static: false, private: false, access: { has: obj => "circleLabelElement" in obj, get: obj => obj.circleLabelElement, set: (obj, value) => { obj.circleLabelElement = value; } }, metadata: _metadata }, _circleLabelElement_initializers, _circleLabelElement_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        render() {
+            if (this.variant === 'circular') {
+                return this.renderCircular();
+            }
+            return this.renderLinear();
+        }
+        styles() {
+            return css `${cssContent$f}`;
+        }
+        renderLinear() {
+            const percentage = this.getPercentage();
+            const labelText = this.label || `${Math.round(percentage)}%`;
+            const progressClass = `progress progress--linear${this.showLabel ? ' progress--with-label' : ''}`;
+            const barStyle = this.indeterminate ? '' : `width: ${percentage}%`;
+            return html /*html*/ `
+      <div part="base" class="${progressClass}"
+           role="progressbar"
+           aria-valuenow="${this.value}"
+           aria-valuemin="0"
+           aria-valuemax="${this.max}"
+           aria-label="${labelText}">
+        <div part="bar" class="progress__bar" style="${barStyle}">
+          <if ${this.showLabel}>
+            <span part="label" class="progress__label">${labelText}</span>
+          </if>
+        </div>
+      </div>
+    `;
+        }
+        renderCircular() {
+            const size = this.getSizeValue();
+            const strokeWidth = this.thickness;
+            const radius = (size - strokeWidth * 2) / 2;
+            const circumference = radius * 2 * Math.PI;
+            const percentage = this.getPercentage();
+            const offset = this.indeterminate ? 0 : circumference - (percentage / 100) * circumference;
+            const labelText = this.label || `${Math.round(percentage)}%`;
+            this.radius = radius;
+            this.circumference = circumference;
+            const viewBox = `0 0 ${size} ${size}`;
+            const centerX = size / 2;
+            const centerY = size / 2;
+            return html /*html*/ `
+      <div part="base" class="progress progress--circular"
+           role="progressbar"
+           aria-valuenow="${this.value}"
+           aria-valuemin="0"
+           aria-valuemax="${this.max}"
+           aria-label="${labelText}">
+        <svg part="circle" class="progress__circle" viewBox="${viewBox}">
+          <circle
+            part="circle-bg"
+            class="progress__circle-bg"
+            cx="${centerX}"
+            cy="${centerY}"
+            r="${radius}"
+          />
+          <circle
+            part="circle-bar"
+            class="progress__circle-bar"
+            cx="${centerX}"
+            cy="${centerY}"
+            r="${radius}"
+            stroke-dasharray="${circumference}"
+            stroke-dashoffset="${offset}"
+          />
+        </svg>
+        <if ${this.showLabel && !this.indeterminate}>
+          <div part="label" class="progress__circle-label">${labelText}</div>
+        </if>
+      </div>
+    `;
+        }
+        handleProgressChange() {
+            this.dispatchProgressChange();
+        }
+        handleThicknessChange() {
+            if (this.variant === 'circular') {
+                this.style.setProperty('--progress-spinner-stroke', `${this.thickness}px`);
+            }
+        }
+        handleColorChange() {
+            const semanticColors = ['primary', 'success', 'warning', 'error', 'info'];
+            if (!semanticColors.includes(this.color)) {
+                // Custom color value - apply directly via CSS variable
+                this.style.setProperty('--progress-color', this.color);
+            }
+            else {
+                // Semantic color - remove inline style, let CSS handle it
+                this.style.removeProperty('--progress-color');
+            }
+        }
+        getPercentage() {
+            if (this.indeterminate)
+                return 0;
+            if (this.max === 0)
+                return 0;
+            return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+        }
+        setProgress(value, max) {
+            this.value = value;
+            if (max !== undefined) {
+                this.max = max;
+            }
+        }
+        getSizeValue() {
+            switch (this.size) {
+                case 'small': return 24;
+                case 'large': return 56;
+                case 'xl': return 80;
+                case 'xxl': return 120;
+                case 'xxxl': return 160;
+                default: return 40;
+            }
+        }
+        dispatchProgressChange() {
+            this.dispatchEvent(new CustomEvent('progress-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: this.value,
+                    max: this.max,
+                    percentage: this.getPercentage(),
+                    indeterminate: this.indeterminate
+                }
+            }));
+        }
+    });
+    return _classThis;
+})();
+
 var cssContent$e = ":host([hidden]){display:none}:host{display:block;width:100%;font-size:.875rem;line-height:1.25rem;color:var(--snice-color-text,rgb(23 23 23))}.cell-content{width:100%;min-height:1.25rem;word-wrap:break-word}:host([align=left]){text-align:left}:host([align=center]){text-align:center}:host([align=right]){text-align:right}:host([type=accounting]),:host([type=currency]),:host([type=fraction]),:host([type=number]),:host([type=percent]),:host([type=scientific]){font-variant-numeric:tabular-nums;text-align:right}:host([type=date]){font-variant-numeric:tabular-nums}:host([type=boolean]){text-align:center;font-size:1rem}.boolean--true{color:var(--snice-color-success,rgb(22 163 74))}.boolean--false{color:var(--snice-color-danger,rgb(220 38 38))}:host([type=rating]){text-align:center}:host([type=sparkline]){text-align:center}.cell-content--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-content--text[data-multiline=true]{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}.cell-content--date,.cell-content--number{font-feature-settings:'tnum'}:host([type=boolean]) .cell-content{display:flex;align-items:center;justify-content:center}:host([type=rating]) .cell-content{display:flex;align-items:center;justify-content:center;gap:.125rem;container-type:inline-size}:host([type=rating]) snice-rating{--rating-size:clamp(0.55rem, 16cqi, 1rem)}.cell-content--progress{width:100%;min-width:4rem}.cell-content--sparkline{display:flex;align-items:center;justify-content:center;min-width:3rem}:host(.positive){color:var(--snice-color-success,rgb(22 163 74))}:host(.negative){color:var(--snice-color-danger,rgb(220 38 38))}:host(.warning){color:var(--snice-color-warning,rgb(234 179 8));background-color:rgb(254 249 195 / .3)}:host(.danger){color:var(--snice-color-danger,rgb(220 38 38));background-color:rgb(254 226 226 / .3)}:host(.success){color:var(--snice-color-success,rgb(22 163 74));background-color:rgb(220 252 231 / .3)}:host(.info){color:var(--snice-color-primary,rgb(37 99 235));background-color:rgb(219 234 254 / .3)}:host(.date--today){font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-primary,rgb(37 99 235))}:host(.date--past){color:var(--snice-color-text-secondary,rgb(82 82 82))}:host(.date--future){color:var(--snice-color-success,rgb(22 163 74))}:host(.number--negative.number--negative-red){color:var(--snice-color-danger,rgb(220 38 38))}:host(.number--positive.number--highlighted){color:var(--snice-color-success,rgb(22 163 74));font-weight:var(--snice-font-weight-semibold,600)}:host(.number--zero){color:var(--snice-color-text-secondary,rgb(82 82 82))}:host([truncate]) .cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([wrap]) .cell-content{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host(:not([value])) .cell-content,:host([value=\"\"]) .cell-content{color:var(--snice-color-text-secondary,rgb(82 82 82))}:host(.loading){position:relative;overflow:hidden}:host(.loading) .cell-content{opacity:.6}:host(.loading)::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,var(--snice-color-surface,rgb(255 255 255 / .6)),transparent);animation:1.5s infinite cell-shimmer}@keyframes cell-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}:host(:focus-within){outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:-2px}.cell-content button,.cell-content input,.cell-content select{font-size:inherit;line-height:inherit}.cell-content a{color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none}.cell-content a:hover{text-decoration:underline}@media (max-width:768px){:host{font-size:.75rem;line-height:1rem}:host([type=boolean]){font-size:.875rem}}@media (prefers-reduced-motion:reduce){:host(.loading)::after{animation:none}}@media (prefers-contrast:high){:host(.positive){background-color:rgb(220 252 231 / .3)}:host(.negative){background-color:rgb(254 226 226 / .3)}.cell-content a{text-decoration:underline}}@media print{:host{font-size:.75rem}:host(.loading)::after{display:none}.cell-content a{text-decoration:underline}}";
 
 const presentationProperties = [
@@ -4266,6 +4522,37 @@ const presentationProperties = [
     'fontSize',
     'textDecoration',
 ];
+/** The alignment a column type renders with when the column declares none. */
+function defaultCellAlign(type) {
+    if (['number', 'currency', 'percent', 'percentage', 'duration', 'filesize',
+        'accounting', 'scientific', 'fraction'].includes(type || ''))
+        return 'right';
+    if (['boolean', 'rating', 'image'].includes(type || ''))
+        return 'center';
+    return 'left';
+}
+/**
+ * The value a typed cell holds when the row has nothing to show — the row field
+ * is null, or the row never carried the field at all.
+ *
+ * Each typed cell owns its value semantics: `false` for boolean, `0` for
+ * rating/progress/duration/filesize, `null` for JSON, `''` for the text-shaped
+ * rest. Handing every empty value the same `''` instead lets the cell's typed
+ * attribute converter re-read that empty string as a value of the wrong
+ * meaning — `''` on a Boolean property is an attribute that is *present*, i.e.
+ * `true`, and `''` on an Object property parses to `{}`.
+ */
+function emptyCellValue(type) {
+    switch (type) {
+        case 'boolean': return false;
+        case 'rating':
+        case 'progress':
+        case 'duration':
+        case 'filesize': return 0;
+        case 'json': return null;
+        default: return '';
+    }
+}
 const installed = new WeakMap();
 const appliedClasses = new WeakMap();
 /**
@@ -4279,10 +4566,9 @@ const appliedClasses = new WeakMap();
  * fallback, so `formatter` wins. `formatterOverride` says the cell does NOT
  * apply `column.formatter` itself, so this module owns both formatters for it.
  *
- * A host marked `formatted` was handed its display text as `value` by the
- * table, which already resolved the pipeline. Its content is that text
- * verbatim — the marker exists so a rating/progress/link/tag cell, which
- * renders structure rather than text, still shows the formatted string.
+ * Table-rendered cells never arrive here with a formatter: `createCellElement`
+ * resolves the pipeline once and hands the text cell the formatted string. This
+ * path serves the declarative and standalone cells, which own a full column.
  */
 function installCellPresentation(host, formatterOverride = false) {
     if (installed.has(host))
@@ -4335,12 +4621,8 @@ function installCellPresentation(host, formatterOverride = false) {
             const formatter = column.formatter
                 ? (formatterOverride ? column.formatter : null)
                 : column.valueFormatter;
-            // Pre-formatted hosts read the attribute, not the property: a cell whose
-            // value property is typed (boolean, number) coerces the display string.
-            const display = host.hasAttribute('formatted')
-                ? (host.getAttribute('value') ?? '')
-                : (formatter ? String(formatter(host.value, host.rowData) ?? '') : null);
-            if (display !== null) {
+            if (formatter) {
+                const display = String(formatter(host.value, host.rowData) ?? '');
                 const content = host.shadowRoot?.querySelector('[part~="content"]');
                 if (content && (content.textContent !== display || content.childElementCount > 0)) {
                     content.textContent = display;
@@ -4361,6 +4643,82 @@ function installCellPresentation(host, formatterOverride = false) {
     queueMicrotask(sync);
 }
 
+/**
+ * Date parsing for the table's cell layer.
+ *
+ * A column of type `date` usually carries calendar dates: `'2026-03-15'` names
+ * a day, not an instant. `new Date('2026-03-15')` nevertheless resolves the
+ * ISO date-only forms as UTC midnight (ECMA-262 21.4.3.2), so every consumer
+ * in a negative-offset zone formatted the day BEFORE the authored one, while
+ * an `<input type="date">` editor holding the same string showed the authored
+ * day. Display, export, and filtering must all agree with the string the
+ * application wrote.
+ *
+ * The rule: a value that carries NO time is a calendar day and is read at
+ * local midnight; anything that carries a time (or an offset, or is already a
+ * `Date`/epoch number) is an instant and is left to the platform.
+ */
+/** ISO calendar dates with no time part: `YYYY`, `YYYY-MM`, `YYYY-MM-DD`. */
+const DATE_ONLY = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/;
+/**
+ * Parse a cell value into a `Date`, or `null` when there is nothing to show.
+ *
+ * `null` covers the empty cases (`null`, `undefined`, `''`) and unparseable
+ * input alike, so callers fall back to the raw value rather than rendering
+ * "Invalid Date" or the epoch.
+ */
+function parseCellDate(value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? null : value;
+    }
+    if (typeof value === 'number') {
+        const fromEpoch = new Date(value);
+        return Number.isNaN(fromEpoch.getTime()) ? null : fromEpoch;
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (trimmed === '')
+            return null;
+        const calendarDay = DATE_ONLY.exec(trimmed);
+        if (calendarDay) {
+            const year = Number(calendarDay[1]);
+            const month = calendarDay[2] === undefined ? 1 : Number(calendarDay[2]);
+            const day = calendarDay[3] === undefined ? 1 : Number(calendarDay[3]);
+            // Local midnight: the same calendar day in every timezone.
+            const local = new Date(year, month - 1, day);
+            // Years 0-99 mean themselves, not 1900+n.
+            if (year >= 0 && year <= 99)
+                local.setFullYear(year, month - 1, day);
+            if (Number.isNaN(local.getTime()))
+                return null;
+            // `new Date(2026, 12, 1)` rolls over to 2027 instead of rejecting, so a
+            // typo like '2026-13-01' or '2026-02-30' would render as a confident but
+            // WRONG day. The platform calls those strings invalid; so do we, and the
+            // caller falls back to showing the raw value.
+            if (local.getFullYear() !== year ||
+                local.getMonth() !== month - 1 ||
+                local.getDate() !== day) {
+                return null;
+            }
+            return local;
+        }
+        const parsed = new Date(trimmed);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }
+    const coerced = new Date(value);
+    return Number.isNaN(coerced.getTime()) ? null : coerced;
+}
+/**
+ * Midnight on the calendar day a value falls on, in local time. Used by
+ * day-granularity comparisons (today/past/future classification) so an
+ * instant is never bumped across a day boundary by the UTC offset.
+ */
+function startOfLocalDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
 (() => {
     let _classDecorators = [element('snice-cell')];
     let _classDescriptor;
@@ -4447,7 +4805,14 @@ function installCellPresentation(host, formatterOverride = false) {
             this.applyConditionalFormatting();
         }
         applyAlignment() {
-            this.style.textAlign = this.align;
+            // snice-cell.css already encodes each type's default alignment
+            // (:host([type="accounting"]) and friends are right-aligned, boolean/rating
+            // centred). Writing an inline text-align unconditionally OVERRODE that, so a
+            // standalone accounting figure sat left-aligned beside a right-aligned
+            // currency cell — and the accounting format's alignment padding meant
+            // nothing. Only an alignment the caller actually declared wins.
+            const declared = this.getAttribute('align');
+            this.style.textAlign = declared ?? '';
         }
         applyConditionalFormatting() {
             if (!this.column)
@@ -4578,24 +4943,60 @@ function installCellPresentation(host, formatterOverride = false) {
                 return String(this.value);
             return `${num.toFixed(format.decimals ?? 2)}%`;
         }
+        /**
+         * Accounting notation is currency notation: symbol, grouped digits, and
+         * negatives in parentheses instead of a minus sign. It shares its defaults
+         * with `formatCurrency()` on purpose — an `accounting` cell and a `currency`
+         * cell showing the same amount must not disagree about what money looks
+         * like. `numberFormat` still steers decimals/grouping (its historic role
+         * here), `currencyFormat` steers the symbol and locale, and an explicit
+         * `numberFormat.prefix` opts out of the symbol entirely for ledgers that
+         * label their own columns.
+         */
         formatAccounting() {
             const format = this.column.numberFormat || {};
+            const currency = this.column.currencyFormat || {};
             const num = Number(this.value);
             if (isNaN(num))
                 return String(this.value);
-            let formatted = Math.abs(num).toFixed(format.decimals ?? 2);
-            if (format.thousandsSeparator) {
-                const parts = formatted.split('.');
-                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-                formatted = parts.join('.');
-            }
-            if (num < 0) {
-                formatted = `(${formatted})`;
+            const decimals = format.decimals ?? currency.decimals ?? 2;
+            const useGrouping = format.thousandsSeparator ?? currency.thousandsSeparator ?? true;
+            const magnitude = Math.abs(num);
+            const options = {
+                useGrouping,
+                minimumFractionDigits: decimals,
+                maximumFractionDigits: decimals,
+            };
+            // An author-supplied prefix/suffix is the caller naming the unit; adding a
+            // currency symbol on top would print it twice.
+            const symbolIsCallers = !!format.prefix || !!format.suffix;
+            if (!symbolIsCallers) {
+                options.style = 'currency';
+                options.currency = currency.currency || 'USD';
+                options.currencyDisplay = currency.currencyDisplay || currency.display || 'symbol';
+            }
+            let formatted;
+            try {
+                formatted = new Intl.NumberFormat(currency.locale || 'en-US', options).format(magnitude);
             }
-            else {
-                formatted = ` ${formatted} `;
+            catch {
+                formatted = magnitude.toFixed(decimals);
+                if (useGrouping) {
+                    const parts = formatted.split('.');
+                    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                    formatted = parts.join('.');
+                }
+                if (!symbolIsCallers)
+                    formatted = `$${formatted}`;
             }
-            return formatted;
+            if (format.prefix)
+                formatted = format.prefix + formatted;
+            if (format.suffix)
+                formatted = formatted + format.suffix;
+            // The trailing space is the format's whole reason for existing: it keeps a
+            // positive row's last digit under the ")" of the row above in a
+            // right-aligned column. A normal space collapses in HTML, so pad with NBSP.
+            return num < 0 ? `(${formatted})` : `${formatted}\u00a0`;
         }
         formatScientific() {
             const format = this.column.numberFormat || {};
@@ -4637,8 +5038,10 @@ function installCellPresentation(host, formatterOverride = false) {
         }
         formatDate() {
             const format = this.column.dateFormat || {};
-            const date = new Date(this.value);
-            if (isNaN(date.getTime()))
+            // Calendar days are read at local midnight (see table-date.ts) so this
+            // generic cell shows the same day as `snice-cell-date` and as the editor.
+            const date = parseCellDate(this.value);
+            if (!date)
                 return String(this.value);
             if (format.customFormat) {
                 // Simple custom format implementation
@@ -5277,7 +5680,7 @@ function installCellPresentation(host, formatterOverride = false) {
             _styles_decorators = [styles()];
             _init_decorators = [ready()];
             _updateAlignment_decorators = [watch('align')];
-            _updateContent_decorators = [watch('value', 'column')];
+            _updateContent_decorators = [watch('value', 'column', 'dateFormat', 'customFormat', 'locale', 'relativeTime', 'showTime')];
             __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -5321,6 +5724,9 @@ function installCellPresentation(host, formatterOverride = false) {
         updateAlignment() {
             this.applyAlignment();
         }
+        // Every input the formatter reads, not just the value: a late
+        // `custom-format` / `locale` / `show-time` change must repaint the day it
+        // describes, or the cell keeps showing the format it happened to be born with.
         updateContent() {
             if (this.contentElement) {
                 const formattedValue = this.formatDateValue();
@@ -5337,8 +5743,11 @@ function installCellPresentation(host, formatterOverride = false) {
             if (this.column.formatter) {
                 return this.column.formatter(this.value, this.rowData);
             }
-            const date = new Date(this.value);
-            if (isNaN(date.getTime())) {
+            // A date-only value names a calendar day, so it is read at LOCAL midnight
+            // (see table-date.ts). Parsing it with `new Date` would place it at UTC
+            // midnight and render the previous day for every negative UTC offset.
+            const date = parseCellDate(this.value);
+            if (!date) {
                 return String(this.value);
             }
             // Show relative time if enabled
@@ -5425,13 +5834,18 @@ function installCellPresentation(host, formatterOverride = false) {
             }
         }
         getDateStyles() {
-            const date = new Date(this.value);
-            const now = new Date();
-            const isToday = date.toDateString() === now.toDateString();
-            const isPast = date < now;
-            const isFuture = date > now;
+            const date = parseCellDate(this.value);
             // Apply CSS classes instead of direct styles
             this.classList.remove('date--today', 'date--past', 'date--future');
+            if (!date)
+                return '';
+            // Day granularity: a calendar day is today, past, or future as a whole —
+            // the wall-clock time of day never decides which.
+            const day = startOfLocalDay(date).getTime();
+            const today = startOfLocalDay(new Date()).getTime();
+            const isToday = day === today;
+            const isPast = day < today;
+            const isFuture = day > today;
             if (isToday) {
                 this.classList.add('date--today');
             }
@@ -7126,7 +7540,7 @@ var cssContent$b = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$a = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.5rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0;position:relative}.status-dot--online{background-color:var(--snice-color-success,rgb(22 163 74));box-shadow:0 0 0 2px rgb(22 163 74 / .2)}.status-dot--offline{background-color:rgb(156 163 175);box-shadow:0 0 0 2px rgb(107 114 128 / .2)}.status-dot--busy{background-color:var(--snice-color-danger,rgb(220 38 38));box-shadow:0 0 0 2px rgb(220 38 38 / .2)}.status-dot--away{background-color:var(--snice-color-warning,rgb(234 179 8));box-shadow:0 0 0 2px rgb(234 179 8 / .2)}.status-dot--custom{background-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 2px rgb(37 99 235 / .2)}.status-dot--online::after{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;border:2px solid var(--snice-color-success,rgb(22 163 74));animation:2s ease-in-out infinite status-pulse;opacity:0}@keyframes status-pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}.status-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-label--online{color:var(--snice-color-success,rgb(22 163 74))}.status-label--offline{color:var(--snice-color-text-secondary,rgb(82 82 82))}.status-label--busy{color:var(--snice-color-danger,rgb(220 38 38))}.status-label--away{color:var(--snice-color-warning,rgb(234 179 8))}.status-label--custom{color:var(--snice-color-text,rgb(23 23 23))}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.status-dot{width:.375rem;height:.375rem}}@media (prefers-reduced-motion:reduce){.status-dot--online::after{animation:none}}@media print{.status-dot{border:1px solid var(--snice-color-text,rgb(23 23 23))}.status-dot--online{background-color:var(--snice-color-surface,rgb(255 255 255));border-color:var(--snice-color-success,rgb(22 163 74))}.status-dot--offline{background-color:var(--snice-color-surface,rgb(255 255 255));border-color:var(--snice-color-neutral,rgb(107 114 128))}.status-dot--busy{background-color:var(--snice-color-surface,rgb(255 255 255));border-color:var(--snice-color-danger,rgb(220 38 38))}.status-dot--away{background-color:var(--snice-color-surface,rgb(255 255 255));border-color:var(--snice-color-warning,rgb(234 179 8))}}";
+var cssContent$a = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem;display:flex;align-items:center;gap:.5rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0;position:relative}.status-dot--online{background-color:var(--snice-color-success,rgb(22 163 74));box-shadow:0 0 0 2px rgb(22 163 74 / .2)}.status-dot--offline{background-color:rgb(156 163 175);box-shadow:0 0 0 2px rgb(107 114 128 / .2)}.status-dot--busy{background-color:var(--snice-color-danger,rgb(220 38 38));box-shadow:0 0 0 2px rgb(220 38 38 / .2)}.status-dot--away{background-color:var(--snice-color-warning,rgb(234 179 8));box-shadow:0 0 0 2px rgb(234 179 8 / .2)}.status-dot--custom{background-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 2px rgb(37 99 235 / .2)}.status-dot--online::after{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;border:2px solid var(--snice-color-success,rgb(22 163 74));animation:2s ease-in-out infinite status-pulse;opacity:0}@keyframes status-pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}.status-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-label--online{color:var(--snice-color-success,rgb(22 163 74))}.status-label--offline{color:var(--snice-color-text-secondary,rgb(82 82 82))}.status-label--busy{color:var(--snice-color-danger,rgb(220 38 38))}.status-label--away{color:var(--snice-color-warning,rgb(234 179 8))}.status-label--custom{color:var(--snice-color-text,rgb(23 23 23))}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.status-dot{width:.375rem;height:.375rem}}@media (prefers-reduced-motion:reduce){.status-dot--online::after{animation:none}}@media print{.status-dot{border:1px solid var(--snice-color-text,rgb(23 23 23))}.status-dot--online{background-color:var(--snice-color-surface,rgb(255 255 255));border-color:var(--snice-color-success,rgb(22 163 74))}.status-dot--offline{background-color:var(--snice-color-surface,rgb(255 255 255));border-color:var(--snice-color-neutral,rgb(107 114 128))}.status-dot--busy{background-color:var(--snice-color-surface,rgb(255 255 255));border-color:var(--snice-color-danger,rgb(220 38 38))}.status-dot--away{background-color:var(--snice-color-surface,rgb(255 255 255));border-color:var(--snice-color-warning,rgb(234 179 8))}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-status')];
@@ -7266,7 +7680,7 @@ var cssContent$a = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$9 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem}.actions-container{display:inline-flex;gap:.5rem;align-items:center}.action-button{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:1px solid transparent;border-radius:.25rem;background:0 0;cursor:pointer;transition:.2s;font-size:.875rem;line-height:1}.action-button:hover{background:var(--snice-color-surface-hover,rgb(243 244 246))}.action-button:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px}.action-button:active{transform:scale(.95)}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button:disabled:hover{background:0 0}.action-button--primary{color:var(--snice-color-primary,rgb(37 99 235))}.action-button--primary:hover:not(:disabled){background:rgb(37 99 235 / .1)}.action-button--secondary{color:var(--snice-color-text,rgb(23 23 23))}.action-button--danger{color:var(--snice-color-danger,rgb(220 38 38))}.action-button--danger:hover:not(:disabled){background:rgb(220 38 38 / .1)}.action-button--success{color:var(--snice-color-success,rgb(22 163 74))}.action-button--success:hover:not(:disabled){background:rgb(22 163 74 / .1)}.action-icon{display:inline-flex;align-items:center;font-size:1rem}img.action-icon{width:1rem;height:1rem;object-fit:contain}.action-icon svg{width:1rem;height:1rem}.action-label{font-weight:var(--snice-font-weight-medium,500)}:host([align=left]){justify-content:flex-start}:host([align=center]){justify-content:center}:host([align=right]){justify-content:flex-end}@media (max-width:768px){.action-button{padding:.25rem}.action-label{display:none}}@media print{.actions-container{display:none}}";
+var cssContent$9 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem}.actions-container{display:inline-flex;gap:.5rem;align-items:center}.action-button{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:1px solid transparent;border-radius:.25rem;background:0 0;cursor:pointer;transition:.2s;font-size:.875rem;line-height:1}.action-button:hover{background:var(--snice-color-surface-hover,rgb(243 244 246))}.action-button:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px}.action-button:active{transform:scale(.95)}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button:disabled:hover{background:0 0}.action-button--primary{color:var(--snice-color-primary,rgb(37 99 235))}.action-button--primary:hover:not(:disabled){background:rgb(37 99 235 / .1)}.action-button--secondary{color:var(--snice-color-text,rgb(23 23 23))}.action-button--danger{color:var(--snice-color-danger,rgb(220 38 38))}.action-button--danger:hover:not(:disabled){background:rgb(220 38 38 / .1)}.action-button--success{color:var(--snice-color-success,rgb(22 163 74))}.action-button--success:hover:not(:disabled){background:rgb(22 163 74 / .1)}.action-icon{display:inline-flex;align-items:center;font-size:1rem}img.action-icon{width:1rem;height:1rem;object-fit:contain}.action-icon svg{width:1rem;height:1rem}.action-label{font-weight:var(--snice-font-weight-medium,500)}:host([align=left]){justify-content:flex-start}:host([align=center]){justify-content:center}:host([align=right]){justify-content:flex-end}@media (max-width:768px){.action-button{padding:.25rem}.action-label{display:none}}@media print{.actions-container{display:none}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-actions')];
@@ -7404,7 +7818,7 @@ var cssContent$9 = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$8 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem}.cell-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;transition:color .2s}.cell-link:hover{color:var(--snice-color-primary-hover,rgb(29 78 216));text-decoration:underline}.cell-link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px;border-radius:var(--snice-border-radius-sm,.125rem)}.cell-link:visited{color:var(--snice-color-text-secondary,rgb(107 114 128))}.link-icon{display:inline-flex;align-items:center;font-size:1rem}img.link-icon{width:1rem;height:1rem;object-fit:contain}.link-icon svg{width:1rem;height:1rem}.link-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.external-icon{display:inline-flex;align-items:center;font-size:.75rem;opacity:.7}:host([align=left]){text-align:left;justify-content:flex-start}:host([align=center]){text-align:center;justify-content:center}:host([align=right]){text-align:right;justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}}@media print{.cell-link{text-decoration:underline}.cell-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary,rgb(82 82 82))}}";
+var cssContent$8 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem}.cell-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;transition:color .2s}.cell-link:hover{color:var(--snice-color-primary-hover,rgb(29 78 216));text-decoration:underline}.cell-link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px;border-radius:var(--snice-border-radius-sm,.125rem)}.cell-link:visited{color:var(--snice-color-text-secondary,rgb(107 114 128))}.link-icon{display:inline-flex;align-items:center;font-size:1rem}img.link-icon{width:1rem;height:1rem;object-fit:contain}.link-icon svg{width:1rem;height:1rem}.link-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.external-icon{display:inline-flex;align-items:center;font-size:.75rem;opacity:.7}:host([align=left]){text-align:left;justify-content:flex-start}:host([align=center]){text-align:center;justify-content:center}:host([align=right]){text-align:right;justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}}@media print{.cell-link{text-decoration:underline}.cell-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary,rgb(82 82 82))}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-link')];
@@ -7544,7 +7958,7 @@ var cssContent$8 = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$7 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.email-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.email-link{color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-link:hover{color:var(--snice-color-primary-hover,rgb(29 78 216));text-decoration:underline}.email-link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px;border-radius:var(--snice-border-radius-sm,.125rem)}.email-link:visited{color:var(--snice-color-text-secondary,rgb(107 114 128))}.email-empty{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.email-icon{font-size:.75rem}}@media print{.email-link{text-decoration:underline}.email-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary,rgb(82 82 82))}.email-icon{display:none}}";
+var cssContent$7 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.email-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.email-link{color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-link:hover{color:var(--snice-color-primary-hover,rgb(29 78 216));text-decoration:underline}.email-link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px;border-radius:var(--snice-border-radius-sm,.125rem)}.email-link:visited{color:var(--snice-color-text-secondary,rgb(107 114 128))}.email-empty{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.email-icon{font-size:.75rem}}@media print{.email-link{text-decoration:underline}.email-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary,rgb(82 82 82))}.email-icon{display:none}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-email')];
@@ -7665,7 +8079,7 @@ var cssContent$7 = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$6 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.phone-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.phone-link{color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.phone-link:hover{color:var(--snice-color-primary-hover,rgb(29 78 216));text-decoration:underline}.phone-link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px;border-radius:var(--snice-border-radius-sm,.125rem)}.phone-link:visited{color:var(--snice-color-text-secondary,rgb(107 114 128))}.phone-empty{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.phone-icon{font-size:.75rem}}@media print{.phone-link{text-decoration:underline}.phone-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary,rgb(82 82 82))}.phone-icon{display:none}}";
+var cssContent$6 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.phone-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.phone-link{color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.phone-link:hover{color:var(--snice-color-primary-hover,rgb(29 78 216));text-decoration:underline}.phone-link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px;border-radius:var(--snice-border-radius-sm,.125rem)}.phone-link:visited{color:var(--snice-color-text-secondary,rgb(107 114 128))}.phone-empty{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.phone-icon{font-size:.75rem}}@media print{.phone-link{text-decoration:underline}.phone-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary,rgb(82 82 82))}.phone-icon{display:none}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-phone')];
@@ -7814,7 +8228,7 @@ var cssContent$6 = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$5 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.5rem}.color-swatch{border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:.25rem;flex-shrink:0;box-shadow:var(--snice-shadow-xs,0 1px 2px 0 rgb(0 0 0 / .03))}.color-swatch--small{width:1rem;height:1rem}.color-swatch--medium{width:1.5rem;height:1.5rem}.color-swatch--large{width:2rem;height:2rem}.color-text{font-family:monospace;font-size:.875rem;color:var(--snice-color-text,rgb(23 23 23));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.color-swatch--small{width:.875rem;height:.875rem}.color-swatch--medium{width:1.25rem;height:1.25rem}.color-swatch--large{width:1.75rem;height:1.75rem}.color-text{font-size:.75rem}}@media print{.color-swatch{border:2px solid var(--snice-color-text,rgb(23 23 23))}.color-text{font-size:.75rem}}";
+var cssContent$5 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem;display:flex;align-items:center;gap:.5rem}.color-swatch{border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:.25rem;flex-shrink:0;box-shadow:var(--snice-shadow-xs,0 1px 2px 0 rgb(0 0 0 / .03))}.color-swatch--small{width:1rem;height:1rem}.color-swatch--medium{width:1.5rem;height:1.5rem}.color-swatch--large{width:2rem;height:2rem}.color-text{font-family:monospace;font-size:.875rem;color:var(--snice-color-text,rgb(23 23 23));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.color-swatch--small{width:.875rem;height:.875rem}.color-swatch--medium{width:1.25rem;height:1.25rem}.color-swatch--large{width:1.75rem;height:1.75rem}.color-text{font-size:.75rem}}@media print{.color-swatch{border:2px solid var(--snice-color-text,rgb(23 23 23))}.color-text{font-size:.75rem}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-color')];
@@ -7998,7 +8412,7 @@ var cssContent$5 = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$4 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.location-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.location-link{color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location-link:hover{color:var(--snice-color-primary-hover,rgb(29 78 216));text-decoration:underline}.location-link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px;border-radius:var(--snice-border-radius-sm,.125rem)}.location-link:visited{color:var(--snice-color-text-secondary,rgb(107 114 128))}.location-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--snice-color-text,rgb(23 23 23))}.location-empty{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.location-icon{font-size:.75rem}}@media print{.location-link{text-decoration:underline}.location-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary,rgb(82 82 82))}.location-icon{display:none}}";
+var cssContent$4 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.location-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.location-link{color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location-link:hover{color:var(--snice-color-primary-hover,rgb(29 78 216));text-decoration:underline}.location-link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px;border-radius:var(--snice-border-radius-sm,.125rem)}.location-link:visited{color:var(--snice-color-text-secondary,rgb(107 114 128))}.location-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--snice-color-text,rgb(23 23 23))}.location-empty{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.location-icon{font-size:.75rem}}@media print{.location-link{text-decoration:underline}.location-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary,rgb(82 82 82))}.location-icon{display:none}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-location')];
@@ -8181,7 +8595,7 @@ var cssContent$4 = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$3 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;height:auto;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0}.json-toggle{background:0 0;border:none;color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;padding:.125rem .25rem;font-size:.75rem;line-height:1;border-radius:.25rem;transition:background-color .2s;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.json-toggle svg{width:.75rem;height:.75rem}.json-toggle:hover{background-color:var(--snice-color-surface-hover,rgb(245 245 245))}.json-toggle:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px}.json-viewer{font-family:'Courier New',Consolas,monospace;font-size:.8125rem;overflow:hidden;flex:1}.json-viewer--collapsed{white-space:nowrap;text-overflow:ellipsis}.json-viewer--expanded{white-space:pre-wrap;word-break:break-word}.json-preview{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.json-object{padding-left:1rem}.json-line{margin:.125rem 0}.json-key{color:var(--snice-color-primary,rgb(37 99 235));font-weight:var(--snice-font-weight-medium,500);margin-right:.25rem}.json-string{color:var(--snice-color-success,rgb(22 163 74))}.json-number{color:var(--snice-color-primary,rgb(59 130 246))}.json-boolean{color:var(--snice-color-warning,rgb(234 179 8))}.json-empty,.json-null,.json-undefined{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.json-viewer{font-size:.75rem}.json-toggle{font-size:.625rem}}@media print{.json-toggle{display:none}.json-viewer--collapsed{white-space:normal}.json-viewer{font-size:.625rem}}";
+var cssContent$3 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;height:auto;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem;display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0}.json-toggle{background:0 0;border:none;color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;padding:.125rem .25rem;font-size:.75rem;line-height:1;border-radius:.25rem;transition:background-color .2s;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.json-toggle svg{width:.75rem;height:.75rem}.json-toggle:hover{background-color:var(--snice-color-surface-hover,rgb(245 245 245))}.json-toggle:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:2px}.json-viewer{font-family:'Courier New',Consolas,monospace;font-size:.8125rem;overflow:hidden;flex:1}.json-viewer--collapsed{white-space:nowrap;text-overflow:ellipsis}.json-viewer--expanded{white-space:pre-wrap;word-break:break-word}.json-preview{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.json-object{padding-left:1rem}.json-line{margin:.125rem 0}.json-key{color:var(--snice-color-primary,rgb(37 99 235));font-weight:var(--snice-font-weight-medium,500);margin-right:.25rem}.json-string{color:var(--snice-color-success,rgb(22 163 74))}.json-number{color:var(--snice-color-primary,rgb(59 130 246))}.json-boolean{color:var(--snice-color-warning,rgb(234 179 8))}.json-empty,.json-null,.json-undefined{color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text,rgb(23 23 23));font-size:.75rem;line-height:1rem}.json-viewer{font-size:.75rem}.json-toggle{font-size:.625rem}}@media print{.json-toggle{display:none}.json-viewer--collapsed{white-space:normal}.json-viewer{font-size:.625rem}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-json')];
@@ -8602,7 +9016,7 @@ function escHtml(s) {
     return _classThis;
 })();
 
-var cssContent$2 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center}.cell-image{display:block;object-fit:cover;background-color:rgb(243 244 246)}.image--small{width:1.5rem;height:1.5rem}.image--medium{width:2rem;height:2rem}.image--large{width:3rem;height:3rem}.image--rounded{border-radius:.25rem}.image--square{border-radius:0}.image--circle{border-radius:50%}.cell-image--placeholder{background:linear-gradient(135deg,rgb(229 231 235) 0,rgb(209 213 219) 100%);border:1px solid rgb(209 213 219);position:relative}.cell-image__placeholder-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;color:var(--snice-color-text-tertiary,rgb(115 115 115));opacity:.55}.cell-image__placeholder-icon svg{width:50%;max-width:1.25rem;height:auto}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}:host(.loading) .cell-image{opacity:.6;animation:1.5s ease-in-out infinite image-pulse}@keyframes image-pulse{0%,100%{opacity:.6}50%{opacity:.3}}@media (max-width:768px){.image--small{width:1.25rem;height:1.25rem}.image--medium{width:1.75rem;height:1.75rem}.image--large{width:2.5rem;height:2.5rem}}@media (prefers-reduced-motion:reduce){:host(.loading) .cell-image{animation:none}}@media print{.cell-image{max-width:2rem;max-height:2rem}}";
+var cssContent$2 = ":host([hidden]){display:none}:host{color:var(--snice-color-text,rgb(23 23 23));display:flex;align-items:center;min-height:2.5rem;min-width:var(--snice-table-cell-min-width,6.25rem);flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:var(--snice-table-cell-min-width,6.25rem);min-height:1.25rem;display:flex;align-items:center}.cell-image{display:block;object-fit:cover;background-color:rgb(243 244 246)}.image--small{width:1.5rem;height:1.5rem}.image--medium{width:2rem;height:2rem}.image--large{width:3rem;height:3rem}.image--rounded{border-radius:.25rem}.image--square{border-radius:0}.image--circle{border-radius:50%}.cell-image--placeholder{background:linear-gradient(135deg,rgb(229 231 235) 0,rgb(209 213 219) 100%);border:1px solid rgb(209 213 219);position:relative}.cell-image__placeholder-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;color:var(--snice-color-text-tertiary,rgb(115 115 115));opacity:.55}.cell-image__placeholder-icon svg{width:50%;max-width:1.25rem;height:auto}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}:host(.loading) .cell-image{opacity:.6;animation:1.5s ease-in-out infinite image-pulse}@keyframes image-pulse{0%,100%{opacity:.6}50%{opacity:.3}}@media (max-width:768px){.image--small{width:1.25rem;height:1.25rem}.image--medium{width:1.75rem;height:1.75rem}.image--large{width:2.5rem;height:2.5rem}}@media (prefers-reduced-motion:reduce){:host(.loading) .cell-image{animation:none}}@media print{.cell-image{max-width:2rem;max-height:2rem}}";
 
 (() => {
     let _classDecorators = [element('snice-cell-image')];
@@ -9306,7 +9720,7 @@ var cssContent$2 = ":host([hidden]){display:none}:host{color:var(--snice-color-t
     return _classThis;
 })();
 
-var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;min-height:2.5rem}.row-container{display:flex;align-items:stretch;width:100%;min-height:2.5rem;background:0 0;color:var(--snice-color-text,rgb(23 23 23));border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));transition:background-color .15s}.cell{display:flex;align-items:center;border-right:1px solid var(--snice-color-border,rgb(226 226 226));min-height:2.5rem;min-width:6.25rem;flex:1;word-wrap:break-word;overflow:hidden;color:var(--snice-color-text,rgb(23 23 23))}.cell:last-child{border-right:none}.cell--checkbox{width:3rem;min-width:3rem;max-width:3rem;padding:.75rem;justify-content:center}.row-checkbox{width:1rem;height:1rem;cursor:pointer;margin:0;display:block;accent-color:var(--snice-color-primary,rgb(37 99 235))}.cells-container{display:flex;flex:1;align-items:stretch}.cell--text{text-align:left}.cell--accounting,.cell--currency,.cell--fraction,.cell--number,.cell--percent,.cell--scientific{text-align:right;font-variant-numeric:tabular-nums}.cell--date{min-width:8rem;font-variant-numeric:tabular-nums}.cell--boolean{text-align:center;font-size:1rem}.cell--rating{text-align:center;min-width:6rem}.cell--progress{min-width:8rem}.cell--sparkline{text-align:center;min-width:6rem}.cell--duration,.cell--filesize{text-align:right;font-variant-numeric:tabular-nums}:host(.row--hoverable) .row-container:hover{background-color:var(--snice-color-surface-hover,rgb(243 244 246))}:host(.row--clickable) .row-container{cursor:pointer}:host(.row--clickable) .row-container:hover{background-color:var(--snice-color-surface-hover,rgb(243 244 246))}:host(.row--selected) .row-container{background-color:var(--snice-color-primary-subtle,rgb(239 246 255));box-shadow:inset 2px 0 0 0 var(--snice-color-primary,rgb(37 99 235))}:host(.row--selected.row--hoverable) .row-container:hover{background-color:var(--snice-color-primary-subtle-hover,var(--snice-color-primary-subtle,rgb(219 234 254)))}:host(.row--highlighted) .row-container{background-color:var(--snice-color-warning-subtle,rgb(254 249 195))!important;animation:2s ease-out row-highlight-fade}@keyframes row-highlight-fade{0%{background-color:var(--snice-color-warning-subtle-hover,rgb(254 252 232))}100%{background-color:var(--snice-color-warning-subtle,rgb(254 249 195))}}:host(:focus) .row-container{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:-2px}:host(.row--selectable){tabindex:0}:host(.row--striped) .row-container{background-color:var(--snice-color-surface-container-low,rgb(245 245 245))}:host(.row--bordered) .row-container{border-bottom:1px solid var(--snice-color-border,rgb(226 226 226))}:host(.row--small) .cell{padding:.5rem .75rem;min-height:2rem;font-size:.75rem}:host(.row--small) .row-container{min-height:2rem}:host(.row--large) .cell{padding:1rem 1.25rem;min-height:3.5rem;font-size:1rem}:host(.row--large) .row-container{min-height:3.5rem}@media (max-width:768px){.cell{padding:.5rem .75rem;font-size:.875rem}.cell--checkbox{width:2.5rem;min-width:2.5rem;max-width:2.5rem;padding:.5rem}.row-checkbox{width:.875rem;height:.875rem}}:host(.row--loading) .row-container{opacity:.6;pointer-events:none}:host(.row--loading) .row-container::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,var(--snice-color-surface,rgb(255 255 255 / .6)),transparent);animation:1.5s infinite loading-shimmer}@keyframes loading-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){.row-container{transition:none}:host(.row--highlighted) .row-container{animation:none;background-color:var(--snice-color-warning-subtle,rgb(254 249 195))!important}:host(.row--loading) .row-container::after{animation:none}}@media (prefers-contrast:high){.cell{border-right:1px solid}.row-container{border-bottom:1px solid}:host(.row--selected) .row-container{border:2px solid}}";
+var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;min-height:2.5rem}.row-container{display:flex;align-items:stretch;width:100%;min-height:2.5rem;background:0 0;color:var(--snice-color-text,rgb(23 23 23));border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));transition:background-color .15s}.cell{display:flex;align-items:center;border-right:1px solid var(--snice-color-border,rgb(226 226 226));min-height:2.5rem;min-width:6.25rem;flex:1;word-wrap:break-word;overflow:hidden;color:var(--snice-color-text,rgb(23 23 23))}.cell:last-child{border-right:none}.cell--checkbox{width:3rem;min-width:3rem;max-width:3rem;padding:.75rem;justify-content:center}.row-checkbox{width:1rem;height:1rem;cursor:pointer;margin:0;display:block;accent-color:var(--snice-color-primary,rgb(37 99 235))}.cells-container{display:flex;flex:1;align-items:stretch}.cell--text{text-align:left}.cell--accounting,.cell--currency,.cell--fraction,.cell--number,.cell--percent,.cell--scientific{text-align:right;font-variant-numeric:tabular-nums}.cell--date{min-width:8rem;font-variant-numeric:tabular-nums}.cell--boolean{text-align:center;font-size:1rem}.cell--rating{text-align:center;min-width:6rem}.cell--progress{min-width:8rem}.cell--sparkline{text-align:center;min-width:6rem}.cell--duration,.cell--filesize{text-align:right;font-variant-numeric:tabular-nums}:host(.row--hoverable) .row-container:hover{background-color:var(--snice-color-surface-hover,rgb(243 244 246))}:host(.row--clickable) .row-container{cursor:pointer}:host(.row--clickable) .row-container:hover{background-color:var(--snice-color-surface-hover,rgb(243 244 246))}:host(.row--selected) .row-container{background-color:var(--snice-color-primary-subtle,rgb(239 246 255));box-shadow:inset 2px 0 0 0 var(--snice-color-primary,rgb(37 99 235))}:host(.row--selected.row--hoverable) .row-container:hover{background-color:var(--snice-color-primary-subtle-hover,var(--snice-color-primary-subtle,rgb(219 234 254)))}:host(.row--highlighted) .row-container{background-color:var(--snice-color-warning-subtle,rgb(254 249 195))!important;animation:2s ease-out row-highlight-fade}@keyframes row-highlight-fade{0%{background-color:var(--snice-color-warning-subtle-hover,rgb(254 252 232))}100%{background-color:var(--snice-color-warning-subtle,rgb(254 249 195))}}:host(:focus) .row-container{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(37 99 235 / .5));outline-offset:-2px}:host(.row--selectable){tabindex:0}:host(.row--striped) .row-container{background-color:var(--snice-table-stripe-bg,var(--snice-color-overlay-stripe,hsl(0 0% 0% / .02)))}:host(.row--bordered) .row-container{border-bottom:1px solid var(--snice-color-border,rgb(226 226 226))}:host(.row--small) .cell{padding:.5rem .75rem;min-height:2rem;font-size:.75rem}:host(.row--small) .row-container{min-height:2rem}:host(.row--large) .cell{padding:1rem 1.25rem;min-height:3.5rem;font-size:1rem}:host(.row--large) .row-container{min-height:3.5rem}@media (max-width:768px){.cell{padding:.5rem .75rem;font-size:.875rem}.cell--checkbox{width:2.5rem;min-width:2.5rem;max-width:2.5rem;padding:.5rem}.row-checkbox{width:.875rem;height:.875rem}}:host(.row--loading) .row-container{opacity:.6;pointer-events:none}:host(.row--loading) .row-container::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,var(--snice-color-surface,rgb(255 255 255 / .6)),transparent);animation:1.5s infinite loading-shimmer}@keyframes loading-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){.row-container{transition:none}:host(.row--highlighted) .row-container{animation:none;background-color:var(--snice-color-warning-subtle,rgb(254 249 195))!important}:host(.row--loading) .row-container::after{animation:none}}@media (prefers-contrast:high){.cell{border-right:1px solid}.row-container{border-bottom:1px solid}:host(.row--selected) .row-container{border:2px solid}}";
 
 (() => {
     let _classDecorators = [element('snice-row')];
@@ -9559,19 +9973,12 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
       <div class="cell cell--${column.type}" part="cell" style="${this.getCellStyles(column)}">
         ${unsafeHTML(`<${cellComponent}
           type="${column.type}"
-          align="${column.align || this.getDefaultAlign(column.type)}"
+          align="${column.align || defaultCellAlign(column.type)}"
           data-column-index="${columnIndex}"
         ></${cellComponent}>`)}
       </div>
     `;
         }
-        getDefaultAlign(type) {
-            if (['number', 'currency', 'percent', 'percentage', 'duration', 'filesize', 'accounting', 'scientific', 'fraction'].includes(type || ''))
-                return 'right';
-            if (['boolean', 'rating', 'image'].includes(type || ''))
-                return 'center';
-            return 'left';
-        }
         applyCellPresentation(wrapper, column, value) {
             if (!wrapper)
                 return;
@@ -9804,11 +10211,24 @@ class TableVirtualizer {
         window.removeEventListener('resize', this.scrollHandler);
         cancelAnimationFrame(this.rafId);
     }
-    setTotalRows(total) {
+    /**
+     * Publish a new row count. `repaint` false updates the model only — the
+     * pending re-render is still armed (lastStartIndex is reset), so the caller's
+     * own paint (scrollToIndex / refresh) performs it. Callers that resolve a
+     * display index and then scroll MUST use that form: painting here runs
+     * `afterRender`, and a host whose afterRender restores keyboard focus would
+     * re-enter this method from inside its own update.
+     */
+    setTotalRows(total, repaint = true) {
         this.options.totalRows = total;
         this.invalidateOffsets();
         this.lastStartIndex = -1; // Force re-render
-        this.update();
+        if (repaint)
+            this.update();
+    }
+    /** Row count the virtualizer is currently windowing over. */
+    getTotalRows() {
+        return this.options.totalRows ?? 0;
     }
     /**
      * Force a full re-render of the visible range.
@@ -9819,11 +10239,30 @@ class TableVirtualizer {
         this.lastEndIndex = -1;
         this.update();
     }
+    /**
+     * The element that scrolls RIGHT NOW. A structural re-render of the host
+     * swaps the node captured at `attach()`; keep the listener and every lookup
+     * (notably the `<tbody>` we paint into) on the live one.
+     */
+    resolveContainer() {
+        const live = this.options.resolveScrollContainer?.() ?? null;
+        const current = this.options.scrollContainer;
+        if (live && live !== current) {
+            current?.removeEventListener('scroll', this.scrollHandler);
+            live.addEventListener('scroll', this.scrollHandler, { passive: true });
+            this.options.scrollContainer = live;
+            // The new container's tbody is empty — the range we believed painted is
+            // not on screen anymore.
+            this.lastStartIndex = -1;
+            this.lastEndIndex = -1;
+        }
+        return this.options.scrollContainer ?? null;
+    }
     /**
      * Calculate visible range and render if changed.
      */
     update() {
-        if (!this.enabled || !this.options.scrollContainer)
+        if (!this.enabled || !this.resolveContainer())
             return;
         const { bufferPx, totalRows, scrollContainer, renderRange } = this.options;
         const scrollTop = scrollContainer.scrollTop;
@@ -9837,11 +10276,12 @@ class TableVirtualizer {
         // Filtering, pagination, or collapsing a group can shrink the flattened
         // model while the container is scrolled near the old end. Clamp before
         // deriving indices so startIndex never sits beyond totalRows and blanks the
-        // body. Reflect the clamp to the element as well so its next scroll event
-        // observes the same state.
+        // body. Only an offset that overruns the whole content is written back to
+        // the element — a browser already clamps its own scrollTop, and rewriting a
+        // deliberate offset (scrollToRow) would undo the caller's request.
         const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
         const effectiveScrollTop = Math.min(Math.max(0, scrollTop), maxScrollTop);
-        if (scrollTop !== effectiveScrollTop)
+        if (scrollTop > totalHeight || scrollTop < 0)
             scrollContainer.scrollTop = effectiveScrollTop;
         // Calculate visible range with buffer
         const startPx = Math.max(0, effectiveScrollTop - bufferPx);
@@ -9851,75 +10291,89 @@ class TableVirtualizer {
         // Skip if range hasn't changed
         if (startIndex === this.lastStartIndex && endIndex === this.lastEndIndex)
             return;
-        this.lastStartIndex = startIndex;
-        this.lastEndIndex = endIndex;
+        // Nothing to paint into yet (the host template has not committed its table,
+        // or a structural branch flip is mid-flight). Return WITHOUT recording the
+        // range: a dropped paint that looks like a completed one makes the guard
+        // above suppress every retry, and then only a viewport-height change (a
+        // window resize) ever repaints the rows.
+        const tbody = scrollContainer.querySelector('tbody');
+        if (!tbody)
+            return;
         // Update spacers
         const topHeight = offsets[startIndex] || 0;
         const bottomHeight = Math.max(0, totalHeight - (offsets[endIndex] || totalHeight));
         this.topSpacer.style.height = `${topHeight}px`;
         this.bottomSpacer.style.height = `${bottomHeight}px`;
+        // Span the columns that exist, never more (see resolveColumnSpan).
+        const columnSpan = Math.max(1, Math.round(this.options.resolveColumnSpan?.() ?? 1));
         // Render the visible range
         const fragment = renderRange(startIndex, endIndex);
         // Build the tbody content
-        const tbody = this.options.scrollContainer.querySelector('tbody');
-        if (tbody) {
-            tbody.innerHTML = '';
-            // Pinned-top rows render outside (above) the windowed range so they are
-            // always present. Rebuilt every window recompute since tbody is wiped.
-            const pinnedTop = this.options.renderPinnedTop?.();
-            if (pinnedTop)
-                tbody.appendChild(pinnedTop);
-            if (topHeight > 0) {
-                const topTd = document.createElement('td');
-                topTd.colSpan = 999;
-                topTd.style.height = `${topHeight}px`;
-                topTd.style.padding = '0';
-                topTd.style.border = 'none';
-                this.topSpacer.innerHTML = '';
-                this.topSpacer.appendChild(topTd);
-                tbody.appendChild(this.topSpacer);
-            }
-            tbody.appendChild(fragment);
-            if (bottomHeight > 0) {
-                const bottomTd = document.createElement('td');
-                bottomTd.colSpan = 999;
-                bottomTd.style.height = `${bottomHeight}px`;
-                bottomTd.style.padding = '0';
-                bottomTd.style.border = 'none';
-                this.bottomSpacer.innerHTML = '';
-                this.bottomSpacer.appendChild(bottomTd);
-                tbody.appendChild(this.bottomSpacer);
-            }
-            // Pinned-bottom rows render outside (below) the windowed range.
-            const pinnedBottom = this.options.renderPinnedBottom?.();
-            if (pinnedBottom)
-                tbody.appendChild(pinnedBottom);
-            this.options.afterRender?.();
-        }
+        tbody.innerHTML = '';
+        // Pinned-top rows render outside (above) the windowed range so they are
+        // always present. Rebuilt every window recompute since tbody is wiped.
+        const pinnedTop = this.options.renderPinnedTop?.();
+        if (pinnedTop)
+            tbody.appendChild(pinnedTop);
+        if (topHeight > 0) {
+            const topTd = document.createElement('td');
+            topTd.colSpan = columnSpan;
+            topTd.style.height = `${topHeight}px`;
+            topTd.style.padding = '0';
+            topTd.style.border = 'none';
+            this.topSpacer.innerHTML = '';
+            this.topSpacer.appendChild(topTd);
+            tbody.appendChild(this.topSpacer);
+        }
+        tbody.appendChild(fragment);
+        // Nothing to window over: hand the body back its empty/loading/error row
+        // instead of leaving the user staring at a blank frame.
+        if (totalRows === 0) {
+            const emptyBody = this.options.renderEmptyBody?.();
+            if (emptyBody)
+                tbody.appendChild(emptyBody);
+        }
+        if (bottomHeight > 0) {
+            const bottomTd = document.createElement('td');
+            bottomTd.colSpan = columnSpan;
+            bottomTd.style.height = `${bottomHeight}px`;
+            bottomTd.style.padding = '0';
+            bottomTd.style.border = 'none';
+            this.bottomSpacer.innerHTML = '';
+            this.bottomSpacer.appendChild(bottomTd);
+            tbody.appendChild(this.bottomSpacer);
+        }
+        // Pinned-bottom rows render outside (below) the windowed range.
+        const pinnedBottom = this.options.renderPinnedBottom?.();
+        if (pinnedBottom)
+            tbody.appendChild(pinnedBottom);
+        // The window is on screen — only NOW does this range count as painted.
+        // Committed before afterRender so a re-entrant update() from that hook
+        // (keyboard focus restoration scrolls) sees the range it is looking at.
+        this.lastStartIndex = startIndex;
+        this.lastEndIndex = endIndex;
+        this.options.afterRender?.();
     }
     /** Get the currently visible row index range */
     getVisibleRange() {
         return { start: this.lastStartIndex, end: this.lastEndIndex };
     }
-    /** Scroll to bring a specific row into view */
-    scrollToRow(index) {
-        if (!this.options.scrollContainer)
-            return;
-        const top = this.offsetForIndex(index);
-        this.options.scrollContainer.scrollTop = top;
-    }
     /**
-     * Scroll a logical row index into view AND synchronously render its range.
-     * Unlike `scrollToRow`, this does not rely on a scroll event (a programmatic
-     * scrollTop assignment does not fire one) — it forces the window recompute
-     * immediately so the row is in the DOM by the time the caller focuses it.
+     * Scroll a row into view AND synchronously render the window around it.
+     * A programmatic `scrollTop` assignment fires no scroll event, so the window
+     * has to be recomputed here — otherwise the viewport lands on bare spacer and
+     * the requested row is never in the DOM.
      */
-    scrollToIndex(index) {
+    scrollToRow(index) {
         if (!this.options.scrollContainer)
             return;
         this.options.scrollContainer.scrollTop = this.offsetForIndex(index);
         this.refresh();
     }
+    /** Scroll to a logical (flattened display) row index. */
+    scrollToIndex(index) {
+        this.scrollToRow(index);
+    }
     /** Get current scroll position */
     getScrollPosition() {
         const el = this.options.scrollContainer;
@@ -9989,6 +10443,13 @@ class TableVirtualizer {
  * Column management for snice-table.
  * Handles: flex width, resize, auto-size, visibility, ordering, pinning, groups.
  */
+/** Padding + border a cell spends before any content fits inside it. */
+function horizontalCellChrome(cell) {
+    const style = getComputedStyle(cell);
+    const px = (value) => Number.parseFloat(value) || 0;
+    return px(style.paddingLeft) + px(style.paddingRight)
+        + px(style.borderLeftWidth) + px(style.borderRightWidth);
+}
 class TableColumnManager {
     constructor() {
         this.states = new Map();
@@ -9998,27 +10459,110 @@ class TableColumnManager {
         this.resizingKey = null;
         this.resizeOverlay = null;
         this.tableElement = null;
+        this.fitMode = 'scroll';
+        /**
+         * The content budget the last `squish` fit shared out. A drag-resize needs it
+         * to know how much width the columns beside the dragged one have to give up
+         * (or take back) for the total to stay on the frame.
+         */
+        this.squishBudget = null;
+    }
+    /** Fallback content width for a column nobody sized. */
+    static { this.DEFAULT_WIDTH = 150; }
+    /**
+     * The floor `squish` relaxes `minWidth` down to. Not zero: a column narrower
+     * than this shows no glyph at all, only its ellipsis, and stops being a
+     * column the reader can identify. A frame too narrow even for this is past
+     * what the mode can honour — see `fitVisibleColumns`.
+     */
+    static { this.SQUISH_MIN_WIDTH = 24; }
+    /**
+     * Which fitting policy `fitVisibleColumns` (and a drag-resize) follows.
+     * Owned by the table's `columnFit` property; see the `ColumnFit` docs.
+     */
+    setFitMode(mode) {
+        if (mode === this.fitMode)
+            return;
+        this.fitMode = mode;
+        // The budget belongs to the squish fit that recorded it.
+        if (mode !== 'squish')
+            this.squishBudget = null;
+    }
+    getFitMode() {
+        return this.fitMode;
     }
-    /** Initialize column states from column definitions */
+    /**
+     * Routine resync, run on every render: make sure a state exists for each
+     * declared column and refresh the flags that are pure declaration (min/max,
+     * resizable, reorderable, hideable, pinnable, flex).
+     *
+     * Deliberately PRESERVES the interaction-owned members of an existing state —
+     * width, visible, pinned, order — because renderBody() calls this on every
+     * paint, and re-applying the declaration here would undo a drag-resize, a
+     * hidden column or a user reorder on the very next render. Re-applying the
+     * declaration is applyConfiguration()'s job, and only a `columns` assignment
+     * calls that.
+     */
     initialize(columns, tableEl) {
         this.tableElement = tableEl;
         columns.forEach((col, index) => {
             const existing = this.states.get(col.key);
-            this.states.set(col.key, {
-                key: col.key,
-                width: existing?.width ?? this.parseWidth(col.width) ?? 150,
-                flex: col.flex,
-                minWidth: col.minWidth ?? 50,
-                maxWidth: col.maxWidth ?? Infinity,
-                visible: existing?.visible ?? true,
-                pinned: existing?.pinned ?? (col.pinned || false),
-                order: existing?.order ?? index,
-                resizable: col.resizable !== false,
-                reorderable: col.reorderable !== false,
-                hideable: col.hideable !== false,
-                pinnable: col.pinnable !== false,
-            });
+            this.states.set(col.key, this.buildState(col, index, existing));
+        });
+    }
+    /**
+     * A `columns` assignment (or setColumns()) delivered a NEW CONFIGURATION.
+     *
+     * The declaration is the source of truth here: painted order, `pinned`,
+     * `width` and visibility all come from the array just assigned, and states for
+     * columns the new array no longer declares are DROPPED. Without this the first
+     * configuration the table ever saw won permanently — a re-ordered array kept
+     * the original order, a newly declared pin or width was ignored, and a column
+     * hidden through setColumnVisible() could never be brought back
+     * (MATRIX-columns-2/3/4/6).
+     *
+     * The cost is that the assignment also discards user interaction state (a
+     * drag-resize, a manual reorder, a hidden column) for the columns it
+     * re-declares. That is the intended reading of the contract, and it applies to
+     * EVERY assignment: `columns` declares `hasChanged: () => true`, so handing
+     * back the array the table already holds — after mutating it, or unchanged —
+     * re-applies the declaration exactly like a fresh array would. Mutating the
+     * published definitions is therefore NOT an escape hatch; the only way to keep
+     * user column state is to not assign `columns` at all and drive the change
+     * through the column APIs instead (setColumnVisible / moveColumn / pinColumn /
+     * unpinColumn), which mutate the state map in place. Renders triggered by this
+     * go through the table's coalescing queue, so re-applying costs no extra paint.
+     */
+    applyConfiguration(columns, tableEl) {
+        this.tableElement = tableEl;
+        const next = new Map();
+        columns.forEach((col, index) => {
+            next.set(col.key, this.buildState(col, index));
         });
+        this.states = next;
+    }
+    /**
+     * One place that turns a column definition into a state. `existing` supplies
+     * the interaction-owned members on the resync path; omitting it yields the
+     * pure declared state applyConfiguration() wants.
+     */
+    buildState(col, index, existing) {
+        const declared = this.parseWidth(col.width);
+        return {
+            key: col.key,
+            width: existing?.width ?? declared ?? TableColumnManager.DEFAULT_WIDTH,
+            flex: col.flex,
+            minWidth: col.minWidth ?? 50,
+            maxWidth: col.maxWidth ?? Infinity,
+            visible: existing?.visible ?? true,
+            pinned: existing?.pinned ?? (col.pinned || false),
+            order: existing?.order ?? index,
+            resizable: col.resizable !== false,
+            reorderable: col.reorderable !== false,
+            hideable: col.hideable !== false,
+            pinnable: col.pinnable !== false,
+            authored: existing?.authored ?? declared !== undefined,
+        };
     }
     parseWidth(width) {
         if (!width)
@@ -10074,48 +10618,222 @@ class TableColumnManager {
         }
         return widths;
     }
-    /** Apply computed widths to <col> or <th> elements */
-    applyWidths(headerRow, widths) {
-        const ths = headerRow.querySelectorAll('th[data-key]');
-        ths.forEach(th => {
-            const key = th.getAttribute('data-key');
-            if (key && widths.has(key)) {
-                th.style.width = `${widths.get(key)}px`;
+    /**
+     * Fit the columns nobody sized into `availableWidth` (the frame's content
+     * box), reserving `chromePerColumn` for each column's own padding + border.
+     *
+     * A column width is a CONTENT width — the rendered column is that plus its
+     * chrome — so the budget has to come off the top or the fitted table lands a
+     * few pixels wider than the frame it was fitted to.
+     *
+     * Declared and user-chosen widths are spent first and never rewritten: a
+     * table that asked for `width: '80'` keeps 80 whatever the frame does. What
+     * is left is split evenly and clamped to each column's [minWidth, maxWidth],
+     * so a frame too narrow for the minimums overflows into the frame's own
+     * scroller instead of collapsing the columns to nothing.
+     *
+     * Returns whether any width actually moved, so callers can skip a repaint.
+     *
+     * Under `column-fit="squish"` the frame stops being a suggestion: see
+     * `squishVisibleColumns`.
+     */
+    fitVisibleColumns(availableWidth, chromePerColumn = 0) {
+        const visible = this.getVisibleColumns();
+        // A layoutless (or not-yet-laid-out) frame reports 0. Fitting to that would
+        // slam every column to its minimum for a measurement that means nothing.
+        if (visible.length === 0 || !(availableWidth > 0))
+            return false;
+        const budget = availableWidth - visible.length * chromePerColumn;
+        if (this.fitMode === 'squish') {
+            this.squishBudget = budget;
+            return this.squishVisibleColumns(visible, budget);
+        }
+        const auto = visible.filter((state) => !state.authored);
+        if (auto.length === 0)
+            return false;
+        let remaining = budget;
+        for (const state of visible) {
+            if (state.authored)
+                remaining -= state.width;
+        }
+        const share = Math.floor(remaining / auto.length);
+        let changed = false;
+        for (const state of auto) {
+            const next = Math.max(state.minWidth, Math.min(state.maxWidth, share));
+            if (next !== state.width) {
+                state.width = next;
+                changed = true;
             }
-        });
+        }
+        return changed;
     }
-    // ── Resize ──
-    /** Start column resize. Call from mousedown on resize handle. */
-    startResize(columnKey, startX) {
-        const state = this.states.get(columnKey);
-        if (!state || !state.resizable)
-            return;
-        this.resizingKey = columnKey;
-        this.resizeStartX = startX;
-        this.resizeStartWidth = state.width;
-        // Create overlay to capture mouse events
-        this.resizeOverlay = document.createElement('div');
-        this.resizeOverlay.style.cssText = 'position:fixed;inset:0;z-index:99999;cursor:col-resize;';
-        document.body.appendChild(this.resizeOverlay);
-        const onMove = (e) => {
-            e.preventDefault();
-            const delta = e.clientX - this.resizeStartX;
-            const newWidth = Math.max(state.minWidth, Math.min(state.maxWidth, this.resizeStartWidth + delta));
-            state.width = newWidth;
+    /**
+     * The `squish` policy: the columns add up to the frame, whatever that costs.
+     *
+     * `minWidth` is a readability preference, and this mode has already decided
+     * the frame outranks it, so the only floor left is SQUISH_MIN_WIDTH. Two
+     * cases:
+     *
+     *  - There is an unsized column left to absorb the difference, and the
+     *    authored widths still leave room for it. Those are honoured exactly (a
+     *    column that asked for 80, or that the user dragged to 80, keeps 80) and
+     *    the rest is split evenly between the unsized ones.
+     *
+     *  - Every column is authored, or the authored widths alone already overflow
+     *    the frame. There is nothing left to give, so `scroll`'s escape hatch
+     *    (overflow into the frame's scroller) is exactly what this mode exists to
+     *    prevent: every column is scaled by the same factor instead. Scaling is a
+     *    fixed point — the second pass computes a factor of 1 — so this settles
+     *    on the first render rather than creeping on every repaint.
+     *
+     * Either way the remainder from integer division is handed back to the widest
+     * columns that are free to take it, so the widths sum to the budget EXACTLY
+     * and the rightmost column edge lands on the frame's inner edge instead of a
+     * few pixels short of it.
+     */
+    squishVisibleColumns(visible, budget) {
+        const floor = TableColumnManager.SQUISH_MIN_WIDTH;
+        const auto = visible.filter((state) => !state.authored);
+        // What the frame has left once the authored widths are paid for.
+        const spare = budget - visible.reduce((spent, state) => spent + (state.authored ? state.width : 0), 0);
+        const next = new Map();
+        if (auto.length > 0 && spare >= auto.length * floor) {
+            const share = Math.floor(spare / auto.length);
+            for (const state of visible) {
+                next.set(state.key, state.authored
+                    ? state.width
+                    : Math.max(floor, Math.min(state.maxWidth, share)));
+            }
+        }
+        else {
+            const current = visible.reduce((sum, state) => sum + state.width, 0) || 1;
+            const scale = budget / current;
+            for (const state of visible) {
+                next.set(state.key, Math.max(floor, Math.floor(state.width * scale)));
+            }
+        }
+        // Hand the leftover pixels to the widest column that is free to grow: it
+        // absorbs a few pixels without reading as a different column, and a
+        // narrower one might be sitting on its floor or its maxWidth.
+        let slack = budget - Array.from(next.values()).reduce((sum, w) => sum + w, 0);
+        if (slack > 0) {
+            const takers = visible
+                .filter((state) => (next.get(state.key) ?? 0) < state.maxWidth)
+                .sort((a, b) => (next.get(b.key) ?? 0) - (next.get(a.key) ?? 0));
+            for (const state of takers) {
+                if (slack <= 0)
+                    break;
+                const room = Math.min(slack, state.maxWidth - (next.get(state.key) ?? 0));
+                next.set(state.key, (next.get(state.key) ?? 0) + room);
+                slack -= room;
+            }
+        }
+        let changed = false;
+        for (const state of visible) {
+            const width = next.get(state.key);
+            if (width !== state.width) {
+                state.width = width;
+                changed = true;
+            }
+        }
+        return changed;
+    }
+    /**
+     * A drag-resize under `squish` moved one column; the others pay for it.
+     *
+     * The dragged column is the anchor — it keeps the width the pointer asked
+     * for, capped so the remaining columns can still sit on their floor — and the
+     * rest are scaled to fill exactly what is left of the frame. Without this a
+     * drag would simply push the trailing column out of a frame that is not
+     * allowed to scroll.
+     */
+    rebalanceSquish(anchorKey) {
+        const budget = this.squishBudget;
+        const anchor = this.states.get(anchorKey);
+        if (budget === null || !anchor)
+            return;
+        const others = this.getVisibleColumns().filter((state) => state.key !== anchorKey);
+        if (others.length === 0)
+            return;
+        const floor = TableColumnManager.SQUISH_MIN_WIDTH;
+        anchor.width = Math.max(floor, Math.min(anchor.width, budget - others.length * floor));
+        const remaining = budget - anchor.width;
+        const current = others.reduce((sum, state) => sum + state.width, 0) || 1;
+        const scale = remaining / current;
+        for (const state of others) {
+            state.width = Math.max(floor, Math.floor(state.width * scale));
+        }
+        let slack = remaining - others.reduce((sum, state) => sum + state.width, 0);
+        for (const state of [...others].sort((a, b) => b.width - a.width)) {
+            if (slack <= 0)
+                break;
+            const room = Math.min(slack, state.maxWidth - state.width);
+            state.width += room;
+            slack -= room;
+        }
+    }
+    /** Push the current widths onto the painted header and body cells. */
+    writeWidths(keys) {
+        const root = this.tableElement?.shadowRoot;
+        if (!root)
+            return;
+        for (const key of keys) {
+            const width = this.states.get(key)?.width;
+            if (width === undefined)
+                continue;
+            const th = root.querySelector(`th[data-key="${key}"]`);
+            if (th)
+                th.style.width = `${width}px`;
+            const tds = root.querySelectorAll(`td[data-key="${key}"]`);
+            tds.forEach((td) => { td.style.width = `${width}px`; });
+        }
+    }
+    /** Apply computed widths to <col> or <th> elements */
+    applyWidths(headerRow, widths) {
+        const ths = headerRow.querySelectorAll('th[data-key]');
+        ths.forEach(th => {
+            const key = th.getAttribute('data-key');
+            if (key && widths.has(key)) {
+                th.style.width = `${widths.get(key)}px`;
+            }
+        });
+    }
+    // ── Resize ──
+    /** Start column resize. Call from mousedown on resize handle. */
+    startResize(columnKey, startX) {
+        const state = this.states.get(columnKey);
+        if (!state || !state.resizable)
+            return;
+        this.resizingKey = columnKey;
+        this.resizeStartX = startX;
+        this.resizeStartWidth = state.width;
+        // Create overlay to capture mouse events
+        this.resizeOverlay = document.createElement('div');
+        this.resizeOverlay.style.cssText = 'position:fixed;inset:0;z-index:99999;cursor:col-resize;';
+        document.body.appendChild(this.resizeOverlay);
+        const onMove = (e) => {
+            e.preventDefault();
+            const delta = e.clientX - this.resizeStartX;
+            // Squish relaxes minWidth for the fit, so it has to relax it for the drag
+            // too — otherwise a column the fit already squished below its minimum
+            // would jump back up to it the moment its edge was touched.
+            const squish = this.fitMode === 'squish';
+            const min = squish ? TableColumnManager.SQUISH_MIN_WIDTH : state.minWidth;
+            state.width = Math.max(min, Math.min(state.maxWidth, this.resizeStartWidth + delta));
             // Remove flex if manually resized
             state.flex = undefined;
-            // Apply width to DOM immediately
-            const root = this.tableElement?.shadowRoot;
-            if (root) {
-                const th = root.querySelector(`th[data-key="${columnKey}"]`);
-                if (th)
-                    th.style.width = `${newWidth}px`;
-                const tds = root.querySelectorAll(`td[data-key="${columnKey}"]`);
-                tds.forEach(td => td.style.width = `${newWidth}px`);
-            }
+            // The user chose this width — the container fit must leave it alone.
+            state.authored = true;
+            // Squish cannot let the drag push the table past the frame: the columns
+            // beside this one give up (or take back) the difference.
+            if (squish)
+                this.rebalanceSquish(columnKey);
+            this.writeWidths(squish
+                ? this.getVisibleColumns().map((column) => column.key)
+                : [columnKey]);
             // Dispatch resize event
             this.tableElement?.dispatchEvent(new CustomEvent('column-resize', {
-                detail: { key: columnKey, width: newWidth },
+                detail: { key: columnKey, width: state.width },
                 bubbles: true, composed: true
             }));
         };
@@ -10135,24 +10853,81 @@ class TableColumnManager {
     }
     /** Auto-size a column to fit its content */
     autoSizeColumn(columnKey, tbody) {
-        const state = this.states.get(columnKey);
-        if (!state)
-            return;
-        // Measure header
-        const th = this.tableElement?.shadowRoot?.querySelector(`th[data-key="${columnKey}"]`);
-        let maxWidth = th ? th.scrollWidth : 0;
-        // Measure body cells
-        const cells = tbody.querySelectorAll(`td[data-key="${columnKey}"]`);
-        cells.forEach(cell => {
-            maxWidth = Math.max(maxWidth, cell.scrollWidth);
-        });
-        state.width = Math.max(state.minWidth, Math.min(state.maxWidth, maxWidth + 16)); // 16px padding
-        state.flex = undefined;
+        this.autoSizeColumns([columnKey], tbody);
     }
     /** Auto-size all columns */
     autoSizeAll(tbody) {
-        for (const key of this.states.keys()) {
-            this.autoSizeColumn(key, tbody);
+        this.autoSizeColumns(Array.from(this.states.keys()), tbody);
+    }
+    /** Slack added to a measured content width so the last glyph never sits on
+     *  the clip edge (and a sortable header keeps room for its chevron). */
+    static { this.AUTO_SIZE_SLACK = 4; }
+    /**
+     * Measure the columns' content and give each the width it actually needs.
+     *
+     * A table cell's `scrollWidth` is NOT its content width: for content that
+     * fits, it reports the padding box — the width the column already has. The
+     * previous implementation took that maximum and added 16px, so every
+     * "auto-size" pass could only GROW the column, by a chrome's worth each
+     * time, until the table outgrew its own frame. Once it did, the right-pinned
+     * column (`position: sticky`) parked over the columns beside it, and the
+     * columns behind it read as deleted.
+     *
+     * The width a column NEEDS is a layout question, so ask layout: drop the
+     * table into content-driven sizing (`table-layout: auto` at `max-content`)
+     * with the measured columns' imposed widths removed, and read back the width
+     * each header settles at. `max-content` also means no wrapping, so a long
+     * cell reports its full single-line extent even though the painted column
+     * ellipsises it. Everything is restored in the same task, before paint.
+     */
+    autoSizeColumns(columnKeys, tbody) {
+        const root = this.tableElement?.shadowRoot ?? null;
+        const tableEl = (root?.querySelector('table')
+            ?? tbody.closest('table'));
+        const targets = columnKeys
+            .map((key) => this.states.get(key))
+            .filter((state) => !!state);
+        if (!tableEl || targets.length === 0)
+            return;
+        const restore = [];
+        const push = (el, property) => {
+            const previous = el.style[property];
+            restore.push(() => { el.style[property] = previous; });
+        };
+        push(tableEl, 'tableLayout');
+        push(tableEl, 'width');
+        tableEl.style.tableLayout = 'auto';
+        tableEl.style.width = 'max-content';
+        const headers = new Map();
+        for (const state of targets) {
+            const header = root?.querySelector(`th[data-key="${state.key}"]`);
+            if (!header)
+                continue;
+            headers.set(state.key, header);
+            // An imposed width is still a preferred width under auto layout, so it
+            // has to come off before the column can report what it wants.
+            push(header, 'width');
+            header.style.width = 'auto';
+            for (const cell of Array.from(tbody.querySelectorAll(`td[data-key="${state.key}"]`))) {
+                push(cell, 'width');
+                cell.style.width = 'auto';
+            }
+        }
+        const widths = new Map();
+        for (const [key, header] of headers) {
+            widths.set(key, header.getBoundingClientRect().width - horizontalCellChrome(header));
+        }
+        for (const undo of restore)
+            undo();
+        for (const state of targets) {
+            const content = widths.get(state.key) ?? 0;
+            // Nothing measurable — a layoutless DOM, or a column with no rendered
+            // header. Leave the width alone rather than slamming it to the minimum.
+            if (content <= 0)
+                continue;
+            state.width = Math.max(state.minWidth, Math.min(state.maxWidth, Math.ceil(content) + TableColumnManager.AUTO_SIZE_SLACK));
+            state.flex = undefined;
+            state.authored = true;
         }
     }
     // ── Visibility ──
@@ -10473,25 +11248,45 @@ class TableFilterEngine {
                 return Number(cellValue) < Number(filterValue);
             case 'lte':
                 return Number(cellValue) <= Number(filterValue);
-            // Date
-            case 'is': {
-                const d1 = new Date(cellValue).toDateString();
-                const d2 = new Date(filterValue).toDateString();
-                return d1 === d2;
-            }
+            // Date. Both sides cross the cell layer's parser, so a `2026-03-15`
+            // bound means that calendar day locally — the same day the cell paints
+            // — instead of UTC midnight, which shifted every comparison by a day
+            // for negative UTC offsets and split a date-only bound from a
+            // timestamped cell value on the same day.
+            case 'is':
             case 'isNot': {
-                const d1 = new Date(cellValue).toDateString();
-                const d2 = new Date(filterValue).toDateString();
-                return d1 !== d2;
+                const cellDay = this.calendarDay(cellValue);
+                const filterDay = this.calendarDay(filterValue);
+                // An unparseable value is on no day: it never "is" the filtered day,
+                // and it is therefore always "isNot" it.
+                const sameDay = cellDay !== null && filterDay !== null && cellDay === filterDay;
+                return filter.operator === 'is' ? sameDay : !sameDay;
             }
             case 'before':
-                return new Date(cellValue) < new Date(filterValue);
             case 'onOrBefore':
-                return new Date(cellValue) <= new Date(filterValue);
             case 'after':
-                return new Date(cellValue) > new Date(filterValue);
-            case 'onOrAfter':
-                return new Date(cellValue) >= new Date(filterValue);
+            case 'onOrAfter': {
+                const cell = parseCellDate(cellValue);
+                const bound = parseCellDate(filterValue);
+                if (!cell || !bound)
+                    return false;
+                const a = cell.getTime();
+                // A date-only bound names a whole DAY, not the instant it starts at, so
+                // the day's two edges bracket it. Comparing everything against its
+                // opening instant made the four operators disagree with `is`: a cell at
+                // 09:00 on the bound day "is" that day, yet counted as `after` it and
+                // fell outside `onOrBefore` it. A bound that carries its own time is an
+                // instant, and both edges collapse onto it.
+                const dayStart = bound.getTime();
+                const dayEnd = this.boundEnd(filterValue, bound);
+                if (filter.operator === 'before')
+                    return a < dayStart;
+                if (filter.operator === 'onOrBefore')
+                    return a <= dayEnd;
+                if (filter.operator === 'after')
+                    return a > dayEnd;
+                return a >= dayStart;
+            }
             // Boolean
             case 'isTrue':
                 return cellValue === true || cellValue === 'true' || cellValue === 1;
@@ -10501,6 +11296,28 @@ class TableFilterEngine {
                 return true;
         }
     }
+    /**
+     * The local calendar day a value falls on, as a `YYYY-M-D` stamp, or `null`
+     * when the value names no day at all.
+     */
+    calendarDay(value) {
+        const date = parseCellDate(value);
+        if (!date)
+            return null;
+        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+    }
+    /** True when the raw bound named a calendar day rather than an instant. */
+    isDateOnlyBound(raw) {
+        return typeof raw === 'string' && /^\d{4}(?:-\d{2}){0,2}$/.test(raw.trim());
+    }
+    /** Last instant covered by a bound — the day's end when it named a day. */
+    boundEnd(raw, parsed) {
+        if (!this.isDateOnlyBound(raw))
+            return parsed.getTime();
+        const end = new Date(parsed);
+        end.setDate(end.getDate() + 1);
+        return end.getTime() - 1;
+    }
     /** Serialize filter model for server-side requests */
     toServerParams() {
         return {
@@ -10883,7 +11700,7 @@ class TableKeyboard {
             return;
         table.setAttribute('role', 'grid');
         table.setAttribute('tabindex', '0');
-        table.setAttribute('aria-rowcount', String(this.ariaRowCount + 1)); // +1 header
+        table.setAttribute('aria-rowcount', String(this.ariaRowCount + this.headerRowCount));
         table.setAttribute('aria-colcount', String(this.totalColCount));
     }
     /**
@@ -10917,6 +11734,16 @@ class TableKeyboard {
     get ariaRowOffset() {
         return Math.max(0, this.resolveBound(this.options.ariaRowOffset));
     }
+    /**
+     * Rows the header contributes to `aria-rowcount`, and the offset every body
+     * row's `aria-rowindex` starts from. Normally 1 — but list mode paints a
+     * card per row and leaves the thead empty, and claiming a header row that
+     * does not exist would count one row too many and start the body at index 2
+     * with nothing at index 1.
+     */
+    get headerRowCount() {
+        return this.getTable()?.querySelector('thead tr') ? 1 : 0;
+    }
     /** Resolve a body row by its logical data-index (not its DOM position). */
     getBodyRow(index) {
         if (this.options.getRowElement)
@@ -10931,7 +11758,8 @@ class TableKeyboard {
         const table = this.getTable();
         if (!table)
             return;
-        table.setAttribute('aria-rowcount', String(this.ariaRowCount + 1)); // +1 for header
+        const headerRows = this.headerRowCount;
+        table.setAttribute('aria-rowcount', String(this.ariaRowCount + headerRows));
         table.setAttribute('aria-colcount', String(this.totalColCount));
         // Header row
         const headerRow = table.querySelector('thead tr.column-header-row')
@@ -10963,7 +11791,7 @@ class TableKeyboard {
         const bodyRows = table.querySelectorAll('tbody tr:not(.virtual-spacer):not(.table-fill-row)');
         bodyRows.forEach((row, i) => {
             row.setAttribute('role', 'row');
-            row.setAttribute('aria-rowindex', String(this.ariaRowOffset + i + 2)); // +2 for 1-based + header
+            row.setAttribute('aria-rowindex', String(this.ariaRowOffset + i + 1 + headerRows)); // 1-based, after the header
             const isSelected = row.getAttribute('data-selected') === 'true';
             if (isSelected)
                 row.setAttribute('aria-selected', 'true');
@@ -11379,8 +12207,10 @@ class TableExport {
                 return `${num.toFixed(column.percentageFormat?.decimals ?? 2)}%`;
             }
             case 'date': {
-                const date = new Date(value);
-                if (Number.isNaN(date.getTime()))
+                // Exported dates must read as the cell reads them: a calendar day is
+                // local midnight, never UTC midnight (see table-date.ts).
+                const date = parseCellDate(value);
+                if (!date)
                     return this.rawValue(value);
                 const format = column.dateFormat || {};
                 const dateStyle = format.format === 'custom' ? undefined : (format.format || 'short');
@@ -12284,10 +13114,13 @@ class TableTreeData {
         this.flatRows = [];
         this.enabled = false;
         this.defaultDepth = 0;
+        /** Whether the default expansion depth has been seeded (first data only). */
+        this.defaultsApplied = false;
     }
     attach(options) {
         this.options = options;
         this.enabled = true;
+        this.defaultsApplied = false;
         // Pre-expand to default depth
         if (options.defaultExpansionDepth !== undefined && options.defaultExpansionDepth >= 0) {
             this.defaultDepth = options.defaultExpansionDepth;
@@ -12308,13 +13141,27 @@ class TableTreeData {
         for (const row of data) {
             const path = this.options.getPath(row);
             const key = path.join('/');
-            nodeMap.set(key, {
-                data: row,
-                children: new Set(),
-                depth: path.length - 1,
-                isGap: false,
-            });
-            // Ensure all ancestors exist (gap nodes)
+            // A real row may already exist as a gap node generated for a descendant
+            // delivered earlier; upgrade it in place so the children it collected
+            // survive.
+            const existing = nodeMap.get(key);
+            if (existing) {
+                existing.data = row;
+                existing.depth = path.length - 1;
+                existing.isGap = false;
+            }
+            else {
+                nodeMap.set(key, {
+                    data: row,
+                    children: new Set(),
+                    depth: path.length - 1,
+                    isGap: false,
+                });
+            }
+            // Ensure all ancestors exist (gap nodes), and register each one as a
+            // child of its own parent: a generated node with no link upward leaves
+            // its parent reporting hasChildren === false, so flatten() never
+            // descends and the whole subtree — real rows included — disappears.
             for (let i = 1; i < path.length; i++) {
                 const ancestorPath = path.slice(0, i);
                 const ancestorKey = ancestorPath.join('/');
@@ -12326,6 +13173,11 @@ class TableTreeData {
                         isGap: true,
                     });
                 }
+                if (i > 1) {
+                    const ancestorParent = nodeMap.get(path.slice(0, i - 1).join('/'));
+                    if (ancestorParent)
+                        ancestorParent.children.add(ancestorKey);
+                }
             }
             // Register as child of parent
             if (path.length > 1) {
@@ -12342,13 +13194,17 @@ class TableTreeData {
                 rootKeys.push(key);
         }
         rootKeys.sort();
-        // Auto-expand to default depth on first process
-        if (this.expandedKeys.size === 0 && this.defaultDepth > 0) {
+        // Auto-expand to default depth on the first process that sees rows.
+        // `defaultExpansionDepth` describes the STARTING expansion only: keying
+        // this off an empty expansion set re-seeded it on every render, so
+        // collapsing the last expanded node (or collapseAll()) was silently undone.
+        if (!this.defaultsApplied && this.defaultDepth > 0 && nodeMap.size > 0) {
             for (const [key, node] of nodeMap) {
                 if (node.depth < this.defaultDepth && node.children.size > 0) {
                     this.expandedKeys.add(key);
                 }
             }
+            this.defaultsApplied = true;
         }
         // Flatten tree respecting expand/collapse
         this.flatRows = [];
@@ -13102,6 +13958,11 @@ class TableColumnDnD {
     }
 }
 
+/**
+ * The one string both loading affordances use — the zero-row message row shows
+ * it, the refetch overlay announces it. Kept together so they can never drift.
+ */
+const LOADING_LABEL = 'Loading…';
 (() => {
     let _classDecorators = [element('snice-table')];
     let _classDescriptor;
@@ -13196,6 +14057,9 @@ class TableColumnDnD {
     let _density_decorators;
     let _density_initializers = [];
     let _density_extraInitializers = [];
+    let _columnFit_decorators;
+    let _columnFit_initializers = [];
+    let _columnFit_extraInitializers = [];
     let _headerFilters_decorators;
     let _headerFilters_initializers = [];
     let _headerFilters_extraInitializers = [];
@@ -13271,6 +14135,7 @@ class TableColumnDnD {
     let _handleColumnReorderChange_decorators;
     let _handleLazyLoadChange_decorators;
     let _handleColumnMenuChange_decorators;
+    let _handleColumnFitChange_decorators;
     let _dispatchPageChange_decorators;
     let _dispatchRowSelectionChanged_decorators;
     let _dispatchRowClicked_decorators;
@@ -13308,8 +14173,8 @@ class TableColumnDnD {
             _totalItems_decorators = [property({ type: Number, attribute: 'total-items' })];
             _pageSizes_decorators = [property({ type: Array, attribute: false })];
             _searchDebounce_decorators = [property({ type: Number, attribute: 'search-debounce' })];
-            _columns_decorators = [property({ attribute: false })];
-            _data_decorators = [property({ attribute: false })];
+            _columns_decorators = [property({ attribute: false, hasChanged: () => true })];
+            _data_decorators = [property({ attribute: false, hasChanged: () => true })];
             _mode_decorators = [property()];
             _currentSort_decorators = [property({ type: Array, attribute: false })];
             _selector_decorators = [property({ type: String, attribute: 'selector' })];
@@ -13322,6 +14187,7 @@ class TableColumnDnD {
             _editable_decorators = [property({ type: Boolean, attribute: 'editable' })];
             _editMode_decorators = [property({ attribute: 'edit-mode' })];
             _density_decorators = [property({ attribute: 'density' })];
+            _columnFit_decorators = [property({ attribute: 'column-fit' })];
             _headerFilters_decorators = [property({ type: Boolean, attribute: 'header-filters' })];
             _quickFilter_decorators = [property({ type: Boolean, attribute: 'quick-filter' })];
             _rowReorder_decorators = [property({ type: Boolean, attribute: 'row-reorder' })];
@@ -13369,6 +14235,7 @@ class TableColumnDnD {
             _handleColumnReorderChange_decorators = [watch('columnReorder', { immediate: false })];
             _handleLazyLoadChange_decorators = [watch('lazyLoad', 'lazyLoadThreshold', { immediate: false })];
             _handleColumnMenuChange_decorators = [watch('columnMenu', { immediate: false })];
+            _handleColumnFitChange_decorators = [watch('columnFit', { immediate: false })];
             _dispatchPageChange_decorators = [dispatch('page-change', { bubbles: true, composed: true })];
             _dispatchRowSelectionChanged_decorators = [dispatch('table-row-selection-changed', { bubbles: true, composed: true })];
             _dispatchRowClicked_decorators = [dispatch('row-clicked', { bubbles: true, composed: true })];
@@ -13418,6 +14285,7 @@ class TableColumnDnD {
             __esDecorate(this, null, _handleColumnReorderChange_decorators, { kind: "method", name: "handleColumnReorderChange", static: false, private: false, access: { has: obj => "handleColumnReorderChange" in obj, get: obj => obj.handleColumnReorderChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleLazyLoadChange_decorators, { kind: "method", name: "handleLazyLoadChange", static: false, private: false, access: { has: obj => "handleLazyLoadChange" in obj, get: obj => obj.handleLazyLoadChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleColumnMenuChange_decorators, { kind: "method", name: "handleColumnMenuChange", static: false, private: false, access: { has: obj => "handleColumnMenuChange" in obj, get: obj => obj.handleColumnMenuChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleColumnFitChange_decorators, { kind: "method", name: "handleColumnFitChange", static: false, private: false, access: { has: obj => "handleColumnFitChange" in obj, get: obj => obj.handleColumnFitChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchPageChange_decorators, { kind: "method", name: "dispatchPageChange", static: false, private: false, access: { has: obj => "dispatchPageChange" in obj, get: obj => obj.dispatchPageChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchRowSelectionChanged_decorators, { kind: "method", name: "dispatchRowSelectionChanged", static: false, private: false, access: { has: obj => "dispatchRowSelectionChanged" in obj, get: obj => obj.dispatchRowSelectionChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchRowClicked_decorators, { kind: "method", name: "dispatchRowClicked", static: false, private: false, access: { has: obj => "dispatchRowClicked" in obj, get: obj => obj.dispatchRowClicked }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -13462,6 +14330,7 @@ class TableColumnDnD {
             __esDecorate(null, null, _editable_decorators, { kind: "field", name: "editable", static: false, private: false, access: { has: obj => "editable" in obj, get: obj => obj.editable, set: (obj, value) => { obj.editable = value; } }, metadata: _metadata }, _editable_initializers, _editable_extraInitializers);
             __esDecorate(null, null, _editMode_decorators, { kind: "field", name: "editMode", static: false, private: false, access: { has: obj => "editMode" in obj, get: obj => obj.editMode, set: (obj, value) => { obj.editMode = value; } }, metadata: _metadata }, _editMode_initializers, _editMode_extraInitializers);
             __esDecorate(null, null, _density_decorators, { kind: "field", name: "density", static: false, private: false, access: { has: obj => "density" in obj, get: obj => obj.density, set: (obj, value) => { obj.density = value; } }, metadata: _metadata }, _density_initializers, _density_extraInitializers);
+            __esDecorate(null, null, _columnFit_decorators, { kind: "field", name: "columnFit", static: false, private: false, access: { has: obj => "columnFit" in obj, get: obj => obj.columnFit, set: (obj, value) => { obj.columnFit = value; } }, metadata: _metadata }, _columnFit_initializers, _columnFit_extraInitializers);
             __esDecorate(null, null, _headerFilters_decorators, { kind: "field", name: "headerFilters", static: false, private: false, access: { has: obj => "headerFilters" in obj, get: obj => obj.headerFilters, set: (obj, value) => { obj.headerFilters = value; } }, metadata: _metadata }, _headerFilters_initializers, _headerFilters_extraInitializers);
             __esDecorate(null, null, _quickFilter_decorators, { kind: "field", name: "quickFilter", static: false, private: false, access: { has: obj => "quickFilter" in obj, get: obj => obj.quickFilter, set: (obj, value) => { obj.quickFilter = value; } }, metadata: _metadata }, _quickFilter_initializers, _quickFilter_extraInitializers);
             __esDecorate(null, null, _rowReorder_decorators, { kind: "field", name: "rowReorder", static: false, private: false, access: { has: obj => "rowReorder" in obj, get: obj => obj.rowReorder, set: (obj, value) => { obj.rowReorder = value; } }, metadata: _metadata }, _rowReorder_initializers, _rowReorder_extraInitializers);
@@ -13505,6 +14374,11 @@ class TableColumnDnD {
             // Wait for next frame to ensure DOM is updated
             await new Promise(resolve => requestAnimationFrame(resolve));
             this.renderHeader();
+            // The body render the columns assignment queued above can have been
+            // consumed against a not-yet-committed <tbody>. Repainting the header
+            // without the rows is what leaves a remote table showing headings over an
+            // empty frame, so this pass owns both.
+            this.renderBody();
             this.renderControls();
             return config;
         }
@@ -13534,8 +14408,7 @@ class TableColumnDnD {
                 if (response.totalItems !== undefined) {
                     this.totalItems = response.totalItems;
                 }
-                this.loadError = null;
-                this.classList.remove('table--error');
+                this.clearLoadError();
                 this.loading = false;
                 // Wait for next frame to ensure DOM is updated
                 await new Promise(resolve => requestAnimationFrame(resolve));
@@ -13554,14 +14427,49 @@ class TableColumnDnD {
                 this.loading = false;
                 // Wait for next frame to ensure DOM is updated
                 await new Promise(resolve => requestAnimationFrame(resolve));
+                // Same guard the success path applies above: a newer request can settle
+                // (and paint) inside this frame, and this failure's repaint would then be
+                // a second full body rebuild owed to nobody.
+                if (seq !== this.dataRequestSeq)
+                    return;
                 this.renderBody();
             }
         }
+        /**
+         * Requeue a body render whose target had not been committed yet. A frame is
+         * the right granularity — the shadow template commits between frames — and
+         * the paint is dropped again (silently, as before) once the retries run out.
+         *
+         * The retry CHAINS: a template that needs more than one frame to commit is
+         * the whole reason this exists, so a retry that still finds no <tbody> spends
+         * one more of the budget rather than giving the frame back and quitting.
+         */
+        rearmBodyRender() {
+            if (this.bodyRenderRetryQueued || this.bodyRenderRetries >= 3)
+                return;
+            this.bodyRenderRetryQueued = true;
+            this.bodyRenderRetries++;
+            requestAnimationFrame(() => {
+                this.bodyRenderRetryQueued = false;
+                if (this.tbody)
+                    this.renderBody();
+                else
+                    this.rearmBodyRender();
+            });
+        }
         scheduleRender(what) {
             if (what === 'header' || what === 'both')
                 this.pendingHeaderRender = true;
-            if (what === 'body' || what === 'both')
+            if (what === 'body' || what === 'both') {
                 this.pendingBodyRender = true;
+                // A NEWLY requested paint gets a fresh budget. The bound exists to stop
+                // one render from spinning against a template that structurally has no
+                // <tbody> (the slotted-rows branch), not to disqualify the table forever:
+                // without this reset, three misses during the slotted phase silently
+                // cancel every body render that follows a later flip to the native table.
+                if (!this.bodyRenderRetryQueued)
+                    this.bodyRenderRetries = 0;
+            }
             if (this.renderQueued)
                 return;
             this.renderQueued = true;
@@ -13576,14 +14484,28 @@ class TableColumnDnD {
                     const doBody = this.pendingBodyRender;
                     this.pendingHeaderRender = false;
                     this.pendingBodyRender = false;
-                    if (doHeader)
-                        this.renderHeader();
+                    try {
+                        if (doHeader)
+                            this.renderHeader();
+                    }
+                    catch (error) {
+                        // Both flags are already consumed. Letting a header failure escape
+                        // would cancel the body paint queued alongside it and leave the rows
+                        // permanently stale — the exact "header fine, rows blank" symptom.
+                        console.error('Error rendering table header:', error);
+                    }
                     if (doBody)
                         this.renderBody();
                 });
             });
         }
         debouncedDataRequest() {
+            // The supersede decision belongs to the moment the NEW request is decided
+            // on, not to the moment its timeout fires. Bumping here closes the 150ms
+            // window in which an already-obsolete in-flight response still satisfied
+            // `seq === this.dataRequestSeq` and painted rows for the previous sort /
+            // filter / page under a header that already advertises the new one.
+            this.dataRequestSeq++;
             // Set loading immediately for instant feedback
             if (!this.loading) {
                 this.loading = true;
@@ -13671,6 +14593,72 @@ class TableColumnDnD {
         /* no border or radius — handled by .table-frame */
       }
 
+      /* column-fit="squish": the frame's width is the constraint.
+       *
+       * The arithmetic (syncColumnWidthsToFrame → fitVisibleColumns) already
+       * lands the columns on the frame's content width, and fixed layout hands
+       * any rounding slack back to the columns, so the rightmost edge sits on
+       * the frame's inner edge. These rules are the guarantee behind that:
+       * hiding the horizontal overflow means a stray pixel — a sub-pixel
+       * border, a browser rounding a percentage the other way — can never turn
+       * into a scrollbar the mode promised would not appear. Vertical scrolling
+       * is untouched. */
+      :host([column-fit="squish"]) .table-frame {
+        overflow-x: hidden;
+      }
+
+      :host([column-fit="squish"]) table {
+        max-width: 100%;
+      }
+
+      /* Squished columns are narrower than their content by design, so the
+       * content has to end in an ellipsis rather than wrap the row taller (or
+       * push a word past the clip edge). */
+      :host([column-fit="squish"]) th,
+      :host([column-fit="squish"]) td {
+        white-space: nowrap;
+      }
+
+      :host([column-fit="squish"]) td > snice-cell-text,
+      :host([column-fit="squish"]) td > .custom-cell,
+      :host([column-fit="squish"]) td > .tree-label {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* The typed cells (email, status, link, phone, location, json, colour,
+       * image, actions) each declare a 100px floor on their host AND on their
+       * inner .cell-content. That floor is a sensible default at natural width
+       * and fatal here: a squished column is routinely narrower than 100px, the
+       * cell refuses to shrink to it, and the td's own overflow: hidden then
+       * chops the label mid-glyph — no ellipsis, because the element that owns
+       * the ellipsis never got small enough to trigger it.
+       *
+       * .cell-content lives in the cell's shadow root, so no descendant
+       * selector from here can reach it. A custom property can: it inherits
+       * across the boundary, the cells read it with the same 100px as the
+       * fallback, and nothing outside a squished td sees any change. */
+      :host([column-fit="squish"]) td {
+        --snice-table-cell-min-width: 0;
+      }
+
+      /* The header label is the table's own markup and needs the same promise:
+       * "Department" clipped to "Departme" reads as a different word. A
+       * sortable header puts the label in a flex row beside the sort
+       * indicator, and a flex item only shrinks below its content once it is
+       * allowed to — hence min-width: 0 alongside the ellipsis. A plain header
+       * is bare text in the th, which ellipsises on the th itself. */
+      :host([column-fit="squish"]) th {
+        text-overflow: ellipsis;
+      }
+
+      :host([column-fit="squish"]) th .sort-header > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+      }
+
       /* Super-header (slotted area above column headers) */
       .table-superheader {
         background: var(--snice-color-surface, rgb(255 255 255));
@@ -13793,9 +14781,13 @@ class TableColumnDnD {
         background-color: var(--snice-color-surface-container-low, rgb(245 245 245));
       }
 
-      /* Row styling */
+      /* Row styling. The zebra tint is an ALPHA overlay, not a surface step:
+         surface-container-low sits ~2 luminance points from the body surface
+         on dark themes, so striped rendered as no striping at all there.
+         An overlay also composites over pinned/tinted cells instead of
+         replacing their color. */
       :host([striped]) tbody tr:nth-child(even) {
-        background-color: var(--snice-color-surface-container-low, rgb(245 245 245));
+        background-color: var(--snice-table-stripe-bg, var(--snice-color-overlay-stripe, hsl(0 0% 0% / 0.02)));
       }
 
       :host([hoverable]) tbody tr:hover {
@@ -14059,12 +15051,14 @@ class TableColumnDnD {
         justify-content: center;
       }
 
-      /* Loading fade */
-      tbody {
+      /* Loading fade. Scoped to ROWS, never the whole tbody: with no rows the
+         only thing in there is the loading indicator, and dimming that halves
+         the contrast of the one element whose entire job is to be seen. */
+      tbody > tr {
         transition: opacity var(--snice-transition-normal, 250ms);
       }
 
-      :host([loading]) tbody {
+      :host([loading]) tbody > tr:not(.table-message-row) {
         opacity: 0.5;
       }
 
@@ -14079,6 +15073,33 @@ class TableColumnDnD {
         z-index: 2;
       }
 
+      /* Zero-row loading: spinner + the word, centred in the empty body. */
+      .table-loading-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--snice-spacing-xs, 0.5rem);
+        color: var(--snice-color-text-secondary, rgb(82 82 82));
+      }
+
+      .table-loading-label {
+        font-size: var(--snice-font-size-sm, 0.875rem);
+        line-height: 1;
+      }
+
+      /* snice-progress draws its circular track at 20% alpha, which disappears
+         entirely on a dark surface — the ring the field report saw was a
+         near-black hairline on near-black. Both table spinners opt out and use
+         the border token at full strength, so the track reads in either
+         theme and the primary arc always has something to travel around. */
+      .table-loading-state snice-progress,
+      .table-loading-overlay snice-progress {
+        --progress-track-opacity: 1;
+        --progress-bg: var(--snice-color-border, rgb(226 226 226));
+        --progress-color: var(--snice-color-primary, rgb(37 99 235));
+      }
+
       .no-data {
         text-align: center;
         padding: var(--snice-spacing-lg, 1.5rem);
@@ -14220,10 +15241,58 @@ class TableColumnDnD {
         background: var(--snice-color-primary, rgb(37 99 235));
       }
 
-      /* Pinned column separator */
+      /* Pinned columns.
+
+         A frozen column must be opaque — scrolled cells pass underneath it —
+         and a header keeps the header's own surface rather than borrowing the
+         body's. The frozen EDGE (the inner-most pinned column on each side) is
+         what the reader actually needs to see: a heavier divider plus a soft
+         shadow cast INTO the scrolling region, mirrored per side. Between two
+         columns pinned to the same side there is no boundary to mark, so they
+         keep the ordinary cell border.
+
+         The shadow is a border-token tint, not black: a black drop shadow is
+         invisible against a dark surface, which is exactly how pinning came to
+         have no affordance at all in the dark theme. */
       .pinned-cell {
         background: var(--snice-color-surface, rgb(255 255 255));
-        box-shadow: 2px 0 4px -1px rgb(0 0 0 / 0.1);
+      }
+
+      th.pinned-cell {
+        background: var(--snice-color-surface-container-low, rgb(245 245 245));
+      }
+
+      .pinned-cell--left.pinned-cell--edge {
+        border-right: 2px solid var(--snice-color-border, rgb(226 226 226));
+        box-shadow: 6px 0 8px -6px var(--snice-color-border, rgb(226 226 226));
+      }
+
+      .pinned-cell--right.pinned-cell--edge {
+        border-left: 2px solid var(--snice-color-border, rgb(226 226 226));
+        box-shadow: -6px 0 8px -6px var(--snice-color-border, rgb(226 226 226));
+      }
+
+      /* A right-pinned header is often the last cell in the row, where the
+         shared rule above strips the right border. Its divider is on the left,
+         so nothing to restore — but the edge border must survive that rule. */
+      th:last-child.pinned-cell--right.pinned-cell--edge,
+      td:last-child.pinned-cell--right.pinned-cell--edge {
+        border-right: none;
+      }
+
+      /* Pin marker: the only cue when the table is wide enough not to scroll. */
+      .pin-indicator {
+        display: inline-flex;
+        align-items: center;
+        margin-left: var(--snice-spacing-2xs, 0.25rem);
+        color: var(--snice-color-text-secondary, rgb(82 82 82));
+        opacity: 0.65;
+        vertical-align: middle;
+        pointer-events: none;
+      }
+
+      .pin-indicator--right {
+        transform: scaleX(-1);
       }
 
       /* Density: compact */
@@ -14646,7 +15715,7 @@ class TableColumnDnD {
       }
 
       :host([striped]) .snice-table--slotted .table-body::slotted(snice-row:nth-child(even)) {
-        background-color: var(--snice-color-surface-container-low, rgb(245 245 245));
+        background-color: var(--snice-table-stripe-bg, var(--snice-color-overlay-stripe, hsl(0 0% 0% / 0.02)));
       }
 
       :host([hoverable]) .snice-table--slotted .table-body::slotted(snice-row:hover) {
@@ -14752,9 +15821,18 @@ class TableColumnDnD {
             }
             container.appendChild(controlsDiv);
         }
-        // Re-derive the fill row whenever the frame's box changes (host resized,
-        // fullscreen toggled) — the leftover space below the rows changes with it.
+        // Re-derive the frame-dependent layout whenever the frame's box changes
+        // (host resized, fullscreen toggled): the columns share its width, and the
+        // leftover space below the rows changes with its height.
         handleFrameResize() {
+            // Only when the width actually moved. Fitting rewrites header widths, which
+            // can change row heights, which can flip the frame's vertical scrollbar and
+            // call us straight back — the guard stops that becoming a cycle.
+            const width = this.shadowRoot?.querySelector('.table-frame')?.clientWidth ?? 0;
+            if (width > 0 && width !== this.lastFittedFrameWidth) {
+                this.lastFittedFrameWidth = width;
+                this.syncColumnWidthsToFrame();
+            }
             this.updateFillRow();
         }
         async initialize() {
@@ -14857,7 +15935,18 @@ class TableColumnDnD {
                     }
                 }
                 this.data.splice(toIndex, 0, item);
-                this.data = [...this.data];
+                // Reordering the SAME rows is not a delivery: a failed reload keeps its
+                // error until data actually arrives, so a drag must not dismiss it.
+                // Everything else the data watcher does (row index, detail prep, render)
+                // is still wanted here — hence a narrow flag rather than
+                // `settingSortedData`, which skips all of it.
+                this.reorderingRows = true;
+                try {
+                    this.data = [...this.data];
+                }
+                finally {
+                    this.reorderingRows = false;
+                }
                 this.selectedRows = selectedRows
                     .map((row) => this.indexOfRow(row))
                     .filter((index) => index >= 0);
@@ -14971,7 +16060,17 @@ class TableColumnDnD {
             this.renderHeader(); // Re-render header to show/hide sort indicators
         }
         handleSelectableChange() {
-            this.render(); // Re-render both header and body for checkbox columns
+            this.render(); // host template (the structural mode can change)
+            // The checkbox tool column is structural: like the sibling selection-mode
+            // watcher, a post-mount toggle has to rebuild the header (select-all th)
+            // AND every row (row checkbox) — the host template render leaves the
+            // imperatively built thead/tbody untouched, so without this the two
+            // disagree and every data cell sits one column off its header. Rows are
+            // never recycled stale across the toggle: computeStructuralSig folds in
+            // `sel=`. Skipped before the first render — the initial paint reads
+            // `selectable` itself.
+            if (this.thead)
+                this.scheduleRender('both');
             queueMicrotask(() => this.syncSlottedSelectionState());
         }
         // C1: reactive columns. A new column set can change cell types/formatting
@@ -14980,8 +16079,12 @@ class TableColumnDnD {
         // construction is deferred to the coalescing queue (setter-stack landmine).
         handleColumnsAssignment() {
             this.renderedRows = new Map();
+            // A new array is a NEW CONFIGURATION: its order / pinned / width / declared
+            // set replace whatever the column model is holding, and states for columns
+            // it no longer declares are dropped. initialize() is the render-path resync
+            // that must NOT do this (it would undo a drag-resize on every paint).
             if (this.columns.length > 0)
-                this.columnManager.initialize(this.columns, this);
+                this.columnManager.applyConfiguration(this.columns, this);
             // F: a column set change can add/remove an `aggregate` — resync the grouping
             // model's aggregator list and drop its stale flattened snapshot.
             this.grouping.setColumns(this.columns);
@@ -15054,9 +16157,21 @@ class TableColumnDnD {
         // and the row-index map, then renders the body. The internal sort path
         // (sortLocalData) reassigns this.data with a re-sorted view of the SAME rows
         // and owns its own snapshot/render — settingSortedData tells us to skip.
-        handleDataAssignment() {
+        handleDataAssignment(oldVal) {
             if (this.settingSortedData)
                 return;
+            // A load error describes the LAST delivery ATTEMPT, so a dataset arriving
+            // from any source supersedes it — including the app falling back to local
+            // rows (or to none) after the remote load failed. Clearing it only on the
+            // remote success path left `loadError` and the `table--error` host class
+            // alive forever, so the next zero-row render showed the stale ⚠️ where the
+            // empty state belonged.
+            //
+            // A REORDER is not an arrival: the row-reorder handler republishes the same
+            // rows in a new array, and dragging a row must not dismiss the ⚠️ the
+            // contract says survives until data actually arrives.
+            if (!this.reorderingRows)
+                this.clearLoadError();
             this.unsortedData = [...this.data];
             // C3: rows delivered while a client-side sort is active must land in that
             // sorted order — the currentSort watcher only fires when the sort itself
@@ -15065,11 +16180,25 @@ class TableColumnDnD {
             if (this.mode !== 'remote' && this.currentSort.length > 0)
                 this.applyLocalSortOrder();
             this.rebuildRowIndex();
+            // Re-delivering the SAME rows in a different order must not move the
+            // selection to whatever row inherited the index (no-op for a new dataset).
+            if (oldVal)
+                this.remapSelectionAfterReorder(oldVal);
             this.masterDetail.prepare(this.data, row => this.rowValueSignature(row));
             if (this.settingDataImperative)
                 return; // imperative setData(): caller renders
             this.scheduleRender('body');
         }
+        /**
+         * Drop the failed-load state: the ⚠️ message row's text and the `table--error`
+         * host class always move together, so they are cleared together and from one
+         * place. Idempotent, and deliberately does NOT render — every caller is either
+         * mid-delivery (the data watcher renders) or already renders itself.
+         */
+        clearLoadError() {
+            this.loadError = null;
+            this.classList.remove('table--error');
+        }
         handleDataChange() {
             this.renderBody();
             this.updateLoadingOverlay();
@@ -15089,11 +16218,12 @@ class TableColumnDnD {
                 overlay = document.createElement('div');
                 overlay.className = 'table-loading-overlay';
                 overlay.setAttribute('part', 'loading-overlay');
-                const spinner = document.createElement('snice-progress');
-                spinner.setAttribute('variant', 'circular');
-                spinner.setAttribute('indeterminate', '');
-                spinner.setAttribute('size', 'small');
-                overlay.appendChild(spinner);
+                // The overlay sits ON TOP of readable rows, so it carries its label as
+                // an aria-label rather than visible text — but it must still announce.
+                overlay.setAttribute('role', 'status');
+                overlay.setAttribute('aria-live', 'polite');
+                overlay.setAttribute('aria-label', LOADING_LABEL);
+                overlay.appendChild(this.createLoadingSpinner('medium'));
                 frame.appendChild(overlay);
             }
             else if (!show && overlay) {
@@ -15156,11 +16286,26 @@ class TableColumnDnD {
                 this.sortLocalData();
         }
         handleCurrentPageChange() {
+            // A clamp written by the display model itself is not a navigation — see
+            // clampCurrentPage().
+            if (this.clampingPage)
+                return;
             if (this.paginationMode === 'server' && this.mode === 'remote')
                 this.debouncedDataRequest();
             else
                 this.scheduleRender('body');
         }
+        clampCurrentPage(page) {
+            if (page === this.currentPage)
+                return;
+            this.clampingPage = true;
+            try {
+                this.currentPage = page;
+            }
+            finally {
+                this.clampingPage = false;
+            }
+        }
         handlePageSizeChange() {
             this.currentPage = 1;
             if (this.paginationMode === 'server' && this.mode === 'remote')
@@ -15176,7 +16321,9 @@ class TableColumnDnD {
         }
         handleListChange() {
             this.renderedRows = new Map();
-            this.scheduleRender('body');
+            // The header is part of the mode: entering list mode with a renderer drops
+            // the columnar header, and leaving it must bring the header back.
+            this.scheduleRender('both');
         }
         handleEditableChange() {
             if (this.editable)
@@ -15234,6 +16381,17 @@ class TableColumnDnD {
                 this.initColumnMenu();
             this.scheduleRender('header');
         }
+        /**
+         * Switching fit policy re-decides every unsized column's width, so the frame
+         * has to be re-fitted from scratch: the cached width would otherwise make the
+         * resize observer's "did the frame move?" guard swallow the very next pass.
+         */
+        handleColumnFitChange() {
+            this.columnManager.setFitMode(this.columnFit);
+            this.lastFittedFrameWidth = 0;
+            this.syncColumnWidthsToFrame();
+            this.scheduleRender('header');
+        }
         /** Column definitions in their actual painted order. Column state owns
          * visibility/order; pinned columns are partitioned to their physical edges
          * so right-pinned cells do not overlap later unpinned columns. */
@@ -15250,9 +16408,124 @@ class TableColumnDnD {
                 .map((state) => byKey.get(state.key))
                 .filter((column) => !!column);
         }
+        /**
+         * Cells one full-width row spans: every visible data column plus the tool
+         * columns that precede them. Group, aggregate, detail, empty-state, and
+         * virtual-spacer rows all measure themselves against this — a row that spans
+         * MORE than the table has invents columns, and `table-layout: fixed` then
+         * spends the frame's leftover width on the phantoms.
+         */
+        getTotalColumnSpan() {
+            const managed = this.columnManager.getAllStates();
+            const dataColumns = managed.length > 0
+                ? this.columnManager.getVisibleColumns().length
+                : this.columns.length;
+            return dataColumns
+                + (this.hasSelectionColumn() ? 1 : 0)
+                + (this.masterDetail.isEnabled() ? 1 : 0)
+                + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
+        }
+        /**
+         * Re-fit the columns nobody sized to the frame they are painted in.
+         *
+         * A column width is a CONTENT width, so the frame's budget has to be reduced
+         * by each column's own padding + border and by the fixed tool columns before
+         * it can be shared out. Both are read off the live header — the previous
+         * render's, on the first pass — rather than guessed, so the fitted table
+         * lands on the frame's width instead of a few pixels past it.
+         *
+         * Widths are written straight onto the header cells: under fixed layout the
+         * first row owns the column grid, so no body repaint is needed and this can
+         * run inside a resize observer without a render cascade.
+         */
+        syncColumnWidthsToFrame() {
+            // The policy is the table's, the arithmetic is the manager's: hand it over
+            // before every fit so a `columnFit` change is honoured on the next pass
+            // whether it arrived as a property, an attribute, or an upgrade.
+            this.columnManager.setFitMode(this.columnFit);
+            const frame = this.shadowRoot?.querySelector('.table-frame');
+            const headerRow = this.shadowRoot?.querySelector('thead tr.column-header-row');
+            if (!frame || !headerRow)
+                return false;
+            const available = frame.clientWidth;
+            // Layoutless DOM (or a display:none host): every measurement is 0 and
+            // fitting to it would slam the columns to their minimums for nothing.
+            if (!(available > 0))
+                return false;
+            const dataCells = Array.from(headerRow.querySelectorAll('th[data-key]'));
+            // An active list renderer drops the columnar header entirely; there is no
+            // column geometry to fit and no cell to measure the chrome from.
+            if (dataCells.length === 0)
+                return false;
+            let reserved = 0;
+            for (const cell of Array.from(headerRow.children)) {
+                if (!cell.hasAttribute('data-key'))
+                    reserved += cell.getBoundingClientRect().width;
+            }
+            const chrome = horizontalCellChrome(dataCells[0]);
+            if (!this.columnManager.fitVisibleColumns(available - reserved, chrome))
+                return false;
+            for (const cell of dataCells) {
+                const state = this.columnManager.getState(cell.getAttribute('data-key') || '');
+                if (state)
+                    cell.style.width = `${state.width}px`;
+            }
+            return true;
+        }
+        /**
+         * Sticky geometry plus the visible affordance for a pinned cell.
+         *
+         * Freezing a column is only communicated if the reader can see where the
+         * frozen region ends, so the inner-most pinned column on each side carries
+         * the divider (`--edge`); the header additionally carries a pin marker, which
+         * is the only cue when the table happens to be wide enough not to scroll.
+         */
+        applyPinnedCell(cell, key, state, zIndex) {
+            if (state.pinned !== 'left' && state.pinned !== 'right')
+                return;
+            const side = state.pinned;
+            const columns = side === 'left'
+                ? this.columnManager.getPinnedLeft()
+                : this.columnManager.getPinnedRight();
+            const offsets = side === 'left'
+                ? this.columnManager.getPinnedLeftOffsets()
+                : this.columnManager.getPinnedRightOffsets();
+            // The edge of the frozen region: the last left-pinned column, the first
+            // right-pinned one. Inner boundaries between two pinned columns are just
+            // ordinary cell borders.
+            const edgeKey = side === 'left' ? columns[columns.length - 1]?.key : columns[0]?.key;
+            cell.classList.add('pinned-cell', `pinned-cell--${side}`);
+            if (key === edgeKey)
+                cell.classList.add('pinned-cell--edge');
+            cell.style.position = 'sticky';
+            cell.style[side] = `${offsets.get(key) ?? 0}px`;
+            cell.style.zIndex = zIndex;
+        }
+        /** The pin marker a frozen header carries, so pinning reads at any width. */
+        static pinIndicator(side) {
+            return `<span class="pin-indicator pin-indicator--${side}" aria-hidden="true">`
+                + `<svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor">`
+                + `<path d="M9.5 1a1 1 0 0 0-.7 1.7l.3.3-3 3-2.4-.5a1 1 0 0 0-.9 1.7l3 3-3.6 3.6a.6.6 0 0 0 .8.8L6.6 12l3 3a1 1 0 0 0 1.7-.9l-.5-2.4 3-3 .3.3a1 1 0 0 0 1.4-1.4l-5.3-5.3A1 1 0 0 0 9.5 1Z"/>`
+                + `</svg></span>`;
+        }
+        /**
+         * List mode is only "list mode" once a renderer is installed: `list` alone is
+         * a border treatment and still paints normal columnar cells. With a renderer
+         * every row collapses to one full-width cell, so there is no column geometry
+         * left for a header to label.
+         */
+        usesListRowRenderer() {
+            return !!(this.list && this.listRenderer);
+        }
         renderHeader() {
             if (!this.thead)
                 return;
+            // A card/directory list has no columns, so a columnar header would promise
+            // fields that align with nothing. Suppress the data-column headers (and the
+            // equally columnar group and header-filter rows) while a list renderer is
+            // active; the tool columns below still have real body cells to head, so
+            // select-all is kept rather than lost as collateral.
+            const listRows = this.usesListRowRenderer();
             const headerRow = document.createElement('tr');
             headerRow.className = 'column-header-row';
             // Tool column headers — must match createRow order
@@ -15290,7 +16563,7 @@ class TableColumnDnD {
                 }
                 headerRow.appendChild(selectCell);
             }
-            const visibleColumns = this.getVisibleColumnDefinitions();
+            const visibleColumns = listRows ? [] : this.getVisibleColumnDefinitions();
             visibleColumns.forEach(column => {
                 const th = document.createElement('th');
                 th.setAttribute('data-key', column.key);
@@ -15307,23 +16580,10 @@ class TableColumnDnD {
                 }
                 // Apply column width
                 const state = this.columnManager.getState(column.key);
+                const pinnedSide = state?.pinned === 'left' || state?.pinned === 'right' ? state.pinned : null;
                 if (state) {
                     th.style.width = `${state.width}px`;
-                    // Pinned column sticky positioning
-                    if (state.pinned === 'left') {
-                        const offsets = this.columnManager.getPinnedLeftOffsets();
-                        th.classList.add('pinned-cell');
-                        th.style.position = 'sticky';
-                        th.style.left = `${offsets.get(column.key) ?? 0}px`;
-                        th.style.zIndex = '2';
-                    }
-                    else if (state.pinned === 'right') {
-                        const offsets = this.columnManager.getPinnedRightOffsets();
-                        th.classList.add('pinned-cell');
-                        th.style.position = 'sticky';
-                        th.style.right = `${offsets.get(column.key) ?? 0}px`;
-                        th.style.zIndex = '2';
-                    }
+                    this.applyPinnedCell(th, column.key, state, '2');
                 }
                 if (this.sortable && column.sortable !== false) {
                     th.classList.add('sortable');
@@ -15331,11 +16591,22 @@ class TableColumnDnD {
                     // A role=button must be focusable and named, or the keyboard cannot
                     // sort at all. Matches the declarative header in snice-header.ts.
                     th.setAttribute('tabindex', '0');
-                    th.setAttribute('aria-label', `Sort by ${column.label}`);
+                    // Frozen columns say so: the divider is a visual cue only.
+                    th.setAttribute('aria-label', pinnedSide
+                        ? `Sort by ${column.label}, pinned ${pinnedSide}`
+                        : `Sort by ${column.label}`);
                     th.innerHTML = this.renderSortableHeader(column);
                 }
                 else {
                     th.textContent = column.label;
+                    if (pinnedSide)
+                        th.setAttribute('aria-label', `${column.label}, pinned ${pinnedSide}`);
+                }
+                if (pinnedSide) {
+                    // Inside the label, not after it: `.sort-header` is a full-width flex
+                    // row, so a sibling would be pushed onto a second line.
+                    const label = th.querySelector('.sort-header > span') ?? th;
+                    label.insertAdjacentHTML('beforeend', SniceTable.pinIndicator(pinnedSide));
                 }
                 // Filter indicator
                 if (this.filterEngine.hasColumnFilter(column.key)) {
@@ -15388,7 +16659,7 @@ class TableColumnDnD {
             });
             this.thead.innerHTML = '';
             // Column groups header row (if any)
-            const groups = this.columnManager.getColumnGroups();
+            const groups = listRows ? [] : this.columnManager.getColumnGroups();
             if (groups.length > 0) {
                 const groupRow = document.createElement('tr');
                 groupRow.className = 'column-group-row';
@@ -15410,9 +16681,12 @@ class TableColumnDnD {
                 groupRow.appendChild(groupedHeaders.content);
                 this.thead.appendChild(groupRow);
             }
-            this.thead.appendChild(headerRow);
+            // A list-mode header row with no tool columns has nothing to show; leaving
+            // it out keeps the thead empty so it paints no strip above the cards.
+            if (!listRows || headerRow.children.length > 0)
+                this.thead.appendChild(headerRow);
             // Header filter row (if enabled)
-            if (this.headerFilters) {
+            if (this.headerFilters && !listRows) {
                 const filterRow = document.createElement('tr');
                 filterRow.className = 'header-filter-row';
                 if (this.rowReorder && this.rowDnD.isEnabled()) {
@@ -15449,6 +16723,11 @@ class TableColumnDnD {
                 });
                 this.thead.appendChild(filterRow);
             }
+            // The header is in the DOM, so its real chrome and tool-column widths are
+            // measurable: fit the unsized columns to the frame before the browser
+            // paints. Widths land on the header cells that were just created, so this
+            // never re-enters renderHeader.
+            this.syncColumnWidthsToFrame();
         }
         renderSortableHeader(column) {
             const sortItem = this.currentSort.find(s => s.column === column.key);
@@ -15480,9 +16759,90 @@ class TableColumnDnD {
       </div>
     `;
         }
+        /**
+         * The single message row a zero-row body shows: loading spinner, load error,
+         * or the empty state (the `empty-state` slot cloned fresh, else the default
+         * placeholder). Returns null when there is data to render. Shared by the
+         * ordinary and virtualized paths — the virtualizer wipes the tbody itself, so
+         * it asks for this row rather than leaving a virtualized empty table blank.
+         */
+        /**
+         * The spinner both loading affordances draw. `snice-progress` paints its
+         * track at 20% alpha, which vanishes against a dark surface — the table pins
+         * `--progress-track-opacity` in its own stylesheet so the ring reads on any
+         * theme; the indicator arc keeps the primary color.
+         */
+        createLoadingSpinner(size) {
+            const spinner = document.createElement('snice-progress');
+            spinner.setAttribute('variant', 'circular');
+            spinner.setAttribute('indeterminate', '');
+            spinner.setAttribute('size', size);
+            return spinner;
+        }
+        createEmptyBodyRow() {
+            if (this.data.length > 0 || this.columns.length === 0)
+                return null;
+            const toolCols = (this.hasSelectionColumn() ? 1 : 0)
+                + (this.masterDetail.isEnabled() ? 1 : 0)
+                + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
+            const tr = document.createElement('tr');
+            tr.className = 'table-message-row';
+            const td = document.createElement('td');
+            td.colSpan = this.columns.length + toolCols;
+            td.className = 'no-data';
+            tr.appendChild(td);
+            if (this.loading) {
+                // A bare ring in an otherwise empty rectangle reads as a rendering
+                // artefact, not as "we are fetching your rows": at `small` it is 24px of
+                // low-contrast stroke with nothing naming it. The zero-row body has the
+                // space for a full-size spinner AND the word, and the pair is what makes
+                // the state legible — visually and to a screen reader.
+                const status = document.createElement('div');
+                status.className = 'table-loading-state';
+                status.setAttribute('role', 'status');
+                status.setAttribute('aria-live', 'polite');
+                status.appendChild(this.createLoadingSpinner('medium'));
+                const label = document.createElement('span');
+                label.className = 'table-loading-label';
+                label.textContent = LOADING_LABEL;
+                status.appendChild(label);
+                td.appendChild(status);
+            }
+            else if (this.loadError) {
+                // Surfaces a failed remote load instead of silently falling through to
+                // the generic "No data" empty state.
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'table-error-message';
+                errorDiv.textContent = `⚠️ ${this.loadError}`;
+                td.appendChild(errorDiv);
+            }
+            else {
+                const slotted = this.querySelector('[slot="empty-state"]');
+                if (slotted) {
+                    td.appendChild(slotted.cloneNode(true));
+                }
+                else {
+                    const empty = document.createElement('snice-empty-state');
+                    empty.setAttribute('size', 'small');
+                    empty.setAttribute('icon', '📭');
+                    empty.setAttribute('title', 'No data');
+                    empty.setAttribute('description', 'No records to display.');
+                    td.appendChild(empty);
+                }
+            }
+            return tr;
+        }
         renderBody() {
-            if (!this.tbody)
+            // The queue flush consumed `pendingBodyRender` before calling us, so a body
+            // render that arrives while the shadow template has not committed its
+            // <tbody> (a `table/config` response landing before @ready, a structural
+            // branch flip mid-flight) would simply vanish — the header repaints and the
+            // rows stay stale forever. Re-arm it for the next frame instead.
+            if (!this.tbody) {
+                this.rearmBodyRender();
                 return;
+            }
+            this.bodyRenderRetries = 0;
             // Update column manager when columns change
             if (this.columns.length > 0) {
                 this.columnManager.initialize(this.columns, this);
@@ -15514,8 +16874,7 @@ class TableColumnDnD {
             // NOT the raw filtered data — otherwise the virtualizer windows the wrong
             // dataset and expand/collapse silently no-ops.
             if (this.virtualize && this.virtualizer.isEnabled()) {
-                this.virtualRowsSnapshot = this.getVirtualRows();
-                this.virtualizer.setTotalRows(this.virtualRowsSnapshot.length);
+                this.syncVirtualRows();
                 // The virtualizer's afterRender hook re-establishes grid ARIA/focus on
                 // the freshly inserted window.
                 // Still render pagination
@@ -15524,64 +16883,15 @@ class TableColumnDnD {
                 this.updateSelectAllState();
                 return;
             }
-            if (this.data.length === 0 && this.columns.length > 0) {
+            const emptyBodyRow = this.createEmptyBodyRow();
+            if (emptyBodyRow) {
                 // Empty / loading / error states replace the body with a single message
                 // row. Reset the recycler map so a later data render starts from a clean
                 // slate (no stale reuse candidates pointing at removed rows).
                 this.tbody.innerHTML = '';
                 this.renderedRows = new Map();
-                const toolCols = (this.hasSelectionColumn() ? 1 : 0)
-                    + (this.masterDetail.isEnabled() ? 1 : 0)
-                    + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
-                const colSpan = this.columns.length + toolCols;
-                if (this.loading) {
-                    // Show loading spinner
-                    const tr = document.createElement('tr');
-                    const td = document.createElement('td');
-                    td.colSpan = colSpan;
-                    td.className = 'no-data';
-                    td.innerHTML = '<snice-progress variant="circular" indeterminate size="small"></snice-progress>';
-                    tr.appendChild(td);
-                    this.tbody.appendChild(tr);
-                    return;
-                }
-                else if (this.loadError) {
-                    // Show error state — surfaces a failed remote load instead of
-                    // silently falling through to the generic "No data" empty state.
-                    const tr = document.createElement('tr');
-                    const td = document.createElement('td');
-                    td.colSpan = colSpan;
-                    td.className = 'no-data';
-                    const errorDiv = document.createElement('div');
-                    errorDiv.className = 'table-error-message';
-                    errorDiv.textContent = `⚠️ ${this.loadError}`;
-                    td.appendChild(errorDiv);
-                    tr.appendChild(td);
-                    this.tbody.appendChild(tr);
-                    return;
-                }
-                else {
-                    // Show empty state
-                    const tr = document.createElement('tr');
-                    const td = document.createElement('td');
-                    td.colSpan = colSpan;
-                    td.className = 'no-data';
-                    const slotted = this.querySelector('[slot="empty-state"]');
-                    if (slotted) {
-                        td.appendChild(slotted.cloneNode(true));
-                    }
-                    else {
-                        const empty = document.createElement('snice-empty-state');
-                        empty.setAttribute('size', 'small');
-                        empty.setAttribute('icon', '📭');
-                        empty.setAttribute('title', 'No data');
-                        empty.setAttribute('description', 'No records to display.');
-                        td.appendChild(empty);
-                    }
-                    tr.appendChild(td);
-                    this.tbody.appendChild(tr);
-                    return;
-                }
+                this.tbody.appendChild(emptyBodyRow);
+                return;
             }
             // Apply client-side filters (cached snapshot — see getFilteredData).
             const filteredData = this.getFilteredData();
@@ -15593,15 +16903,23 @@ class TableColumnDnD {
             if (this.pagination && this.paginationMode === 'client'
                 && !this.usesGroupingDisplayModel() && !this.treeData.isEnabled()) {
                 this.totalItems = filteredData.length;
-                const startIndex = (this.currentPage - 1) * this.pageSize;
+                // Re-clamp before slicing. A shorter re-delivery (or a filter) can leave
+                // `currentPage` past the new last page; slicing at the stale offset lands
+                // off the end and renders an EMPTY body while the pager still advertises
+                // the tail rows — blank until the user clicks a page button. Same
+                // [1, totalPages] clamp goToPage() applies, and the same one the grouping
+                // and tree display models already do before their own slice.
+                // An empty set is left alone: a render before the rows arrive must not
+                // rewrite the host's declared starting page.
+                const totalPages = filteredData.length > 0
+                    ? Math.ceil(filteredData.length / this.pageSize)
+                    : this.currentPage;
+                const page = Math.max(1, Math.min(this.currentPage, totalPages));
+                this.clampCurrentPage(page);
+                const startIndex = (page - 1) * this.pageSize;
                 displayData = filteredData.slice(startIndex, startIndex + this.pageSize);
             }
-            const extraCols = (this.hasSelectionColumn() ? 1 : 0) + (this.masterDetail.isEnabled() ? 1 : 0) + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
-            const managedColumns = this.columnManager.getAllStates();
-            const visibleColumnCount = managedColumns.length > 0
-                ? this.columnManager.getVisibleColumns().length
-                : this.columns.length;
-            const totalColSpan = visibleColumnCount + extraCols;
+            const totalColSpan = this.getTotalColumnSpan();
             const structuralSig = this.computeStructuralSig();
             // Task B: describe the desired body as an ordered list of keyed entries,
             // then reconcile the tbody to match. Rows whose object + signature are
@@ -15697,6 +17015,19 @@ class TableColumnDnD {
                         restampIndex: index,
                         create: () => this.createRow(rowData, index, treeRow),
                     });
+                    // Tree data must compose with master-detail exactly like the ordinary
+                    // and grouping paths: createRow renders the toggle for every tree row,
+                    // so omitting this entry left that control inert. Generated gap nodes
+                    // (index -1) carry no data row and therefore no panel.
+                    if (index >= 0 && this.masterDetail.isEnabled() && this.masterDetail.isExpanded(index)) {
+                        entries.push({
+                            key: `__detail_${index}`,
+                            sig: 'detail',
+                            alwaysRebuild: true,
+                            create: () => this.masterDetail.createDetailRow(rowData, index, totalColSpan) ??
+                                document.createElement('tr'),
+                        });
+                    }
                 });
             }
             else {
@@ -15754,6 +17085,20 @@ class TableColumnDnD {
          * data row, so column widths, pinning, and alignment track the table
          * engine natively. Removed entirely when content fills (or overflows) the
          * frame, restoring the plain last-row styling.
+         *
+         * INVARIANT — the filler may only consume space the frame ALREADY has; space
+         * that exists only BECAUSE of the filler must be given back. The filler is
+         * table content, and `@observe('resize', '.table-frame')` re-derives it from
+         * the frame's box, so on a host whose height is content-driven (the
+         * documented `:host { height: 100% }` resolving against an auto or
+         * max-content container — a stretched grid/flex item, a plain block parent)
+         * the filler is an input to the very measurement that produced it: the frame
+         * grows, the observer fires, the leftover computes positive again, and the
+         * table inflates by one slack per animation frame without bound. No static
+         * check distinguishes a content-driven frame from a genuinely sized one, so
+         * this measures instead: apply the filler, then confirm the frame kept its
+         * height. Any growth is self-inflicted and is subtracted from the filler;
+         * once nothing honest is left, the frame had no free space to fill at all.
          */
         updateFillRow() {
             const frame = this.shadowRoot?.querySelector('.table-frame');
@@ -15768,22 +17113,45 @@ class TableColumnDnD {
             const lastRow = rows[rows.length - 1];
             if (!lastRow)
                 return;
-            const leftover = Math.floor(frame.clientHeight - tableEl.offsetHeight);
+            // Baseline: the frame's height with no filler of ours in the box. Every
+            // later reading is compared against it, so the correction below can never
+            // hand back more than the filler itself created.
+            const baseline = frame.clientHeight;
+            let leftover = Math.floor(baseline - tableEl.offsetHeight);
             if (leftover <= 1)
                 return;
             const fill = lastRow.cloneNode(true);
             fill.className = 'table-fill-row';
-            for (const attr of ['data-index', 'data-selected', 'role', 'aria-rowindex', 'aria-selected', 'tabindex', 'id']) {
+            // `part` goes with the rest of the row identity: the filler is not "each
+            // native body row", so a consumer's ::part(row)/::part(cell) rule must not
+            // paint a phantom row across it.
+            for (const attr of ['data-index', 'data-selected', 'role', 'aria-rowindex', 'aria-selected', 'tabindex', 'id', 'part']) {
                 fill.removeAttribute(attr);
             }
             fill.setAttribute('aria-hidden', 'true');
             fill.querySelectorAll('td').forEach(td => {
                 td.replaceChildren();
-                for (const attr of ['role', 'aria-colindex', 'tabindex', 'aria-selected'])
+                for (const attr of ['role', 'aria-colindex', 'tabindex', 'aria-selected', 'part'])
                     td.removeAttribute(attr);
             });
             fill.style.height = `${leftover}px`;
             tbody.appendChild(fill);
+            // Feedback check. Reading `clientHeight` flushes layout, so each pass sees
+            // the frame as it stands WITH the filler in it. A frame that kept its
+            // baseline is genuinely sized and the filler stays; growth means the frame
+            // is (partly) sized by its own content, so give exactly that back. Two
+            // corrections settle every real case — a fully self-made leftover reaches
+            // zero on the first — and the bounded loop guarantees termination.
+            for (let attempt = 0; attempt < 3; attempt++) {
+                const selfMade = frame.clientHeight - baseline;
+                if (selfMade <= 0)
+                    return;
+                leftover -= selfMade;
+                if (leftover <= 1)
+                    break;
+                fill.style.height = `${leftover}px`;
+            }
+            fill.remove();
         }
         // ── Task B: render-path reconciler ──────────────────────────────────────
         //
@@ -15941,7 +17309,7 @@ class TableColumnDnD {
         restampRowIndex(el, index) {
             el.setAttribute('data-index', String(index));
             const isSelected = this.selectedRows.includes(index);
-            el.setAttribute('data-selected', String(isSelected));
+            this.stampRowSelection(el, isSelected);
             const checkbox = el.querySelector('snice-checkbox.row-select');
             if (checkbox) {
                 checkbox.setAttribute('data-row-index', String(index));
@@ -16128,24 +17496,30 @@ class TableColumnDnD {
                 span.textContent = rendered == null ? '' : String(rendered);
                 return span;
             }
-            const tagName = this.getCellTagName(column.type);
+            // A declared display formatter resolves the whole pipeline here — the
+            // documented precedence is `formatter` first, `valueFormatter` as the
+            // fallback — and its output is TEXT, so the column renders through the text
+            // cell: a rating/progress/link/boolean cell cannot carry a display string
+            // (its value channel is typed) and renders structure rather than text. This
+            // is the rule the declarative <snice-row> path already uses.
+            const displayText = this.cellDisplayText(column, value, row);
+            const tagName = displayText === null ? this.getCellTagName(column.type) : 'snice-cell-text';
             const el = document.createElement(tagName);
             // Base attributes. Only force `align` if the column definition specifies
             // one; otherwise let the cell pick its type-appropriate default (numbers
             // right, rating/boolean center, text left). Hard-coding 'left' here fought
-            // the cell's own type-based text-align and made number values drift.
+            // the cell's own type-based text-align and made number values drift — and a
+            // formatted column keeps its TYPE's default, not the text cell's.
             el.setAttribute('type', column.type || 'text');
             if (column.align)
                 el.setAttribute('align', column.align);
+            else if (displayText !== null)
+                el.setAttribute('align', defaultCellAlign(column.type));
             el.setAttribute('in-table', 'true');
-            // A declared display formatter makes the cell's value its DISPLAY text:
-            // the pipeline (valueGetter -> formatter, valueFormatter as the fallback)
-            // is resolved here, once, so the `value` channel a caller reads is what the
-            // cell actually shows. The cell is marked `formatted` and handed a column
-            // without the formatters, which keeps it from formatting again and tells
-            // the shared presentation contract to paint the text over any type-specific
-            // rendering (a rating/progress/link cell cannot render display text).
-            const displayText = this.cellDisplayText(column, value, row);
+            // The cell's value IS its display value: with a formatter declared the cell
+            // receives the formatted text and a column with the formatters removed, so
+            // nothing formats twice and the `value` channel a caller reads is what the
+            // cell shows.
             const cellColumn = displayText === null
                 ? column
                 : { ...column, formatter: undefined, valueFormatter: undefined };
@@ -16153,7 +17527,6 @@ class TableColumnDnD {
             // JSON, action, and tag cells without a lossy attribute conversion. Keep a
             // primitive attribute for declarative inspection and CSS selectors.
             if (displayText !== null) {
-                el.setAttribute('formatted', '');
                 el.value = displayText;
                 el.setAttribute('value', displayText);
             }
@@ -16163,9 +17536,12 @@ class TableColumnDnD {
                     el.data = value;
             }
             else {
-                el.value = value ?? '';
-                if (value === null || typeof value !== 'object') {
-                    el.setAttribute('value', String(value ?? ''));
+                // An empty row value (null, or a field the row never carried) falls back
+                // to the typed cell's own documented empty value, never to a blanket ''.
+                const resolved = value ?? emptyCellValue(column.type);
+                el.value = resolved;
+                if (resolved !== null && typeof resolved !== 'object') {
+                    el.setAttribute('value', String(resolved));
                 }
             }
             // Column definition as property (for formatter access etc.)
@@ -16382,16 +17758,36 @@ class TableColumnDnD {
         updateRowSelectionState() {
             if (!this.tbody)
                 return;
-            const rows = this.tbody.querySelectorAll('tr');
-            rows.forEach((row, index) => {
+            // Key off each row's own `data-index`, never its DOM position: group
+            // headers, aggregate footers, virtual spacers, and the inert fill row share
+            // the tbody, so a positional walk hands a raw-data index to a non-data row
+            // (and drifts every real row after it — on page 2 of a client-paged table
+            // the offsets never lined up at all).
+            const rows = this.tbody.querySelectorAll('tr[data-index]');
+            rows.forEach(row => {
+                const index = Number(row.getAttribute('data-index'));
                 const isSelected = this.selectedRows.includes(index);
-                row.setAttribute('data-selected', String(isSelected));
+                this.stampRowSelection(row, isSelected);
                 const checkbox = row.querySelector('snice-checkbox.row-select');
                 if (checkbox) {
                     checkbox.checked = isSelected;
                 }
             });
         }
+        /**
+         * The two selection reflections a row carries, written together: `data-selected`
+         * drives the CSS, `aria-selected` is the documented a11y contract ("selected
+         * data rows expose aria-selected"). The keyboard module stamps ARIA only on a
+         * full body render, so the delta paths below have to carry it themselves —
+         * otherwise a screen reader never hears an interaction-driven selection.
+         */
+        stampRowSelection(row, isSelected) {
+            row.setAttribute('data-selected', String(isSelected));
+            if (isSelected)
+                row.setAttribute('aria-selected', 'true');
+            else
+                row.removeAttribute('aria-selected');
+        }
         // A2: reflect one row's selection into the DOM (located by data-index). The
         // reconciler (Task B) re-stamps data-index on moved rows, so this stays
         // correct after reorder. No-op if the row isn't in the current window.
@@ -16401,7 +17797,7 @@ class TableColumnDnD {
             const row = this.tbody.querySelector(`tr[data-index="${index}"]`);
             if (!row)
                 return;
-            row.setAttribute('data-selected', String(isSelected));
+            this.stampRowSelection(row, isSelected);
             const checkbox = row.querySelector('snice-checkbox.row-select');
             if (checkbox)
                 checkbox.checked = isSelected;
@@ -16502,14 +17898,54 @@ class TableColumnDnD {
             this.settingSortedData = false;
         }
         sortLocalData() {
+            const previous = this.data;
             this.applyLocalSortOrder();
             // Sort replaced this.data (new order + reference) — resync the row-index
             // map and drop the stale filtered snapshot before re-rendering. Render is
             // queued (not synchronous): sortLocalData is reachable from the currentSort
             // setter stack via handleControlledSort, and cells must never construct there.
             this.rebuildRowIndex();
+            this.remapSelectionAfterReorder(previous);
             this.scheduleRender('body');
         }
+        /**
+         * Selection is anchored to the ROW, not to its position. `selectedRows` holds
+         * indices into `data`, so any reorder of that array — a local sort, or a
+         * re-delivery of the same row objects in another order — has to re-resolve
+         * them; otherwise the indices keep pointing at whatever row now occupies the
+         * slot and the user's checkmark silently jumps to a different row (the same
+         * remap the row-reorder/DnD path performs).
+         *
+         * Only a permutation is remapped: same length, same identities, no duplicates.
+         * A genuinely new dataset keeps the documented raw-index semantics untouched,
+         * and rows carrying no identity (duplicate objects) have nothing to anchor to.
+         * Call AFTER rebuildRowIndex() — the remap reads the fresh row-index map.
+         */
+        remapSelectionAfterReorder(previous) {
+            if (this.selectedRows.length === 0)
+                return;
+            if (previous === this.data || previous.length !== this.data.length)
+                return;
+            const identities = new Set(this.data);
+            if (identities.size !== this.data.length)
+                return;
+            // BOTH sides have to be duplicate-free for "same length + subset" to mean
+            // permutation: previous=[A,A] against data=[A,B] satisfies the subset test
+            // while actually being a NEW dataset, and remapping it would move the
+            // selection off the row the raw-index contract points at.
+            if (new Set(previous).size !== previous.length)
+                return;
+            for (const row of previous)
+                if (!identities.has(row))
+                    return;
+            const remapped = this.selectedRows
+                .map((index) => this.indexOfRow(previous[index]))
+                .filter((index) => index >= 0);
+            if (remapped.length === this.selectedRows.length
+                && remapped.every((index, i) => index === this.selectedRows[i]))
+                return;
+            this.selectedRows = remapped;
+        }
         dispatchRowSelectionChanged(rowIndex, selected) {
             return {
                 selectedRows: this.selectedRows,
@@ -16629,20 +18065,37 @@ class TableColumnDnD {
             const scrollContainer = this.getScrollContainer();
             if (!scrollContainer)
                 return;
-            this.virtualRowsSnapshot = this.getVirtualRows();
+            this.syncVirtualRows();
             this.virtualizer.attach({
                 rowHeight: (displayIndex) => this.getVirtualRowHeight(displayIndex),
                 bufferPx: this.virtualBuffer,
                 totalRows: this.virtualRowsSnapshot.length,
                 scrollContainer,
+                // The host template swaps its structural branch (slotted rows ⇄ native
+                // table) without re-attaching. Re-resolving keeps the window painting into
+                // the LIVE tbody instead of the detached branch's orphaned one.
+                resolveScrollContainer: () => this.getScrollContainer(),
                 renderRange: (start, end) => this.renderRowRange(start, end),
+                // Spacers span the real grid. A spacer wider than the table invents
+                // columns for fixed layout to spend the frame's spare width on.
+                resolveColumnSpan: () => this.getTotalColumnSpan(),
                 // Pinned rows live outside the windowed range so they are always present,
                 // exactly like the non-virtual path (renderBody).
                 renderPinnedTop: () => this.renderPinnedRows(this.pinnedTopRows, 'top'),
                 renderPinnedBottom: () => this.renderPinnedRows(this.pinnedBottomRows, 'bottom'),
+                // A zero-row window still owes the user the empty/loading/error row the
+                // ordinary path renders.
+                renderEmptyBody: () => this.createEmptyBodyRow(),
                 // Scroll-driven windows bypass renderBody; restore grid roles, logical
                 // row indices, and roving focus after every inserted range.
-                afterRender: () => this.keyboard.refresh(),
+                afterRender: () => {
+                    this.keyboard.refresh();
+                    // Every window rebuilds the tbody from scratch, taking any filler with
+                    // it. Virtualization is not exempt from the fill-row contract, and
+                    // renderBody()'s own tail call never runs on the virtual path, so the
+                    // filler is re-evaluated here instead.
+                    this.updateFillRow();
+                },
             });
         }
         getVirtualRowHeight(displayIndex) {
@@ -16661,6 +18114,30 @@ class TableColumnDnD {
          * virtualized); otherwise it is the filtered data. Each descriptor carries
          * the logical index used for `data-index`, selection, and detail lookups.
          */
+        /**
+         * Re-derive the windowed row model and hand it to the virtualizer.
+         *
+         * `virtualRowsSnapshot` is the ONLY state the paint pipeline caches, and
+         * `renderRowRange` paints from it. Any caller that resolves a display index
+         * against a FRESH `getVirtualRows()` and then asks the virtualizer to paint
+         * (scrollToRow, the keyboard ensure-visible hook) must republish that model
+         * first, or it scrolls to an offset computed in one list and paints rows from
+         * another — the requested row never appears. Returns the fresh model so the
+         * caller indexes exactly what will be painted.
+         *
+         * `paint` false leaves the repaint to the caller (scrollToIndex refreshes the
+         * window itself). Those callers must not paint from here: the virtualizer's
+         * afterRender hook re-runs keyboard.refresh(), whose ensure-visible callback
+         * lands back in ensureKeyboardRowRendered — an unbounded recursion.
+         */
+        syncVirtualRows(paint = true) {
+            this.virtualRowsSnapshot = this.getVirtualRows();
+            // Not yet attached during setupVirtualization; attach() takes the count.
+            if (this.virtualizer.isEnabled()) {
+                this.virtualizer.setTotalRows(this.virtualRowsSnapshot.length, paint);
+            }
+            return this.virtualRowsSnapshot;
+        }
         getVirtualRows() {
             const filtered = this.getFilteredData();
             // F: the flattened group+row+aggregate list is the virtual model when
@@ -16683,14 +18160,7 @@ class TableColumnDnD {
             const rows = this.virtualRowsSnapshot.length > 0
                 ? this.virtualRowsSnapshot
                 : this.getVirtualRows();
-            const extraCols = (this.hasSelectionColumn() ? 1 : 0) +
-                (this.masterDetail.isEnabled() ? 1 : 0) +
-                (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
-            const managedColumns = this.columnManager.getAllStates();
-            const visibleColumnCount = managedColumns.length > 0
-                ? this.columnManager.getVisibleColumns().length
-                : this.columns.length;
-            const totalColSpan = visibleColumnCount + extraCols;
+            const totalColSpan = this.getTotalColumnSpan();
             const structuralSig = this.computeStructuralSig();
             // Task B: recycle rows that stay in the window across a scroll shift. A row
             // still visible after scrolling keeps its data-object key and signature, so
@@ -16736,9 +18206,10 @@ class TableColumnDnD {
                 // Master-detail: render the expanded detail row in-window. The detail
                 // A fixed detailHeight participates in virtual spacer math through
                 // getVirtualRowHeight. Auto-height content is still rendered in-window
-                // and contributes through normal table layout. Tree rows never carry
-                // detail panels, so skip them.
-                if (!treeRow && this.masterDetail.isEnabled() && this.masterDetail.isExpanded(dataIndex)) {
+                // and contributes through normal table layout. Tree rows compose with
+                // master-detail like any other row; only generated gap nodes (index -1)
+                // have no data row to describe.
+                if (dataIndex >= 0 && this.masterDetail.isEnabled() && this.masterDetail.isExpanded(dataIndex)) {
                     const detailRow = this.masterDetail.createDetailRow(data, dataIndex, totalColSpan);
                     if (detailRow)
                         fragment.appendChild(detailRow);
@@ -16764,7 +18235,8 @@ class TableColumnDnD {
             // data row rather than an unrelated header/subtotal.
             if (this.usesGroupingDisplayModel() || this.treeData.isEnabled()) {
                 const row = this.data[index];
-                const displayIndex = this.getVirtualRows().findIndex((entry) => entry.data === row);
+                // Resolve against the model the virtualizer is about to paint from.
+                const displayIndex = this.syncVirtualRows(false).findIndex((entry) => entry.data === row);
                 if (displayIndex >= 0)
                     this.virtualizer.scrollToIndex(displayIndex);
                 return;
@@ -16773,6 +18245,14 @@ class TableColumnDnD {
         }
         /** Rows currently reachable by grid keyboard navigation, in display order. */
         getKeyboardColumnCount() {
+            // List mode paints tool cells plus ONE full-width cell per row, and its
+            // header no longer mirrors the body — count the body shape directly.
+            if (this.usesListRowRenderer()) {
+                return 1
+                    + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0)
+                    + (this.masterDetail.isEnabled() ? 1 : 0)
+                    + (this.hasSelectionColumn() ? 1 : 0);
+            }
             const rendered = this.shadowRoot?.querySelectorAll('thead tr.column-header-row > th').length ?? 0;
             if (rendered > 0)
                 return rendered;
@@ -16828,7 +18308,9 @@ class TableColumnDnD {
             const row = this.getKeyboardRows()[rowIndex];
             if (row === undefined)
                 return;
-            const displayIndex = this.getVirtualRows().findIndex((entry) => entry.data === row);
+            // The window is painted from `virtualRowsSnapshot`; republish it so the
+            // offset we scroll to and the rows that land there come from one model.
+            const displayIndex = this.syncVirtualRows(false).findIndex((entry) => entry.data === row);
             if (displayIndex >= 0)
                 this.virtualizer.scrollToIndex(displayIndex);
         }
@@ -16956,8 +18438,7 @@ class TableColumnDnD {
                 return items;
             const totalPages = Math.max(1, Math.ceil(items.length / this.pageSize));
             const page = Math.max(1, Math.min(this.currentPage, totalPages));
-            if (page !== this.currentPage)
-                this.currentPage = page;
+            this.clampCurrentPage(page);
             const start = (page - 1) * this.pageSize;
             return items.slice(start, start + this.pageSize);
         }
@@ -16977,8 +18458,7 @@ class TableColumnDnD {
                 return rows;
             const totalPages = Math.max(1, Math.ceil(rows.length / this.pageSize));
             const page = Math.max(1, Math.min(this.currentPage, totalPages));
-            if (page !== this.currentPage)
-                this.currentPage = page;
+            this.clampCurrentPage(page);
             const start = (page - 1) * this.pageSize;
             return rows.slice(start, start + this.pageSize);
         }
@@ -17040,16 +18520,21 @@ class TableColumnDnD {
             this.renderBody();
             this.dispatchColumnPinChange(key, false);
         }
+        // A measured width is the column's width, not the header's: the body has to
+        // be repainted with it too, or the th and its tds carry different numbers
+        // and the next body-only re-render paints the stale one.
         autoSizeColumn(key) {
             if (this.tbody) {
                 this.columnManager.autoSizeColumn(key, this.tbody);
                 this.renderHeader();
+                this.renderBody();
             }
         }
         autoSizeAllColumns() {
             if (this.tbody) {
                 this.columnManager.autoSizeAll(this.tbody);
                 this.renderHeader();
+                this.renderBody();
             }
         }
         moveColumn(key, toIndex) {
@@ -17309,8 +18794,7 @@ class TableColumnDnD {
             this.masterDetail.onHeightChange = () => {
                 if (!this.virtualize || !this.virtualizer.isEnabled())
                     return;
-                this.virtualRowsSnapshot = this.getVirtualRows();
-                this.virtualizer.setTotalRows(this.virtualRowsSnapshot.length);
+                this.syncVirtualRows();
             };
             this.masterDetail.prepare(this.data);
             this.renderHeader();
@@ -17537,6 +19021,9 @@ class TableColumnDnD {
             // The row recycler cannot infer that a callback identity changed from
             // row data alone. Force fresh rows so list markup replaces table cells.
             this.renderedRows = new Map();
+            // Installing a renderer removes the column geometry the header describes;
+            // clearing it back to null restores columnar rows AND their header.
+            this.renderHeader();
             this.renderBody();
         }
         setListViewRenderer(fn) {
@@ -17555,7 +19042,7 @@ class TableColumnDnD {
                 tr.style.height = `${this.rowHeight}px`;
             }
             const isSelected = this.selectedRows.includes(index);
-            tr.setAttribute('data-selected', String(isSelected));
+            this.stampRowSelection(tr, isSelected);
             // Row DnD handle
             if (this.rowReorder && this.rowDnD.isEnabled()) {
                 tr.appendChild(this.rowDnD.createDragHandle());
@@ -17626,7 +19113,18 @@ class TableColumnDnD {
                     const toggle = this.treeData.createToggle(treeRow);
                     td.appendChild(toggle);
                     const textSpan = document.createElement('span');
-                    textSpan.textContent = value == null ? '' : String(value);
+                    textSpan.className = 'tree-label';
+                    // The group cell keeps its plain label next to the indent/chevron, but
+                    // it is still a cell: renderCell owns it outright, and otherwise the
+                    // documented display pipeline (formatter, then valueFormatter) decides
+                    // the text. Only a column with neither shows the raw working value.
+                    if (typeof column.renderCell === 'function') {
+                        textSpan.appendChild(this.createCellElement(column, value, rowData));
+                    }
+                    else {
+                        textSpan.textContent = this.cellDisplayText(column, value, rowData)
+                            ?? (value == null ? '' : String(value));
+                    }
                     // Clicking the text label also toggles expand/collapse
                     if (treeRow.hasChildren) {
                         textSpan.style.cursor = 'pointer';
@@ -17645,21 +19143,7 @@ class TableColumnDnD {
                 const state = this.columnManager.getState(column.key);
                 if (state) {
                     td.style.width = `${state.width}px`;
-                    // Pinned column sticky positioning
-                    if (state.pinned === 'left') {
-                        const offsets = this.columnManager.getPinnedLeftOffsets();
-                        td.classList.add('pinned-cell');
-                        td.style.position = 'sticky';
-                        td.style.left = `${offsets.get(column.key) ?? 0}px`;
-                        td.style.zIndex = '1';
-                    }
-                    else if (state.pinned === 'right') {
-                        const offsets = this.columnManager.getPinnedRightOffsets();
-                        td.classList.add('pinned-cell');
-                        td.style.position = 'sticky';
-                        td.style.right = `${offsets.get(column.key) ?? 0}px`;
-                        td.style.zIndex = '1';
-                    }
+                    this.applyPinnedCell(td, column.key, state, '1');
                 }
                 tr.appendChild(td);
             });
@@ -17823,20 +19307,7 @@ class TableColumnDnD {
                 const state = this.columnManager.getState(column.key);
                 if (state) {
                     td.style.width = `${state.width}px`;
-                    if (state.pinned === 'left') {
-                        const offsets = this.columnManager.getPinnedLeftOffsets();
-                        td.classList.add('pinned-cell');
-                        td.style.position = 'sticky';
-                        td.style.left = `${offsets.get(column.key) ?? 0}px`;
-                        td.style.zIndex = '1';
-                    }
-                    else if (state.pinned === 'right') {
-                        const offsets = this.columnManager.getPinnedRightOffsets();
-                        td.classList.add('pinned-cell');
-                        td.style.position = 'sticky';
-                        td.style.right = `${offsets.get(column.key) ?? 0}px`;
-                        td.style.zIndex = '1';
-                    }
+                    this.applyPinnedCell(td, column.key, state, '1');
                 }
                 tr.appendChild(td);
             });
@@ -18017,6 +19488,26 @@ class TableColumnDnD {
             // C1: reactive, no attribute reflection. A post-mount assignment (or the
             // setData/setColumns aliases) re-renders through the microtask-coalesced
             // queue — see handleColumnsAssignment / handleDataAssignment.
+            //
+            // `hasChanged: () => true` — ASSIGNMENT IS THE SIGNAL, NOT IDENTITY.
+            // The core dirty-check (notEqual in packages/core/src/utils.ts, applied by the
+            // @property setter in element.ts) is identity-based and stays that way for
+            // every other property: that is the right default for reactivity in general.
+            // But `data` and `columns` are bulk payloads that callers routinely mutate in
+            // place and then publish by re-assigning the SAME array reference
+            // (`rows.push(row); table.data = rows`). The documented contract is that
+            // assigning `data`/`columns` rerenders, so these two properties opt OUT of the
+            // identity gate locally rather than weakening it globally.
+            //
+            // Tradeoff — double-render cost: a genuinely redundant assignment
+            // (`table.data = table.data` with nothing changed) now costs a render that the
+            // identity gate used to swallow, and a caller who assigns both `columns` and
+            // `data` pays two schedule calls instead of one. It is bounded: both watchers
+            // go through scheduleRender(), which coalesces a burst within a tick into a
+            // single microtask flush, so the worst case is one extra body paint per tick,
+            // never per assignment. Deep-equality diffing was rejected as the alternative
+            // — it is O(rows x columns) on every assignment, i.e. a cost paid by the
+            // common (genuinely-changed) path to save the rare redundant one.
             this.columns = (__runInitializers(this, _searchDebounce_extraInitializers), __runInitializers(this, _columns_initializers, []));
             this.data = (__runInitializers(this, _columns_extraInitializers), __runInitializers(this, _data_initializers, []));
             /**
@@ -18037,7 +19528,8 @@ class TableColumnDnD {
             this.selector = __runInitializers(this, _selector_initializers, '');
             this.selectorOptions = (__runInitializers(this, _selector_extraInitializers), __runInitializers(this, _selectorOptions_initializers, []));
             this.loading = (__runInitializers(this, _selectorOptions_extraInitializers), __runInitializers(this, _loading_initializers, false));
-            // Set when a remote-mode load fails; cleared on the next successful load.
+            // Set when a remote-mode load fails; cleared by clearLoadError() as soon as
+            // ANY fresh dataset arrives (see there).
             // Not a @property — renderBody() reads it directly, no attribute needed.
             this.loadError = (__runInitializers(this, _loading_extraInitializers), null);
             this.virtualize = __runInitializers(this, _virtualize_initializers, false);
@@ -18047,7 +19539,16 @@ class TableColumnDnD {
             this.editable = (__runInitializers(this, _columnResize_extraInitializers), __runInitializers(this, _editable_initializers, false));
             this.editMode = (__runInitializers(this, _editable_extraInitializers), __runInitializers(this, _editMode_initializers, 'cell'));
             this.density = (__runInitializers(this, _editMode_extraInitializers), __runInitializers(this, _density_initializers, 'standard'));
-            this.headerFilters = (__runInitializers(this, _density_extraInitializers), __runInitializers(this, _headerFilters_initializers, false));
+            /**
+             * How the columns relate to the frame's width.
+             *
+             * `scroll` keeps every column at or above its `minWidth` and lets the frame
+             * scroll horizontally when they no longer fit. `squish` makes the frame the
+             * hard constraint instead: minimums relax, content ellipsises, and the table
+             * never scrolls sideways. See the `ColumnFit` docs in snice-table.types.ts.
+             */
+            this.columnFit = (__runInitializers(this, _density_extraInitializers), __runInitializers(this, _columnFit_initializers, 'scroll'));
+            this.headerFilters = (__runInitializers(this, _columnFit_extraInitializers), __runInitializers(this, _headerFilters_initializers, false));
             this.quickFilter = (__runInitializers(this, _headerFilters_extraInitializers), __runInitializers(this, _quickFilter_initializers, false));
             this.rowReorder = (__runInitializers(this, _quickFilter_extraInitializers), __runInitializers(this, _rowReorder_initializers, false));
             this.columnReorder = (__runInitializers(this, _rowReorder_extraInitializers), __runInitializers(this, _columnReorder_initializers, false));
@@ -18099,7 +19600,9 @@ class TableColumnDnD {
             this.table = __runInitializers(this, _table_initializers, void 0);
             this.thead = (__runInitializers(this, _table_extraInitializers), __runInitializers(this, _thead_initializers, void 0));
             this.tbody = (__runInitializers(this, _thead_extraInitializers), __runInitializers(this, _tbody_initializers, void 0));
-            this.unsortedData = (__runInitializers(this, _tbody_extraInitializers), []);
+            /** Frame width the columns were last fitted to — see handleFrameResize. */
+            this.lastFittedFrameWidth = (__runInitializers(this, _tbody_extraInitializers), 0);
+            this.unsortedData = [];
             this.dataRequestTimeout = null;
             // A1: row-object → its index in `this.data`. Replaces the O(n) `data.indexOf`
             // that ran per row on every selection toggle (was O(n²) for select-all).
@@ -18131,6 +19634,10 @@ class TableColumnDnD {
             // C1: set while the imperative setData() runs so the data @watch resyncs the
             // model but skips the auto-render (the caller drives the body fill).
             this.settingDataImperative = false;
+            // Set while the row-reorder handler re-publishes `this.data` as a new array
+            // of the SAME rows. Tells the data @watch that no fresh dataset arrived, so a
+            // pending load error must survive the drag.
+            this.reorderingRows = false;
             // C1/C2: microtask-coalesced render queue. Reactive assignments schedule a
             // render here instead of calling renderHeader/renderBody synchronously —
             // MANDATORY, because happy-dom crashes constructing cell elements inside a
@@ -18138,6 +19645,32 @@ class TableColumnDnD {
             this.renderQueued = false;
             this.pendingHeaderRender = false;
             this.pendingBodyRender = false;
+            // Re-arm bookkeeping for a body render that found no <tbody> to paint into.
+            // Bounded: the slotted-rows template legitimately has no <tbody>, and an
+            // unbounded retry there would spin every frame.
+            this.bodyRenderRetries = 0;
+            this.bodyRenderRetryQueued = false;
+            /**
+             * Write a page number the display model just derived (a re-clamp after the
+             * row set shortened), WITHOUT re-entering the render scheduler.
+             *
+             * The three clamp sites all sit inside a display-model computation whose
+             * caller paints immediately afterwards with the clamped page — the ordinary
+             * body path slices with it and then renders the pager, the grouping and tree
+             * models return the clamped slice. Letting the @watch fire here queued a
+             * second, byte-identical body pass per delivery — the measured cost, and what
+             * the regression test pins. Suppressing the write's watcher makes the clamp
+             * cost zero extra passes and makes an oscillating clamp structurally unable
+             * to loop.
+             *
+             * All three sites are reachable only under `paginationMode === 'client'`, so
+             * the watcher's server branch (debouncedDataRequest, whose `loading = true`
+             * re-enters renderBody SYNCHRONOUSLY through the loading watcher — from the
+             * middle of a render) is not reachable from a clamp today. It is the reason
+             * to keep this guard rather than to drop the watcher suppression if a fourth
+             * clamp site ever lands outside that guard.
+             */
+            this.clampingPage = false;
             /**
              * A structural fingerprint of everything `createRow` reads that is NOT
              * per-row data: visible columns + their widths/pinning/offsets, tool columns,