@toolbox-web/grid 0.4.1 → 0.4.2

package/index.js

@@ -1,4 +1,4 @@
-const te = ':root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-cell-white-space: nowrap;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 6px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-animation-duration: .2s;--tbw-animation-easing: ease-out;--tbw-animation-enabled: 1;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0;opacity:.6}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell:not(:last-child),:host .header-row>.cell.grouped.group-end:not(:last-child){border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style;content-visibility:auto;contain-intrinsic-size:auto var(--tbw-row-height)}:host .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:block;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);line-height:calc(var(--tbw-row-height) - 5px);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0;white-space:var(--tbw-cell-white-space, nowrap);text-overflow:ellipsis}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{text-align:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px)}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .header-row>.cell.resizable{position:relative}:host .tbw-editor-host{display:contents}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: var(--tbw-animation-duration) var(--tbw-animation-easing);--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden;overflow-anchor:none}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}@media(forced-colors:active){:host{--tbw-color-border: CanvasText;--tbw-color-border-strong: CanvasText;--tbw-color-border-cell: CanvasText;--tbw-color-border-header: CanvasText;--tbw-color-fg: CanvasText;--tbw-color-bg: Canvas;--tbw-color-panel-bg: Canvas;--tbw-color-header-bg: Canvas;--tbw-color-header-fg: CanvasText;--tbw-color-accent: Highlight;--tbw-color-accent-fg: HighlightText;--tbw-color-selection: Highlight;--tbw-color-row-hover: Highlight;--tbw-focus-outline: 2px solid Highlight;--tbw-range-border-color: Highlight}:host .cell:focus,:host .cell.active-cell{outline:2px solid Highlight!important;outline-offset:-2px}:host .data-grid-row[aria-selected=true]{background:Highlight!important;color:HighlightText!important}}@media(prefers-reduced-motion:reduce){:host([data-animation-mode="reduced-motion"]){--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}}:host([data-animation-mode="off"]){--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}:host .tbw-expanding{animation:tbw-expand var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}:host .tbw-collapsing{animation:tbw-collapse var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}@keyframes tbw-expand{0%{opacity:0;max-height:0;transform:translateY(-8px)}to{opacity:1;max-height:500px;transform:translateY(0)}}@keyframes tbw-collapse{0%{opacity:1;max-height:500px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-8px)}}', W = {
+const te = ':root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-cell-white-space: nowrap;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 6px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-animation-duration: .2s;--tbw-animation-easing: ease-out;--tbw-animation-enabled: 1;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0;opacity:.6}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell:not(:last-child),:host .header-row>.cell.grouped.group-end:not(:last-child){border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style;content-visibility:auto;contain-intrinsic-size:auto var(--tbw-row-height)}:host .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:block;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);line-height:calc(var(--tbw-row-height) - 5px);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0;white-space:var(--tbw-cell-white-space, nowrap);text-overflow:ellipsis}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{text-align:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px)}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .header-row>.cell.resizable{position:relative}:host .tbw-editor-host{display:contents}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host([data-has-focus]) .cell-focus,:host([data-has-focus]) .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: var(--tbw-animation-duration) var(--tbw-animation-easing);--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden;overflow-anchor:none}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}@media(forced-colors:active){:host{--tbw-color-border: CanvasText;--tbw-color-border-strong: CanvasText;--tbw-color-border-cell: CanvasText;--tbw-color-border-header: CanvasText;--tbw-color-fg: CanvasText;--tbw-color-bg: Canvas;--tbw-color-panel-bg: Canvas;--tbw-color-header-bg: Canvas;--tbw-color-header-fg: CanvasText;--tbw-color-accent: Highlight;--tbw-color-accent-fg: HighlightText;--tbw-color-selection: Highlight;--tbw-color-row-hover: Highlight;--tbw-focus-outline: 2px solid Highlight;--tbw-range-border-color: Highlight}:host .cell:focus,:host .cell.active-cell{outline:2px solid Highlight!important;outline-offset:-2px}:host .data-grid-row[aria-selected=true]{background:Highlight!important;color:HighlightText!important}}@media(prefers-reduced-motion:reduce){:host([data-animation-mode="reduced-motion"]){--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}}:host([data-animation-mode="off"]){--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}:host .tbw-expanding{animation:tbw-expand var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}:host .tbw-collapsing{animation:tbw-collapse var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}@keyframes tbw-expand{0%{opacity:0;max-height:0;transform:translateY(-8px)}to{opacity:1;max-height:500px;transform:translateY(0)}}@keyframes tbw-collapse{0%{opacity:1;max-height:500px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-8px)}}', W = {
   STRETCH: "stretch",
   FIXED: "fixed"
 }, Me = {
@@ -39,9 +39,9 @@ function ze(t) {
     }));
     const m = o.querySelector("tbw-grid-column-view"), b = o.querySelector("tbw-grid-column-editor"), _ = o.querySelector("tbw-grid-column-header");
     m && (h.__viewTemplate = m), b && (h.__editorTemplate = b), _ && (h.__headerTemplate = _);
-    const C = globalThis.DataGridElement?.getAdapters?.() ?? [], y = m ?? o, S = C.find((v) => v.canHandle(y));
-    if (S) {
-      const v = S.createRenderer(y);
+    const C = globalThis.DataGridElement?.getAdapters?.() ?? [], y = m ?? o, R = C.find((v) => v.canHandle(y));
+    if (R) {
+      const v = R.createRenderer(y);
       v && (h.viewRenderer = v);
     }
     const U = b ?? o, x = C.find((v) => v.canHandle(U));
@@ -102,9 +102,9 @@ function ne(t) {
       }
     }
     l > 0 && (n.width = l + 2, n.__autoSized = !0, i = !0);
-  }), i && I(t), t.__didInitialAutoSize = !0;
+  }), i && q(t), t.__didInitialAutoSize = !0;
 }
