@vielzeug/refine 2.2.5 → 2.4.0

package/dist/datagrid.cjs

@@ -1,8 +1,8 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/table-base.css.cjs");require("./_dev.cjs");const t=require("./shared/prop-bundles.cjs"),n=require("./inputs/datagrid/datagrid.css.cjs"),r=require("./inputs/datagrid/datagrid-column.cjs"),i=require("./inputs/datagrid/datagrid-model.cjs"),a=require("./inputs/datagrid/datagrid-nav.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/arsenal/function");function l(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function u(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}var d=`ore-datagrid`;(0,o.define)(d,{props:{activeView:o.prop.string(),density:o.prop.string(),...t.disablableBundle,...t.loadableBundle,columns:o.prop.data(),emptyText:o.prop.string(`No data`),expandable:o.prop.bool(!1),filterOptions:o.prop.data(),fullwidth:o.prop.bool(!1),getRowKey:o.prop.data(),label:o.prop.string(),pageSize:o.prop.number(10),pageSizeOptions:o.prop.data(),rows:o.prop.data(),searchLabel:o.prop.data(),searchPlaceholder:o.prop.string(`Search…`),selectedKeys:o.prop.data(),selectionMode:o.prop.string(`none`),sortMode:o.prop.string(`client`),source:o.prop.data(),striped:o.prop.bool(!1),views:o.prop.data()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),d=(0,o.useSlots)(),f=(0,s.computed)(()=>e.disabled.value===!0),p=(0,s.computed)(()=>e.selectionMode.value??`none`),m=(0,s.signal)(new Set),h=(0,s.computed)(()=>e.expandable.value===!0&&y.value.some(e=>typeof e.renderExpanded==`function`)),g=(0,s.computed)(()=>+(p.value===`multi`)),_=(0,s.signal)(e.pageSize.value??10);(0,s.watch)(e.pageSize,e=>{e!=null&&(_.value=e)});let v=(0,s.signal)([]);(0,o.onMounted)(()=>{v.value=r.parseColumnChildren(t);let e=new MutationObserver(()=>{v.value=r.parseColumnChildren(t)});return e.observe(t,{attributeFilter:r.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let y=(0,s.computed)(()=>{let t=e.columns.value;return t===void 0?v.value:t}),b=t=>{let n=e.getRowKey.value;if(n)return n(t);let r=t.id;return r==null?`__missing_${Math.random().toString(36).slice(2)}`:String(r)},x=(0,s.computed)(()=>e.source.value!=null),S=(0,s.signal)([]),C=(0,s.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:_.value,totalItems:0}),w=null;(0,o.onCleanup)(()=>{w?.(),w=null}),(0,s.watch)(e.source,e=>{if(w?.(),w=null,!e){S.value=[],C.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:_.value,totalItems:0};return}let t=(t=e.snapshot)=>{S.value=t.data,C.value={error:t.error,isLoading:t.isFetching,pageCount:t.pagination.count,pageNumber:t.pagination.index,pageSize:t.pagination.size,totalItems:t.pagination.total}};t(),w=e.subscribe(t)},{immediate:!0});let T=i.createDataGridModel({clientSide:(0,s.computed)(()=>!x.value),columns:y,filterOptions:e.filterOptions,getRowKey:b,items:(0,s.computed)(()=>x.value?S.value:e.rows.value??[]),onSelectionChange:e=>{n(`selection-change`,{keys:[...e],rows:T.selectedRows.value})},onSortChange:e=>{n(`sort-change`,e)},pageSize:(0,s.computed)(()=>x.value?0:_.value),selectionMode:p,sortMode:(0,s.computed)(()=>e.sortMode.value??`client`)}),E=(0,c.debounce)(t=>{let n=e.source.value;n?.setQuery?n.setQuery({search:t}):T.setSearchQuery(t)},250);(0,s.watch)(e.selectedKeys,e=>{Array.isArray(e)&&T.setSelection(new Set(e))},{immediate:!0});let D=(0,s.signal)({}),O=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{D.value={...D.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},k=T.visibleColumns,A=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function j(t){let r=e.source.value;if(r){t===`prev`?r.page?.previous():r.page?.next();return}t===`prev`?T.prevPage():T.nextPage(),n(`page-change`,{pageIndex:T.pageIndex.value,pageSize:_.value})}let M=(0,s.computed)(()=>{let e=T.currentPageItems.value;return!e.length||T.isAllSelected()?!1:e.some(e=>T.selectedKeys.value.has(b(e)))}),N=(0,s.computed)(()=>k.value.length+ +(p.value===`multi`)+ +!!h.value),P=(0,s.computed)(()=>x.value?C.value.pageCount>1:_.value>0),F=(0,s.computed)(()=>{if(x.value){let{pageNumber:e,pageSize:t,totalItems:n}=C.value,r=Math.max(1,t);if(!P.value)return`${n} row${n===1?``:`s`}`;if(n===0)return`0 to 0 of 0`;let i=(e-1)*r+1;return`${i} to ${Math.min(i+r-1,n)} of ${n}`}let e=T.totalItems.value;if(!P.value)return`${e} row${e===1?``:`s`}`;if(e===0)return`0 to 0 of 0`;let t=T.pageIndex.value*_.value+1;return`${t} to ${Math.min(t+_.value-1,e)} of ${e}`}),I=(0,s.computed)(()=>e.loading.value===!0||x.value&&C.value.isLoading),L=(0,s.computed)(()=>x.value?C.value.pageNumber>1:T.hasPrevPage.value),R=(0,s.computed)(()=>x.value?C.value.pageNumber<C.value.pageCount:T.hasNextPage.value),z=(0,s.computed)(()=>x.value?C.value.totalItems===0?`0 / 0`:`${C.value.pageNumber} / ${C.value.pageCount}`:`${T.pageIndex.value+1} / ${T.pageCount.value}`),B=[`compact`,`cozy`,`comfortable`],V={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},H={comfortable:`Density: Comfortable`,compact:`Density: Compact`,cozy:`Density: Cozy`},U=(0,s.signal)(e.density.value??`cozy`);(0,s.watch)(e.density,e=>{e&&(U.value=e)});let W=()=>{let e=B.indexOf(U.value),r=B[(e+1)%B.length];U.value=r,t.setAttribute(`density`,r),n(`density-change`,{density:r})},G=(0,s.signal)(!1),K=e=>{let t=new Set(m.value),r=!t.has(e);r?t.add(e):t.delete(e),m.value=t,n(`row-expand`,{expanded:r,key:e})},q={activeCell:(0,s.signal)({col:0,row:0}),focusCell:()=>{}};(0,o.onMounted)(()=>{let e=t.shadowRoot,n=e.querySelector(`.dg-table`);if(!n)return;let{cleanup:r,handle:i}=a.createGridNav(n,e);return q=i,r}),t.focusCell=e=>q.focusCell(e);let J=()=>{let t=e.views.value??[],r=e.activeView.value;return o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/table-base.css.cjs");require("./_dev.cjs");const t=require("./shared/prop-bundles.cjs"),n=require("./inputs/datagrid/datagrid.css.cjs"),r=require("./inputs/datagrid/datagrid-column.cjs"),i=require("./inputs/datagrid/datagrid-model.cjs"),a=require("./inputs/datagrid/datagrid-nav.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/arsenal/function");var l={activeFilters:e=>`${e} active filter${e===1?``:`s`}`,addFilter:`Add filter…`,ascending:`A → Z`,clearAllFilters:`Clear all filters`,clearFiltersAndSearch:`Clear all filters & search`,clearSort:`Clear sort`,closeSearch:`Close search`,collapseRow:`Collapse row`,columnOptions:`Column options`,columnVisibility:`Column visibility`,comfortableDensity:`Density: Comfortable`,compactDensity:`Density: Compact`,contains:`Contains`,cozyDensity:`Density: Cozy`,data:`Data`,descending:`Z → A`,emptyValue:`(empty)`,equals:`Equals`,expandRow:`Expand row`,filter:`Filter`,filterBy:`Filter by`,filterOperator:e=>`${e} operator`,greaterThan:`Greater than`,hiddenColumns:e=>`${e} hidden column${e===1?``:`s`}`,lessThan:`Less than`,nextPage:`Next page`,numericAscending:`0 → 9`,numericDescending:`9 → 0`,pageNavigation:`Page navigation`,pagination:`Pagination`,previousPage:`Previous page`,property:`Property`,range:(e,t,n)=>`${e} to ${t} of ${n}`,removeFilter:`Remove filter`,resetColumns:`Reset`,rowDetails:`Row details`,rows:e=>`${e} row${e===1?``:`s`}`,rowsPerPage:`Rows per page`,search:`Search`,selectAllRows:`Select all rows on this page`,selectRow:`Select row`,sort:`Sort`,sortBy:`Sort by`,views:`Views`,visibleColumns:(e,t)=>`${e} of ${t} visible`};function u(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function d(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}function f(e){let t=e.detail;return Array.isArray(t?.values)?t.values:(e.target.value??``).split(`,`).filter(Boolean)}var p=`ore-datagrid`;(0,o.define)(p,{props:{activeView:o.prop.string(),density:o.prop.string(),...t.disablableBundle,...t.loadableBundle,columns:o.prop.data(),emptyText:o.prop.string(`No data`),expandable:o.prop.bool(!1),filterOptions:o.prop.data(),fullwidth:o.prop.bool(!1),getRowKey:o.prop.data(),label:o.prop.string(),labels:o.prop.data(),pageSize:o.prop.number(10),pageSizeOptions:o.prop.data(),rows:o.prop.data(),searchLabel:o.prop.data(),searchPlaceholder:o.prop.string(),selectedKeys:o.prop.data(),selectionMode:o.prop.string(`none`),sortMode:o.prop.string(`client`),source:o.prop.data(),striped:o.prop.bool(!1),views:o.prop.data()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),p=(0,o.useSlots)(),m=(0,s.computed)(()=>({...l,...e.labels.value})),h=(0,s.computed)(()=>e.disabled.value===!0),g=(0,s.computed)(()=>e.selectionMode.value??`none`),_=(0,s.signal)(new Set),v=(0,s.computed)(()=>e.expandable.value===!0&&S.value.some(e=>typeof e.renderExpanded==`function`)),y=(0,s.computed)(()=>+(g.value===`multi`)),b=(0,s.signal)(e.pageSize.value??10);(0,s.watch)(e.pageSize,e=>{e!=null&&(b.value=e)});let x=(0,s.signal)([]);(0,o.onMounted)(()=>{x.value=r.parseColumnChildren(t);let e=new MutationObserver(()=>{x.value=r.parseColumnChildren(t)});return e.observe(t,{attributeFilter:r.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let S=(0,s.computed)(()=>{let t=e.columns.value;return t===void 0?x.value:t}),C=(0,s.computed)(()=>{let t=S.value.map(e=>({label:e.label,value:e.key})),n=new Set(t.map(e=>e.value));for(let r of e.filterOptions.value??[])n.has(r.key)||t.push({label:r.label,value:r.key});return t}),w=t=>{let n=e.getRowKey.value;if(n)return n(t);let r=t.id;return r==null?`__missing_${Math.random().toString(36).slice(2)}`:String(r)},T=(0,s.computed)(()=>e.source.value!=null),E=(0,s.signal)([]),D=(0,s.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:b.value,totalItems:0}),O=null;(0,o.onCleanup)(()=>{O?.(),O=null}),(0,s.watch)(e.source,e=>{if(O?.(),O=null,!e){E.value=[],D.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:b.value,totalItems:0};return}let t=(t=e.snapshot)=>{E.value=t.data,D.value={error:t.error,isLoading:t.isFetching,pageCount:t.pagination.count,pageNumber:t.pagination.index,pageSize:t.pagination.size,totalItems:t.pagination.total}};t(),O=e.subscribe(t)},{immediate:!0});let k=i.createDataGridModel({activeView:(0,s.computed)(()=>(e.views.value??[]).find(t=>t.id===e.activeView.value)),clientSide:(0,s.computed)(()=>!T.value),columns:S,emptyValueLabel:(0,s.computed)(()=>m.value.emptyValue),filterOperators:(0,s.computed)(()=>[{label:m.value.contains,value:`contains`},{label:m.value.equals,value:`equals`},{label:m.value.greaterThan,value:`gt`},{label:m.value.lessThan,value:`lt`}]),filterOptions:e.filterOptions,getRowKey:w,items:(0,s.computed)(()=>T.value?E.value:e.rows.value??[]),onSelectionChange:e=>{n(`selection-change`,{keys:[...e],rows:k.selectedRows.value})},onSortChange:e=>{n(`sort-change`,e)},pageSize:(0,s.computed)(()=>T.value?0:b.value),selectionMode:g,sortMode:(0,s.computed)(()=>e.sortMode.value??`client`)}),A=(0,s.computed)(()=>{let e=S.value.find(e=>e.key===k.sortState.value.key);if(e?.sortType)return e.sortType;let t=k.filteredRows.value.find(t=>t[e?.key??``]!=null);return t&&typeof t[e?.key??``]==`number`?`number`:`text`}),j=(0,s.computed)(()=>A.value===`number`?[{label:m.value.numericAscending,value:`asc`},{label:m.value.numericDescending,value:`desc`}]:[{label:m.value.ascending,value:`asc`},{label:m.value.descending,value:`desc`}]),M=(0,c.debounce)(t=>{let n=e.source.value;n?.setQuery?n.setQuery({search:t}):k.setSearchQuery(t)},250);(0,s.watch)(e.selectedKeys,e=>{Array.isArray(e)&&k.setSelection(new Set(e))},{immediate:!0});let N=(0,s.signal)({}),P=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{N.value={...N.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},F=k.visibleColumns,I=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function L(t){let r=e.source.value;if(r){t===`prev`?r.page?.previous():r.page?.next();return}t===`prev`?k.prevPage():k.nextPage(),n(`page-change`,{pageIndex:k.pageIndex.value,pageSize:b.value})}let R=(0,s.computed)(()=>{let e=k.currentPageItems.value;return!e.length||k.isAllSelected()?!1:e.some(e=>k.selectedKeys.value.has(w(e)))}),z=(0,s.computed)(()=>F.value.length+ +(g.value===`multi`)+ +!!v.value),B=(0,s.computed)(()=>T.value?D.value.pageCount>1:b.value>0),V=(0,s.computed)(()=>{if(T.value){let{pageNumber:e,pageSize:t,totalItems:n}=D.value,r=Math.max(1,t);if(!B.value)return m.value.rows(n);if(n===0)return m.value.range(0,0,0);let i=(e-1)*r+1,a=Math.min(i+r-1,n);return m.value.range(i,a,n)}let e=k.totalItems.value;if(!B.value)return m.value.rows(e);if(e===0)return m.value.range(0,0,0);let t=k.pageIndex.value*b.value+1,n=Math.min(t+b.value-1,e);return m.value.range(t,n,e)}),H=(0,s.computed)(()=>e.loading.value===!0||T.value&&D.value.isLoading),U=(0,s.computed)(()=>T.value?D.value.pageNumber>1:k.hasPrevPage.value),W=(0,s.computed)(()=>T.value?D.value.pageNumber<D.value.pageCount:k.hasNextPage.value),G=(0,s.computed)(()=>T.value?D.value.totalItems===0?`0 / 0`:`${D.value.pageNumber} / ${D.value.pageCount}`:`${k.pageIndex.value+1} / ${k.pageCount.value}`),K=[`compact`,`cozy`,`comfortable`],q={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},J=(0,s.computed)(()=>({comfortable:m.value.comfortableDensity,compact:m.value.compactDensity,cozy:m.value.cozyDensity})),Y=(0,s.signal)(e.density.value??`cozy`);(0,s.watch)(e.density,e=>{e&&(Y.value=e)});let X=()=>{let e=K.indexOf(Y.value),r=K[(e+1)%K.length];Y.value=r,t.setAttribute(`density`,r),n(`density-change`,{density:r})},Z=e=>{let t=new Set(_.value),r=!t.has(e);r?t.add(e):t.delete(e),_.value=t,n(`row-expand`,{expanded:r,key:e})},Q={activeCell:(0,s.signal)({col:0,row:0}),focusCell:()=>{}};(0,o.onMounted)(()=>{let e=t.shadowRoot,n=e.querySelector(`.dg-table`);if(!n)return;let{cleanup:r,handle:i}=a.createGridNav(n,e);return Q=i,r}),t.focusCell=e=>Q.focusCell(e);let $=()=>{let t=e.views.value??[],r=e.activeView.value;return o.html`
         <div
           class="dg-tabs"
           role="tablist"
-          aria-label="Views"
+          aria-label="${()=>m.value.views}"
           aria-controls="dg-tabpanel"
           @keydown="${e=>{if(![`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(e.key))return;let t=Array.from(e.currentTarget.querySelectorAll(`.dg-tab`)),n=t.findIndex(e=>e.classList.contains(`dg-tab--active`)),r=n;if(e.key===`ArrowLeft`?r=Math.max(0,n-1):e.key===`ArrowRight`?r=Math.min(t.length-1,n+1):e.key===`Home`?r=0:e.key===`End`&&(r=t.length-1),r!==n){e.preventDefault();let n=t[r];n.focus(),n.click()}}}">
           ${t.map(e=>o.html`
@@ -20,88 +20,86 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               </ore-button>
             `)}
         </div>
-      `},Y=()=>o.html`
-      <ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
-        <ore-button variant="ghost" size="sm" icon-only label="Sort">
+      `},ee=()=>o.html`
+      <ore-popover class="dg-action-popover" placement="bottom-end" label="${()=>m.value.sort}" style="--popover-min-width:18rem;--popover-overflow:visible">
+        <ore-button
+          class="dg-icon-btn dg-state-trigger"
+          variant="ghost"
+          size="sm"
+          icon-only
+          ?data-customized="${()=>k.sortState.value.direction!==`none`}"
+          label="${()=>m.value.sort}">
           <ore-icon name="arrow-up-down" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
         <div slot="content" class="dg-pop-sort">
           <div class="dg-pop-header">
-            <span class="dg-pop-title">Sort by</span>
-            <ore-button
-              class="dg-icon-btn"
-              variant="ghost"
-              size="sm"
-              icon-only
-              label="Clear sort"
-              disabled="${()=>T.sortState.value.direction===`none`||void 0}"
-              @click="${()=>T.sortTo(``,`none`)}">
-              <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
-            </ore-button>
+            <span class="dg-pop-title">${()=>m.value.sortBy}</span>
+            ${()=>k.sortState.value.direction===`none`?o.html``:o.html`
+                    <ore-button
+                      class="dg-icon-btn"
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      label="${()=>m.value.clearSort}"
+                      @click="${()=>k.sortTo(``,`none`)}">
+                      <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                    </ore-button>
+                  `}
           </div>
           <div class="dg-pop-sort-row">
             <ore-select
               class="dg-pop-select"
+              hide-label
               variant="flat"
               size="sm"
               rounded="lg"
-              placeholder="Property"
+              label="${()=>m.value.property}"
+              placeholder="${()=>m.value.property}"
               fullwidth
-              value="${()=>T.sortState.value.key}"
-              options="${()=>y.value.map(e=>({label:e.label,value:e.key}))}"
-              @change="${e=>{let t=e.detail.values[0]??``,n=T.sortState.value.direction===`none`?`asc`:T.sortState.value.direction;T.sortTo(t,n)}}"></ore-select>
+              value="${()=>k.sortState.value.key}"
+              options="${()=>S.value.map(e=>({label:e.label,value:e.key}))}"
+              @change="${e=>{let t=f(e)[0]??``,n=k.sortState.value.direction===`none`?`asc`:k.sortState.value.direction;k.sortTo(t,n)}}"></ore-select>
             <ore-select
               class="dg-pop-dir-select"
+              hide-label
               variant="flat"
               size="sm"
               rounded="lg"
+              label="${()=>m.value.sort}"
               fullwidth
-              disabled="${()=>!T.sortState.value.key||void 0}"
-              value="${()=>T.sortState.value.direction===`none`?`asc`:T.sortState.value.direction}"
-              options="${()=>[{label:`A → Z`,value:`asc`},{label:`Z → A`,value:`desc`}]}"
-              @change="${e=>{T.sortState.value.key&&T.sortTo(T.sortState.value.key,e.detail.values[0]??`asc`)}}"></ore-select>
+              disabled="${()=>!k.sortState.value.key||void 0}"
+              value="${()=>k.sortState.value.direction===`none`?`asc`:k.sortState.value.direction}"
+              options="${j}"
+              @change="${e=>{k.sortState.value.key&&k.sortTo(k.sortState.value.key,f(e)[0]??`asc`)}}"></ore-select>
           </div>
         </div>
       </ore-popover>
-    `,X=()=>o.html`
+    `,te=()=>o.html`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
-        label="Filter"
-        style="--popover-min-width:16rem;--popover-max-height:min(90vh,48rem)">
-        ${()=>T.filterDefs.value.length?o.html`
-                <ore-badge
-                  anchor="top-end"
-                  color="primary"
-                  size="xs"
-                  count="${()=>G.value?T.filterDefs.value.length:void 0}"
-                  dot="${()=>!G.value||void 0}"
-                  label="${()=>`${T.filterDefs.value.length} active filter${T.filterDefs.value.length>1?`s`:``}`}"
-                  aria-hidden="true"
-                  @mouseenter="${()=>G.value=!0}"
-                  @mouseleave="${()=>G.value=!1}"
-                  @focusin="${()=>G.value=!0}"
-                  @focusout="${()=>G.value=!1}">
-                  <ore-button slot="target" variant="ghost" size="sm" icon-only label="Filter">
-                    <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-button>
-                </ore-badge>
-              `:o.html`
-                <ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
-                  <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                </ore-button>
-              `}
+        label="${()=>m.value.filter}"
+        style="--popover-min-width:18rem;--popover-max-height:min(90vh,48rem)">
+        <ore-button
+          class="dg-icon-btn dg-state-trigger"
+          variant="ghost"
+          size="sm"
+          icon-only
+          ?data-customized="${()=>k.filterDefs.value.length>0}"
+          label="${()=>k.filterDefs.value.length?`${m.value.filter}: ${m.value.activeFilters(k.filterDefs.value.length)}`:m.value.filter}">
+          <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
+        </ore-button>
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
-            <span class="dg-pop-title">Filter by</span>
-            ${()=>T.filterDefs.value.length?o.html`
+            <span class="dg-pop-title">${()=>m.value.filterBy}</span>
+            ${()=>k.filterDefs.value.length?o.html`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
-                      label="Clear all filters"
-                      @click="${()=>T.clearAllFilters()}">
+                      label="${()=>m.value.clearAllFilters}"
+                      @click="${()=>k.clearAllFilters()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
                   `:o.html``}
@@ -110,92 +108,114 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <!-- Always-visible field picker: select columns to add filter rules -->
           <div class="dg-pop-filter-fields">
             <ore-combobox
-              placeholder="Add filter…"
+              hide-label
+              label="${()=>m.value.addFilter}"
+              placeholder="${()=>m.value.addFilter}"
               multiple
               fullwidth
               autoclose
-              options="${()=>y.value.map(e=>({label:e.label,value:e.key}))}"
-              value="${()=>T.filterDefs.value.map(e=>e.key)}"
-              @change="${e=>{T.setActiveFilterKeys(e.detail.values)}}"></ore-combobox>
+              size="sm"
+              variant="flat"
+              options="${C}"
+              value="${()=>k.filterDefs.value.map(e=>e.key)}"
+              @change="${e=>{k.setActiveFilterKeys(f(e))}}"></ore-combobox>
           </div>
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
-          <div class="dg-pop-filter-rules" ?hidden="${()=>!T.filterDefs.value.length}">
-            ${()=>T.filterDefs.value.map(e=>o.html`
+          <div class="dg-pop-filter-rules" ?hidden="${()=>!k.filterDefs.value.length}">
+            ${()=>k.filterDefs.value.map(e=>o.html`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
                       <ore-select
                         class="dg-pop-filter-op-select"
+                        hide-label
                         variant="ghost"
                         size="sm"
+                        label="${()=>m.value.filterOperator(e.label)}"
                         fullwidth
-                        value="${()=>T.filterValues.value.get(e.key)?.operator??`contains`}"
+                        value="${()=>k.filterValues.value.get(e.key)?.operator??`contains`}"
                         options="${()=>e.operators??[]}"
-                        @change="${t=>{T.setFilterOperator(e.key,t.detail.values[0])}}"></ore-select>
+                        @change="${t=>{let n=f(t)[0];n&&k.setFilterOperator(e.key,n)}}"></ore-select>
                       <ore-button
                         class="dg-icon-btn"
                         variant="ghost"
                         size="sm"
                         icon-only
-                        label="Remove filter"
-                        @click="${()=>T.removeFilter(e.key)}">
+                        label="${()=>m.value.removeFilter}"
+                        @click="${()=>k.removeFilter(e.key)}">
                         <ore-icon name="trash-2" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                       </ore-button>
                     </div>
                     <ore-combobox
                       class="dg-filter"
+                      hide-label
+                      size="sm"
+                      variant="flat"
+                      label="${()=>e.label}"
                       placeholder="${()=>e.label}"
                       options="${()=>e.options}"
-                      value="${()=>[...T.filterValues.value.get(e.key)?.values??[]]}"
-                      disabled="${()=>f.value||void 0}"
+                      value="${()=>[...k.filterValues.value.get(e.key)?.values??[]]}"
+                      disabled="${()=>h.value||void 0}"
                       multiple
                       fullwidth
                       autoclose
-                      @change="${t=>{T.setFilter(e.key,t.detail.values)}}"></ore-combobox>
+                      @change="${t=>{k.setFilter(e.key,f(t))}}"></ore-combobox>
                   </div>
                 `)}
           </div>
         </div>
       </ore-popover>
-    `,Z=()=>o.html`
+    `,ne=()=>o.html`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
-        label="Column options"
+        label="${()=>m.value.columnOptions}"
         style="--popover-min-width:18rem">
-        <ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Column options">
+        <ore-button
+          class="dg-icon-btn dg-state-trigger dg-column-trigger"
+          variant="ghost"
+          size="sm"
+          icon-only
+          ?data-customized="${()=>k.hiddenColumns.value.size>0}"
+          label="${()=>k.hiddenColumns.value.size?`${m.value.columnOptions}: ${m.value.hiddenColumns(k.hiddenColumns.value.size)}`:m.value.columnOptions}">
           <ore-icon name="columns-2" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
-        <div slot="content" class="dg-pop-col-list" role="menu" aria-label="Column visibility">
-          ${()=>y.value.map(e=>o.html`
-                <ore-button
-                  class="dg-pop-col-item"
-                  role="menuitemcheckbox"
-                  variant="ghost"
-                  size="sm"
-                  aria-checked="${()=>String(!T.hiddenColumns.value.has(e.key))}"
-                  @click="${()=>T.toggleColumnVisibility(e.key)}">
-                  <ore-icon
-                    slot="prefix"
-                    name="${()=>T.hiddenColumns.value.has(e.key)?`eye-off`:`eye`}"
-                    size="13"
-                    stroke-width="2"
-                    aria-hidden="true"></ore-icon>
-                  ${e.label}
-                </ore-button>
-              `)}
+        <div slot="content" class="dg-pop-col">
+          <div class="dg-pop-header">
+            <span class="dg-pop-heading"><strong class="dg-pop-title">${()=>m.value.columnVisibility}</strong><small>${()=>m.value.visibleColumns(k.visibleColumns.value.length,S.value.length)}</small></span>
+            ${()=>k.hiddenColumns.value.size?o.html`
+                    <ore-button
+                      class="dg-icon-btn"
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      label="${()=>m.value.resetColumns}"
+                      @click="${()=>k.resetColumnVisibility()}">
+                      <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                    </ore-button>
+                  `:o.html``}
+          </div>
+          <div class="dg-pop-col-list" role="group" aria-label="${()=>m.value.columnVisibility}">
+            ${()=>S.value.map(e=>o.html`
+                  <ore-checkbox
+                    class="dg-pop-col-item"
+                    checked="${()=>!k.hiddenColumns.value.has(e.key)}"
+                    disabled="${()=>!k.hiddenColumns.value.has(e.key)&&k.visibleColumns.value.length===1||void 0}"
+                    @change="${()=>k.toggleColumnVisibility(e.key)}">${e.label}</ore-checkbox>
+                `)}
+          </div>
         </div>
       </ore-popover>
     `;return o.html`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
-        ${()=>J()}
+        ${()=>$()}
 
         <!-- Right: Action bar -->
         <div class="dg-actions">
-          ${()=>Y()} ${()=>X()} ${()=>Z()}
+          ${()=>ee()} ${()=>te()} ${()=>ne()}
 
           <!-- Density toggle -->
           <ore-button
@@ -203,33 +223,34 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             variant="ghost"
             size="sm"
             icon-only
-            label="${()=>H[U.value]}"
-            @click="${W}">
+            label="${()=>J.value[Y.value]}"
+            @click="${X}">
             <ore-icon
-              name="${()=>V[U.value]}"
+              name="${()=>q[Y.value]}"
               size="15"
               stroke-width="1.75"
               aria-hidden="true"></ore-icon>
           </ore-button>
 
-          <span class="dg-action-divider" aria-hidden="true" ?hidden="${()=>!d.has(`actions`).value}"></span>
+          <span class="dg-action-divider" aria-hidden="true" ?hidden="${()=>!p.has(`actions`).value}"></span>
 
           <slot name="actions"></slot>
 
           <!-- Search toggle: rightmost, expands in-place -->
-          <div class="${()=>`dg-search${T.searchActive.value?` dg-search--open`:``}`}">
-            ${()=>T.searchActive.value?o.html`
+          <div class="${()=>`dg-search${k.searchActive.value?` dg-search--open`:``}`}">
+            ${()=>k.searchActive.value?o.html`
                     <ore-input
                       class="dg-search-input"
                       type="search"
                       variant="flat"
                       size="sm"
                       rounded="full"
-                      placeholder="${()=>e.searchPlaceholder.value??`Search…`}"
-                      disabled="${()=>f.value||void 0}"
+                      aria-label="${()=>m.value.search}"
+                      placeholder="${()=>e.searchPlaceholder.value??`${m.value.search}…`}"
+                      disabled="${()=>h.value||void 0}"
                       ref="${e=>{e&&requestAnimationFrame(()=>e.focus())}}"
-                      @input="${e=>{E(e.detail.value)}}"
-                      @keydown="${t=>{if(t.key===`Escape`){let t=e.source.value;t?.setQuery&&t.setQuery({search:``}),T.toggleSearch()}}}">
+                      @input="${e=>{M(e.currentTarget.value)}}"
+                      @keydown="${t=>{if(t.key===`Escape`){let t=e.source.value;t?.setQuery&&t.setQuery({search:``}),k.toggleSearch()}}}">
                       <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-input>
                   `:o.html``}
@@ -237,10 +258,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               variant="ghost"
               size="sm"
               icon-only
-              label="${()=>{let[t,n]=e.searchLabel.value??[`Search`,`Close search`];return T.searchActive.value?n:t}}"
-              @click="${()=>{let t=e.source.value;t?.setQuery&&T.searchActive.value&&t.setQuery({search:``}),T.toggleSearch()}}">
+              label="${()=>{let[t,n]=e.searchLabel.value??[m.value.search,m.value.closeSearch];return k.searchActive.value?n:t}}"
+              @click="${()=>{let t=e.source.value;t?.setQuery&&k.searchActive.value&&t.setQuery({search:``}),k.toggleSearch()}}">
               <ore-icon
-                name="${()=>T.searchActive.value?`x`:`search`}"
+                name="${()=>k.searchActive.value?`x`:`search`}"
                 size="15"
                 stroke-width="1.75"
                 aria-hidden="true"></ore-icon>
@@ -249,7 +270,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         </div>
       </div>
 
-      <div id="dg-tabpanel" class="dg-scroll" role="tabpanel" aria-label="Data">
+      <div id="dg-tabpanel" class="dg-scroll" role="tabpanel" aria-label="${()=>m.value.data}">
         <div class="dg-loading-overlay">
           <ore-icon name="loader-2" size="24" class="dg-spin" aria-hidden="true"></ore-icon>
         </div>
@@ -258,36 +279,36 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="table"
           role="grid"
           aria-label="${()=>e.label.value??void 0}"
-          aria-busy="${()=>I.value?`true`:null}"
-          aria-disabled="${()=>f.value?`true`:null}">
+          aria-busy="${()=>H.value?`true`:null}"
+          aria-disabled="${()=>h.value?`true`:null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${()=>p.value===`multi`?o.html`
+              ${()=>g.value===`multi`?o.html`
                       <th
                         class="dg-th dg-th-check"
                         role="columnheader"
                         scope="col"
-                        tabindex="${()=>q.activeCell.value.row===0&&q.activeCell.value.col===0&&g.value>=1?`0`:`-1`}">
+                        tabindex="${()=>Q.activeCell.value.row===0&&Q.activeCell.value.col===0&&y.value>=1?`0`:`-1`}">
                         <ore-checkbox
                           class="dg-check"
-                          checked="${()=>T.isAllSelected()}"
-                          indeterminate="${M}"
-                          ?disabled="${f}"
-                          aria-label="Select all rows on this page"
-                          @change="${()=>{f.value||T.selectAll()}}"></ore-checkbox>
+                          checked="${()=>k.isAllSelected()}"
+                          indeterminate="${R}"
+                          ?disabled="${h}"
+                          aria-label="${()=>m.value.selectAllRows}"
+                          @change="${()=>{h.value||k.selectAll()}}"></ore-checkbox>
                       </th>
                     `:o.html``}
-              ${()=>k.value.map((e,t)=>{let n=t===k.value.length-1;return o.html`
+              ${()=>F.value.map((e,t)=>{let n=t===F.value.length-1;return o.html`
                     <th
-                      class="${`dg-th${n&&h.value?` dg-th-last`:``}`}"
+                      class="${`dg-th${n&&v.value?` dg-th-last`:``}`}"
                       role="columnheader"
                       scope="col"
-                      tabindex="${()=>{let e=q.activeCell.value;return e.row===0&&e.col===t+g.value?`0`:`-1`}}"
+                      tabindex="${()=>{let e=Q.activeCell.value;return e.row===0&&e.col===t+y.value?`0`:`-1`}}"
                       data-align="${e.align??`left`}"
-                      aria-sort="${()=>e.sortable?u(T.sortState.value,e.key):void 0}"
+                      aria-sort="${()=>e.sortable?d(k.sortState.value,e.key):void 0}"
                       aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
-                      style="${()=>{let t=D.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
+                      style="${()=>{let t=N.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
                       <div class="dg-th-inner">
                         ${()=>e.sortable?o.html`
                                 <ore-button
@@ -296,13 +317,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                   size="sm"
                                   fullwidth
                                   label="${e.headerLabel??e.label}"
-                                  disabled="${()=>f.value||void 0}"
-                                  @click="${()=>{f.value||T.sortBy(e.key)}}">
+                                  disabled="${()=>h.value||void 0}"
+                                  @click="${()=>{h.value||k.sortBy(e.key)}}">
                                   ${e.label}
                                   <ore-icon
                                     slot="suffix"
                                     class="dg-sort-icon"
-                                    name="${()=>l(T.sortState.value,e.key)}"
+                                    name="${()=>u(k.sortState.value,e.key)}"
                                     size="14"
                                     stroke-width="2"></ore-icon>
                                 </ore-button>
@@ -311,17 +332,17 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                 <span
                                   class="dg-col-resize"
                                   aria-hidden="true"
-                                  ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,O(e.key,n))}}"></span>
+                                  ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,P(e.key,n))}}"></span>
                               `:o.html``}
                       </div>
                     </th>
                   `})}
-              ${()=>h.value?o.html`
+              ${()=>v.value?o.html`
                       <th
                         class="dg-th dg-th-expand"
                         role="columnheader"
                         scope="col"
-                        aria-label="Row details"
+                        aria-label="${()=>m.value.rowDetails}"
                         tabindex="-1"></th>
                     `:o.html``}
             </tr>
@@ -329,80 +350,80 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${()=>T.currentPageItems.value.length===0?o.html`
+            ${()=>k.currentPageItems.value.length===0?o.html`
                     <tr role="row">
-                      <td class="dg-empty" role="gridcell" colspan="${()=>String(N.value)}">
+                      <td class="dg-empty" role="gridcell" colspan="${()=>String(z.value)}">
                         <div class="dg-empty-content">
                           ${()=>e.emptyText.value??`No data`}
-                          ${()=>T.searchQuery.value||T.filterValues.value.size?o.html`
+                          ${()=>k.searchQuery.value||k.filterValues.value.size?o.html`
                                   <div class="dg-empty-actions">
                                     <ore-button
                                       variant="text"
                                       size="sm"
-                                      @click="${()=>{T.resetSearch(),T.resetFilters()}}">
-                                      Clear all filters & search
+                                      @click="${()=>{k.resetSearch(),k.resetFilters()}}">
+                                      ${()=>m.value.clearFiltersAndSearch}
                                     </ore-button>
                                   </div>
                                 `:o.html``}
                         </div>
                       </td>
                     </tr>
-                  `:T.currentPageItems.value.map((e,t)=>{let n=b(e),r=p.value!==`none`&&!f.value,i=t+1;return o.html`
+                  `:k.currentPageItems.value.map((e,t)=>{let n=w(e),r=g.value!==`none`&&!h.value,i=t+1;return o.html`
                       <tr
                         class="dg-tr"
                         part="row"
                         role="row"
-                        aria-selected="${()=>p.value===`none`?null:String(T.selectedKeys.value.has(n))}"
-                        aria-expanded="${()=>h.value?String(m.value.has(n)):null}"
+                        aria-selected="${()=>g.value===`none`?null:String(k.selectedKeys.value.has(n))}"
+                        aria-expanded="${()=>v.value?String(_.value.has(n)):null}"
                         ?data-selectable="${r}"
-                        ?data-disabled="${f}"
-                        @click="${()=>{r&&p.value===`single`&&T.toggleRow(n)}}"
-                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&p.value===`single`&&(e.preventDefault(),T.toggleRow(n))}}">
-                        ${()=>p.value===`multi`?o.html`
+                        ?data-disabled="${h}"
+                        @click="${()=>{r&&g.value===`single`&&k.toggleRow(n)}}"
+                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&g.value===`single`&&(e.preventDefault(),k.toggleRow(n))}}">
+                        ${()=>g.value===`multi`?o.html`
                                 <td
                                   class="dg-td dg-td-check"
                                   role="gridcell"
-                                  tabindex="${()=>{let e=q.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
-                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f.value||T.toggleRow(n))}}">
+                                  tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
+                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),h.value||k.toggleRow(n))}}">
                                   <ore-checkbox
                                     class="dg-check"
-                                    checked="${()=>T.selectedKeys.value.has(n)}"
-                                    ?disabled="${f}"
-                                    aria-label="Select row"
+                                    checked="${()=>k.selectedKeys.value.has(n)}"
+                                    ?disabled="${h}"
+                                    aria-label="${()=>m.value.selectRow}"
                                     tabindex="-1"
                                     @click="${e=>e.stopPropagation()}"
-                                    @change="${()=>{f.value||T.toggleRow(n)}}"></ore-checkbox>
+                                    @change="${()=>{h.value||k.toggleRow(n)}}"></ore-checkbox>
                                 </td>
                               `:o.html``}
-                        ${k.value.map((t,n)=>{let r=A(t,e),a=n===k.value.length-1;return o.html`
+                        ${F.value.map((t,n)=>{let r=e,a=I(t,r),s=t.renderCell?.(r)??a,c=n===F.value.length-1;return o.html`
                             <td
-                              class="${`dg-td${a&&h.value?` dg-td-last`:``}`}"
+                              class="${`dg-td${c&&v.value?` dg-td-last`:``}`}"
                               part="cell"
                               role="gridcell"
                               data-align="${t.align??`left`}"
-                              tabindex="${()=>{let e=q.activeCell.value;return e.row===i&&e.col===n+g.value?`0`:`-1`}}"
-                              title="${r}">
-                              ${r}
+                              tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===n+y.value?`0`:`-1`}}"
+                              title="${a}">
+                              ${s}
                             </td>
                           `})}
-                        ${()=>h.value?o.html`
+                        ${()=>v.value?o.html`
                                 <td
                                   class="dg-td dg-td-expand"
                                   role="gridcell"
-                                  tabindex="${()=>{let e=q.activeCell.value;return e.row===i&&e.col===N.value-1?`0`:`-1`}}"
-                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f.value||K(n))}}">
+                                  tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===z.value-1?`0`:`-1`}}"
+                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),h.value||Z(n))}}">
                                   <ore-button
                                     class="dg-expand-btn"
                                     variant="ghost"
                                     size="sm"
                                     icon-only
                                     tabindex="-1"
-                                    label="${()=>m.value.has(n)?`Collapse row`:`Expand row`}"
-                                    aria-expanded="${()=>String(m.value.has(n))}"
-                                    disabled="${()=>f.value||void 0}"
-                                    @click="${e=>{e.stopPropagation(),f.value||K(n)}}">
+                                    label="${()=>_.value.has(n)?m.value.collapseRow:m.value.expandRow}"
+                                    aria-expanded="${()=>String(_.value.has(n))}"
+                                    disabled="${()=>h.value||void 0}"
+                                    @click="${e=>{e.stopPropagation(),h.value||Z(n)}}">
                                     <ore-icon
-                                      name="${()=>m.value.has(n)?`chevron-up`:`chevron-down`}"
+                                      name="${()=>_.value.has(n)?`chevron-up`:`chevron-down`}"
                                       size="14"
                                       stroke-width="2"
                                       aria-hidden="true"></ore-icon>
@@ -410,13 +431,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                 </td>
                               `:o.html``}
                       </tr>
-                      ${()=>h.value&&m.value.has(n)?o.html`
+                      ${()=>v.value&&_.value.has(n)?o.html`
                               <tr class="dg-tr-expanded" role="row">
                                 <td
                                   class="dg-td-expanded"
                                   role="gridcell"
-                                  colspan="${()=>String(N.value)}">
-                                  ${(0,o.unsafeHtml)(()=>y.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
+                                  colspan="${()=>String(z.value)}">
+                                  ${(0,o.unsafeHtml)(()=>S.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
                                 </td>
                               </tr>
                             `:o.html``}
@@ -426,35 +447,35 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       </div>
 
       <!-- Footer / Pagination -->
-      ${()=>P.value?o.html`
-              <div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
-                ${()=>(e.pageSizeOptions.value??[]).length?o.html``:o.html`
-                        <span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true">
-                          ${F}
-                        </span>
-                      `}
-                <div class="dg-footer-end">
+      ${()=>B.value?o.html`
+              <div class="dg-footer" part="footer" role="navigation" aria-label="${()=>m.value.pagination}">
+                <div class="dg-footer-start">
+                  <span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true">
+                    ${V}
+                  </span>
                   ${()=>{let t=e.pageSizeOptions.value??[];return t.length?o.html`
                           <div class="dg-page-size-wrap">
                             <ore-select
                               class="dg-page-size-select"
                               fullwidth
-                              aria-label="Rows per page"
-                              value="${()=>String(_.value)}"
+                              hide-label
+                              label="${()=>m.value.rowsPerPage}"
+                              value="${()=>String(b.value)}"
                               options="${()=>t.map(e=>({label:String(e),value:String(e)}))}"
-                              disabled="${()=>f.value||void 0}"
-                              @change="${e=>{let t=parseInt(e.detail.values[0],10);Number.isNaN(t)||(_.value=t,T.goToPage(0),n(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
+                              disabled="${()=>h.value||void 0}"
+                              @change="${e=>{let t=parseInt(f(e)[0]??``,10);Number.isNaN(t)||(b.value=t,k.goToPage(0),n(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
                           </div>
                         `:o.html``}}
-                  <div class="dg-pagination" role="group" aria-label="Page navigation">
+                </div>
+                <div class="dg-pagination" role="group" aria-label="${()=>m.value.pageNavigation}">
                     <ore-button
                       class="dg-page-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
-                      label="Previous page"
-                      disabled="${()=>!L.value||f.value}"
-                      @click="${()=>j(`prev`)}">
+                      label="${()=>m.value.previousPage}"
+                      disabled="${()=>!U.value||h.value}"
+                      @click="${()=>L(`prev`)}">
                       <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
                     <span
@@ -464,21 +485,20 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       role="status"
                       aria-live="polite"
                       aria-atomic="true">
-                      ${()=>z.value}
+                      ${()=>G.value}
                     </span>
                     <ore-button
                       class="dg-page-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
-                      label="Next page"
-                      disabled="${()=>!R.value||f.value}"
-                      @click="${()=>j(`next`)}">
+                      label="${()=>m.value.nextPage}"
+                      disabled="${()=>!W.value||h.value}"
+                      @click="${()=>L(`next`)}">
                       <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  </div>
                 </div>
               </div>
             `:o.html``}
-    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),n.default]}),exports.COLUMN_TAG=r.COLUMN_TAG,exports.DATAGRID_TAG=d,exports.ariaSortValue=u,exports.sortIconName=l;
+    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),n.default]}),exports.COLUMN_TAG=r.COLUMN_TAG,exports.DATAGRID_TAG=p,exports.ariaSortValue=d,exports.sortIconName=u;
 //# sourceMappingURL=datagrid.cjs.map