snice 7.6.0 → 7.8.0

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

@@ -1,10 +1,10 @@
 /*!
- * 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.
  */
-import { html, unsafeHTML, element, state, property, query, render, styles, ready, reconnect, watch, dispatch, dispose, css, queryAll, request, isSafeUrl, on, SimpleArray } from 'snice';
+import { html, unsafeHTML, element, state, property, query, render, styles, ready, reconnect, watch, dispatch, dispose, css, queryAll, request, isSafeUrl, on, SimpleArray, observe } from 'snice';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -3051,7 +3051,7 @@ var cssContent$j = ":host([hidden]){display:none}:host{display:inline-block;font
     return _classThis;
 })();
 
-var cssContent$i = ":host([hidden]){display:none}:host{display:inline-block;position:relative;width:auto;cursor:pointer}:host([disabled]){cursor:not-allowed}:host([justify-text=start]) .button{justify-content:flex-start}:host([justify-text=end]) .button{justify-content:flex-end}:host([justify-text=center]) .button{justify-content:center}.button{display:inline-flex;align-items:center;justify-content:center;width:100%;border:1px solid;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-weight:var(--snice-font-weight-medium,500);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;box-shadow:var(--snice-shadow-xs,0 1px 2px 0 rgb(0 0 0 / .03));transition:color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),background-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),border-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),box-shadow var(--snice-transition-fast, 150ms) var(--snice-ease-out, cubic-bezier(.22,1,.36,1)),transform 180ms var(--snice-ease-spring, cubic-bezier(.34,1.56,.64,1));cursor:inherit;position:relative}.button::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--snice-gradient-convex,none);pointer-events:none}.button:active:not(.button--disabled){transition:color 50ms var(--snice-ease-out, ease),background-color 50ms var(--snice-ease-out, ease),border-color 50ms var(--snice-ease-out, ease),box-shadow 50ms var(--snice-ease-out, ease),transform 80ms var(--snice-ease-out, ease);transform:translateY(0) scale(.97)}.button:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.button--disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.button--small{font-size:var(--snice-font-size-sm, .875rem);height:2rem;padding:0 var(--snice-spacing-sm,.75rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--medium{font-size:var(--snice-font-size-md, 1rem);height:2.5rem;padding:0 var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--large{font-size:var(--snice-font-size-lg, 1.125rem);height:3rem;padding:0 var(--snice-spacing-lg,1.5rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--default{background-color:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));border-color:var(--snice-color-border,rgb(226 226 226))}.button--default:hover:not(.button--disabled){background-color:var(--snice-color-surface-container-low,rgb(250 250 250));border-color:var(--snice-color-border-hover,rgb(204 204 204));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--default:active:not(.button--disabled){background-color:var(--snice-color-surface-container,rgb(248 248 248));border-color:var(--snice-color-border-hover,rgb(204 204 204));box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--primary{background-color:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.button--primary:hover:not(.button--disabled){background-color:var(--snice-color-primary-hover,rgb(29 78 216));border-color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--primary:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--success{background-color:var(--snice-color-success,rgb(22 163 74));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-success,rgb(22 163 74))}.button--success:hover:not(.button--disabled){background-color:var(--snice-color-success-hover,rgb(21 128 61));border-color:var(--snice-color-success-hover,rgb(21 128 61));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--success:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-success,rgb(22 163 74)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-success,rgb(22 163 74)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--warning{background-color:var(--snice-color-warning,rgb(202 138 4));color:var(--button-warning-text,rgb(69 26 3));border-color:var(--snice-color-warning,rgb(202 138 4))}.button--warning:hover:not(.button--disabled){background-color:var(--snice-color-warning-hover,rgb(161 98 7));border-color:var(--snice-color-warning-hover,rgb(161 98 7));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--warning:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-warning,rgb(202 138 4)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-warning,rgb(202 138 4)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--danger{background-color:var(--snice-color-danger,rgb(220 38 38));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-danger,rgb(220 38 38))}.button--danger:hover:not(.button--disabled){background-color:var(--snice-color-danger-hover,rgb(185 28 28));border-color:var(--snice-color-danger-hover,rgb(185 28 28));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05));transform:translateY(-1px)}.button--danger:active:not(.button--disabled){background-color:color-mix(in srgb,var(--snice-color-danger,rgb(220 38 38)) 85%,#fff);border-color:color-mix(in srgb,var(--snice-color-danger,rgb(220 38 38)) 85%,#fff);box-shadow:var(--snice-shadow-inset-sm,inset 0 1px 2px rgb(0 0 0 / .05));transform:translateY(0) scale(.97)}.button--text{background-color:transparent;color:var(--snice-color-primary,rgb(37 99 235));border-color:transparent;box-shadow:none}.button--text::before{display:none}.button--text:hover:not(.button--disabled){background-color:var(--snice-color-primary-alpha,rgb(37 99 235 / .1));color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:none;transform:none}.button--text:active:not(.button--disabled){background-color:var(--snice-color-primary-alpha-strong,rgb(37 99 235 / .15));box-shadow:none;transform:none}.button--outline{box-shadow:none}.button--outline::before{display:none}.button--outline.button--default{background-color:transparent;color:var(--snice-color-text,rgb(23 23 23))}.button--outline.button--primary{background-color:transparent;color:var(--snice-color-primary,rgb(37 99 235))}.button--outline.button--success{background-color:transparent;color:var(--snice-color-success,rgb(22 163 74))}.button--outline.button--warning{background-color:transparent;color:var(--snice-color-warning,rgb(202 138 4))}.button--outline.button--danger{background-color:transparent;color:var(--snice-color-danger,rgb(220 38 38))}.button--outline.button--default:hover:not(.button--disabled){background-color:var(--snice-color-surface-hover,rgb(245 245 245));box-shadow:none;transform:none}.button--outline.button--primary:hover:not(.button--disabled){background-color:var(--snice-color-primary-subtle,rgb(239 246 255));color:var(--snice-color-primary-hover,rgb(29 78 216));box-shadow:none;transform:none}.button--outline.button--success:hover:not(.button--disabled){background-color:var(--snice-color-success-subtle,rgb(220 252 231));color:var(--snice-color-success-hover,rgb(21 128 61));box-shadow:none;transform:none}.button--outline.button--warning:hover:not(.button--disabled){background-color:var(--snice-color-warning-subtle,rgb(254 249 195));color:var(--snice-color-warning-hover,rgb(161 98 7));box-shadow:none;transform:none}.button--outline.button--danger:hover:not(.button--disabled){background-color:var(--snice-color-danger-subtle,rgb(254 226 226));color:var(--snice-color-danger-hover,rgb(185 28 28));box-shadow:none;transform:none}.button--outline:active:not(.button--disabled){background-color:var(--snice-color-primary-subtle-hover,var(--snice-color-surface-active,rgb(235 235 235)));box-shadow:none;transform:none}.button--pill{border-radius:var(--snice-border-radius-pill,9999px)}.button--circle{border-radius:var(--snice-border-radius-circle,50%);width:var(--size);padding:0}.button--small.button--circle{--size:2rem}.button--medium.button--circle{--size:2.5rem}.button--large.button--circle{--size:3rem}.button--loading{position:relative;cursor:wait}.button--loading .label{visibility:hidden}.spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1em;height:1em}.button--loading .spinner{display:block}.spinner::after{content:'';display:block;width:100%;height:100%;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.icon-slot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;line-height:1}.icon-slot:empty{display:none}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;line-height:1}.icon img{width:100%;height:100%;object-fit:contain}.icon svg{width:100%;height:100%}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:1.25em;line-height:1}.icon-slot ::slotted(svg){width:1.25em;height:1.25em}.icon-slot ::slotted(img){width:1.25em;height:1.25em;object-fit:contain}.button--icon-start .icon,.button--icon-start .icon-slot{margin-right:.5em}.button--icon-end .icon,.button--icon-end .icon-slot{margin-left:.5em}.button--circle .icon,.button--circle .icon-slot{margin:0;transform:none;width:auto;height:auto}.button--circle .icon-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 = [element('snice-button', { formAssociated: true, delegatesFocus: true })];
@@ -4272,6 +4272,17 @@ const appliedClasses = new WeakMap();
  * 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))
