snice 7.6.0 → 7.8.0

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

@@ -1,5 +1,5 @@
 /*!
- * snice v7.5.1
+ * snice v7.7.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.
@@ -3053,7 +3053,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-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$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}}";
 
   (() => {
       let _classDecorators = [snice.element('snice-button', { formAssociated: true, delegatesFocus: true })];
@@ -4274,6 +4274,17 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
    * Give every standalone specialized table cell the common ColumnDefinition
    * presentation contract. The observer reapplies after Snice's differential
    * renderer changes shadow content; equality guards prevent mutation loops.
+   *
+   * Display formatters
+   * ------------------
+   * `formatter` is the column's display formatter and `valueFormatter` its
+   * 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.
    */
   function installCellPresentation(host, formatterOverride = false) {
       if (installed.has(host))
@@ -4320,15 +4331,21 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       ? column.tooltip(host.value, host.rowData)
                       : (host.value == null ? '' : String(host.value));
               }
-              if (formatterOverride || column.valueFormatter) {
-                  const formatter = formatterOverride
-                      ? (column.formatter || column.valueFormatter)
-                      : column.valueFormatter;
+              // `formatter` beats `valueFormatter`. A cell that applies `formatter`
+              // itself has already painted it, so the fallback must not overwrite that
+              // content — only a formatter-less column falls through to valueFormatter.
+              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) {
                   const content = host.shadowRoot?.querySelector('[part~="content"]');
-                  if (formatter && content) {
-                      const value = String(formatter(host.value, host.rowData) ?? '');
-                      if (content.textContent !== value || content.childElementCount > 0)
-                          content.textContent = value;
+                  if (content && (content.textContent !== display || content.childElementCount > 0)) {
+                      content.textContent = display;
                   }
               }
           }
@@ -9421,6 +9438,15 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               this.updateRowAttributes();
               this.configureCells();
           }
