@blueprintui/grid - npm Package Compare versions

Comparing version 1.13.0 to 1.13.1

cell/element.css.js

@@ -1,1 +0,1 @@
-const t=new CSSStyleSheet;t.replaceSync(':host{--background:var(--bp-layer-container-background);--border-right:var(--cell-border-width) solid var(--bp-object-border-color-100);--border-left:0;--min-width:var(--bp-size-9);--min-height:var(--bp-size-9);--font-size:var(--bp-text-size-200);--justify-content:var(--cell-justify-content, start);--padding-block:var(--bp-size-4);--padding-inline:var(--bp-size-6);--color:var(--bp-text-color-500);display:block;height:100%;outline:0!important;position:sticky}:host(:--alignment-start){--justify-content:start}:host(:--alignment-center){--justify-content:center}:host(:--alignment-end){--justify-content:end}slot{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset, 0%));justify-content:var(--justify-content);border-left:var(--border-left);box-shadow:var(--box-shadow);border-right:var(--border-right);min-width:var(--min-width);min-height:var(--min-height);font-size:var(--font-size);padding-inline:var(--padding-inline);padding-block:var(--padding-block);color:var(--color);text-align:left;display:flex;gap:var(--bp-space-sm);line-height:1em;align-items:center;width:100%;height:100%;position:relative}:host(:--highlight) slot::after{display:block;position:absolute;inset:0;background:var(--bp-interaction-highlight-background);content:"";pointer-events:none}:host{--highlight-border:var(--bp-object-border-width-100) solid var(--bp-status-accent-background-100)}:host(:--highlight-block-start) slot::after{border-block-start:var(--highlight-border)}:host(:--highlight-block-end) slot::after{border-block-end:var(--highlight-border)}:host(:--highlight-inline-start) slot::after{border-inline-start:var(--highlight-border)}:host(:--highlight-inline-end) slot::after{border-inline-end:var(--highlight-border)}');export{t as default};
+const t=new CSSStyleSheet;t.replaceSync(':host{--background:var(--bp-layer-container-background);--border-right:var(--cell-border-width)solid var(--bp-object-border-color-100);--border-left:0;--min-width:var(--bp-size-9);--min-height:var(--bp-size-9);--font-size:var(--bp-text-size-200);--justify-content:var(--cell-justify-content,start);--padding-block:var(--bp-size-4);--padding-inline:var(--bp-size-6);--color:var(--bp-text-color-500);height:100%;display:block;position:sticky;outline:0!important}:host(:--alignment-start){--justify-content:start}:host(:--alignment-center){--justify-content:center}:host(:--alignment-end){--justify-content:end}slot{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset,0%));justify-content:var(--justify-content);border-left:var(--border-left);box-shadow:var(--box-shadow);border-right:var(--border-right);min-width:var(--min-width);min-height:var(--min-height);font-size:var(--font-size);padding-inline:var(--padding-inline);padding-block:var(--padding-block);color:var(--color);text-align:left;gap:var(--bp-space-sm);width:100%;height:100%;align-items:center;line-height:1em;display:flex;position:relative}:host(:--highlight) slot:after{background:var(--bp-interaction-highlight-background);content:"";pointer-events:none;display:block;position:absolute;inset:0}:host{--highlight-border:var(--bp-object-border-width-100)solid var(--bp-status-accent-background-100)}:host(:--highlight-block-start) slot:after{border-block-start:var(--highlight-border)}:host(:--highlight-block-end) slot:after{border-block-end:var(--highlight-border)}:host(:--highlight-inline-start) slot:after{border-inline-start:var(--highlight-border)}:host(:--highlight-inline-end) slot:after{border-inline-end:var(--highlight-border)}');export{t as default};

cell/element.js