@@ -4318,15 +4329,21 @@ function installCellPresentation(host, formatterOverride = false) {
                     ? 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;
                 }
             }
         }
@@ -9419,6 +9436,15 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
             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;
@@ -9426,7 +9452,7 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
             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');
@@ -9438,7 +9464,7 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
                         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;
@@ -9528,7 +9554,6 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
     `;
         }
         renderCell(column, columnIndex) {
-            this.data[column.key];
             const cellComponent = this.getCellComponent(column.formatter || column.valueFormatter ? 'text' : column.type);
             return html /*html*/ `
       <div class="cell cell--${column.type}" part="cell" style="${this.getCellStyles(column)}">
@@ -10935,7 +10960,7 @@ class TableKeyboard {
             });
         }
         // 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
@@ -11142,7 +11167,7 @@ class TableExport {
         // 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));
@@ -11254,7 +11279,7 @@ class TableExport {
         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 {
@@ -11279,6 +11304,15 @@ class TableExport {
         }
         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 '';
@@ -11383,6 +11417,8 @@ class TableMasterDetail {
         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;
@@ -11391,18 +11427,33 @@ class TableMasterDetail {
         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))
@@ -13191,6 +13242,7 @@ class TableColumnDnD {
     let _getTableData_decorators;
     let _styles_decorators;
     let _render_decorators;
+    let _handleFrameResize_decorators;
     let _initialize_decorators;
     let _handleDeclarativeColumnChange_decorators;
     let _handleSelectorOptionsChange_decorators;
@@ -13288,6 +13340,7 @@ class TableColumnDnD {
             _getTableData_decorators = [request('table/data')];
             _styles_decorators = [styles()];
             _render_decorators = [render()];
+            _handleFrameResize_decorators = [observe('resize', '.table-frame')];
             _initialize_decorators = [ready()];
             _handleDeclarativeColumnChange_decorators = [on('column-changed')];
             _handleSelectorOptionsChange_decorators = [watch('selectorOptions')];
@@ -13336,6 +13389,7 @@ class TableColumnDnD {
             __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);
@@ -13654,6 +13708,27 @@ class TableColumnDnD {
         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);
       }
@@ -14677,6 +14752,11 @@ class TableColumnDnD {
             }
             container.appendChild(controlsDiv);
         }
+        // Re-derive the fill row whenever the frame's box changes (host resized,
+        // fullscreen toggled) — the leftover space below the rows changes with it.
+        handleFrameResize() {
+            this.updateFillRow();
+        }
         async initialize() {
             // Listen for controller attached event
             this.addEventListener('controller-attached', this.onAttached);
@@ -14978,8 +15058,14 @@ class TableColumnDnD {
             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');
@@ -15435,6 +15521,7 @@ class TableColumnDnD {
                 // Still render pagination
                 if (this.pagination)
                     this.renderPagination();
+                this.updateSelectAllState();
                 return;
             }
             if (this.data.length === 0 && this.columns.length > 0) {
@@ -15651,10 +15738,52 @@ class TableColumnDnD {
             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 ──────────────────────────────────────
         //
@@ -15745,15 +15874,41 @@ class TableColumnDnD {
                 `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)
@@ -15950,6 +16105,15 @@ class TableColumnDnD {
             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
@@ -15974,22 +16138,38 @@ class TableColumnDnD {
             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;
@@ -16279,7 +16459,12 @@ class TableColumnDnD {
                 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];
             }
@@ -16294,16 +16479,19 @@ class TableColumnDnD {
                     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;
                         }
@@ -16312,6 +16500,9 @@ class TableColumnDnD {
                 });
             }
             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