snice 7.8.0 → 7.9.0

package/dist/cdn/table/snice-table.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.
@@ -677,7 +677,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       }
   }
 
-  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 = [snice.element('snice-input', { formAssociated: true, delegatesFocus: true })];
@@ -1143,7 +1143,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent$k}`;
+              return snice.css /*css*/ `${cssContent$l}`;
           }
           init() {
               // Preserve a value assigned before custom-element upgrade. The own data
@@ -1612,7 +1612,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-select', { formAssociated: true, delegatesFocus: true })];
@@ -1955,14 +1955,11 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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;
           }
           /**
@@ -2173,7 +2170,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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';
@@ -2193,7 +2190,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               return fragment;
           }
           styles() {
-              return snice.css `${cssContent$j}`;
+              return snice.css `${cssContent$k}`;
           }
           init() {
               // Read options from child snice-option elements
@@ -3053,7 +3050,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-button', { formAssociated: true, delegatesFocus: true })];
@@ -3316,7 +3313,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               this.formDisabled = disabled;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent$i}`;
+              return snice.css /*css*/ `${cssContent$j}`;
           }
           // Keep these methods for backwards compatibility if needed
           setLoading(loading) {
@@ -3353,7 +3350,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-checkbox', { formAssociated: true, delegatesFocus: true })];
@@ -3769,7 +3766,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               };
           }
           styles() {
-              return snice.css /*css*/ `${cssContent$h}`;
+              return snice.css /*css*/ `${cssContent$i}`;
           }
           // Public API
           focus() {
@@ -3831,7 +3828,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-modal')];
@@ -4004,7 +4001,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent$g}`;
+              return snice.css /*css*/ `${cssContent$h}`;
           }
           init() {
               // Make sure modal state is properly initialized
@@ -4138,7 +4135,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-empty-state')];
@@ -4233,7 +4230,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent$f}`;
+              return snice.css /*css*/ `${cssContent$g}`;
           }
           handleActionClick(e) {
               if (!this.actionHref) {
@@ -4258,6 +4255,265 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.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 = [snice.property({ type: Number, })];
+              _max_decorators = [snice.property({ type: Number, })];
+              _variant_decorators = [snice.property({})];
+              _size_decorators = [snice.property({})];
+              _color_decorators = [snice.property({})];
+              _indeterminate_decorators = [snice.property({ type: Boolean, })];
+              _showLabel_decorators = [snice.property({ type: Boolean, attribute: 'show-label', })];
+              _label_decorators = [snice.property({})];
+              _striped_decorators = [snice.property({ type: Boolean, })];
+              _animated_decorators = [snice.property({ type: Boolean, })];
+              _thickness_decorators = [snice.property({ type: Number, })];
+              _progressBar_decorators = [snice.query('.progress__bar')];
+              _circleBar_decorators = [snice.query('.progress__circle-bar')];
+              _labelElement_decorators = [snice.query('.progress__label')];
+              _circleLabelElement_decorators = [snice.query('.progress__circle-label')];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _handleProgressChange_decorators = [snice.watch('value', 'max', 'indeterminate', { immediate: false })];
+              _handleThicknessChange_decorators = [snice.watch('thickness')];
+              _handleColorChange_decorators = [snice.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 snice.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 snice.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 snice.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 = [
@@ -4268,6 +4524,37 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       '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();
   /**
@@ -4281,10 +4568,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
    * 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))
@@ -4337,12 +4623,8 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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;
@@ -4363,6 +4645,82 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell')];
       let _classDescriptor;
@@ -4449,7 +4807,14 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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)
@@ -4580,24 +4945,60 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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 || {};
@@ -4639,8 +5040,10 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           }
           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
@@ -5279,7 +5682,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               _styles_decorators = [snice.styles()];
               _init_decorators = [snice.ready()];
               _updateAlignment_decorators = [snice.watch('align')];
-              _updateContent_decorators = [snice.watch('value', 'column')];
+              _updateContent_decorators = [snice.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);
@@ -5323,6 +5726,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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();
@@ -5339,8 +5745,11 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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
@@ -5427,13 +5836,18 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               }
           }
           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');
               }
@@ -7128,7 +7542,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-status')];
@@ -7268,7 +7682,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-actions')];
@@ -7406,7 +7820,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-link')];
@@ -7546,7 +7960,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-email')];
@@ -7667,7 +8081,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-phone')];
@@ -7816,7 +8230,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-color')];
@@ -8000,7 +8414,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-location')];
@@ -8183,7 +8597,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-json')];
@@ -8604,7 +9018,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-cell-image')];
@@ -9308,7 +9722,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [snice.element('snice-row')];
@@ -9561,19 +9975,12 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       <div class="cell cell--${column.type}" part="cell" style="${this.getCellStyles(column)}">
         ${snice.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;
@@ -9806,11 +10213,24 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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.
@@ -9821,11 +10241,30 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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;
@@ -9839,11 +10278,12 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           // 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);
@@ -9853,75 +10293,89 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           // 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;
@@ -9991,6 +10445,13 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
    * 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();
@@ -10000,27 +10461,110 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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)
@@ -10076,48 +10620,222 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           }
           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
               }));
           };
@@ -10137,24 +10855,81 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       }
       /** 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 ──
@@ -10475,25 +11250,45 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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;
@@ -10503,6 +11298,28 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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 {
@@ -10885,7 +11702,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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));
       }
       /**
@@ -10919,6 +11736,16 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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)
@@ -10933,7 +11760,8 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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')
@@ -10965,7 +11793,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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');
@@ -11381,8 +12209,10 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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');
@@ -12286,10 +13116,13 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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;
@@ -12310,13 +13143,27 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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('/');
@@ -12328,6 +13175,11 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                           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) {
@@ -12344,13 +13196,17 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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 = [];
@@ -13104,6 +13960,11 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       }
   }
 
+  /**
+   * 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 = [snice.element('snice-table')];
       let _classDescriptor;
@@ -13198,6 +14059,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       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 = [];
@@ -13273,6 +14137,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       let _handleColumnReorderChange_decorators;
       let _handleLazyLoadChange_decorators;
       let _handleColumnMenuChange_decorators;
+      let _handleColumnFitChange_decorators;
       let _dispatchPageChange_decorators;
       let _dispatchRowSelectionChanged_decorators;
       let _dispatchRowClicked_decorators;
@@ -13310,8 +14175,8 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               _totalItems_decorators = [snice.property({ type: Number, attribute: 'total-items' })];
               _pageSizes_decorators = [snice.property({ type: Array, attribute: false })];
               _searchDebounce_decorators = [snice.property({ type: Number, attribute: 'search-debounce' })];
-              _columns_decorators = [snice.property({ attribute: false })];
-              _data_decorators = [snice.property({ attribute: false })];
+              _columns_decorators = [snice.property({ attribute: false, hasChanged: () => true })];
+              _data_decorators = [snice.property({ attribute: false, hasChanged: () => true })];
               _mode_decorators = [snice.property()];
               _currentSort_decorators = [snice.property({ type: Array, attribute: false })];
               _selector_decorators = [snice.property({ type: String, attribute: 'selector' })];
@@ -13324,6 +14189,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               _editable_decorators = [snice.property({ type: Boolean, attribute: 'editable' })];
               _editMode_decorators = [snice.property({ attribute: 'edit-mode' })];
               _density_decorators = [snice.property({ attribute: 'density' })];
+              _columnFit_decorators = [snice.property({ attribute: 'column-fit' })];
               _headerFilters_decorators = [snice.property({ type: Boolean, attribute: 'header-filters' })];
               _quickFilter_decorators = [snice.property({ type: Boolean, attribute: 'quick-filter' })];
               _rowReorder_decorators = [snice.property({ type: Boolean, attribute: 'row-reorder' })];
@@ -13371,6 +14237,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               _handleColumnReorderChange_decorators = [snice.watch('columnReorder', { immediate: false })];
               _handleLazyLoadChange_decorators = [snice.watch('lazyLoad', 'lazyLoadThreshold', { immediate: false })];
               _handleColumnMenuChange_decorators = [snice.watch('columnMenu', { immediate: false })];
+              _handleColumnFitChange_decorators = [snice.watch('columnFit', { immediate: false })];
               _dispatchPageChange_decorators = [snice.dispatch('page-change', { bubbles: true, composed: true })];
               _dispatchRowSelectionChanged_decorators = [snice.dispatch('table-row-selection-changed', { bubbles: true, composed: true })];
               _dispatchRowClicked_decorators = [snice.dispatch('row-clicked', { bubbles: true, composed: true })];
@@ -13420,6 +14287,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               __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);
@@ -13464,6 +14332,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               __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);
@@ -13507,6 +14376,11 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               // 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;
           }
@@ -13536,8 +14410,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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));
@@ -13556,14 +14429,49 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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;
@@ -13578,14 +14486,28 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       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;
@@ -13673,6 +14595,72 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
         /* 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));
@@ -13795,9 +14783,13 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
         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 {
@@ -14061,12 +15053,14 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
         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;
       }
 
@@ -14081,6 +15075,33 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
         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);
@@ -14222,10 +15243,58 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
         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 */
@@ -14648,7 +15717,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       }
 
       :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) {
@@ -14754,9 +15823,18 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               }
               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() {
@@ -14859,7 +15937,18 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       }
                   }
                   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);