@@ -1,1 +0,1 @@
-import{LitElement as t,html as r}from"lit";import{baseStyles as s}from"@blueprintui/components/internals";import{focusStyles as e}from"../internals/index.js";import n from"./element.css.js";class o extends t{static styles=[s,n,e];_internals=this.attachInternals();render(){return r`<slot focusable></slot>`}constructor(){super();this._internals.role="gridcell"}}export{o as BpGridCell};
+import{LitElement as t,html as r}from"lit";import{baseStyles as s}from"@blueprintui/components/internals";import{focusStyles as e}from"../internals/index.js";import n from"./element.css.js";class o extends t{static styles=[s,n,e];_internals=this.attachInternals();render(){return r`<slot focusable></slot>`}constructor(){super(),this._internals.role="gridcell"}}export{o as BpGridCell};

column/element.css.js

@@ -1,1 +0,1 @@
-const t=new CSSStyleSheet;t.replaceSync(":host{--background:var(--bp-layer-container-background);--min-height:var(--column-height, var(--bp-interaction-touch-target));--min-width:fit-content;--padding-block:calc(var(--bp-size-6) + var(--bp-size-1));--padding-inline:var(--bp-size-6);--font-size:var(--bp-text-size-200);--color:var(--bp-text-color-500);top:0;z-index:998;position:sticky;min-height:var(--min-height);min-width:var(--min-width);display:flex;align-items:center;outline:0!important}:host,:host(:--alignment-start){--justify-content:start}:host(:--alignment-center){--justify-content:center}:host(:--alignment-end){--justify-content:end}[part=internal]{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset, 0%));min-height:var(--min-height);justify-content:var(--justify-content);padding-inline:var(--padding-inline);padding-block:var(--padding-block);font-size:var(--font-size);color:var(--color);border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);text-align:left;font-weight:500;white-space:nowrap;overflow:visible;text-overflow:ellipsis;line-height:1em;margin:0;display:flex;gap:var(--bp-size-sm);align-items:center;height:100%;width:100%;position:sticky!important}:host([position='fixed']),:host([position='sticky']){z-index:999}[part=internal]::after{background:var(--bp-object-border-color-100);width:var(--bp-object-border-width-100);right:0;height:50%;position:absolute;content:\"\";display:none}[focused]+[part=internal]::after{background:var(--bp-interaction-accent-background);height:100vh;right:0}:host([bp-draggable*='target']) [part=internal]::after{background:var(--bp-interaction-accent-background);height:100vh;left:0}:host([bp-draggable*='active']) [part=internal]{box-shadow:0 var(--bp-size-2)0 var(--bp-interaction-accent-background)}.border,.line{right:0;position:absolute}.border{top:var(--bp-size-4);bottom:var(--bp-size-4);width:var(--bp-object-border-width-100);background:var(--bp-object-border-color-100)}.line{top:var(--min-height);width:2px;bottom:0;height:100vh;background:var(--bp-status-accent-background-300);display:none}:host(:--resizing) .line{display:block}:host(:--hover){--interaction-offset:var(--bp-interaction-hover-offset)}::slotted([tabindex=\"0\"]),::slotted(button){margin-left:auto}::slotted(bp-button-sort){position:absolute;right:8px;--icon-height:14px;outline:0!important;--bp-interaction-outline-webkit:none!important;--bp-interaction-outline-offset:none!important}::slotted(bp-button-resize){position:absolute;right:0;--height:32px;--background:var(--bp-object-border-color-100);--width:var(--bp-object-border-width-100)}:host(:--ch-last) .border,:host(:--ch-last) ::slotted(bp-button-resize){display:none}");export{t as default};
+const t=new CSSStyleSheet;t.replaceSync(':host{--background:var(--bp-layer-container-background);--min-height:var(--column-height,var(--bp-interaction-touch-target));--min-width:fit-content;--justify-content:start;--padding-block:calc(var(--bp-size-6) + var(--bp-size-1));--padding-inline:var(--bp-size-6);--font-size:var(--bp-text-size-200);--color:var(--bp-text-color-500);z-index:998;min-height:var(--min-height);min-width:var(--min-width);align-items:center;display:flex;position:sticky;top:0;outline:0!important}:host(:--alignment-start){--justify-content:start}:host(:--alignment-center){--justify-content:center}:host(:--alignment-end){--justify-content:end}[part=internal]{background:color-mix(in oklab,var(--background),black var(--bp-interaction-offset,0%));min-height:var(--min-height);justify-content:var(--justify-content);padding-inline:var(--padding-inline);padding-block:var(--padding-block);font-size:var(--font-size);color:var(--color);border-bottom:var(--bp-object-border-width-100)solid var(--bp-object-border-color-100);text-align:left;white-space:nowrap;text-overflow:ellipsis;gap:var(--bp-size-sm);height:100%;width:100%;align-items:center;margin:0;font-weight:500;line-height:1em;display:flex;overflow:visible;position:sticky!important}:host([position=fixed]),:host([position=sticky]){z-index:999}[part=internal]:after{background:var(--bp-object-border-color-100);width:var(--bp-object-border-width-100);height:50%;content:"";display:none;position:absolute;right:0}[focused]+[part=internal]:after{background:var(--bp-interaction-accent-background);height:100vh;right:0}:host([bp-draggable*=target]) [part=internal]:after{background:var(--bp-interaction-accent-background);height:100vh;left:0}:host([bp-draggable*=active]) [part=internal]{box-shadow:0 var(--bp-size-2)0 var(--bp-interaction-accent-background)}.border{right:0;top:var(--bp-size-4);bottom:var(--bp-size-4);width:var(--bp-object-border-width-100);background:var(--bp-object-border-color-100);position:absolute}.line{top:var(--min-height);width:2px;height:100vh;background:var(--bp-status-accent-background-300);display:none;position:absolute;bottom:0;right:0}:host(:--resizing) .line{display:block}:host(:--hover){--interaction-offset:var(--bp-interaction-hover-offset)}::slotted([tabindex="0"]),::slotted(button){margin-left:auto}::slotted(bp-button-sort){--icon-height:14px;position:absolute;right:8px;--bp-interaction-outline-webkit:none!important;--bp-interaction-outline-offset:none!important;outline:none!important}::slotted(bp-button-resize){--height:32px;--background:var(--bp-object-border-color-100);--width:var(--bp-object-border-width-100);position:absolute;right:0}:host(:--ch-last) .border,:host(:--ch-last) ::slotted(bp-button-resize){display:none}');export{t as default};