+          /**
+           * The column's working value for this row: `valueGetter` runs for display
+           * here exactly as it does on the table's own render path, so a column whose
+           * key names a server field rather than a row field still paints.
+           */
+          cellValue(column) {
+              const raw = this.data?.[column.key];
+              return column.valueGetter ? column.valueGetter(raw, this.data) : raw;
+          }
           configureCells() {
               if (!this.columns) {
                   return;
@@ -9428,7 +9454,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               this.columns.forEach((column, index) => {
                   const cellElement = this.shadowRoot?.querySelector(`[data-column-index="${index}"]`);
                   if (cellElement) {
-                      const value = this.data[column.key];
+                      const value = this.cellValue(column);
                       if (typeof column.renderCell === 'function') {
                           const output = column.renderCell(value, this.data, column);
                           const replacement = output instanceof HTMLElement ? output : document.createElement('span');
@@ -9440,7 +9466,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                           return;
                       }
                       const formatter = column.formatter || column.valueFormatter;
-                      cellElement.value = formatter ? formatter(value, this.data) : value;
+                      cellElement.value = formatter ? String(formatter(value, this.data) ?? '') : value;
                       cellElement.column = formatter
                           ? { ...column, type: 'text', formatter: undefined, valueFormatter: undefined }
                           : column;
@@ -9530,7 +9556,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
     `;
           }
           renderCell(column, columnIndex) {
-              this.data[column.key];
               const cellComponent = this.getCellComponent(column.formatter || column.valueFormatter ? 'text' : column.type);
               return snice.html /*html*/ `
       <div class="cell cell--${column.type}" part="cell" style="${this.getCellStyles(column)}">
@@ -10937,7 +10962,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               });
           }
           // Body rows
-          const bodyRows = table.querySelectorAll('tbody tr:not(.virtual-spacer)');
+          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
@@ -11144,7 +11169,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           // Data rows
           for (const row of data) {
               const cells = exportColumns.map(c => {
-                  const value = row[c.key];
+                  const value = this.cellValue(row, c);
                   return this.escapeCSV(value == null ? '' : String(value), delimiter);
               });
               rows.push(cells.join(delimiter));
@@ -11256,7 +11281,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           if (rows.length === 0)
               return false;
           const text = rows.map(row => columns.map(c => {
-              const value = row[c.key];
+              const value = this.cellValue(row, c);
               return useFormatted ? this.formatValue(value, row, c) : this.rawValue(value);
           }).join(delimiter)).join('\n');
           try {
@@ -11281,6 +11306,15 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           }
           return value;
       }
+      /**
+       * The column's working value for a row: `valueGetter` "runs for display,
+       * sort, aggregation" — and for export, which must ship what the table shows,
+       * not a row field the column may not even have.
+       */
+      cellValue(row, column) {
+          const raw = row?.[column.key];
+          return column.valueGetter ? column.valueGetter(raw, row) : raw;
+      }
       rawValue(value) {
           if (value == null)
               return '';
@@ -11385,6 +11419,8 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           this.options = null;
           this.tableElement = null;
           this.contentCache = new Map();
+          /** Last value signature seen per row, so in-place mutations evict the cache. */
+          this.fingerprints = new Map();
           this.rowByIndex = new Map();
           this.measuredHeights = new Map();
           this.onHeightChange = null;
@@ -11393,18 +11429,33 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           this.tableElement = tableEl;
           this.options = options;
           this.contentCache.clear();
+          this.fingerprints.clear();
           this.rowByIndex.clear();
           this.measuredHeights.clear();
       }
-      /** Eagerly construct detail content when lazy=false. */
-      prepare(rows) {
+      /**
+       * Eagerly construct detail content when lazy=false.
+       *
+       * `fingerprint` (the table's per-row value signature) also evicts rows whose
+       * fields were mutated in place: the cache is keyed by row identity, so an
+       * unchanged identity would otherwise keep serving a panel built from the
+       * pre-mutation values.
+       */
+      prepare(rows, fingerprint) {
           if (!this.options)
               return;
           this.rowByIndex = new Map(rows.map((row, index) => [index, row]));
           const currentRows = new Set(rows);
-          for (const row of this.contentCache.keys()) {
+          for (const row of [...this.contentCache.keys()]) {
               if (!currentRows.has(row))
                   this.contentCache.delete(row);
+              else if (fingerprint && this.fingerprints.get(row) !== fingerprint(row)) {
+                  this.contentCache.delete(row);
+                  this.measuredHeights.delete(row);
+              }
+          }
+          if (fingerprint) {
+              this.fingerprints = new Map(rows.map(row => [row, fingerprint(row)]));
           }
           for (const row of this.measuredHeights.keys()) {
               if (!currentRows.has(row))
@@ -13193,6 +13244,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       let _getTableData_decorators;
       let _styles_decorators;
       let _render_decorators;
+      let _handleFrameResize_decorators;
       let _initialize_decorators;
       let _handleDeclarativeColumnChange_decorators;
       let _handleSelectorOptionsChange_decorators;
@@ -13290,6 +13342,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               _getTableData_decorators = [snice.request('table/data')];
               _styles_decorators = [snice.styles()];
               _render_decorators = [snice.render()];
+              _handleFrameResize_decorators = [snice.observe('resize', '.table-frame')];
               _initialize_decorators = [snice.ready()];
               _handleDeclarativeColumnChange_decorators = [snice.on('column-changed')];
               _handleSelectorOptionsChange_decorators = [snice.watch('selectorOptions')];
@@ -13338,6 +13391,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               __esDecorate(this, null, _getTableData_decorators, { kind: "method", name: "getTableData", static: false, private: false, access: { has: obj => "getTableData" in obj, get: obj => obj.getTableData }, 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, _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, _handleFrameResize_decorators, { kind: "method", name: "handleFrameResize", static: false, private: false, access: { has: obj => "handleFrameResize" in obj, get: obj => obj.handleFrameResize }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _initialize_decorators, { kind: "method", name: "initialize", static: false, private: false, access: { has: obj => "initialize" in obj, get: obj => obj.initialize }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleDeclarativeColumnChange_decorators, { kind: "method", name: "handleDeclarativeColumnChange", static: false, private: false, access: { has: obj => "handleDeclarativeColumnChange" in obj, get: obj => obj.handleDeclarativeColumnChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleSelectorOptionsChange_decorators, { kind: "method", name: "handleSelectorOptionsChange", static: false, private: false, access: { has: obj => "handleSelectorOptionsChange" in obj, get: obj => obj.handleSelectorOptionsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -13656,6 +13710,27 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
         border-bottom: none;
       }
 
+      /* Height fill: when the host is taller than its rows, an inert filler
+         row (cloned from the last data row, so column widths and pinning
+         track the table engine) keeps the column grid running to the bottom
+         edge instead of the borders cutting off where the rows end. */
+      tbody tr.table-fill-row {
+        pointer-events: none;
+      }
+
+      tbody tr.table-fill-row td {
+        border-bottom: none;
+        padding: 0;
+      }
+
+      :host([striped]) tbody tr.table-fill-row {
+        background: transparent;
+      }
+
+      :host([hoverable]) tbody tr.table-fill-row:hover {
+        background: transparent;
+      }
+
       th {
         padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-sm, 0.75rem);
       }
@@ -14679,6 +14754,11 @@ 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.
+          handleFrameResize() {
+              this.updateFillRow();
+          }
           async initialize() {
               // Listen for controller attached event
               this.addEventListener('controller-attached', this.onAttached);
@@ -14980,8 +15060,14 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               if (this.settingSortedData)
                   return;
               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
+              // changes, so without this the body silently contradicts the header. In
+              // remote mode the server owns the ordering.
+              if (this.mode !== 'remote' && this.currentSort.length > 0)
+                  this.applyLocalSortOrder();
               this.rebuildRowIndex();
-              this.masterDetail.prepare(this.data);
+              this.masterDetail.prepare(this.data, row => this.rowValueSignature(row));
               if (this.settingDataImperative)
                   return; // imperative setData(): caller renders
               this.scheduleRender('body');
@@ -15437,6 +15523,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   // Still render pagination
                   if (this.pagination)
                       this.renderPagination();
+                  this.updateSelectAllState();
                   return;
               }
               if (this.data.length === 0 && this.columns.length > 0) {
@@ -15653,10 +15740,52 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               this.reconcileRows(entries);
               // Re-establish grid role + roving tabindex after the body changed.
               this.keyboard.refresh();
+              // The select-all control describes the *filtered* row set, so it goes stale
+              // whenever the denominator moves (rows delivered, filter cleared) even
+              // though `selectedRows` — its only other trigger — never changed.
+              this.updateSelectAllState();
               // Render pagination after body
               if (this.pagination) {
                   this.renderPagination();
               }
+              this.updateFillRow();
+          }
+          /**
+           * When the host is taller than its rows, append an inert filler row so the
+           * column grid runs to the bottom edge of the frame. Cloned from the last
+           * 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.
+           */
+          updateFillRow() {
+              const frame = this.shadowRoot?.querySelector('.table-frame');
+              const tableEl = frame?.querySelector('table');
+              const tbody = tableEl?.querySelector('tbody');
+              if (!frame || !tableEl || !tbody)
+                  return;
+              tbody.querySelector('tr.table-fill-row')?.remove();
+              if (this.list && this.listRenderer)
+                  return;
+              const rows = tbody.querySelectorAll('tr[data-index]');
+              const lastRow = rows[rows.length - 1];
+              if (!lastRow)
+                  return;
+              const leftover = Math.floor(frame.clientHeight - 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']) {
+                  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'])
+                      td.removeAttribute(attr);
+              });
+              fill.style.height = `${leftover}px`;
+              tbody.appendChild(fill);
           }
           // ── Task B: render-path reconciler ──────────────────────────────────────
           //
@@ -15747,15 +15876,41 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   `tree=${this.treeData.isEnabled() ? this.treeData.getGroupColumn() : ''}`,
               ].join('|');
           }
+          /**
+           * A fingerprint of a row's own field values, so a row object that was mutated
+           * IN PLACE (the same identity re-delivered by a poll/websocket patch, or an
+           * array the app edits) is rebuilt instead of recycled with stale cells.
+           *
+           * Tradeoff, deliberately chosen: this walks the row's OWN, SHALLOW fields
+           * rather than running each column's valueGetter/formatter. It therefore costs
+           * one string build per rendered row — never a user callback, so call counts
+           * for `valueGetter` stay exactly one per row per render — and it still catches
+           * getter-derived columns, because a getter reads the fields this covers.
+           * Nested objects collapse to their String() form, so a mutation buried inside
+           * a nested object (or an object rendered by a JSON/progress cell) is not
+           * detected; those callers should hand over a new row object. Recycling keeps
+           * its payoff: rows whose values did not change are still reused untouched.
+           */
+          rowValueSignature(rowData) {
+              if (rowData === null || typeof rowData !== 'object')
+                  return String(rowData);
+              const parts = [];
+              for (const key of Object.keys(rowData)) {
+                  const value = rowData[key];
+                  parts.push(`${key}=${value === null || value === undefined ? '' : String(value)}`);
+              }
+              // A separator keeps {a:'1b'} from colliding with {a:'1',b:''}.
+              return parts.join('|');
+          }
           /**
            * The per-row rebuild signature. Selection and the plain data-index are
            * re-stamped on reuse (not here) so they never force a rebuild; this captures
-           * only what a re-stamp cannot repair: tree node state, per-row height, and —
-           * when a feature embeds the index in a row-scoped closure (row DnD drag index,
-           * master-detail toggle index) — the index itself.
+           * the row's cell values plus what a re-stamp cannot repair: tree node state,
+           * per-row height, and — when a feature embeds the index in a row-scoped
+           * closure (row DnD drag index, master-detail toggle index) — the index itself.
            */
           rowSignature(rowData, index, structuralSig, treeRow) {
-              const parts = [structuralSig];
+              const parts = [structuralSig, `v:${this.rowValueSignature(rowData)}`];
               if (treeRow)
                   parts.push(`t:${treeRow.depth}:${treeRow.expanded ? 1 : 0}:${treeRow.hasChildren ? 1 : 0}`);
               if (this.rowHeightCallback)
@@ -15952,6 +16107,15 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               const active = page === this.currentPage ? ' pagination__btn--active' : '';
               return `<button class="pagination__btn pagination__page${active}" data-page="${page}">${page}</button>`;
           }
+          /**
+           * The column's display text, or null when the column declares no display
+           * formatter. `formatter` (row-aware) is the display formatter and
+           * `valueFormatter` its documented fallback, so `formatter` wins.
+           */
+          cellDisplayText(column, value, row) {
+              const formatter = column.formatter || column.valueFormatter;
+              return formatter ? String(formatter(value, row) ?? '') : null;
+          }
           /** Create a cell element safely using createElement + setAttribute */
           createCellElement(column, value, row) {
               // E2: a custom renderCell bypasses the type-based cell entirely. A string
@@ -15976,22 +16140,38 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               if (column.align)
                   el.setAttribute('align', column.align);
               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);
+              const cellColumn = displayText === null
+                  ? column
+                  : { ...column, formatter: undefined, valueFormatter: undefined };
               // Set the property directly so arrays/objects reach progress, sparkline,
               // JSON, action, and tag cells without a lossy attribute conversion. Keep a
               // primitive attribute for declarative inspection and CSS selectors.
-              if (column.type === 'sparkline' && value !== null && typeof value === 'object') {
+              if (displayText !== null) {
+                  el.setAttribute('formatted', '');
+                  el.value = displayText;
+                  el.setAttribute('value', displayText);
+              }
+              else if (column.type === 'sparkline' && value !== null && typeof value === 'object') {
                   el.setAttribute('value', JSON.stringify(value));
                   if (Array.isArray(value))
                       el.data = value;
               }
               else {
                   el.value = value ?? '';
-              }
-              if (value === null || typeof value !== 'object') {
-                  el.setAttribute('value', String(value ?? ''));
+                  if (value === null || typeof value !== 'object') {
+                      el.setAttribute('value', String(value ?? ''));
+                  }
               }
               // Column definition as property (for formatter access etc.)
-              el.column = column;
+              el.column = cellColumn;
               // Row-aware formatters, conditional formatting, and action-cell events all
               // consume the originating row through the cell's property API.
               el.rowData = row ?? null;
@@ -16281,7 +16461,12 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   this.sortLocalData();
               }
           }
-          sortLocalData() {
+          /**
+           * Reorder `this.data` to the current client-side sort (or back to delivery
+           * order when the sort was cleared). Split out of sortLocalData so a fresh
+           * delivery can land sorted without re-entering the render/index bookkeeping.
+           */
+          applyLocalSortOrder() {
               if (!this.unsortedData.length) {
                   this.unsortedData = [...this.data];
               }
@@ -16296,16 +16481,19 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       for (const { column, direction } of this.currentSort) {
                           const colDef = this.columns.find(c => c.key === column);
                           const customComparator = colDef?.sortComparator;
+                          // The value pipeline feeds BOTH sort paths: valueGetter "runs for
+                          // display, sort, aggregation", so a custom comparator sees the same
+                          // derived value the cell shows (remote columns routinely key on the
+                          // server's sort field and bridge the display with a getter).
+                          const aVal = colDef?.valueGetter ? colDef.valueGetter(a[column], a) : a[column];
+                          const bVal = colDef?.valueGetter ? colDef.valueGetter(b[column], b) : b[column];
                           if (customComparator) {
-                              const cmp = customComparator(a[column], b[column], direction);
+                              const cmp = customComparator(aVal, bVal, direction);
                               if (cmp !== 0)
                                   return cmp;
                           }
                           else {
-                              // Use value pipeline getter if available
-                              const aVal = colDef?.valueGetter ? colDef.valueGetter(a[column], a) : (a[column] ?? '');
-                              const bVal = colDef?.valueGetter ? colDef.valueGetter(b[column], b) : (b[column] ?? '');
-                              const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+                              const cmp = String(aVal ?? '').localeCompare(String(bVal ?? ''), undefined, { numeric: true });
                               if (cmp !== 0)
                                   return direction === 'asc' ? cmp : -cmp;
                           }
@@ -16314,6 +16502,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   });
               }
               this.settingSortedData = false;
+          }
+          sortLocalData() {
+              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