@@ -14973,7 +16062,17 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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
@@ -14982,8 +16081,12 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           // 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);
@@ -15056,9 +16159,21 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           // 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
@@ -15067,11 +16182,25 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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();
@@ -15091,11 +16220,12 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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) {
@@ -15158,11 +16288,26 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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')
@@ -15178,7 +16323,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           }
           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)
@@ -15236,6 +16383,17 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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. */
@@ -15252,9 +16410,124 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   .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
@@ -15292,7 +16565,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   }
                   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);
@@ -15309,23 +16582,10 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   }
                   // 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');
@@ -15333,11 +16593,22 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       // 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)) {
@@ -15390,7 +16661,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               });
               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';
@@ -15412,9 +16683,12 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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()) {
@@ -15451,6 +16725,11 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   });
                   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);
@@ -15482,9 +16761,90 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       </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);
@@ -15516,8 +16876,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               // 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
@@ -15526,64 +16885,15 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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();
@@ -15595,15 +16905,23 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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
@@ -15699,6 +17017,19 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                           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 {
@@ -15756,6 +17087,20 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
            * 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');
@@ -15770,22 +17115,45 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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 ──────────────────────────────────────
           //
@@ -15943,7 +17311,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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));
@@ -16130,24 +17498,30 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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 };
@@ -16155,7 +17529,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               // 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);
               }