-function I(t) {
+function q(t) {
   (t.effectiveConfig?.fitMode || t.fitMode || W.STRETCH) === W.STRETCH ? t._gridTemplate = t._visibleColumns.map((o) => {
     if (o.width) return `${o.width}px`;
     const i = o.minWidth;
@@ -123,7 +123,7 @@ function ke(t, e) {
     n[r.field] = r.type || "string";
   }), { columns: i, typeMap: n };
 }
-const Ie = /{{\s*([^}]+)\s*}}/g, A = "__DG_EMPTY__", Be = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, qe = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/;
+const Ie = /{{\s*([^}]+)\s*}}/g, A = "__DG_EMPTY__", qe = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, Be = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/;
 function We(t) {
   return !t || typeof t != "string" ? "" : t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -152,8 +152,8 @@ const Ue = /* @__PURE__ */ new Set([
   "plaintext",
   "xmp",
   "listing"
-]), re = /^on\w+$/i, $e = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Ge = /^\s*(javascript|vbscript|data|blob):/i;
-function F(t) {
+]), re = /^on\w+$/i, $e = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Fe = /^\s*(javascript|vbscript|data|blob):/i;
+function G(t) {
   if (!t || typeof t != "string") return "";
   if (t.indexOf("<") === -1) return t;
   const e = document.createElement("template");
@@ -180,7 +180,7 @@ function Ve(t) {
         r.push(s.name);
         continue;
       }
-      if ($e.has(l) && Ge.test(s.value)) {
+      if ($e.has(l) && Fe.test(s.value)) {
         r.push(s.name);
         continue;
       }
@@ -196,19 +196,19 @@ function Ve(t) {
 function ve(t, e) {
   if (!t || t.indexOf("{{") === -1) return t;
   const o = [], i = t.replace(Ie, (l, a) => {
-    const c = Fe(a, e);
+    const c = Ge(a, e);
     return o.push({ expr: a.trim(), result: c }), c;
   }), n = Xe(i), r = o.length && o.every((l) => l.result === "" || l.result === A);
   return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) || r ? "" : n;
 }
-function Fe(t, e) {
+function Ge(t, e) {
   if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return A;
   if (t === "value") return e.value == null ? A : String(e.value);
   if (t.startsWith("row.") && !/[()?]/.test(t) && !t.includes(":")) {
     const i = t.slice(4), n = e.row ? e.row[i] : void 0;
     return n == null ? A : String(n);
   }
-  if (t.length > 80 || !Be.test(t) || qe.test(t)) return A;
+  if (t.length > 80 || !qe.test(t) || Be.test(t)) return A;
   const o = t.match(/\./g);
   if (o && o.length > 1) return A;
   try {
@@ -634,7 +634,8 @@ class Ke {
       field: e.field,
       header: e.header || e.field,
       visible: !e.hidden,
-      lockVisible: e.lockVisible
+      lockVisible: e.lockVisible,
+      utility: e.meta?.utility === !0
     }));
   }
   /**
@@ -783,7 +784,15 @@ function _e(t) {
 function ye(t) {
   if (!t) return -1;
   const e = t.getAttribute("data-row");
-  return e ? parseInt(e, 10) : -1;
+  if (e) return parseInt(e, 10);
+  const o = t.closest(".data-grid-row");
+  if (!o) return -1;
+  const i = o.parentElement;
+  if (!i) return -1;
+  const n = i.querySelectorAll(":scope > .data-grid-row");
+  for (let r = 0; r < n.length; r++)
+    if (n[r] === o) return r;
+  return -1;
 }
 function Ze(t) {
   if (!t) return -1;
@@ -949,8 +958,8 @@ function st(t, e, o, i, n) {
       const x = j(u), v = t._activeEditRows === f;
       x && !v ? (K(u), B(t, u, p, f), u.__epoch = i, u.__rowDataRef = p) : Z(t, u, p, f);
     }
-    const S = t._changedRowIndices?.has(f) ?? !1, U = u.classList.contains("changed");
-    S !== U && u.classList.toggle("changed", S), u.parentNode !== s && s.appendChild(u);
+    const R = t._changedRowIndices?.has(f) ?? !1, U = u.classList.contains("changed");
+    R !== U && u.classList.toggle("changed", R), u.parentNode !== s && s.appendChild(u);
   }
 }
 function Z(t, e, o, i) {
@@ -989,8 +998,8 @@ function Z(t, e, o, i) {
     if (m !== b && (g.classList.toggle("cell-focus", m), g.setAttribute("aria-selected", String(m))), g.classList.contains("editing")) continue;
     const _ = u.renderer || u.viewRenderer;
     if (_) {
-      const y = o[u.field], S = _({ row: o, value: y, field: u.field, column: u, cellEl: g });
-      typeof S == "string" ? g.innerHTML = F(S) : S instanceof Node ? S.parentElement !== g && (g.innerHTML = "", g.appendChild(S)) : S == null && (g.textContent = y == null ? "" : String(y));
+      const y = o[u.field], R = _({ row: o, value: y, field: u.field, column: u, cellEl: g });
+      typeof R == "string" ? g.innerHTML = G(R) : R instanceof Node ? R.parentElement !== g && (g.innerHTML = "", g.appendChild(R)) : R == null && (g.textContent = y == null ? "" : String(y));
       continue;
     }
     if (u.__viewTemplate || u.__compiledView || u.externalView)
@@ -1024,7 +1033,7 @@ function B(t, e, o, i) {
     let _ = !1;
     if (m) {
       const w = m({ row: o, value: p, field: d.field, column: d, cellEl: f });
-      typeof w == "string" ? (f.innerHTML = F(w), _ = !0) : w instanceof Node ? w.parentElement !== f && (f.textContent = "", f.appendChild(w)) : w == null && (f.textContent = p == null ? "" : String(p));
+      typeof w == "string" ? (f.innerHTML = G(w), _ = !0) : w instanceof Node ? w.parentElement !== f && (f.textContent = "", f.appendChild(w)) : w == null && (f.textContent = p == null ? "" : String(p));
     } else if (b) {
       const w = b, C = document.createElement("div");
       C.setAttribute("data-external-view", ""), C.setAttribute("data-field", d.field), f.appendChild(C);
@@ -1032,8 +1041,8 @@ function B(t, e, o, i) {
       if (w.mount)
         try {
           w.mount({ placeholder: C, context: y, spec: w });
-        } catch (S) {
-          console.warn(`[tbw-grid] External view mount error for column '${d.field}':`, S);
+        } catch (R) {
+          console.warn(`[tbw-grid] External view mount error for column '${d.field}':`, R);
         }
       else
         queueMicrotask(() => {
@@ -1045,17 +1054,17 @@ function B(t, e, o, i) {
                 detail: { placeholder: C, spec: w, context: y }
               })
             );
-          } catch (S) {
-            console.warn(`[tbw-grid] External view event dispatch error for column '${d.field}':`, S);
+          } catch (R) {
+            console.warn(`[tbw-grid] External view event dispatch error for column '${d.field}':`, R);
           }
         });
       C.setAttribute("data-mounted", "");
     } else if (u) {
       const w = u({ row: o, value: p, field: d.field, column: d }), C = u.__blocked;
-      f.innerHTML = C ? "" : F(w), _ = !0, C && (f.textContent = "", f.setAttribute("data-blocked-template", ""));
+      f.innerHTML = C ? "" : G(w), _ = !0, C && (f.textContent = "", f.setAttribute("data-blocked-template", ""));
     } else if (g) {
       const w = g.innerHTML;
-      /Reflect\.|\bProxy\b|ownKeys\(/.test(w) ? (f.textContent = "", f.setAttribute("data-blocked-template", "")) : (f.innerHTML = F(ve(w, { row: o, value: p })), _ = !0);
+      /Reflect\.|\bProxy\b|ownKeys\(/.test(w) ? (f.textContent = "", f.setAttribute("data-blocked-template", "")) : (f.innerHTML = G(ve(w, { row: o, value: p })), _ = !0);
     } else
       d.type === "date" ? f.textContent = _e(p) : d.type === "boolean" ? f.innerHTML = Ce(!!p) : f.textContent = p == null ? "" : String(p);
     if (_) {
@@ -1090,7 +1099,7 @@ function he(t, e, o, i) {
         }
         return;
       }
-      q(t);
+      k(t);
     }
   }
 }
@@ -1105,7 +1114,7 @@ function lt(t, e) {
   if (!(c(a) && (e.key === "Home" || e.key === "End")) && !(c(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(c(a) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) && !(c(a) && (e.key === "Enter" || e.key === "Escape")) && !(n && (s === "select" || s === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
     switch (e.key) {
       case "Tab": {
-        e.preventDefault(), !e.shiftKey ? t._focusCol < i ? t._focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow < o && (t._focusRow += 1, t._focusCol = 0)) : t._focusCol > 0 ? t._focusCol -= 1 : t._focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t._activeEditRows === t._focusRow && t.commitActiveRowEdit(), t._focusRow -= 1, t._focusCol = i), q(t);
+        e.preventDefault(), !e.shiftKey ? t._focusCol < i ? t._focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow < o && (t._focusRow += 1, t._focusCol = 0)) : t._focusCol > 0 ? t._focusCol -= 1 : t._focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t._activeEditRows === t._focusRow && t.commitActiveRowEdit(), t._focusRow -= 1, t._focusCol = i), k(t);
         return;
       }
       case "ArrowDown":
@@ -1121,10 +1130,10 @@ function lt(t, e) {
         t._focusCol = Math.max(0, t._focusCol - 1), e.preventDefault();
         break;
       case "Home":
-        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = 0), t._focusCol = 0, e.preventDefault(), q(t, { forceScrollLeft: !0 });
+        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = 0), t._focusCol = 0, e.preventDefault(), k(t, { forceScrollLeft: !0 });
         return;
       case "End":
-        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = o), t._focusCol = i, e.preventDefault(), q(t, { forceScrollRight: !0 });
+        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = o), t._focusCol = i, e.preventDefault(), k(t, { forceScrollRight: !0 });
         return;
       case "PageDown":
         t._focusRow = Math.min(o, t._focusRow + 20), e.preventDefault();
@@ -1133,19 +1142,25 @@ function lt(t, e) {
         t._focusRow = Math.max(0, t._focusRow - 20), e.preventDefault();
         break;
       // NOTE: Enter key is handled by EditingPlugin. If no plugin handles it,
-      // we dispatch an activate-cell event for custom handling but don't block navigation.
-      case "Enter":
-        t.dispatchEvent(
-          new CustomEvent("activate-cell", { detail: { row: t._focusRow, col: t._focusCol } })
-        );
+      // we dispatch a cancelable activate-cell event for custom handling.
+      case "Enter": {
+        const h = new CustomEvent("activate-cell", {
+          cancelable: !0,
+          detail: { row: t._focusRow, col: t._focusCol }
+        });
+        if (t.dispatchEvent(h), h.defaultPrevented) {
+          e.preventDefault();
+          return;
+        }
         break;
+      }
       default:
         return;
     }
-    q(t);
+    k(t);
   }
 }
-function q(t, e) {
+function k(t, e) {
   if (t._virtualization?.enabled) {
     const { rowHeight: s, container: l, viewportEl: a } = t._virtualization, c = l, h = a?.clientHeight ?? c?.clientHeight ?? 0;
     if (c && h > 0) {
@@ -1159,8 +1174,9 @@ function q(t, e) {
   });
   const i = t._focusRow, n = t._virtualization.start ?? 0, r = t._virtualization.end ?? t._rows.length;
   if (i >= n && i < r) {
-    const s = t._bodyEl.querySelectorAll(".data-grid-row")[i - n], l = s?.children[t._focusCol];
-    if (l) {
+    const s = t._bodyEl.querySelectorAll(".data-grid-row")[i - n];
+    let l = s?.children[t._focusCol];
+    if ((!l || !l.classList?.contains("cell")) && (l = s?.querySelector(`.cell[data-col="${t._focusCol}"]`) ?? s?.querySelector(".cell[data-col]")), l) {
       l.classList.add("cell-focus"), l.setAttribute("aria-selected", "true");
       const a = t.shadowRoot?.querySelector(".tbw-scroll-area");
       if (a && l && !o)
@@ -1192,7 +1208,7 @@ function q(t, e) {
     }
   }
 }
-var R = /* @__PURE__ */ ((t) => (t[t.STYLE = 1] = "STYLE", t[t.VIRTUALIZATION = 2] = "VIRTUALIZATION", t[t.HEADER = 3] = "HEADER", t[t.ROWS = 4] = "ROWS", t[t.COLUMNS = 5] = "COLUMNS", t[t.FULL = 6] = "FULL", t))(R || {});
+var S = /* @__PURE__ */ ((t) => (t[t.STYLE = 1] = "STYLE", t[t.VIRTUALIZATION = 2] = "VIRTUALIZATION", t[t.HEADER = 3] = "HEADER", t[t.ROWS = 4] = "ROWS", t[t.COLUMNS = 5] = "COLUMNS", t[t.FULL = 6] = "FULL", t))(S || {});
 class at {
   #o;
   /** Current pending phase (0 = none pending) */
@@ -1310,7 +1326,7 @@ function ct(t) {
     }
   };
 }
-function G(t, e, o) {
+function F(t, e, o) {
   const i = document.createElement(t);
   if (e)
     for (const n in e) {
@@ -1404,7 +1420,7 @@ function ht(t) {
   n.appendChild(Pe());
   let r = null;
   if (o) {
-    r = G("aside", {
+    r = F("aside", {
       class: t.isPanelOpen ? "tbw-tool-panel open" : "tbw-tool-panel",
       part: "tool-panel",
       "data-position": t.position,
@@ -1426,12 +1442,12 @@ function ht(t) {
         "aria-controls": `tbw-section-${c.id}`
       });
       if (i && f.setAttribute("aria-disabled", "true"), c.icon) {
-        const u = G("span", { class: "tbw-accordion-icon" });
+        const u = F("span", { class: "tbw-accordion-icon" });
         u.innerHTML = c.icon, f.appendChild(u);
       }
-      const p = G("span", { class: "tbw-accordion-title" });
+      const p = F("span", { class: "tbw-accordion-title" });
       if (p.textContent = c.title, f.appendChild(p), !i) {
-        const u = G("span", { class: "tbw-accordion-chevron" });
+        const u = F("span", { class: "tbw-accordion-chevron" });
         u.innerHTML = c.isExpanded ? t.collapseIcon : t.expandIcon, f.appendChild(u);
       }
       d.appendChild(f), d.appendChild(
@@ -2410,7 +2426,7 @@ class zt {
 class D extends HTMLElement {
   // TODO: Rename to 'data-grid' when migration is complete
   static tagName = "tbw-grid";
-  static version = "0.4.1";
+  static version = "0.4.2";
   // ---------------- Framework Adapters ----------------
   /**
    * Registry of framework adapters that handle converting light DOM elements
@@ -2527,7 +2543,7 @@ class D extends HTMLElement {
   _rows = [];
   // _baseColumns: columns before plugin transformation (analogous to #rows for row processing)
   // This is the source of truth for processColumns - plugins transform these
-  #z = [];
+  #N = [];
   // _columns is a getter/setter that operates on effectiveConfig.columns
   // This ensures effectiveConfig.columns is the single source of truth for columns
   // _columns always contains ALL columns (including hidden)
@@ -2563,6 +2579,8 @@ class D extends HTMLElement {
   // Focus & navigation
   _focusRow = 0;
   _focusCol = 0;
+  /** Flag to restore focus styling after next render. @internal */
+  _restoreFocusAfterRender = !1;
   // Sort state
   _sortState = null;
   // Layout
@@ -2665,15 +2683,15 @@ class D extends HTMLElement {
   constructor() {
     super(), this.#o = this.attachShadow({ mode: "open" }), this.#J(), this.#f = new Promise((e) => this.#d = e), this.#l = new at({
       mergeConfig: () => {
-        this.#t.parseLightDomColumns(this), this.#t.merge(), this.#V(), Ht(this.#n, this.#i?.getPlugins() ?? []), this.#z = [...this._columns];
+        this.#t.parseLightDomColumns(this), this.#t.merge(), this.#G(), Ht(this.#n, this.#i?.getPlugins() ?? []), this.#N = [...this._columns];
       },
       processColumns: () => this.#de(),
       processRows: () => this.#he(),
       renderHeader: () => X(this),
-      updateTemplate: () => I(this),
+      updateTemplate: () => q(this),
       renderVirtualWindow: () => this.refreshVirtualWindow(!0),
       afterRender: () => {
-        this.#i?.afterRender(), this.#n.fitMode === "fixed" && !this.__didInitialAutoSize && (this.__didInitialAutoSize = !0, ne(this));
+        this.#i?.afterRender(), this.#n.fitMode === "fixed" && !this.__didInitialAutoSize && (this.__didInitialAutoSize = !0, ne(this)), this._restoreFocusAfterRender && (this._restoreFocusAfterRender = !1, k(this)), this._virtualization.enabled && !this.#z && this.#te();
       },
       isConnected: () => this.isConnected && this.#h
     }), this.#l.setInitialReadyResolver(() => this.#d?.()), this.#a = vt(this.#e, {
@@ -2692,7 +2710,7 @@ class D extends HTMLElement {
         this._sortState = e;
       },
       onConfigChange: () => {
-        this.#l.requestPhase(R.FULL, "configChange");
+        this.#l.requestPhase(S.FULL, "configChange");
       },
       emit: (e, o) => this.#Y(e, o),
       clearRowPool: () => {
@@ -2700,8 +2718,8 @@ class D extends HTMLElement {
       },
       setup: () => this.#T(),
       renderHeader: () => X(this),
-      updateTemplate: () => I(this),
-      refreshVirtualWindow: () => this.#l.requestPhase(R.VIRTUALIZATION, "configManager"),
+      updateTemplate: () => q(this),
+      refreshVirtualWindow: () => this.#l.requestPhase(S.VIRTUALIZATION, "configManager"),
       getVirtualization: () => this._virtualization,
       setRowHeight: (e) => {
         this._virtualization.rowHeight = e;
@@ -2768,7 +2786,16 @@ class D extends HTMLElement {
    * @internal Plugin API
    */
   requestRender() {
-    this.#l.requestPhase(R.ROWS, "plugin:requestRender");
+    this.#l.requestPhase(S.ROWS, "plugin:requestRender");
+  }
+  /**
+   * Request a full re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   * @internal Plugin API
+   */
+  requestRenderWithFocus() {
+    this._restoreFocusAfterRender = !0, this.#l.requestPhase(S.ROWS, "plugin:requestRenderWithFocus");
   }
   /**
    * Update the grid's column template CSS.
@@ -2776,7 +2803,7 @@ class D extends HTMLElement {
    * @internal
    */
   updateTemplate() {
-    I(this);
+    q(this);
   }
   /**
    * Request a lightweight style update without rebuilding DOM.
@@ -2785,13 +2812,13 @@ class D extends HTMLElement {
    * @internal Plugin API
    */
   requestAfterRender() {
-    this.#l.requestPhase(R.STYLE, "plugin:requestAfterRender");
+    this.#l.requestPhase(S.STYLE, "plugin:requestAfterRender");
   }
   /**
    * Initialize plugin system with instances from config.
    * Plugins are class instances passed in gridConfig.plugins[].
    */
-  #G() {
+  #V() {
     this.#i = new zt(this);
     const e = this.#n?.plugins, o = Array.isArray(e) ? e : [];
     this.#i.attachAll(o);
@@ -2812,7 +2839,7 @@ class D extends HTMLElement {
    * With class-based plugins, we need to detach old and attach new.
    * Skips re-initialization if the plugins array hasn't changed.
    */
-  #V() {
+  #G() {
     const e = this.#n?.plugins, o = Array.isArray(e) ? e : [];
     if (this.#E !== o) {
       if (this.#E && this.#E.length === o.length && this.#E.every((i, n) => i === o[n])) {
@@ -2831,7 +2858,7 @@ class D extends HTMLElement {
         const n = this.#e.headerContentCleanups.get(i);
         n && (n(), this.#e.headerContentCleanups.delete(i)), this.#e.headerContents.delete(i);
       }
-      this.#G(), this.#M(), this.#E = o, this.#F(), this.#b = this.#i?.getAll().some((i) => i.onScroll) ?? !1;
+      this.#V(), this.#M(), this.#E = o, this.#X(), this.#b = this.#i?.getAll().some((i) => i.onScroll) ?? !1;
     }
   }
   /**
@@ -2844,7 +2871,7 @@ class D extends HTMLElement {
    * Collect tool panels and header content from all plugins.
    * Called after plugins are attached but before render.
    */
-  #F() {
+  #X() {
     if (!this.#i) return;
     const e = this.#i.getToolPanels();
     for (const { panel: i } of e)
@@ -2875,9 +2902,9 @@ class D extends HTMLElement {
   }
   // ---------------- Lifecycle ----------------
   connectedCallback() {
-    this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", D.version), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#g && (this.#g.abort(), this.#O = !1), this.#g = new AbortController(), this.#C && (de(this.#C), this.#C = void 0), M(this, this.#e), z(this, this.#e), N(this, this.#e, this.#R()), this.#t.parseLightDomColumns(this), this.#t.merge(), this.#G();
+    this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", D.version), this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#g && (this.#g.abort(), this.#O = !1), this.#g = new AbortController(), this.#C && (de(this.#C), this.#C = void 0), M(this, this.#e), z(this, this.#e), N(this, this.#e, this.#R()), this.#t.parseLightDomColumns(this), this.#t.merge(), this.#V();
     const e = this.#n?.plugins;
-    this.#E = Array.isArray(e) ? e : [], this.#F(), this.#c || (this.#U(), this.#M(), this.#c = !0), this.#N(), this.#C = it(
+    this.#E = Array.isArray(e) ? e : [], this.#X(), this.#c || (this.#$(), this.#M(), this.#c = !0), this.#k(), this.#C = it(
       () => {
         this.#me();
       },
@@ -2885,7 +2912,7 @@ class D extends HTMLElement {
     );
   }
   disconnectedCallback() {
-    this.#C && (de(this.#C), this.#C = void 0), this.#Q(), mt(this.#e), this.#a.setInitialized(!1), this.#D?.(), this.#D = void 0, Oe(this.#A), this.#g && (this.#g.abort(), this.#g = void 0), this.#P?.abort(), this.#P = void 0, this.#O = !1, this._resizeController && this._resizeController.dispose(), this.#_ && (this.#_.disconnect(), this.#_ = void 0), this.#y && (this.#y.disconnect(), this.#y = void 0, this.#k = !1), $(this), this.#x.clear(), this.#E = void 0;
+    this.#C && (de(this.#C), this.#C = void 0), this.#Q(), mt(this.#e), this.#a.setInitialized(!1), this.#D?.(), this.#D = void 0, Oe(this.#A), this.#g && (this.#g.abort(), this.#g = void 0), this.#P?.abort(), this.#P = void 0, this.#O = !1, this._resizeController && this._resizeController.dispose(), this.#_ && (this.#_.disconnect(), this.#_ = void 0), this.#y && (this.#y.disconnect(), this.#y = void 0, this.#z = !1), $(this), this.#x.clear(), this.#E = void 0;
     for (const e of this._rowPool)
       e.remove();
     this._rowPool.length = 0, this.__rowsBodyEl = null, this.#h = !1;
@@ -2906,7 +2933,7 @@ class D extends HTMLElement {
         }
       else e === "fit-mode" ? this.fitMode = i : e === "edit-on" && (this.editOn = i);
   }
-  #N() {
+  #k() {
     const o = this.#o.querySelector(".tbw-grid-content") ?? this.#o.querySelector(".tbw-grid-root");
     if (this._headerRowEl = o?.querySelector(".header-row"), this._virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this._virtualization.viewportEl = o?.querySelector(".rows-viewport"), this._bodyEl = o?.querySelector(".rows"), this.__rowsBodyEl = o?.querySelector(".rows-body"), this.#a.isInitialized) {
       He(this.#o, this.#e), gt(this.#o, this.#n?.shell, this.#e);
@@ -2919,13 +2946,13 @@ class D extends HTMLElement {
     const i = this.disconnectSignal;
     this.addEventListener("keydown", (r) => lt(this, r), { signal: i }), this.#o.addEventListener("mousedown", (r) => this.#pe(r), { signal: i }), document.addEventListener("mousemove", (r) => this.#ge(r), { signal: i }), document.addEventListener("mouseup", (r) => this.#we(r), { signal: i });
     const n = this.#n.rowHeight;
-    n && n > 0 ? this._virtualization.rowHeight = n : requestAnimationFrame(() => this.#X()), queueMicrotask(() => this.#oe()), this.#l.requestPhase(R.FULL, "afterConnect");
+    n && n > 0 ? this._virtualization.rowHeight = n : requestAnimationFrame(() => this.#I()), queueMicrotask(() => this.#oe()), this.#l.requestPhase(S.FULL, "afterConnect");
   }
   /**
    * Measure actual row height from DOM.
    * Finds the tallest cell to account for custom renderers that may push height.
    */
-  #X() {
+  #I() {
     const e = this._bodyEl?.querySelector(".data-grid-row");
     if (!e) return;
     const o = e.querySelectorAll(".cell");
@@ -2935,7 +2962,7 @@ class D extends HTMLElement {
       l > i && (i = l);
     });
     const n = e.getBoundingClientRect(), r = Math.max(n.height, i);
-    r > 0 && r !== this._virtualization.rowHeight && (this._virtualization.rowHeight = r, this.#l.requestPhase(R.VIRTUALIZATION, "measureRowHeight"));
+    r > 0 && r !== this._virtualization.rowHeight && (this._virtualization.rowHeight = r, this.#l.requestPhase(S.VIRTUALIZATION, "measureRowHeight"));
   }
   /**
    * Set up scroll-related event listeners on DOM elements.
@@ -2980,25 +3007,37 @@ class D extends HTMLElement {
       ), At(r, this.#A, { fauxScrollbar: i, scrollArea: s }, o));
     }
     this._bodyEl && Qe(this, this._bodyEl, o), this.#_?.disconnect(), this._virtualization.viewportEl && (this.#_ = new ResizeObserver(() => {
-      this.#l.requestPhase(R.VIRTUALIZATION, "resize-observer");
-    }), this.#_.observe(this._virtualization.viewportEl)), this._virtualization.enabled && (this.#l.requestPhase(R.VIRTUALIZATION, "init-virtualization"), queueMicrotask(() => this.#te()));
+      this.#l.requestPhase(S.VIRTUALIZATION, "resize-observer");
+    }), this.#_.observe(this._virtualization.viewportEl)), this._virtualization.enabled && this.#l.requestPhase(S.VIRTUALIZATION, "init-virtualization"), this.#o.addEventListener(
+      "focusin",
+      () => {
+        this.dataset.hasFocus = "";
+      },
+      { signal: o }
+    ), this.#o.addEventListener(
+      "focusout",
+      (r) => {
+        const s = r.relatedTarget;
+        (!s || !this.#o.contains(s)) && delete this.dataset.hasFocus;
+      },
+      { signal: o }
+    );
   }
   /**
-   * Set up ResizeObserver on first row's cells to detect height changes.
-   * Called after rows are rendered to observe the actual content cells.
-   * Handles dynamic CSS loading, lazy images, font loading, etc.
+   * Set up ResizeObserver on first row to detect height changes.
+   * Called after rows are rendered to observe the actual content.
+   * Handles dynamic CSS loading, lazy images, font loading, column virtualization, etc.
    */
-  #k = !1;
+  #z = !1;
   // Only set up once per lifecycle
   #te() {
-    if (this.#k) return;
+    if (this.#z) return;
     const e = this._bodyEl?.querySelector(".data-grid-row");
-    if (!e) return;
-    this.#k = !0, this.#y?.disconnect();
-    const o = e.querySelectorAll(".cell");
-    o.length > 0 && (this.#y = new ResizeObserver(() => {
-      this.#X();
-    }), o.forEach((i) => this.#y.observe(i)));
+    e && (this.#z = !0, this.#y?.disconnect(), this.#y = new ResizeObserver(() => {
+      this.#I();
+    }), this.#y.observe(e), requestAnimationFrame(() => {
+      this.#I();
+    }));
   }
   // ---------------- Event Emitters ----------------
   #Y(e, o) {
@@ -3047,7 +3086,7 @@ class D extends HTMLElement {
   }
   // Individual update applicators - these do the actual work
   #ne() {
-    this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#l.requestPhase(R.ROWS, "applyRowsUpdate");
+    this._rows = Array.isArray(this.#r) ? [...this.#r] : [], this.#l.requestPhase(S.ROWS, "applyRowsUpdate");
   }
   #re() {
     $(this), this.#t.merge(), this.#T();
@@ -3055,21 +3094,21 @@ class D extends HTMLElement {
   #se() {
     this.#t.merge(), this.#n.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, ne(this)) : (this._columns.forEach((o) => {
       !o.__userResized && o.__autoSized && delete o.width;
-    }), I(this));
+    }), q(this));
   }
   #le() {
-    this.#t.merge(), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#l.requestPhase(R.VIRTUALIZATION, "applyEditModeUpdate");
+    this.#t.merge(), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#l.requestPhase(S.VIRTUALIZATION, "applyEditModeUpdate");
   }
   #ae() {
     M(this, this.#e), z(this, this.#e);
     const e = !!this.#o.querySelector(".has-shell"), o = !!this.#o.querySelector(".tbw-tool-panel"), i = this.#o.querySelectorAll(".tbw-accordion-section").length;
-    this.#t.parseLightDomColumns(this), this.#t.merge(), this.#V(), N(this, this.#e, this.#R()), this.#t.markSourcesChanged(), this.#t.merge();
+    this.#t.parseLightDomColumns(this), this.#t.merge(), this.#G(), N(this, this.#e, this.#R()), this.#t.markSourcesChanged(), this.#t.merge();
     const n = Le(this.#n?.shell), r = (this.#n?.shell?.toolPanels?.length ?? 0) > 0, s = (this.#n?.shell?.toolPanels?.length ?? 0) !== i;
     if (e !== n || !e && n || !o && r || o && s) {
-      this.#U(), this.#M(), this.#N();
+      this.#$(), this.#M(), this.#k();
       return;
     }
-    e && this.#ce(), this.#l.requestPhase(R.COLUMNS, "applyGridConfigUpdate");
+    e && this.#ce(), this.#l.requestPhase(S.COLUMNS, "applyGridConfigUpdate");
   }
   /**
    * Update the shell header DOM in place without a full re-render.
@@ -3088,19 +3127,11 @@ class D extends HTMLElement {
   // (e.g., setting rows, columns, gridConfig in quick succession) into a single update cycle.
   #de() {
     if (this.#i) {
-      const e = this.#z.length > 0 ? this.#z : this._columns, o = e.filter((r) => !r.hidden), i = e.filter((r) => r.hidden), n = this.#i.processColumns([...o]);
+      const e = this.#N.length > 0 ? this.#N : this._columns, o = e.filter((r) => !r.hidden), i = e.filter((r) => r.hidden), n = this.#i.processColumns([...o]);
       if (n !== o) {
-        const r = new Map(n.map((l, a) => [l.field, { col: l, order: a }]));
-        if (!o.some((l) => r.has(l.field)) && n.length > 0)
-          this._columns = [...n, ...i];
-        else {
-          const l = e.map((a) => {
-            if (a.hidden) return a;
-            const c = r.get(a.field);
-            return c ? c.col : a;
-          });
-          this._columns = l;
-        }
+        new Set(o.map((l) => l.field));
+        const r = new Set(n.map((l) => l.field));
+        !o.some((l) => r.has(l.field)) && n.length > 0 ? this._columns = [...n, ...i] : this._columns = [...n, ...i];
       } else
         this._columns = [...e];
     }
@@ -3125,7 +3156,7 @@ class D extends HTMLElement {
     i === !1 || i === "off" ? n = 0 : (i === !0 || i === "on") && (n = 1), this.style.setProperty("--tbw-animation-duration", `${o.duration}ms`), this.style.setProperty("--tbw-animation-easing", o.easing ?? "ease-out"), this.style.setProperty("--tbw-animation-enabled", String(n)), this.dataset.animationMode = typeof i == "boolean" ? i ? "on" : "off" : i;
   }
   // ---------------- Delegate Wrappers ----------------
-  #I(e, o, i = this.__rowRenderEpoch) {
+  #q(e, o, i = this.__rowRenderEpoch) {
     this.#s || (this.#s = (n, r, s) => this.#i?.renderRow(n, r, s) ?? !1), st(this, e, o, i, this.#s);
   }
   // Cache for ARIA counts to avoid redundant DOM writes on scroll (hot path)
@@ -3159,7 +3190,7 @@ class D extends HTMLElement {
         const o = this.#i?.getAll() ?? [];
         this.#t.applyState(e, o);
       }
-      this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), this.#l.requestPhase(R.FULL, "setup");
+      this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), this.#l.requestPhase(S.FULL, "setup");
     }
   }
   #fe(e) {
@@ -3269,7 +3300,7 @@ class D extends HTMLElement {
    * Build a CellMouseEvent from a native MouseEvent.
    * Extracts cell/row information from the event target.
    */
-  #q(e, o) {
+  #W(e, o) {
     let i = null;
     const n = e.composedPath?.();
     if (n && n.length > 0 ? i = n[0] : i = e.target, i && !this.#o.contains(i)) {
@@ -3297,7 +3328,7 @@ class D extends HTMLElement {
    * Handle mousedown events and dispatch to plugin system.
    */
   #pe(e) {
-    const o = this.#q(e, "mousedown");
+    const o = this.#W(e, "mousedown");
     (this.#i?.onCellMouseDown(o) ?? !1) && (this.#m = !0);
   }
   /**
@@ -3305,7 +3336,7 @@ class D extends HTMLElement {
    */
   #ge(e) {
     if (!this.#m) return;
-    const o = this.#q(e, "mousemove");
+    const o = this.#W(e, "mousemove");
     this.#i?.onCellMouseMove(o);
   }
   /**
@@ -3313,14 +3344,14 @@ class D extends HTMLElement {
    */
   #we(e) {
     if (!this.#m) return;
-    const o = this.#q(e, "mouseup");
+    const o = this.#W(e, "mouseup");
     this.#i?.onCellMouseUp(o), this.#m = !1;
   }
   async ready() {
     return this.#f;
   }
   async forceLayout() {
-    return this.#l.requestPhase(R.FULL, "forceLayout"), this.#l.whenReady();
+    return this.#l.requestPhase(S.FULL, "forceLayout"), this.#l.whenReady();
   }
   /**
    * Trim the internal row pool to match the current visible window size.
@@ -3487,7 +3518,7 @@ class D extends HTMLElement {
    * Call this after dynamically modifying <tbw-grid-header> children.
    */
   refreshShellHeader() {
-    M(this, this.#e), z(this, this.#e), N(this, this.#e, this.#R()), this.#t.markSourcesChanged(), this.#t.merge(), this.#U(), this.#M(), this.#N();
+    M(this, this.#e), z(this, this.#e), N(this, this.#e, this.#R()), this.#t.markSourcesChanged(), this.#t.merge(), this.#$(), this.#M(), this.#k();
   }
   // #region Custom Styles API
   /** Map of registered custom stylesheets by ID - uses adoptedStyleSheets which survive DOM rebuilds */
@@ -3567,7 +3598,7 @@ class D extends HTMLElement {
           ), c = document.createElement("div");
           c.innerHTML = a;
           const h = c.firstElementChild;
-          h && (l.replaceWith(h), this.#$());
+          h && (l.replaceWith(h), this.#F());
         }
       }
     }, o = () => {
@@ -3597,17 +3628,17 @@ class D extends HTMLElement {
         ), a = document.createElement("div");
         a.innerHTML = l;
         const c = a.firstElementChild;
-        c && (s.replaceWith(c), this.#$());
+        c && (s.replaceWith(c), this.#F());
       }
     }
-    this.#l.requestPhase(R.COLUMNS, "refreshColumns");
+    this.#l.requestPhase(S.COLUMNS, "refreshColumns");
   }
   // ---------------- Virtual Window ----------------
   /**
    * Calculate total height for the faux scrollbar spacer element.
    * Used by both bypass and virtualized rendering paths to ensure consistent scroll behavior.
    */
-  #W(e) {
+  #U(e) {
     const o = this._virtualization.rowHeight, i = this._virtualization.container ?? this, n = this._virtualization.viewportEl ?? i, r = i.clientHeight, s = n.clientHeight, a = this.shadowRoot?.querySelector(".tbw-scroll-area"), c = a ? a.clientHeight : r, d = c - s, f = this.#i?.getExtraHeight() ?? 0, p = Math.max(0, r - c);
     return e * o + d + f + p;
   }
@@ -3620,11 +3651,11 @@ class D extends HTMLElement {
     if (!this._bodyEl) return;
     const o = this._rows.length;
     if (!this._virtualization.enabled) {
-      this.#I(0, o), this.#i?.afterRender();
+      this.#q(0, o), this.#i?.afterRender();
       return;
     }
     if (this._rows.length <= this._virtualization.bypassThreshold) {
-      this._virtualization.start = 0, this._virtualization.end = o, e && (this._bodyEl.style.transform = "translateY(0px)"), this.#I(0, o, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${this.#W(o)}px`), this.#K(o, this._visibleColumns.length), this.#i?.afterRender();
+      this._virtualization.start = 0, this._virtualization.end = o, e && (this._bodyEl.style.transform = "translateY(0px)"), this.#q(0, o, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${this.#U(o)}px`), this.#K(o, this._visibleColumns.length), this.#i?.afterRender();
       return;
     }
     const i = this._virtualization.container ?? this, n = this._virtualization.viewportEl ?? i, r = n.clientHeight, s = this._virtualization.rowHeight, l = i.scrollTop;
@@ -3641,21 +3672,21 @@ class D extends HTMLElement {
     const f = Math.ceil(r / s) + 3;
     let p = a + f;
     if (p > o && (p = o), this._virtualization.start = a, this._virtualization.end = p, i.clientHeight === 0 && r > 0) {
-      this.#l.requestPhase(R.VIRTUALIZATION, "stale-refs-retry");
+      this.#l.requestPhase(S.VIRTUALIZATION, "stale-refs-retry");
       return;
     }
-    const g = this.#W(o);
+    const g = this.#U(o);
     this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${g}px`);
     const m = this.#i?.getExtraHeightBefore?.(a) ?? 0, b = -(l - a * s - m);
-    this._bodyEl.style.transform = `translateY(${b}px)`, this.#I(a, p, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this.#K(o, this._visibleColumns.length), e && (this.#i?.afterRender(), queueMicrotask(() => {
+    this._bodyEl.style.transform = `translateY(${b}px)`, this.#q(a, p, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this.#K(o, this._visibleColumns.length), e && (this.#i?.afterRender(), queueMicrotask(() => {
       const _ = i.clientHeight, w = n.clientHeight;
       if (_ === 0 && w > 0) return;
-      const C = this.#W(o);
+      const C = this.#U(o);
       this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${C}px`);
     }));
   }
   // ---------------- Render ----------------
-  #U() {
+  #$() {
     M(this, this.#e), z(this, this.#e), N(this, this.#e, this.#R()), this.#t.markSourcesChanged(), this.#t.merge();
     const e = this.#n?.shell;
     _t(
@@ -3663,12 +3694,12 @@ class D extends HTMLElement {
       e,
       { isPanelOpen: this.#e.isPanelOpen, expandedSections: this.#e.expandedSections },
       this.#n?.icons
-    ) && (this.#$(), this.#a.setInitialized(!0));
+    ) && (this.#F(), this.#a.setInitialized(!0));
   }
   /**
    * Set up shell event listeners after render.
    */
-  #$() {
+  #F() {
     ft(this.#o, this.#n?.shell, this.#e, {
       onPanelToggle: () => this.toggleToolPanel(),
       onSectionToggle: (e) => this.toggleToolPanelSection(e),
@@ -3711,8 +3742,11 @@ class It {
    * ```
    */
   static dependencies;
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = "0.4.2";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -3799,12 +3833,28 @@ class It {
   emit(e, o) {
     this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: o, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(e, o) {
+    const i = new CustomEvent(e, { detail: o, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(i), i.defaultPrevented;
+  }
   /**
    * Request a re-render of the grid.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -3838,6 +3888,19 @@ class It {
   get visibleColumns() {
     return this.grid?._visibleColumns ?? [];
   }
+  /**
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
   /**
    * Get the shadow root of the grid.
    */
@@ -3872,6 +3935,51 @@ class It {
     const e = this.grid?.gridConfig?.icons ?? {};
     return { ...L, ...e };
   }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (e === !1 || e === "off") return !1;
+    if (e === !0 || e === "on") return !0;
+    const o = this.shadowRoot?.host;
+    return o ? getComputedStyle(o).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  get animationDuration() {
+    const e = this.shadowRoot?.host;
+    if (e) {
+      const o = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(o, 10);
+      if (!isNaN(i)) return i;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -3961,7 +4069,7 @@ const E = {
   // TreePlugin
   STICKY: "data-sticky"
   // PinnedColumnsPlugin
-}, Bt = {
+}, qt = {
   ROOT: `.${E.ROOT}`,
   HEADER: `.${E.HEADER}`,
   HEADER_ROW: `.${E.HEADER_ROW}`,
@@ -3978,7 +4086,7 @@ const E = {
   // State selectors
   SELECTED_ROWS: `.${E.DATA_ROW}.${E.SELECTED}`,
   EDITING_CELL: `.${E.DATA_CELL}.${E.EDITING}`
-}, qt = {
+}, Bt = {
   // Colors
   COLOR_BG: "--tbw-color-bg",
   COLOR_FG: "--tbw-color-fg",
@@ -4053,25 +4161,25 @@ const E = {
   max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
   first: (t, e) => t[0]?.[e],
   last: (t, e) => t[t.length - 1]?.[e]
-}, k = /* @__PURE__ */ new Map(), P = {
+}, I = /* @__PURE__ */ new Map(), P = {
   /**
    * Register a custom aggregator function.
    */
   register(t, e) {
-    k.set(t, e);
+    I.set(t, e);
   },
   /**
    * Unregister a custom aggregator function.
    */
   unregister(t) {
-    k.delete(t);
+    I.delete(t);
   },
   /**
    * Get an aggregator function by reference.
    */
   get(t) {
     if (t !== void 0)
-      return typeof t == "function" ? t : k.get(t) ?? Q[t];
+      return typeof t == "function" ? t : I.get(t) ?? Q[t];
   },
   /**
    * Run an aggregator on a set of rows.
@@ -4084,13 +4192,13 @@ const E = {
    * Check if an aggregator exists.
    */
   has(t) {
-    return k.has(t) || t in Q;
+    return I.has(t) || t in Q;
   },
   /**
    * List all available aggregator names.
    */
   list() {
-    return [...Object.keys(Q), ...k.keys()];
+    return [...Object.keys(Q), ...I.keys()];
   }
 }, me = {
   sum: (t) => t.reduce((e, o) => e + o, 0),
@@ -4107,7 +4215,7 @@ function Nt(t) {
 function $t(t, e) {
   return Nt(t)(e);
 }
-const Gt = P.register.bind(P), Vt = P.unregister.bind(P), Ft = P.get.bind(P), Xt = P.run.bind(P), Yt = P.list.bind(P);
+const Ft = P.register.bind(P), Vt = P.unregister.bind(P), Gt = P.get.bind(P), Xt = P.run.bind(P), Yt = P.list.bind(P);
 export {
   It as BaseGridPlugin,
   Me as DEFAULT_ANIMATION_CONFIG,
@@ -4115,29 +4223,29 @@ export {
   Wt as DGEvents,
   D as DataGridElement,
   W as FitModeEnum,
-  qt as GridCSSVars,
+  Bt as GridCSSVars,
   E as GridClasses,
   V as GridDataAttrs,
   D as GridElement,
-  Bt as GridSelectors,
+  qt as GridSelectors,
   kt as PLUGIN_QUERIES,
   Ut as PluginEvents,
   zt as PluginManager,
-  R as RenderPhase,
-  q as a,
+  S as RenderPhase,
+  k as a,
   P as aggregatorRegistry,
   tt as builtInSort,
   ee as c,
   et as defaultComparator,
   ve as e,
   ye as g,
-  Ft as getAggregator,
+  Gt as getAggregator,
   Nt as getValueAggregator,
   Yt as listAggregators,
-  Gt as registerAggregator,
+  Ft as registerAggregator,
   Xt as runAggregator,
   $t as runValueAggregator,
-  F as s,
+  G as s,
   Vt as unregisterAggregator
 };
 //# sourceMappingURL=index.js.map