column/element.js

@@ -1,1 +0,1 @@
-import{__decorate as t}from"tslib";import{LitElement as r,html as e}from"lit";import{baseStyles as i,dynamicControllers as s}from"@blueprintui/components/internals";import{GridColumnWidthController as n}from"./width.controller.js";import{focusStyles as o}from"../internals/index.js";import l from"./element.css.js";let a=class extends r{static properties={width:{type:String},position:{type:String,reflect:!0},alignment:{type:String,reflect:!0}};static styles=[i,l,o];_internals=this.attachInternals();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();new n(this),this._internals.role="columnheader",this._internals.ariaSort="none"}};a=t([s()],a);export{a as BpGridColumn};
+import{__decorate as t}from"tslib";import{LitElement as r,html as e}from"lit";import{baseStyles as i,dynamicControllers as s}from"@blueprintui/components/internals";import{GridColumnWidthController as n}from"./width.controller.js";import{focusStyles as o}from"../internals/index.js";import l from"./element.css.js";let a=class extends r{static properties={width:{type:String},position:{type:String,reflect:!0},alignment:{type:String,reflect:!0}};static styles=[i,l,o];_internals=this.attachInternals();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(),new n(this),this._internals.role="columnheader",this._internals.ariaSort="none"}};a=t([s()],a);export{a as BpGridColumn};

footer/element.css.js

