@blueprintui/grid 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@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/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/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": [
@@ -1543,7 +1555,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -1795,7 +1810,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-header",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -2439,7 +2457,10 @@
             "package": "lit"
           },
           "tagName": "bp-grid-placeholder",
-          "customElement": true
+          "customElement": true,
+          "metadata": {
+            "since": "1.0.0"
+          }
         }
       ],
       "exports": [
@@ -2591,7 +2612,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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/grid",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "files": [
     "package.json",
@@ -62,11 +62,11 @@
   "dependencies": {
     "lit": "^3.3.0",
     "tslib": "^2.8.1",
-    "@blueprintui/components": "^2.5.0",
-    "@blueprintui/icons": "^2.1.6",
+    "@blueprintui/components": "^2.6.0",
     "@blueprintui/crane": "^2.1.8",
-    "@blueprintui/themes": "^2.1.11",
-    "@blueprintui/typewriter": "^2.1.11"
+    "@blueprintui/icons": "^2.1.6",
+    "@blueprintui/typewriter": "^2.1.11",
+    "@blueprintui/themes": "^2.1.11"
   },
   "devDependencies": {
     "@web/dev-server": "0.4.6",
@@ -82,7 +82,7 @@
     "publint": "0.2.10",
     "web-test-runner-jasmine": "0.1.2",
     "web-test-runner-performance": "0.1.6",
-    "@blueprintui/layout": "^2.1.7",
+    "@blueprintui/layout": "^2.2.0",
     "@blueprintui/test": "^0.0.0",
     "@blueprintui/typography": "^2.2.0"
   },