@blueprintui/grid 1.18.1 → 2.0.0

package/grid/element.d.ts

@@ -18,6 +18,7 @@ import { GridLayoutController } from './layout.controller.js';
  * @cssprop --row-height
  * @cssprop --scroll-padding-top
  * @cssprop --row-content-visibility
+ * @cssprop --border-width
  */
 export declare class BpGrid extends LitElement {
     #private;
@@ -65,6 +66,8 @@ export declare class BpGrid extends LitElement {
     selectable: 'multi' | 'single' | null;
     /** disables scroll container */
     scrollLock: boolean;
+    /** determines the visual layer style (container vs flat for nesting) */
+    layer: 'flat' | 'container';
     /** @private enables range selection */
     rangeSelection: boolean;
     /** @private enables range selection */

package/grid/element.global.css.js

@@ -1 +1 @@
-const e=new CSSStyleSheet;e.replaceSync(":is(bp-grid-row:has(bp-grid-cell:first-child bp-checkbox:--checked),bp-grid-row:has(bp-grid-cell:first-child bp-radio:--checked)){--bp-interaction-offset:var(--bp-interaction-selected-offset)}bp-grid-cell[role=rowheader]:first-child{--bp-interaction-offset:var(--bp-interaction-selected-offset);--cell-border-width:var(--bp-size-1)}bp-grid-row bp-grid-cell:last-child{--border-right:0}bp-grid-cell:has(bp-button-handle){--padding-inline:var(--bp-size-4)}");export{e as default};
+const e=new CSSStyleSheet;e.replaceSync(":is(bp-grid-row:has(bp-grid-cell:first-child bp-checkbox:--checked),bp-grid-row:has(bp-grid-cell:first-child bp-radio:--checked)){--bp-interaction-offset:var(--bp-interaction-selected-offset)}bp-grid-cell[role=rowheader]:first-child{--bp-interaction-offset:var(--bp-interaction-selected-offset);--cell-border-width:var(--bp-size-100)}bp-grid-row bp-grid-cell:last-child{--border-right:0}bp-grid[row-style*=border] bp-grid-row:last-child{--border-bottom:0!important}bp-grid-cell:has(bp-button-handle){--padding-inline:var(--bp-size-400)}");export{e as default};

package/grid/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{baseStyles as i,I18nService as r,createId as l,attachRootNodeStyles as n,dynamicControllers as s,i18n as a,typeMultiSelectable as c}from"@blueprintui/components/internals";import{interactionScrollVisibility as h}from"@blueprintui/grid/internals";import{GridLayoutController as u}from"./layout.controller.js";import{GridDOMController as d}from"./dom.controller.js";import p from"./element.css.js";import C from"./element.global.css.js";let m=class extends e{static 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"},rangeSelection:{type:Boolean,reflect:!0,attribute:"range-selection"},_id:{type:String,reflect:!0}};gridLayoutController=new u(this);static styles=[i,p];get gridLayoutControllerConfig(){return{columns:this.#t.columns,columnLayout:this.columnLayout,height:this.height}}#t;get grid(){return this.#t.grid}get keyNavGrid(){return this.shadowRoot.querySelector(".scroll-container")}_internals=this.attachInternals();render(){return o`<div role="presentation" layer 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.#t=new d(this),this._internals.role="grid",this.#e(),this.i18n=r.keys.actions,this.columnLayout="fixed",this.scrollLock=!1,this.rangeSelection=!1,this._id=l()}async connectedCallback(){super.connectedCallback(),n(this.parentNode,[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.#i(),this.#r(),this.#l(),this.#n(),this.#s(),this.#a())}#i(){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}#r(){this.#t.columns.forEach(((t,e)=>t.ariaColIndex=""+(e+1)))}#l(){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)}};m=t([s(),a({key:"actions"}),c(),h()],m);export{m as BpGrid};
+import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{baseStyles as i,I18nService as r,createId as l,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 p from"./element.css.js";import C from"./element.global.css.js";let m=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=[i,p]}get gridLayoutControllerConfig(){return{columns:this.#t.columns,columnLayout:this.columnLayout,height:this.height}}#t;get grid(){return this.#t.grid}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=r.keys.actions,this.columnLayout="fixed",this.scrollLock=!1,this.layer="container",this.rangeSelection=!1,this._id=l()}async connectedCallback(){super.connectedCallback(),n(this.parentNode,[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.#i(),this.#r(),this.#l(),this.#n(),this.#s(),this.#a())}#i(){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}#r(){this.#t.columns.forEach(((t,e)=>t.ariaColIndex=""+(e+1)))}#l(){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)}};m=t([s(),a({key:"actions"}),h(),c()],m);export{m as BpGrid};

package/grid/hover.controller.js

@@ -1 +1 @@
-import{attachRootNodeStyles as t}from"@blueprintui/components/internals";class e{host;#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/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{host;#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/header/element.css.js

@@ -1 +1 @@
-const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--row-height);--border-top:0;--border-bottom:0;--box-shadow:none;content-visibility:var(--row-content-visibility,auto);contain-intrinsic-size:auto var(--min-height)}:host([selected]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}slot{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset,0%));grid-template-columns:var(--ch-grid);box-shadow:var(--box-shadow);min-height:var(--min-height);border-top:var(--border-top);border-bottom:var(--border-bottom);display:grid}:host([position=fixed]),:host([position=sticky]){--border-bottom:0;--box-shadow:0 var(--bp-object-border-width-100)var(--bp-object-border-width-100)-1px var(--bp-object-border-color-100);--row-content-visibility:visible;z-index:99;top:calc(var(--min-height) + var(--bp-size-1));position:sticky}:host([position=fixed]) ::slotted(bp-grid-cell),:host([position=sticky]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}:host([draggable=true]){-webkit-user-drag:element;user-select:none}:host([bp-draggable*=target]){--box-shadow:inset 0 var(--bp-object-border-width-300)0 calc(var(--bp-size-1)*-1)var(--bp-interaction-accent-background)}");export{t as default};
+const t=new CSSStyleSheet;t.replaceSync(":host{--bp-layer:0;--min-height:var(--row-height);--border-top:0;--border-bottom:0;--box-shadow:none;content-visibility:var(--row-content-visibility,auto);contain-intrinsic-size:auto var(--min-height)}:host([selected]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}slot{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset,0%));grid-template-columns:var(--ch-grid);box-shadow:var(--box-shadow);min-height:var(--min-height);border-top:var(--border-top);border-bottom:var(--border-bottom);display:grid}:host([position=fixed]),:host([position=sticky]){--border-bottom:0;--box-shadow:0 var(--border-width)var(--border-width)-1px var(--border-color);--row-content-visibility:visible;z-index:99;top:calc(var(--min-height) + var(--bp-size-100));position:sticky}:host([position=fixed]) ::slotted(bp-grid-cell),:host([position=sticky]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}:host([draggable=true]){-webkit-user-drag:element;user-select:none}:host([bp-draggable*=target]){--box-shadow:inset 0 var(--bp-object-border-width-300)0 calc(var(--bp-size-100)*-1)var(--bp-interaction-accent-background)}");export{t as default};

package/header/element.d.ts

@@ -12,6 +12,8 @@ import { LitElement } from 'lit';
  * @cssprop --border-bottom
  * @cssprop --background
  * @cssprop --min-height
+ * @cssprop --border-width
+ * @cssprop --border-color
  */
 export declare class BpGridHeader extends LitElement {
     static styles: CSSStyleSheet[];

package/header/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{baseStyles as s,dynamicControllers as n}from"@blueprintui/components/internals";import o from"./element.css.js";let l=class extends e{static styles=[s,o];_internals=this.attachInternals();render(){return r`<slot></slot>`}constructor(){super(),this._internals.role="row"}connectedCallback(){super.connectedCallback(),this.slot="header"}};l=t([n()],l);export{l as BpGridHeader};
+import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{baseStyles as r,dynamicControllers as n}from"@blueprintui/components/internals";import o from"./element.css.js";let l=class extends e{static{this.styles=[r,o]}render(){return s`<slot></slot>`}constructor(){super(),this._internals=this.attachInternals(),this._internals.role="row"}connectedCallback(){super.connectedCallback(),this.slot="header"}};l=t([n()],l);export{l as BpGridHeader};

package/include/column-resize.d.ts

@@ -0,0 +1 @@
+export {};

package/include/column-resize.js

@@ -0,0 +1 @@
+import{DynamicControllers as m}from"@blueprintui/components/internals";import"../column/index.js";import{GridColumnResizeController as o}from"../column-resize/index.js";import{BpGridColumn as n}from"../column/element.js";m.add(n,o);

package/include/detail.d.ts

@@ -0,0 +1,8 @@
+import '@blueprintui/components/include/button-icon.js';
+import '@blueprintui/icons/shapes/close.js';
+import { BpGridDetail } from '../detail/index.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'bp-grid-detail': BpGridDetail;
+    }
+}

package/include/detail.js

@@ -0,0 +1 @@
+import"@blueprintui/components/include/button-icon.js";import"@blueprintui/icons/shapes/close.js";import{defineElement as i}from"@blueprintui/components/internals";import"../detail/index.js";import{BpGridDetail as t}from"../detail/element.js";i("bp-grid-detail",t);

package/include/draggable-column.d.ts

@@ -0,0 +1 @@
+export {};

package/include/draggable-column.js

@@ -0,0 +1 @@
+import{DynamicControllers as r}from"@blueprintui/components/internals";import"../grid/index.js";import{DraggableGridColumnController as i}from"../draggable-column/index.js";import{BpGrid as m}from"../grid/element.js";r.add(m,i);

package/include/draggable-row.d.ts

@@ -0,0 +1 @@
+export {};

package/include/draggable-row.js

@@ -0,0 +1 @@
+import{DynamicControllers as r}from"@blueprintui/components/internals";import"../grid/index.js";import{DraggableGridRowController as i}from"../draggable-row/index.js";import{BpGrid as o}from"../grid/element.js";r.add(o,i);

package/include/range-selection.d.ts

@@ -0,0 +1 @@
+export {};

package/include/range-selection.js

@@ -0,0 +1 @@
+import{DynamicControllers as i}from"@blueprintui/components/internals";import{GridRangeSelectionController as r}from"../range-selection/index.js";import"../grid/index.js";import{BpGrid as e}from"../grid/element.js";i.add(e,r);

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

@@ -1 +1 @@
-function t(){return t=>t.addInitializer((t=>new i(t)))}class i{host;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/internals/styles/focus.css.js

@@ -1 +1 @@
-const e=new CSSStyleSheet;e.replaceSync("[focusable]{outline-offset:calc(var(--bp-size-2)*-1)!important}@media not all and (resolution>=.001dpcm){@supports ((-webkit-appearance:none)) and (stroke-color:transparent){[focusable]{outline-offset:calc(var(--bp-size-3)*-1)!important}}}:host(:focus) [focusable]{outline:var(--bp-interaction-outline);outline:var(--bp-interaction-outline-webkit);outline-offset:calc(var(--bp-size-2)*-1)!important}:host(:focus-within) [focusable]{outline:0}");export{e as default};
+const e=new CSSStyleSheet;e.replaceSync("[focusable]{outline-offset:calc(var(--bp-size-200)*-1)!important}@media not all and (resolution>=.001dpcm){@supports ((-webkit-appearance:none)) and (stroke-color:transparent){[focusable]{outline-offset:calc(var(--bp-size-300)*-1)!important}}}:host(:focus) [focusable]{outline:var(--bp-interaction-outline);outline:var(--bp-interaction-outline-webkit);outline-offset:calc(var(--bp-size-200)*-1)!important}:host(:focus-within) [focusable]{outline:0}");export{e as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/grid",
-  "version": "1.18.1",
+  "version": "2.0.0",
   "main": "./index.js",
   "module": "./index.js",
   "typings": "./index.d.ts",
@@ -41,11 +41,11 @@
     "provenance": true
   },
   "dependencies": {
-    "@blueprintui/components": "^1.15.0",
-    "@blueprintui/icons": "^1.15.0",
-    "@blueprintui/themes": "^1.15.0",
-    "@blueprintui/typewriter": "^1.15.0",
-    "lit": "^3.0.0-pre.0",
-    "tslib": "^2.5.0"
+    "@blueprintui/components": "^1.18.1",
+    "@blueprintui/icons": "^1.18.1",
+    "@blueprintui/themes": "^1.18.1",
+    "@blueprintui/typewriter": "^1.18.1",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
   }
 }

package/placeholder/element.css.js

@@ -1 +1 @@
-const a=new CSSStyleSheet;a.replaceSync(":host{--box-shadow:none;--color:var(--bp-text-color-500);--padding:var(--bp-size-4);--gap:var(--bp-space-md);content-visibility:var(--row-content-visibility,auto);flex:1}[part=internal]{box-shadow:var(--box-shadow);padding:var(--padding);min-height:var(--bp-size-8);background:var(--background);justify-content:center;align-items:center;gap:var(--gap);color:var(--color);text-align:center;flex-direction:column;grid-column:1/-1;width:100%;height:100%;display:flex;position:relative}:host([draggable=false]) [part=internal]{min-height:var(--bp-size-10)}:host([bp-draggable*=target]){--box-shadow:inset 0 var(--bp-object-border-width-300)0 calc(var(--bp-size-1)*-1)var(--bp-interaction-accent-background)}");export{a as default};
+const a=new CSSStyleSheet;a.replaceSync(":host{--box-shadow:none;--color:var(--bp-text-color-500);--padding:var(--bp-size-400);--gap:var(--bp-space-md);content-visibility:var(--row-content-visibility,auto);flex:1}[part=internal]{box-shadow:var(--box-shadow);padding:var(--padding);min-height:var(--bp-size-800);background:var(--background);justify-content:center;align-items:center;gap:var(--gap);color:var(--color);text-align:center;flex-direction:column;grid-column:1/-1;width:100%;height:100%;display:flex;position:relative}:host([draggable=false]) [part=internal]{min-height:var(--bp-size-1000)}:host([bp-draggable*=target]){--box-shadow:inset 0 var(--bp-object-border-width-300)0 calc(var(--bp-size-100)*-1)var(--bp-interaction-accent-background)}");export{a as default};

package/placeholder/element.d.ts

@@ -44,7 +44,7 @@ export declare class BpGridPlaceholder extends LitElement {
         pageSize: string;
     };
     _colSpan: string;
-    private bpDraggableItem;
+    private bpDraggableItem?;
     static styles: CSSStyleSheet[];
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;

package/placeholder/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{I18nService as s,baseStyles as n,i18n as o}from"@blueprintui/components/internals";import a from"./element.css.js";let i=class extends e{static properties={i18n:{type:Object},_colSpan:{state:!0},bpDraggableItem:{state:!0}};constructor(){super(...arguments),this.i18n=s.keys.actions,this._colSpan="0"}static styles=[n,a];#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"}};i=t([o({key:"actions"})],i);export{i 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/range-selection/index.d.ts

@@ -0,0 +1,5 @@
+import { InteractionRangeSelectionController } from '@blueprintui/components/internals';
+import { BpGrid } from '../grid/index.js';
+export declare class GridRangeSelectionController extends InteractionRangeSelectionController<BpGrid> {
+    constructor(host: BpGrid);
+}

package/range-selection/index.js

@@ -0,0 +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};

package/row/element.css.js

@@ -1 +1 @@
-const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--row-height);--border-top:0;--border-bottom:0;--box-shadow:none;content-visibility:var(--row-content-visibility,auto);contain-intrinsic-size:auto var(--min-height)}:host([selected]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}slot{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset,0%));grid-template-columns:var(--ch-grid);box-shadow:var(--box-shadow);min-height:var(--min-height);border-top:var(--border-top);border-bottom:var(--border-bottom);display:grid}:host([position=fixed]),:host([position=sticky]){--border-bottom:0;--box-shadow:0 var(--bp-object-border-width-100)var(--bp-object-border-width-100)-1px var(--bp-object-border-color-100);--row-content-visibility:visible;z-index:99;top:calc(var(--min-height) + var(--bp-size-1));position:sticky}:host([position=fixed]) ::slotted(bp-grid-cell),:host([position=sticky]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}:host([draggable=true]){-webkit-user-drag:element;user-select:none}:host([bp-crane*=target]){--box-shadow:inset 0 var(--bp-object-border-width-200)0 calc(var(--bp-size-1)*-1)var(--bp-interaction-accent-background)}");export{t as default};
+const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--row-height);--border-top:0;--border-bottom:0;--box-shadow:none;content-visibility:var(--row-content-visibility,auto);contain-intrinsic-size:auto var(--min-height)}:host([selected]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}slot{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset,0%));grid-template-columns:var(--ch-grid);box-shadow:var(--box-shadow);min-height:var(--min-height);border-top:var(--border-top);border-bottom:var(--border-bottom);display:grid}:host([position=fixed]),:host([position=sticky]){--border-bottom:0;--box-shadow:0 var(--border-width)var(--border-width)-1px var(--border-color);--row-content-visibility:visible;z-index:99;top:calc(var(--min-height) + var(--bp-size-100));position:sticky}:host([position=fixed]) ::slotted(bp-grid-cell),:host([position=sticky]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}:host([draggable=true]){-webkit-user-drag:element;user-select:none}:host([bp-crane*=target]){--box-shadow:inset 0 var(--bp-object-border-width-200)0 calc(var(--bp-size-100)*-1)var(--bp-interaction-accent-background)}");export{t as default};

package/row/element.d.ts

@@ -12,6 +12,8 @@ import { LitElement } from 'lit';
  * @cssprop --border-bottom
  * @cssprop --background
  * @cssprop --min-height
+ * @cssprop --border-width
+ * @cssprop --border-color
  */
 export declare class BpGridRow extends LitElement {
     /** selected visual state */

package/row/element.js

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

@@ -1 +1 @@
-class t{host;constructor(t){this.host=t,this.host.addController(this)}hostUpdated(){"fixed"!==this.host.position&&"sticky"!==this.host.position||this.host.parentElement?.style.setProperty("--scroll-padding-top","calc(var(--row-height) * 2)")}}export{t as RowPositionController};
+class t{constructor(t){this.host=t,this.host.addController(this)}hostUpdated(){"fixed"!==this.host.position&&"sticky"!==this.host.position||this.host.parentElement?.style.setProperty("--scroll-padding-top","calc(var(--row-height) * 2)")}}export{t as RowPositionController};