@@ -1,1 +0,1 @@
-const i=new CSSStyleSheet;i.replaceSync(":host{--min-height:var(--bp-size-9, var(--bp-interaction-touch-target));--padding-block:0;--padding-inline:var(--bp-size-6)}[part=internal]{min-height:var(--min-height);display:flex;align-items:center;padding-inline:var(--padding-inline);padding-block:var(--padding-block);border-top:var(--cell-border-width, var(--bp-object-border-width-100)) solid var(--bp-object-border-color-100);color:var(--bp-text-color-500);background:var(--background);font-size:var(--bp-text-size-200);width:100%}::slotted(bp-pagination),::slotted(bp-pagination-input){margin-left:auto}");export{i as default};
+const i=new CSSStyleSheet;i.replaceSync(":host{--min-height:var(--bp-size-9,var(--bp-interaction-touch-target));--padding-block:0;--padding-inline:var(--bp-size-6)}[part=internal]{min-height:var(--min-height);padding-inline:var(--padding-inline);padding-block:var(--padding-block);border-top:var(--cell-border-width,var(--bp-object-border-width-100))solid var(--bp-object-border-color-100);color:var(--bp-text-color-500);background:var(--background);font-size:var(--bp-text-size-200);width:100%;align-items:center;display:flex}::slotted(bp-pagination),::slotted(bp-pagination-input){margin-left:auto}");export{i as default};

footer/element.js

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

grid/element.css.js

@@ -1,1 +0,1 @@
-const r=new CSSStyleSheet;r.replaceSync("@keyframes fadein{0%{opacity:0}to{opacity:1}}[hidden]{display:none!important}:host{--background:var(--bp-layer-container-background);--body-height:auto;--body-min-height:auto;--scrollbar-background:var(--background);--scrollbar-thumb-background:var(--bp-object-border-color-100);--column-height:48px;--row-height:48px;--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--border:0;width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([column-style*='border']) ::slotted(bp-grid-row){--cell-border-width:var(--bp-object-border-width-100);--border-top:0;--border-bottom:0}:host([row-style*='border']) ::slotted(bp-grid-row){--border-top:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}:host([row-style*='border']) ::slotted(bp-grid-row:last-of-type){--border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}: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*='hover']) ::slotted(bp-grid-row:hover),:host([row-style*='stripe']) ::slotted(bp-grid-row:nth-child(even)){--bp-interaction-offset:var(--bp-interaction-hover-offset)}[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);overflow:auto;width:100%;display:flex;flex-direction:column}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group,slot[name=header]{display:flex;flex-direction:column;min-width:fit-content}.body-row-group{flex:1 1 0%;margin-top:var(--bp-size-2)}slot[name=header]{position:sticky;top:0;z-index:99}::slotted(bp-grid-row:not([bp-draggable=target]):first-of-type){--box-shadow:var(--bp-object-border-width-100) solid transparent}::-webkit-scrollbar{width:var(--bp-size-5);height:var(--bp-size-5);background:0 0}::-webkit-scrollbar-track{margin-top:var(--bp-interaction-touch-target);box-shadow:inset 0 0 var(--bp-size-5) var(--scrollbar-background)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-background);border-radius:var(--bp-object-border-radius-100);border:var(--bp-size-2) solid var(--scrollbar-background)}::-webkit-scrollbar-corner{background:rgba(0 0 0 0%)}");export{r as default};
+const r=new CSSStyleSheet;r.replaceSync("[hidden]{display:none!important}:host{--background:var(--bp-layer-container-background);--body-height:auto;--body-min-height:auto;--scrollbar-background:var(--background);--scrollbar-thumb-background:var(--bp-object-border-color-100);--column-height:48px;--row-height:48px;--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--border:0;width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([column-style*=border]) ::slotted(bp-grid-row){--cell-border-width:var(--bp-object-border-width-100);--border-top:0;--border-bottom:0}:host([row-style*=border]) ::slotted(bp-grid-row){--border-top:var(--bp-object-border-width-100)solid var(--bp-object-border-color-100)}:host([row-style*=border]) ::slotted(bp-grid-row:last-of-type){--border-bottom:var(--bp-object-border-width-100)solid var(--bp-object-border-color-100)}: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)}[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);width:100%;flex-direction:column;display:flex;overflow:auto}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{min-width:fit-content;margin-top:var(--bp-size-2);flex-direction:column;flex:1;display:flex}slot[name=header]{min-width:fit-content;z-index:99;flex-direction:column;display:flex;position:sticky;top:0}::slotted(bp-grid-row:not([bp-draggable=target]):first-of-type){--box-shadow:var(--bp-object-border-width-100)solid transparent}::-webkit-scrollbar{width:var(--bp-size-5);height:var(--bp-size-5);background:0 0}::-webkit-scrollbar-track{margin-top:var(--bp-interaction-touch-target);box-shadow:inset 0 0 var(--bp-size-5)var(--scrollbar-background)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-background);border-radius:var(--bp-object-border-radius-100);border:var(--bp-size-2)solid var(--scrollbar-background)}::-webkit-scrollbar-corner{background:rgba(0 0 0 0%)}@keyframes fadein{0%{opacity:0}to{opacity:1}}");export{r as default};

