@blueprintui/grid 2.3.0 → 2.4.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@blueprintui/grid-v2.4.1](https://github.com/blueprintui/blueprintui/compare/@blueprintui/grid-v2.4.0...@blueprintui/grid-v2.4.1) (2025-10-06)
+
+
+### Bug Fixes
+
+* **grid:** scroll styles ([5261052](https://github.com/blueprintui/blueprintui/commit/526105299c5b77ad671141c53bd2269cd0490235))
+
+# [@blueprintui/grid-v2.4.0](https://github.com/blueprintui/blueprintui/compare/@blueprintui/grid-v2.3.0...@blueprintui/grid-v2.4.0) (2025-06-08)
+
+
+### Features
+
+* **components:** add page and panel components ([0ad25b3](https://github.com/blueprintui/blueprintui/commit/0ad25b36232ea1d2cac064eaab11561c8543e2fb))
+
 # [@blueprintui/grid-v2.3.0](https://github.com/blueprintui/blueprintui/compare/@blueprintui/grid-v2.2.1...@blueprintui/grid-v2.3.0) (2025-05-20)
 
 

package/dist/column/alignment.controller.js

@@ -1 +1 @@
-import{attachInternals as t}from"@blueprintui/components/internals";class n{#t;get#n(){const t=this.host.parentElement.parentElement.grid,n=t[0].indexOf(this.host);return this.host.ariaColSpan?[this.host]:t.slice(0).map((t=>t[n]))}constructor(t){this.host=t,this.host.addController(this)}hostConnected(){t(this.host),this.#s()}hostUpdated(){this.#s()}#s(){this.host.alignment!==this.#t&&(this.#n.forEach((t=>{s(t),this.host.alignment&&t._internals.states.add("alignment-"+this.host.alignment)})),this.#t=this.host.alignment)}}function s(t){t._internals.states.delete("alignment-start"),t._internals.states.delete("alignment-center"),t._internals.states.delete("alignment-end")}export{n as ColumnAlignmentController,s as resetAlignmentState};
+import{attachInternals as t}from"@blueprintui/components/internals";class n{#t;get#n(){const t=this.host.parentElement.parentElement.grid,n=t[0].indexOf(this.host);return this.host.ariaColSpan?[this.host]:t.slice(0).map(t=>t[n])}constructor(t){this.host=t,this.host.addController(this)}hostConnected(){t(this.host),this.#s()}hostUpdated(){this.#s()}#s(){this.host.alignment!==this.#t&&(this.#n.forEach(t=>{s(t),this.host.alignment&&t._internals.states.add("alignment-"+this.host.alignment)}),this.#t=this.host.alignment)}}function s(t){t._internals.states.delete("alignment-start"),t._internals.states.delete("alignment-center"),t._internals.states.delete("alignment-end")}export{n as ColumnAlignmentController,s as resetAlignmentState};

package/dist/column/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as r,html as e}from"lit";import{property as o}from"lit/decorators/property.js";import{baseStyles as i,dynamicControllers as s}from"@blueprintui/components/internals";import n from"../internals/styles/focus.css.js";import{GridColumnWidthController as l}from"./width.controller.js";import p from"./element.css.js";let a=class extends r{static{this.styles=[i,p,n]}render(){return e`<div role="group" part="internal" focusable><slot> </slot><slot name="resize"><div class="border"></div></slot><div class="line"></div></div>`}constructor(){super(),this._internals=this.attachInternals(),new l(this),this._internals.role="columnheader",this._internals.ariaSort="none"}};t([o({type:String})],a.prototype,"width",void 0),t([o({type:String,reflect:!0})],a.prototype,"position",void 0),t([o({type:String,reflect:!0})],a.prototype,"alignment",void 0),a=t([s()],a);export{a as BpGridColumn};
+import{__decorate as t}from"tslib";import{LitElement as r,html as s}from"lit";import{baseStyles as e,dynamicControllers as i}from"@blueprintui/components/internals";import n from"../internals/styles/focus.css.js";import{GridColumnWidthController as o}from"./width.controller.js";import l from"./element.css.js";let a=class extends r{static{this.properties={width:{type:String},position:{type:String,reflect:!0},alignment:{type:String,reflect:!0}}}static{this.styles=[e,l,n]}render(){return s`<div role="group" part="internal" focusable><slot> </slot><slot name="resize"><div class="border"></div></slot><div class="line"></div></div>`}constructor(){super(),this._internals=this.attachInternals(),new o(this),this._internals.role="columnheader",this._internals.ariaSort="none"}};a=t([i()],a);export{a as BpGridColumn};

package/dist/column/width.controller.js

@@ -1 +1 @@
-import{isNumericString as t}from"@blueprintui/components/internals";class s{#t;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#t=this.host.parentElement.parentElement,this.#s()}async hostUpdated(){await this.host.updateComplete,this.#s()}async#s(){if(await new Promise((t=>setTimeout(t,0))),"max-content"===this.host.width){const t=this.#t.grid[0].indexOf(this.host),s=this.#t.grid[1][t],{width:i}=getComputedStyle(s);this.#t.style.setProperty("--ch"+(t+1),i)}else if(this.host.width){const s=t(this.host.width)?this.host.width+"px":this.host.width;this.#t.style.setProperty("--ch"+this.host.ariaColIndex,s)}}}export{s as GridColumnWidthController};
+import{isNumericString as t}from"@blueprintui/components/internals";class s{#t;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#t=this.host.parentElement.parentElement,this.#s()}async hostUpdated(){await this.host.updateComplete,this.#s()}async#s(){if(await new Promise(t=>setTimeout(t,0)),"max-content"===this.host.width){const t=this.#t.grid[0].indexOf(this.host),s=this.#t.grid[1][t],{width:i}=getComputedStyle(s);this.#t.style.setProperty("--ch"+(t+1),i)}else if(this.host.width){const s=t(this.host.width)?this.host.width+"px":this.host.width;this.#t.style.setProperty("--ch"+this.host.ariaColIndex,s)}}}export{s as GridColumnWidthController};

package/dist/column-resize/index.js

@@ -1 +1 @@
-import{InteractionResizeContextController as t}from"@blueprintui/components/internals";class e extends t{constructor(t){super(t,(()=>({resizer:this.host?.querySelector("bp-button-resize"),max:parseInt(getComputedStyle(this.host.parentElement.parentElement).width)}))),this.host.addEventListener("resize-input",(t=>{this.host.parentElement.parentElement.style.setProperty("--ch"+this.host.ariaColIndex,t.detail+"px")}))}}export{e as GridColumnResizeController};
+import{InteractionResizeContextController as t}from"@blueprintui/components/internals";class e extends t{constructor(t){super(t,()=>({resizer:this.host?.querySelector("bp-button-resize"),max:parseInt(getComputedStyle(this.host.parentElement.parentElement).width)})),this.host.addEventListener("resize-input",t=>{this.host.parentElement.parentElement.style.setProperty("--ch"+this.host.ariaColIndex,t.detail+"px")})}}export{e as GridColumnResizeController};

package/dist/column-span/index.js

@@ -1 +1 @@
-class t{#t;constructor(t){this.host=t,this.host.addController(this)}hostConnected(){this.#e(),this.#s()}hostDisconnected(){this.#t.disconnect()}#e(){this.#t=new MutationObserver((t=>{t.filter((t=>"attributes"===t.type&&"aria-colspan"===t.attributeName)).forEach((t=>this.#o(t.target)))})),this.#t.observe(this.host,{characterData:!1,attributes:!0,childList:!0,subtree:!0})}#s(){[...this.host.gridLayoutControllerConfig.columns,...this.host.cells].forEach((t=>this.#o(t)))}#o(t){t.ariaColSpan&&(t.style.gridColumnEnd="span "+t.ariaColSpan)}}export{t as ColumnSpanController};
+class t{#t;constructor(t){this.host=t,this.host.addController(this)}hostConnected(){this.#e(),this.#s()}hostDisconnected(){this.#t.disconnect()}#e(){this.#t=new MutationObserver(t=>{t.filter(t=>"attributes"===t.type&&"aria-colspan"===t.attributeName).forEach(t=>this.#o(t.target))}),this.#t.observe(this.host,{characterData:!1,attributes:!0,childList:!0,subtree:!0})}#s(){[...this.host.gridLayoutControllerConfig.columns,...this.host.cells].forEach(t=>this.#o(t))}#o(t){t.ariaColSpan&&(t.style.gridColumnEnd="span "+t.ariaColSpan)}}export{t as ColumnSpanController};

package/dist/csv/index.js

@@ -1 +1 @@
-function t(t){return""+t.grid.map((t=>t.map((t=>`${t.textContent}${t.querySelector("input")?.value??""}`)))).map((t=>""+t.map((t=>t.trim())).join(","))).join("\n")}function n(n){const e=document.createElement("a");e.href="data:application/octet-stream,"+encodeURIComponent(t(n)),e.download="download.csv",e.click()}export{n as downloadCSV,t as exportCSV};
+function t(t){return""+t.grid.map(t=>t.map(t=>`${t.textContent}${t.querySelector("input")?.value??""}`)).map(t=>""+t.map(t=>t.trim()).join(",")).join("\n")}function n(n){const e=document.createElement("a");e.href="data:application/octet-stream,"+encodeURIComponent(t(n)),e.download="download.csv",e.click()}export{n as downloadCSV,t as exportCSV};

package/dist/custom-elements.json

@@ -77,7 +77,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-cell",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -450,7 +453,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-column",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -847,7 +853,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-detail",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -1037,7 +1046,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-footer",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -1226,12 +1238,6 @@
             {
               "name": "--body-height"
             },
-            {
-              "name": "--scrollbar-background"
-            },
-            {
-              "name": "--scrollbar-thumb-background"
-            },
             {
               "name": "--column-height"
             },
@@ -1543,7 +1549,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -1795,7 +1804,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-header",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -2439,7 +2451,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-placeholder",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -2591,7 +2606,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-row",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [

package/dist/detail/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as i,nothing as r}from"lit";import{property as s}from"lit/decorators/property.js";import{I18nService as o,baseStyles as n,typePopover as l,i18n as a,stateDirection as g,interactionResponsive as p}from"@blueprintui/components/internals";import d from"./element.css.js";let h=class extends e{constructor(){super(...arguments),this.i18n=o.keys.actions,this.position="inline-end"}get#t(){return this.parentElement}#e;get#i(){return"string"==typeof this.trigger?this.getRootNode().querySelector("#"+this.trigger):this.trigger}get#r(){return this.#i?.closest("bp-grid-row")}get#s(){return parseInt(getComputedStyle(this).getPropertyValue("--full-width-breakpoint"))}static{this.styles=[n,d]}render(){return i`<div part="internal" role="presentation">${this.closable?i`<bp-button-icon @click="${this.hidePopover}" aria-label="${this.i18n.close}" shape="close" action="flat" type="button"></bp-button-icon>`:r}<slot></slot></div>${this.trigger?i`<div part="pointer" role="presentation"></div>`:r}`}async connectedCallback(){super.connectedCallback(),this.slot="detail",this.#o()}firstUpdated(t){super.firstUpdated(t),this.#n(),this.addEventListener("toggle",(t=>{"open"===t.newState&&this.#n()}))}async updated(t){super.updated(t),await this.updateComplete,t.has("trigger")&&t.get("trigger")!==this.#i&&!this.hidden&&this.#l(t.get("trigger"))}disconnectedCallback(){super.disconnectedCallback(),this.#e.disconnect()}#l(t){t?.closest&&t?.closest("bp-grid-row")?.removeAttribute("_detail-row");const e=this.#i?.getBoundingClientRect()?.top-this.getBoundingClientRect().top;this.style.setProperty("--pointer-top",e-2+"px")}#o(){this.addEventListener("resize-layout",(t=>{t.detail.width<this.#s?this.setAttribute("full-width",""):t.detail.width>this.#s+parseInt(this.style.insetInlineStart)&&(this.removeAttribute("full-width"),this.#n())}))}async#n(){this.#t.scrollLock=!this.hidden,await this.updateComplete;const t=Array.from(this.#r?this.#r.querySelectorAll("bp-grid-cell"):[]).find((t=>"rowheader"===t.role));if(t){const e=this.#t?.getBoundingClientRect(),i=t.getBoundingClientRect();this.style.width="auto","inline-start"===this.position||"rtl"===this.#t?.getAttribute("dir")?this.style.insetInlineStart=Math.floor(e.right-i.left)+"px":this.style.insetInlineStart=Math.floor(i.right-e.left)+"px"}}};t([s({type:Object})],h.prototype,"i18n",void 0),t([s({type:String,reflect:!0})],h.prototype,"position",void 0),t([s({type:String})],h.prototype,"trigger",void 0),t([s({type:Boolean})],h.prototype,"closable",void 0),h=t([l((()=>({focusTrap:!0}))),a({key:"actions"}),g(),p()],h);export{h as BpGridDetail};
+import{__decorate as t}from"tslib";import{LitElement as e,html as i,nothing as r}from"lit";import{I18nService as s,baseStyles as n,typePopover as o,i18n as l,stateDirection as a,interactionResponsive as g}from"@blueprintui/components/internals";import h from"./element.css.js";let d=class extends e{static{this.properties={i18n:{type:Object},position:{type:String,reflect:!0},trigger:{type:String},closable:{type:Boolean}}}constructor(){super(...arguments),this.i18n=s.keys.actions,this.position="inline-end"}get#t(){return this.parentElement}#e;get#i(){return"string"==typeof this.trigger?this.getRootNode().querySelector("#"+this.trigger):this.trigger}get#r(){return this.#i?.closest("bp-grid-row")}get#s(){return parseInt(getComputedStyle(this).getPropertyValue("--full-width-breakpoint"))}static{this.styles=[n,h]}render(){return i`<div part="internal" role="presentation">${this.closable?i`<bp-button-icon @click="${this.hidePopover}" aria-label="${this.i18n.close}" shape="close" action="flat" type="button"></bp-button-icon>`:r}<slot></slot></div>${this.trigger?i`<div part="pointer" role="presentation"></div>`:r}`}async connectedCallback(){super.connectedCallback(),this.slot="detail",this.#n()}firstUpdated(t){super.firstUpdated(t),this.#o(),this.addEventListener("toggle",t=>{"open"===t.newState&&this.#o()})}async updated(t){super.updated(t),await this.updateComplete,t.has("trigger")&&t.get("trigger")!==this.#i&&!this.hidden&&this.#l(t.get("trigger"))}disconnectedCallback(){super.disconnectedCallback(),this.#e.disconnect()}#l(t){t?.closest&&t?.closest("bp-grid-row")?.removeAttribute("_detail-row");const e=this.#i?.getBoundingClientRect()?.top-this.getBoundingClientRect().top;this.style.setProperty("--pointer-top",e-2+"px")}#n(){this.addEventListener("resize-layout",t=>{t.detail.width<this.#s?this.setAttribute("full-width",""):t.detail.width>this.#s+parseInt(this.style.insetInlineStart)&&(this.removeAttribute("full-width"),this.#o())})}async#o(){this.#t.scrollLock=!this.hidden,await this.updateComplete;const t=Array.from(this.#r?this.#r.querySelectorAll("bp-grid-cell"):[]).find(t=>"rowheader"===t.role);if(t){const e=this.#t?.getBoundingClientRect(),i=t.getBoundingClientRect();this.style.width="auto","inline-start"===this.position||"rtl"===this.#t?.getAttribute("dir")?this.style.insetInlineStart=Math.floor(e.right-i.left)+"px":this.style.insetInlineStart=Math.floor(i.right-e.left)+"px"}}};d=t([o(()=>({focusTrap:!0})),l({key:"actions"}),a(),g()],d);export{d as BpGridDetail};

package/dist/draggable-column/index.js

@@ -1 +1 @@
-import{DraggableListController as e}from"@blueprintui/crane";class r extends e{constructor(e){super(e,(()=>({manageFocus:!0,manageTabindex:!0,items:e.querySelectorAll("bp-grid-column"),dropZones:[]})))}}export{r as DraggableGridColumnController};
+import{DraggableListController as e}from"@blueprintui/crane";class r extends e{constructor(e){super(e,()=>({manageFocus:!0,manageTabindex:!0,items:e.querySelectorAll("bp-grid-column"),dropZones:[]}))}}export{r as DraggableGridColumnController};

package/dist/draggable-row/index.js

@@ -1 +1 @@
-import{DraggableListController as e}from"@blueprintui/crane";class r extends e{constructor(e){super(e,(()=>({manageFocus:!0,manageTabindex:!0,items:e.querySelectorAll("bp-grid-row"),dropZones:e.querySelectorAll("bp-grid-placeholder")})))}}export{r as DraggableGridRowController};
+import{DraggableListController as e}from"@blueprintui/crane";class r extends e{constructor(e){super(e,()=>({manageFocus:!0,manageTabindex:!0,items:e.querySelectorAll("bp-grid-row"),dropZones:e.querySelectorAll("bp-grid-placeholder")}))}}export{r as DraggableGridRowController};

package/dist/footer/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as r,html as o}from"lit";import{state as s}from"lit/decorators/state.js";import{baseStyles as e}from"@blueprintui/components/internals";import l from"./element.css.js";class n extends r{constructor(){super(...arguments),this._colSpan="",this.#t=this.attachInternals()}static{this.styles=[e,l]}#t;render(){return o`<slot role="gridcell" part="internal" .ariaColSpan="${this._colSpan}"></slot>`}connectedCallback(){super.connectedCallback(),this.slot="footer",this.#t.role="row"}}t([s()],n.prototype,"_colSpan",void 0);export{n as BpGridFooter};
+import{LitElement as t,html as e}from"lit";import{baseStyles as r}from"@blueprintui/components/internals";import s from"./element.css.js";class n extends t{constructor(){super(),this._colSpan=""}static{this.properties={_colSpan:{state:!0}}}static{this.styles=[r,s]}#t=this.attachInternals();render(){return e`<slot role="gridcell" part="internal" .ariaColSpan="${this._colSpan}"></slot>`}connectedCallback(){super.connectedCallback(),this.slot="footer",this.#t.role="row"}}export{n as BpGridFooter};

package/dist/grid/dom.controller.js

@@ -1 +1 @@
-import{insertSpanningCells as t}from"@blueprintui/grid/internals";class s{#t;get placeholder(){return this.#t||(this.#t=this.host.querySelector("bp-grid-placeholder")),this.#t}#s;get footer(){return this.#s||(this.#s=this.host.querySelector("bp-grid-footer")),this.#s}#e;get rows(){return this.#e||(this.#e=Array.from(this.host.querySelectorAll("bp-grid-row"))),this.#e}#r;get columns(){return this.#r||(this.#r=Array.from(this.host.querySelectorAll("bp-grid-column"))),this.#r}#o;get cells(){return this.#o||(this.#o=Array.from(this.host.querySelectorAll("bp-grid-cell"))),this.#o}#i;get grid(){if(!this.#i){const s=this.columns.filter((t=>!t.ariaColSpan)),e=t([...s,...Array.from(this.cells)]);for(this.#i=[];e.length;)this.#i.push(e.splice(0,s.length))}return this.#i}#h=0;get isStatic(){return this.#h++,1===this.#h&&!this.host.rangeSelection&&!this.host.querySelector("bp-grid-column bp-button-resize")&&!Array.from(this.columns).find((t=>void 0!==t.position||t.draggable||t.width))}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.host.shadowRoot.addEventListener("slotchange",(async()=>{await this.host.updateComplete,this.#l(),this.host.shadowRoot.dispatchEvent(new CustomEvent("bp-slotchange"))})),this.host.addEventListener("bp-crane-end",(async()=>{await this.host.updateComplete,this.#l()}))}#l(){this.#i=null,this.#r=null,this.#e=null,this.#o=null,this.#t=null,this.#s=null}}export{s as GridDOMController};
+import{insertSpanningCells as t}from"@blueprintui/grid/internals";class s{#t;get placeholder(){return this.#t||(this.#t=this.host.querySelector("bp-grid-placeholder")),this.#t}#s;get footer(){return this.#s||(this.#s=this.host.querySelector("bp-grid-footer")),this.#s}#e;get rows(){return this.#e||(this.#e=Array.from(this.host.querySelectorAll("bp-grid-row"))),this.#e}#r;get columns(){return this.#r||(this.#r=Array.from(this.host.querySelectorAll("bp-grid-column"))),this.#r}#o;get cells(){return this.#o||(this.#o=Array.from(this.host.querySelectorAll("bp-grid-cell"))),this.#o}#i;get grid(){if(!this.#i){const s=this.columns.filter(t=>!t.ariaColSpan),e=t([...s,...Array.from(this.cells)]);for(this.#i=[];e.length;)this.#i.push(e.splice(0,s.length))}return this.#i}#h=0;get isStatic(){return this.#h++,1===this.#h&&!this.host.rangeSelection&&!this.host.querySelector("bp-grid-column bp-button-resize")&&!Array.from(this.columns).find(t=>void 0!==t.position||t.draggable||t.width)}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.host.shadowRoot.addEventListener("slotchange",async()=>{await this.host.updateComplete,this.#l(),this.host.shadowRoot.dispatchEvent(new CustomEvent("bp-slotchange"))}),this.host.addEventListener("bp-crane-end",async()=>{await this.host.updateComplete,this.#l()})}#l(){this.#i=null,this.#r=null,this.#e=null,this.#o=null,this.#t=null,this.#s=null}}export{s as GridDOMController};

package/dist/grid/element.css.js

@@ -1 +1 @@
-const o=new CSSStyleSheet;o.replaceSync("[hidden]{display:none!important}:host{--background:var(--bp-layer-background-200);--body-height:auto;--body-min-height:auto;--scrollbar-background:var(--background);--scrollbar-thumb-background:var(--border-color);--column-height:var(--bp-size-900);--row-height:var(--bp-size-900);--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--border:0;--border-width:var(--bp-object-border-width-100);--border-color:var(--bp-object-border-color-100);width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([column-style*=border]) ::slotted(bp-grid-row){--cell-border-width:var(--border-width);--border-top:0;--border-bottom:0}:host([row-style*=border]) ::slotted(bp-grid-row){--border-top:var(--border-width)solid var(--border-color)}:host([row-style*=border]) ::slotted(bp-grid-row:last-of-type){--border-bottom:var(--border-width)solid var(--border-color)}:host([row-style*=border]) ::slotted(bp-grid-row:first-of-type){--border-top:0}:host([row-style*=stripe]) ::slotted(bp-grid-row){--border-top:0;--border-bottom:0}:host([row-style*=stripe]) ::slotted(bp-grid-row:nth-child(2n)),:host([row-style*=hover]) ::slotted(bp-grid-row:hover){--bp-interaction-offset:var(--bp-interaction-hover-offset)}:host([layer=flat]){--border-color:var(--bp-object-border-color-200);--background:inherit!important}[part=internal]{border:var(--border);border-radius:var(--bp-object-border-radius-100);background:var(--background);position:relative}.scroll-container{box-shadow:var(--box-shadow);border:var(--border);height:var(--body-height,100%);min-height:var(--body-min-height,auto);scroll-padding-top:var(--scroll-padding-top);scrollbar-color:var(--scrollbar-thumb-background)var(--scrollbar-background);scrollbar-width:thin;flex-direction:column;width:100%;display:flex;overflow:auto}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{min-width:fit-content;margin-top:var(--bp-size-200);flex-direction:column;flex:1;display:flex}slot[name=header]{z-index:99;flex-direction:column;min-width:fit-content;display:flex;position:sticky;top:0}::slotted(bp-grid-row:not([bp-draggable=target]):first-of-type){--box-shadow:var(--border-width)solid transparent}@keyframes fadein{0%{opacity:0}to{opacity:1}}");export{o as default};
+const o=new CSSStyleSheet;o.replaceSync("[hidden]{display:none!important}:host{--background:var(--bp-layer-background-200);--body-height:auto;--body-min-height:auto;--column-height:var(--bp-size-900);--row-height:var(--bp-size-900);--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--border:0;--border-width:var(--bp-object-border-width-100);--border-color:var(--bp-object-border-color-100);width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([column-style*=border]) ::slotted(bp-grid-row){--cell-border-width:var(--border-width);--border-top:0;--border-bottom:0}:host([row-style*=border]) ::slotted(bp-grid-row){--border-top:var(--border-width)solid var(--border-color)}:host([row-style*=border]) ::slotted(bp-grid-row:last-of-type){--border-bottom:var(--border-width)solid var(--border-color)}:host([row-style*=border]) ::slotted(bp-grid-row:first-of-type){--border-top:0}:host([row-style*=stripe]) ::slotted(bp-grid-row){--border-top:0;--border-bottom:0}:host([row-style*=stripe]) ::slotted(bp-grid-row:nth-child(2n)),:host([row-style*=hover]) ::slotted(bp-grid-row:hover){--bp-interaction-offset:var(--bp-interaction-hover-offset)}:host([layer=flat]){--border-color:var(--bp-object-border-color-200);--background:inherit!important}[part=internal]{border:var(--border);border-radius:var(--bp-object-border-radius-100);background:var(--background);position:relative}.scroll-container{scrollbar-color:var(--bp-scrollbar-color);scrollbar-width:var(--bp-scrollbar-width);box-shadow:var(--box-shadow);border:var(--border);height:var(--body-height,100%);min-height:var(--body-min-height,auto);scroll-padding-top:var(--scroll-padding-top);flex-direction:column;width:100%;display:flex;overflow:auto}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{min-width:fit-content;margin-top:var(--bp-size-200);flex-direction:column;flex:1;display:flex}slot[name=header]{z-index:99;flex-direction:column;min-width:fit-content;display:flex;position:sticky;top:0}::slotted(bp-grid-row:not([bp-draggable=target]):first-of-type){--box-shadow:var(--border-width)solid transparent}@keyframes fadein{0%{opacity:0}to{opacity:1}}");export{o as default};

package/dist/grid/element.d.ts

@@ -15,8 +15,6 @@ import { GridLayoutController } from './layout.controller.js';
  * @since 1.0.0
  * @cssprop --background
  * @cssprop --body-height
- * @cssprop --scrollbar-background
- * @cssprop --scrollbar-thumb-background
  * @cssprop --column-height
  * @cssprop --row-height
  * @cssprop --scroll-padding-top

package/dist/grid/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as o,html as e}from"lit";import{property as r}from"lit/decorators/property.js";import{baseStyles as i,I18nService as l,createId as n,attachRootNodeStyles as s,dynamicControllers as a,i18n as h,typeMultiSelectable as c}from"@blueprintui/components/internals";import{interactionScrollVisibility as p}from"@blueprintui/grid/internals";import{GridLayoutController as d}from"./layout.controller.js";import{GridDOMController as u}from"./dom.controller.js";import m from"./element.global.css.js";import C from"./element.css.js";let y=class extends o{static{this.styles=[i,C]}get gridLayoutControllerConfig(){return{columns:this.#t.columns,columnLayout:this.columnLayout,height:this.height}}#t;get grid(){return this.#t.grid}get columns(){return this.#t.columns}get cells(){return this.#t.cells}get rows(){return this.#t.rows}get keyNavGrid(){return this.shadowRoot.querySelector(".scroll-container")}render(){return e`<div role="presentation" part="internal"><div role="presentation" class="scroll-container"><slot role="presentation" name="header"></slot><slot role="presentation" class="body-row-group"></slot></div><slot name="footer"></slot><slot name="detail"></slot></div>`}constructor(){super(),this.i18n=l.keys.actions,this.columnLayout="fixed",this.scrollLock=!1,this.layer="container",this.rangeSelection=!1,this._id=n(),this.gridLayoutController=new d(this),this._internals=this.attachInternals(),this.#t=new u(this),this._internals.role="grid",this._internals.states.add("bp-layer"),this.#o()}async connectedCallback(){super.connectedCallback(),s(this,[m]),await this.updateComplete,this.shadowRoot.addEventListener("bp-slotchange",(()=>this.#e())),this.#e()}#o(){this.addEventListener("sort",(t=>{const o=t.composedPath().find((t=>"BP-GRID-COLUMN"===t.tagName));o&&(o.ariaSort=t.detail)}))}async#e(){this.#t.isStatic||(this.#r(),this.#i(),this.#l(),this.#n(),this.#s(),this.#a())}#r(){const t=Math.max(this.#t.rows?.length,1),o=this.#t.footer?1:0;this._internals.ariaRowCount=""+(1+t+o),this._internals.ariaColCount=""+this.#t.columns.length}#i(){this.#t.columns.forEach(((t,o)=>t.ariaColIndex=""+(o+1)))}#l(){this.#t.rows?.forEach(((t,o)=>t.ariaRowIndex=""+(o+2)))}#n(){this.#t.cells?.forEach(((t,o)=>t.ariaColIndex=""+(o%this.#t.columns.length+1)))}#s(){this.#t.placeholder&&(this.#t.placeholder.ariaRowCount=""+(this.#t.rows.length+1),this.#t.placeholder._colSpan=this._internals.ariaColCount)}#a(){this.#t.footer&&(this.#t.footer.ariaRowCount=""+(this.#t.rows.length+2),this.#t.footer._colSpan=this._internals.ariaColCount)}};t([r({type:Object})],y.prototype,"i18n",void 0),t([r({type:String,reflect:!0})],y.prototype,"height",void 0),t([r({type:String,reflect:!0,attribute:"column-layout"})],y.prototype,"columnLayout",void 0),t([r({type:String,reflect:!0,attribute:"row-style"})],y.prototype,"rowStyle",void 0),t([r({type:String,reflect:!0,attribute:"column-style"})],y.prototype,"columnStyle",void 0),t([r({type:String,reflect:!0})],y.prototype,"selectable",void 0),t([r({type:Boolean,reflect:!0,attribute:"scroll-lock"})],y.prototype,"scrollLock",void 0),t([r({type:String,reflect:!0})],y.prototype,"layer",void 0),t([r({type:Boolean,reflect:!0,attribute:"range-selection"})],y.prototype,"rangeSelection",void 0),t([r({type:String,reflect:!0})],y.prototype,"_id",void 0),y=t([a(),h({key:"actions"}),c(),p()],y);export{y as BpGrid};
+import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{baseStyles as r,I18nService as l,createId as i,attachRootNodeStyles as n,dynamicControllers as s,i18n as a,typeMultiSelectable as h}from"@blueprintui/components/internals";import{interactionScrollVisibility as c}from"@blueprintui/grid/internals";import{GridLayoutController as u}from"./layout.controller.js";import{GridDOMController as d}from"./dom.controller.js";import C from"./element.global.css.js";import m from"./element.css.js";let p=class extends e{static{this.properties={i18n:{type:Object},height:{type:String,reflect:!0},columnLayout:{type:String,reflect:!0,attribute:"column-layout"},rowStyle:{type:String,reflect:!0,attribute:"row-style"},columnStyle:{type:String,reflect:!0,attribute:"column-style"},selectable:{type:String,reflect:!0},scrollLock:{type:Boolean,reflect:!0,attribute:"scroll-lock"},layer:{type:String,reflect:!0},rangeSelection:{type:Boolean,reflect:!0,attribute:"range-selection"},_id:{type:String,reflect:!0}}}static{this.styles=[r,m]}get gridLayoutControllerConfig(){return{columns:this.#t.columns,columnLayout:this.columnLayout,height:this.height}}#t;get grid(){return this.#t.grid}get columns(){return this.#t.columns}get cells(){return this.#t.cells}get rows(){return this.#t.rows}get keyNavGrid(){return this.shadowRoot.querySelector(".scroll-container")}render(){return o`<div role="presentation" part="internal"><div role="presentation" class="scroll-container"><slot role="presentation" name="header"></slot><slot role="presentation" class="body-row-group"></slot></div><slot name="footer"></slot><slot name="detail"></slot></div>`}constructor(){super(),this.gridLayoutController=new u(this),this._internals=this.attachInternals(),this.#t=new d(this),this._internals.role="grid",this._internals.states.add("bp-layer"),this.#e(),this.i18n=l.keys.actions,this.columnLayout="fixed",this.scrollLock=!1,this.layer="container",this.rangeSelection=!1,this._id=i()}async connectedCallback(){super.connectedCallback(),n(this,[C]),await this.updateComplete,this.shadowRoot.addEventListener("bp-slotchange",()=>this.#o()),this.#o()}#e(){this.addEventListener("sort",t=>{const e=t.composedPath().find(t=>"BP-GRID-COLUMN"===t.tagName);e&&(e.ariaSort=t.detail)})}async#o(){this.#t.isStatic||(this.#r(),this.#l(),this.#i(),this.#n(),this.#s(),this.#a())}#r(){const t=Math.max(this.#t.rows?.length,1),e=this.#t.footer?1:0;this._internals.ariaRowCount=""+(1+t+e),this._internals.ariaColCount=""+this.#t.columns.length}#l(){this.#t.columns.forEach((t,e)=>t.ariaColIndex=""+(e+1))}#i(){this.#t.rows?.forEach((t,e)=>t.ariaRowIndex=""+(e+2))}#n(){this.#t.cells?.forEach((t,e)=>t.ariaColIndex=""+(e%this.#t.columns.length+1))}#s(){this.#t.placeholder&&(this.#t.placeholder.ariaRowCount=""+(this.#t.rows.length+1),this.#t.placeholder._colSpan=this._internals.ariaColCount)}#a(){this.#t.footer&&(this.#t.footer.ariaRowCount=""+(this.#t.rows.length+2),this.#t.footer._colSpan=this._internals.ariaColCount)}};p=t([s(),a({key:"actions"}),h(),c()],p);export{p as BpGrid};

package/dist/grid/hover.controller.js

@@ -1 +1 @@
-import{attachRootNodeStyles as t}from"@blueprintui/components/internals";class e{#t;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#e(),this.host.addEventListener("mouseout",(()=>this.#i()))}hostUpdated(){this.#e()}#e(){this.host.columnStyle?.includes("hover")&&!this.#t&&(this.#t=new CSSStyleSheet,t(this.host,[this.#t]),this.host.addEventListener("mouseover",(t=>{const e=t.target.closest("bp-grid-cell, bp-grid-column");if(e){const t=Array.from(e.parentElement.querySelectorAll("bp-grid-cell, bp-grid-column")).indexOf(e)+1;this.#t.replaceSync(`\n            bp-grid[_id=${this.host._id}] bp-grid-cell:nth-child(${t}),\n            bp-grid[_id=${this.host._id}] bp-grid-column:nth-child(${t}) {\n              --bp-interaction-offset: var(--bp-interaction-hover-offset);\n            }\n          `)}})))}#i(){this.#t?.replaceSync("")}}export{e as GridHoverController};
+import{attachRootNodeStyles as t}from"@blueprintui/components/internals";class e{#t;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#e(),this.host.addEventListener("mouseout",()=>this.#i())}hostUpdated(){this.#e()}#e(){this.host.columnStyle?.includes("hover")&&!this.#t&&(this.#t=new CSSStyleSheet,t(this.host,[this.#t]),this.host.addEventListener("mouseover",t=>{const e=t.target.closest("bp-grid-cell, bp-grid-column");if(e){const t=Array.from(e.parentElement.querySelectorAll("bp-grid-cell, bp-grid-column")).indexOf(e)+1;this.#t.replaceSync(`\n            bp-grid[_id=${this.host._id}] bp-grid-cell:nth-child(${t}),\n            bp-grid[_id=${this.host._id}] bp-grid-column:nth-child(${t}) {\n              --bp-interaction-offset: var(--bp-interaction-hover-offset);\n            }\n          `)}}))}#i(){this.#t?.replaceSync("")}}export{e as GridHoverController};

package/dist/grid/layout.controller.js

@@ -1 +1 @@
-import{listenForAttributeListChange as t,isNumericString as i}from"@blueprintui/components/internals";import{onChildListMutation as s}from"@blueprintui/grid/internals";class e{#t=[];#i;get#s(){return Array.from(this.#i??[])}get#e(){return this.host.gridLayoutControllerConfig}get#o(){return this.#s.filter((t=>!t.hidden))}get#h(){return this.#o["rtl"===this.host.getAttribute("dir")?0:this.#o.length-1]}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#l(),this.host.addEventListener("resize-input",(()=>this.#n()),{once:!0,capture:!0}),this.#t.push(s(this.host,(async t=>{await this.host.updateComplete,t&&this.#r(t)&&this.#l()}))),this.#t.push(t(this.host,["hidden"],(()=>this.#l())))}hostUpdated(){this.#e.height&&this.host.style.setProperty("--body-height",i(this.#e.height)?this.#e.height+"px":this.#e.height)}hostDisconnected(){this.#t.forEach((t=>t.disconnect()))}#r(t){return[...Array.from(t.removedNodes),...Array.from(t.addedNodes)].find((t=>"BP-GRID-COLUMN"===t.tagName))}#n(){"fixed"===this.#e.columnLayout&&(this.#o.filter((t=>t.width)).forEach((t=>this.host.style.setProperty("--ch"+t.ariaColIndex,i(t.width)?t.width+"px":t.width))),this.#o.filter((t=>!t.width&&parseInt(t.ariaColIndex)!==this.#s.length)).forEach((t=>this.host.style.setProperty("--ch"+t.ariaColIndex,parseInt(getComputedStyle(t).width)+"px"))),this.host.style.setProperty("--ch"+this.#h.ariaColIndex,`minmax(${this.#d()??parseInt(getComputedStyle(this.#h).width)+"px"}, 100%)`))}#d(){return i(this.#h.width)?this.#h.width+"px":this.#h.width?this.#h.width:null}#l(){this.#i=this.#e.columns,this.#a(),this.#u()}#a(){const t=this.#s.filter((t=>!t.hidden&&!t.ariaColSpan)).reduce(((t,s,e)=>`${t} var(--ch${e+1}, ${(i(s.width)?s.width+"px":s.width)||"1fr"})`),"");this.host.style.setProperty("--ch-grid",t)}#u(){this.#o.forEach((t=>t._internals.states.delete("ch-last"))),this.#h?._internals.states.add("ch-last")}}export{e as GridLayoutController};
+import{listenForAttributeListChange as t,isNumericString as i}from"@blueprintui/components/internals";import{onChildListMutation as s}from"@blueprintui/grid/internals";class e{#t=[];#i;get#s(){return Array.from(this.#i??[])}get#e(){return this.host.gridLayoutControllerConfig}get#o(){return this.#s.filter(t=>!t.hidden)}get#h(){return this.#o["rtl"===this.host.getAttribute("dir")?0:this.#o.length-1]}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#l(),this.host.addEventListener("resize-input",()=>this.#n(),{once:!0,capture:!0}),this.#t.push(s(this.host,async t=>{await this.host.updateComplete,t&&this.#r(t)&&this.#l()})),this.#t.push(t(this.host,["hidden"],()=>this.#l()))}hostUpdated(){this.#e.height&&this.host.style.setProperty("--body-height",i(this.#e.height)?this.#e.height+"px":this.#e.height)}hostDisconnected(){this.#t.forEach(t=>t.disconnect())}#r(t){return[...Array.from(t.removedNodes),...Array.from(t.addedNodes)].find(t=>"BP-GRID-COLUMN"===t.tagName)}#n(){"fixed"===this.#e.columnLayout&&(this.#o.filter(t=>t.width).forEach(t=>this.host.style.setProperty("--ch"+t.ariaColIndex,i(t.width)?t.width+"px":t.width)),this.#o.filter(t=>!t.width&&parseInt(t.ariaColIndex)!==this.#s.length).forEach(t=>this.host.style.setProperty("--ch"+t.ariaColIndex,parseInt(getComputedStyle(t).width)+"px")),this.host.style.setProperty("--ch"+this.#h.ariaColIndex,`minmax(${this.#d()??parseInt(getComputedStyle(this.#h).width)+"px"}, 100%)`))}#d(){return i(this.#h.width)?this.#h.width+"px":this.#h.width?this.#h.width:null}#l(){this.#i=this.#e.columns,this.#a(),this.#u()}#a(){const t=this.#s.filter(t=>!t.hidden&&!t.ariaColSpan).reduce((t,s,e)=>`${t} var(--ch${e+1}, ${(i(s.width)?s.width+"px":s.width)||"1fr"})`,"");this.host.style.setProperty("--ch-grid",t)}#u(){this.#o.forEach(t=>t._internals.states.delete("ch-last")),this.#h?._internals.states.add("ch-last")}}export{e as GridLayoutController};

package/dist/include/keynav.js

@@ -1 +1 @@
-import{KeynavController as r}from"@blueprintui/typewriter";import{DynamicControllers as t}from"@blueprintui/components/internals";import{BpGrid as e}from"../grid/element.js";t.add(e,class extends r{constructor(r){super(r,(()=>({host:r.keyNavGrid,grid:r.grid})))}});
+import{KeynavController as r}from"@blueprintui/typewriter";import{DynamicControllers as t}from"@blueprintui/components/internals";import{BpGrid as e}from"../grid/element.js";t.add(e,class extends r{constructor(r){super(r,()=>({host:r.keyNavGrid,grid:r.grid}))}});

package/dist/internals/controllers/interaction-scroll-visibility.controller.js

@@ -1 +1 @@
-function t(){return(t,e)=>t.addInitializer((t=>new i(t)))}class i{constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.host.renderRoot.addEventListener("scroll",(()=>this.#t()),{once:!0,capture:!0}),this.host.renderRoot.addEventListener("pointerdown",(()=>this.#t()),{once:!0,capture:!0})}#t(){this.host.style.setProperty("--row-content-visibility","visibile")}}export{i as InteractionScrollVisibilityController,t as interactionScrollVisibility};
+function t(){return(t,e)=>t.addInitializer(t=>new i(t))}class i{constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.host.renderRoot.addEventListener("scroll",()=>this.#t(),{once:!0,capture:!0}),this.host.renderRoot.addEventListener("pointerdown",()=>this.#t(),{once:!0,capture:!0})}#t(){this.host.style.setProperty("--row-content-visibility","visibile")}}export{i as InteractionScrollVisibilityController,t as interactionScrollVisibility};

package/dist/internals/utils/events.js

@@ -1 +1 @@
-function t(t,e){const o=new MutationObserver((t=>{for(const o of t)"childList"===o.type&&e(o)}));return o.observe(t,{childList:!0}),o}export{t as onChildListMutation};
+function t(t,e){const o=new MutationObserver(t=>{for(const o of t)"childList"===o.type&&e(o)});return o.observe(t,{childList:!0}),o}export{t as onChildListMutation};

package/dist/internals/utils/focus.js

@@ -1 +1 @@
-function t(t){return t.matches("a[href],area[href],input:not([disabled]),button:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,object,embed,*[tabindex],*[contenteditable=true],[role=button]:not([disabled])")}function e(t){return t.matches("a[href],button:not([disabled]),input[type=checkbox],input[type=radio],object,embed,*[tabindex],[role=button]:not([disabled])")}function n(t=document){return t.activeElement&&t.activeElement.shadowRoot?n(t.activeElement.shadowRoot)??t.activeElement:t.activeElement}function o(e){e&&!t(e)?(e.setAttribute("tabindex","-1"),e.focus(),e.addEventListener("blur",(()=>e.removeAttribute("tabindex")),{once:!0})):e?.focus()}function a(t,e){t.forEach((t=>t.tabIndex=-1)),e.tabIndex=0}function d(t){t.forEach((t=>t.tabIndex=-1)),t[0].tabIndex=0}export{o as focusElement,t as focusable,n as getActiveElement,d as initializeKeyListItems,a as setActiveKeyListItem,e as simpleFocusable};
+function t(t){return t.matches("a[href],area[href],input:not([disabled]),button:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,object,embed,*[tabindex],*[contenteditable=true],[role=button]:not([disabled])")}function e(t){return t.matches("a[href],button:not([disabled]),input[type=checkbox],input[type=radio],object,embed,*[tabindex],[role=button]:not([disabled])")}function n(t=document){return t.activeElement&&t.activeElement.shadowRoot?n(t.activeElement.shadowRoot)??t.activeElement:t.activeElement}function o(e){e&&!t(e)?(e.setAttribute("tabindex","-1"),e.focus(),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})):e?.focus()}function a(t,e){t.forEach(t=>t.tabIndex=-1),e.tabIndex=0}function d(t){t.forEach(t=>t.tabIndex=-1),t[0].tabIndex=0}export{o as focusElement,t as focusable,n as getActiveElement,d as initializeKeyListItems,a as setActiveKeyListItem,e as simpleFocusable};

package/dist/internals/utils/traversal.js

@@ -1 +1 @@
-import{focusable as r}from"./focus.js";function n(n,e=10){return t(n,e).filter((n=>r(n)))}function t(r,n=10){return Array.from(e(r)).reduce(((r,o)=>[...r,[o,[...Array.from(e(o)).map((r=>[r,t(r,n)]))]]]),[]).flat(n)}function e(r){if(r.documentElement)return r.documentElement.children;if(r.shadowRoot)return r.shadowRoot.children;if(r.assignedElements){const n=r.assignedElements();return n.length?n:r.children}return r.children}function o(r){return r?.constructor===Object}function c(...r){const n={};return r.map((r=>o(r)?{...r}:{})).forEach((r=>{Object.keys(r).forEach((t=>{const e=r[t];Array.isArray(e)?n[t]=Array.from(e):o(e)?n[t]=c(n[t]||{},e):n[t]=e}))})),n}function i(r){const n=[...r];return[...r].forEach((t=>{if(t.ariaColSpan){const e=r.indexOf(t);for(let r=1;r<parseInt(t.ariaColSpan);r++)n.splice(e+r,0,t)}})),n}export{e as getChildren,t as getFlattenedDOMTree,n as getFlattenedFocusableItems,i as insertSpanningCells,o as isObject,c as mergeObjects};
+import{focusable as r}from"./focus.js";function n(n,e=10){return t(n,e).filter(n=>r(n))}function t(r,n=10){return Array.from(e(r)).reduce((r,o)=>[...r,[o,[...Array.from(e(o)).map(r=>[r,t(r,n)])]]],[]).flat(n)}function e(r){if(r.documentElement)return r.documentElement.children;if(r.shadowRoot)return r.shadowRoot.children;if(r.assignedElements){const n=r.assignedElements();return n.length?n:r.children}return r.children}function o(r){return r?.constructor===Object}function c(...r){const n={};return r.map(r=>o(r)?{...r}:{}).forEach(r=>{Object.keys(r).forEach(t=>{const e=r[t];Array.isArray(e)?n[t]=Array.from(e):o(e)?n[t]=c(n[t]||{},e):n[t]=e})}),n}function i(r){const n=[...r];return[...r].forEach(t=>{if(t.ariaColSpan){const e=r.indexOf(t);for(let r=1;r<parseInt(t.ariaColSpan);r++)n.splice(e+r,0,t)}}),n}export{e as getChildren,t as getFlattenedDOMTree,n as getFlattenedFocusableItems,i as insertSpanningCells,o as isObject,c as mergeObjects};

package/dist/placeholder/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as r,html as o}from"lit";import{property as e}from"lit/decorators/property.js";import{state as s}from"lit/decorators/state.js";import{I18nService as i,baseStyles as n,i18n as l}from"@blueprintui/components/internals";import a from"./element.css.js";let p=class extends r{constructor(){super(...arguments),this.i18n=i.keys.actions,this._colSpan="0",this.#t=this.attachInternals()}static{this.styles=[n,a]}#t;render(){return o`<slot role="gridcell" part="internal" .ariaColSpan="${this._colSpan}">${"dropzone"===this.bpDraggableItem?o`<p sr-only>${this.i18n.dropTarget}</p>`:""}</slot>`}connectedCallback(){super.connectedCallback(),this.#t.role="row"}};t([e({type:Object})],p.prototype,"i18n",void 0),t([s()],p.prototype,"_colSpan",void 0),t([s()],p.prototype,"bpDraggableItem",void 0),p=t([l({key:"actions"})],p);export{p as BpGridPlaceholder};
+import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{I18nService as s,baseStyles as n,i18n as i}from"@blueprintui/components/internals";import o from"./element.css.js";let a=class extends e{static{this.properties={i18n:{type:Object},_colSpan:{state:!0},bpDraggableItem:{state:!0}}}constructor(){super(...arguments),this.i18n=s.keys.actions,this._colSpan="0"}static{this.styles=[n,o]}#t=this.attachInternals();render(){return r`<slot role="gridcell" part="internal" .ariaColSpan="${this._colSpan}">${"dropzone"===this.bpDraggableItem?r`<p sr-only>${this.i18n.dropTarget}</p>`:""}</slot>`}connectedCallback(){super.connectedCallback(),this.#t.role="row"}};a=t([i({key:"actions"})],a);export{a as BpGridPlaceholder};

package/dist/range-selection/index.js

@@ -1 +1 @@
-import{InteractionRangeSelectionController as e}from"@blueprintui/components/internals";class r extends e{constructor(e){super(e,(()=>({rangeSelection:e.rangeSelection,grid:e.grid.slice(1)})))}}export{r as GridRangeSelectionController};
+import{InteractionRangeSelectionController as e}from"@blueprintui/components/internals";class r extends e{constructor(e){super(e,()=>({rangeSelection:e.rangeSelection,grid:e.grid.slice(1)}))}}export{r as GridRangeSelectionController};

package/dist/row/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as r,html as e}from"lit";import{property as o}from"lit/decorators/property.js";import{baseStyles as s,dynamicControllers as i}from"@blueprintui/components/internals";import l from"./element.css.js";let n=class extends r{static{this.styles=[s,l]}render(){return e`<slot></slot>`}constructor(){super(),this._internals=this.attachInternals(),this._internals.role="row"}};t([o({type:Boolean,reflect:!0})],n.prototype,"selected",void 0),t([o({type:String,reflect:!0})],n.prototype,"position",void 0),n=t([i()],n);export{n as BpGridRow};
+import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,dynamicControllers as i}from"@blueprintui/components/internals";import o from"./element.css.js";let n=class extends e{static{this.properties={selected:{type:Boolean,reflect:!0},position:{type:String,reflect:!0}}}static{this.styles=[s,o]}render(){return r`<slot></slot>`}constructor(){super(),this._internals=this.attachInternals(),this._internals.role="row"}};n=t([i()],n);export{n as BpGridRow};

package/dist/vscode.css-custom-data.json

@@ -31,8 +31,6 @@
     { "name": "--border-width", "values": [] },
     { "name": "--background", "values": [] },
     { "name": "--body-height", "values": [] },
-    { "name": "--scrollbar-background", "values": [] },
-    { "name": "--scrollbar-thumb-background", "values": [] },
     { "name": "--column-height", "values": [] },
     { "name": "--row-height", "values": [] },
     { "name": "--scroll-padding-top", "values": [] },

package/dist/vscode.html-custom-data.json

@@ -56,7 +56,7 @@
     },
     {
       "name": "bp-grid",
-      "description": "Grid\n\n```typescript\nimport '@blueprintui/grid/include/core.js';\n```\n---\n\n\n### **CSS Properties:**\n - **--background** - undefined _(default: undefined)_\n- **--body-height** - undefined _(default: undefined)_\n- **--scrollbar-background** - undefined _(default: undefined)_\n- **--scrollbar-thumb-background** - undefined _(default: undefined)_\n- **--column-height** - undefined _(default: undefined)_\n- **--row-height** - undefined _(default: undefined)_\n- **--scroll-padding-top** - undefined _(default: undefined)_\n- **--row-content-visibility** - undefined _(default: undefined)_\n- **--border-width** - undefined _(default: undefined)_",
+      "description": "Grid\n\n```typescript\nimport '@blueprintui/grid/include/core.js';\n```\n---\n\n\n### **CSS Properties:**\n - **--background** - undefined _(default: undefined)_\n- **--body-height** - undefined _(default: undefined)_\n- **--column-height** - undefined _(default: undefined)_\n- **--row-height** - undefined _(default: undefined)_\n- **--scroll-padding-top** - undefined _(default: undefined)_\n- **--row-content-visibility** - undefined _(default: undefined)_\n- **--border-width** - undefined _(default: undefined)_",
       "attributes": [
         {
           "name": "i18n",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/grid",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "type": "module",
   "files": [
     "package.json",
@@ -60,29 +60,35 @@
     }
   },
   "dependencies": {
-    "lit": "^3.3.0",
+    "lit": "^3.3.1",
     "tslib": "^2.8.1",
-    "@blueprintui/components": "^2.5.0",
+    "@blueprintui/components": "^2.7.1",
     "@blueprintui/icons": "^2.1.6",
+    "@blueprintui/themes": "^2.1.12",
     "@blueprintui/crane": "^2.1.8",
-    "@blueprintui/themes": "^2.1.11",
     "@blueprintui/typewriter": "^2.1.11"
   },
   "devDependencies": {
+    "@blueprintui/cli": "0.11.3",
+    "@blueprintui/drafter": "0.9.4",
+    "@types/jasmine": "5.1.9",
     "@web/dev-server": "0.4.6",
     "@web/dev-server-esbuild": "1.0.4",
     "@web/dev-server-rollup": "0.6.4",
-    "@web/test-runner": "0.20.1",
+    "@web/test-runner": "0.20.2",
     "@web/test-runner-core": "0.13.4",
-    "@web/test-runner-playwright": "0.11.0",
+    "@web/test-runner-playwright": "0.11.1",
     "@web/test-runner-visual-regression": "0.10.0",
     "del-cli": "6.0.0",
+    "jasmine": "5.10.0",
+    "jasmine-core": "5.10.0",
     "modern-normalize": "^3.0.1",
-    "playwright": "1.52.0",
-    "publint": "0.2.10",
-    "web-test-runner-jasmine": "0.1.2",
+    "playwright": "1.55.0",
+    "publint": "0.3.12",
+    "web-test-runner-jasmine": "0.1.4",
     "web-test-runner-performance": "0.1.6",
-    "@blueprintui/layout": "^2.1.7",
+    "@blueprintui-internals/eslint": "0.0.0",
+    "@blueprintui/layout": "^2.2.0",
     "@blueprintui/test": "^0.0.0",
     "@blueprintui/typography": "^2.2.0"
   },
@@ -104,7 +110,7 @@
     "build": {
       "command": "bp build",
       "dependencies": [
-        "../test:build",
+        "../internals/test:build",
         "../components:build",
         "../crane:build",
         "../icons:build",
@@ -155,9 +161,23 @@
     },
     "lint": {
       "dependencies": [
+        "lint:eslint",
         "lint:publish"
       ]
     },
+    "lint:eslint": {
+      "command": "eslint -c ./eslint.config.js --color",
+      "dependencies": [
+        "../internals/eslint:ci"
+      ],
+      "files": [
+        "./src/**/*.js",
+        "./src/**/*.ts",
+        ".eslint.config.js",
+        ".eslintcache"
+      ],
+      "output": []
+    },
     "lint:publish": {
       "command": "publint",
       "dependencies": [
@@ -185,7 +205,7 @@
     "test:unit": {
       "command": "del ./.coverage && node node_modules/@blueprintui/test/dist/wtr.js",
       "dependencies": [
-        "../test:build",
+        "../internals/test:build",
         "build"
       ],
       "files": [
@@ -202,7 +222,7 @@
     "test:coverage": {
       "command": "del ./.coverage && node node_modules/@blueprintui/test/dist/wtr.js --coverage",
       "dependencies": [
-        "../test:build",
+        "../internals/test:build",
         "build"
       ],
       "files": [
@@ -221,7 +241,7 @@
     "test:a11y": {
       "command": "node node_modules/@blueprintui/test/dist/wtr.js --config ./web-test-runner.a11y.mjs",
       "dependencies": [
-        "../test:build",
+        "../internals/test:build",
         "build"
       ],
       "files": [
@@ -235,7 +255,7 @@
     "test:performance": {
       "command": "node node_modules/@blueprintui/test/dist/wtr.js --config ./web-test-runner.performance.mjs",
       "dependencies": [
-        "../test:build",
+        "../internals/test:build",
         "build"
       ],
       "files": [
@@ -250,7 +270,7 @@
     "test:visual": {
       "command": "web-test-runner --config ./web-test-runner.visual.mjs",
       "dependencies": [
-        "../test:build",
+        "../internals/test:build",
         "build"
       ],
       "files": [