@@ -16165,9 +17538,12 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       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.)
@@ -16384,16 +17760,36 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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.
@@ -16403,7 +17799,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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;
@@ -16504,14 +17900,54 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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,
@@ -16631,20 +18067,37 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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) {
@@ -16663,6 +18116,30 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
            * 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
@@ -16685,14 +18162,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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
@@ -16738,9 +18208,10 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   // 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);
@@ -16766,7 +18237,8 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               // 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;
@@ -16775,6 +18247,14 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           }
           /** 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;
@@ -16830,7 +18310,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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);
           }
@@ -16958,8 +18440,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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);
           }
@@ -16979,8 +18460,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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);
           }
@@ -17042,16 +18522,21 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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) {
@@ -17311,8 +18796,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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();
@@ -17539,6 +19023,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               // 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) {
@@ -17557,7 +19044,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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());
@@ -17628,7 +19115,18 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       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';
@@ -17647,21 +19145,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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);
               });
@@ -17825,20 +19309,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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);
               });
@@ -18019,6 +19490,26 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               // 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, []));
               /**
@@ -18039,7 +19530,8 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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);
@@ -18049,7 +19541,16 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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));
@@ -18101,7 +19602,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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).
@@ -18133,6 +19636,10 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               // 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
@@ -18140,6 +19647,32 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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,