grid/element.js

@@ -1,1 +0,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,ariaMultiSelectable as c}from"@blueprintui/components/internals";import"../internals/index.js";import{GridLayoutController as h}from"./layout.controller.js";import{GridDOMController as u}from"./dom.controller.js";import d from"./element.css.js";import m from"./element.global.css.js";import{interactionScrollVisibility as p}from"../internals/controllers/interaction-scroll-visibility.controller.js";let C=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 h(this);static styles=[i,d];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 u(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,[m]),await this.updateComplete,this.shadowRoot.addEventListener("bp-grid: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)}};C=t([s(),a({key:"actions"}),c(),p()],C);export{C 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,ariaMultiSelectable as c}from"@blueprintui/components/internals";import"../internals/index.js";import{GridLayoutController as h}from"./layout.controller.js";import{GridDOMController as u}from"./dom.controller.js";import d from"./element.css.js";import m from"./element.global.css.js";import{interactionScrollVisibility as p}from"../internals/controllers/interaction-scroll-visibility.controller.js";let C=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 h(this);static styles=[i,d];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 u(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,[m]),await this.updateComplete,this.shadowRoot.addEventListener("bp-grid: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)}};C=t([s(),a({key:"actions"}),c(),p()],C);export{C as BpGrid};

header/element.css.js

@@ -1,1 +0,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([position='fixed']) ::slotted(bp-grid-cell),:host([position='sticky']) ::slotted(bp-grid-cell),: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;position:sticky;top:calc(var(--min-height) + var(--bp-size-1))}: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)\n    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(--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};

header/element.js

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

internals/styles/focus.css.js

@@ -1,1 +0,1 @@
-const e=new CSSStyleSheet;e.replaceSync("[focusable]{outline-offset:calc(var(--bp-size-2)*-1)!important}@media not all and (min-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-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-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};

package.json

 {
   "name": "@blueprintui/grid",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "main": "./index.js",
@@ -5,0 +5,0 @@ "module": "./index.js",

placeholder/element.css.js

@@ -1,1 +0,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);width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--gap);position:relative;grid-column:1/-1;color:var(--color);text-align:center}: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)\n    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-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);width:100%;height:100%;justify-content:center;align-items:center;gap:var(--gap);color:var(--color);text-align:center;flex-direction:column;grid-column:1/-1;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};

placeholder/element.js

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

row/element.css.js

@@ -1,1 +0,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([position='fixed']) ::slotted(bp-grid-cell),:host([position='sticky']) ::slotted(bp-grid-cell),: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;position:sticky;top:calc(var(--min-height) + var(--bp-size-1))}: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)\n    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(--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};

row/element.js

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

No alert changes

Improved metrics

Total package byte prevSize

131390

increased by24.9%

Number of package files

74

increased by1.37%

No dependency changes