@blueprintui/grid 1.18.1 → 2.0.0

package/custom-elements.json

@@ -46,6 +46,9 @@
             },
             {
               "name": "--color"
+            },
+            {
+              "name": "--border-width"
             }
           ],
           "slots": [
@@ -109,6 +112,31 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "/column-resize/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "GridColumnResizeController",
+          "superclass": {
+            "name": "InteractionResizeContextController",
+            "package": "@blueprintui/components/internals"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GridColumnResizeController",
+          "declaration": {
+            "name": "GridColumnResizeController",
+            "module": "/column-resize/index.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "/column/alignment.controller.js",
@@ -216,6 +244,9 @@
             },
             {
               "name": "--color"
+            },
+            {
+              "name": "--border-width"
             }
           ],
           "slots": [
@@ -476,6 +507,305 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "/csv/index.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "exportCSV",
+          "parameters": [
+            {
+              "name": "grid",
+              "type": {
+                "text": "BpGrid"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "downloadCSV",
+          "parameters": [
+            {
+              "name": "grid",
+              "type": {
+                "text": "BpGrid"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "exportCSV",
+          "declaration": {
+            "name": "exportCSV",
+            "module": "/csv/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "downloadCSV",
+          "declaration": {
+            "name": "downloadCSV",
+            "module": "/csv/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "/detail/element.css",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "/detail/element.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Grid Detail\n\n```typescript\nimport '@blueprintui/grid/include/detail.js';\n```",
+          "name": "BpGridDetail",
+          "cssProperties": [
+            {
+              "name": "--full-width-breakpoint"
+            },
+            {
+              "name": "--background"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "pointer"
+            },
+            {
+              "name": "close"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "i18n",
+              "attribute": "i18n"
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "'inline-start' | 'inline-end'"
+              },
+              "default": "'inline-end'",
+              "attribute": "position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "HTMLElement | string"
+              },
+              "attribute": "trigger"
+            },
+            {
+              "kind": "field",
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "closable"
+            },
+            {
+              "kind": "field",
+              "name": "typePopoverController",
+              "type": {
+                "text": "TypePopoverController<this>"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "#grid",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#observer",
+              "privacy": "private",
+              "type": {
+                "text": "MutationObserver"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_internals",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#trigger",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#triggerRow",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#fullWidthBreakpoint",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#setTriggerPointer",
+              "parameters": [
+                {
+                  "name": "previousAnchor",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#initializeResizeChange"
+            },
+            {
+              "kind": "method",
+              "name": "#alignPanel"
+            }
+          ],
+          "events": [
+            {
+              "name": "close"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "i18n",
+              "fieldName": "i18n"
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "'inline-start' | 'inline-end'"
+              },
+              "default": "'inline-end'",
+              "fieldName": "position"
+            },
+            {
+              "name": "trigger",
+              "type": {
+                "text": "HTMLElement | string"
+              },
+              "fieldName": "trigger"
+            },
+            {
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "closable"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bp-grid-detail",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BpGridDetail",
+          "declaration": {
+            "name": "BpGridDetail",
+            "module": "/detail/element.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "/detail/index.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./element.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "/draggable-column/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DraggableGridColumnController",
+          "superclass": {
+            "name": "DraggableListController",
+            "package": "@blueprintui/crane"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DraggableGridColumnController",
+          "declaration": {
+            "name": "DraggableGridColumnController",
+            "module": "/draggable-column/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "/draggable-row/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DraggableGridRowController",
+          "superclass": {
+            "name": "DraggableListController",
+            "package": "@blueprintui/crane"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DraggableGridRowController",
+          "declaration": {
+            "name": "DraggableGridRowController",
+            "module": "/draggable-row/index.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "/examples.data.js",
@@ -556,6 +886,9 @@
             },
             {
               "name": "--padding-inline"
+            },
+            {
+              "name": "--border-width"
             }
           ],
           "slots": [
@@ -789,6 +1122,9 @@
             },
             {
               "name": "--row-content-visibility"
+            },
+            {
+              "name": "--border-width"
             }
           ],
           "members": [
@@ -860,6 +1196,17 @@
               "attribute": "scroll-lock",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "layer",
+              "type": {
+                "text": "'flat' | 'container'"
+              },
+              "default": "'container'",
+              "description": "determines the visual layer style (container vs flat for nesting)",
+              "attribute": "layer",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "rangeSelection",
@@ -1015,6 +1362,15 @@
               "description": "disables scroll container",
               "fieldName": "scrollLock"
             },
+            {
+              "name": "layer",
+              "type": {
+                "text": "'flat' | 'container'"
+              },
+              "default": "'container'",
+              "description": "determines the visual layer style (container vs flat for nesting)",
+              "fieldName": "layer"
+            },
             {
               "name": "range-selection",
               "type": {
@@ -1249,6 +1605,12 @@
             },
             {
               "name": "--min-height"
+            },
+            {
+              "name": "--border-width"
+            },
+            {
+              "name": "--border-color"
             }
           ],
           "members": [
@@ -1312,12 +1674,36 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "/include/column-resize.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "/include/core.js",
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "/include/detail.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "/include/draggable-column.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "/include/draggable-row.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "/include/footer.js",
@@ -1342,6 +1728,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "/include/range-selection.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "/include/row-position.js",
@@ -1849,7 +2241,7 @@
               "kind": "field",
               "name": "bpDraggableItem",
               "type": {
-                "text": "null"
+                "text": "'dropzone' | undefined"
               },
               "privacy": "private"
             },
@@ -1906,6 +2298,31 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "/range-selection/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "GridRangeSelectionController",
+          "superclass": {
+            "name": "InteractionRangeSelectionController",
+            "package": "@blueprintui/components/internals"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GridRangeSelectionController",
+          "declaration": {
+            "name": "GridRangeSelectionController",
+            "module": "/range-selection/index.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "/row/element.css",
@@ -1932,6 +2349,12 @@
             },
             {
               "name": "--min-height"
+            },
+            {
+              "name": "--border-width"
+            },
+            {
+              "name": "--border-color"
             }
           ],
           "members": [

package/detail/element.css.js

@@ -0,0 +1 @@
+const r=new CSSStyleSheet;r.replaceSync(":host{--background:var(--bp-layer-background-200);--full-width-breakpoint:500px;z-index:99;inset:0;border:0;width:75%;margin:0;padding:0;position:absolute;inset-inline:auto 0}[part=internal]{background:var(--background);color:var(--bp-text-color-100);padding:var(--bp-size-700);border:0;border-inline-start:var(--bp-object-border-width-100)solid var(--bp-object-border-color-100);width:100%;height:100%;overflow-y:auto}:host([full-width]){inset:0!important}:host([full-width]) [part=pointer]{display:none!important}[shape=close]{z-index:99;top:var(--bp-size-500);position:absolute;inset-inline-end:var(--bp-size-500)}[part=pointer]{background:var(--background);border-left:var(--bp-object-border-width-100)solid var(--bp-object-border-color-100);border-bottom:var(--bp-object-border-width-100)solid var(--bp-object-border-color-100);width:calc(var(--row-height)/2);height:calc(var(--row-height)/2);border-radius:var(--bp-object-border-radius-100);z-index:999;position:absolute;inset-block-start:var(--pointer-top);inset-inline-start:calc(var(--row-height)/-4);transform:rotate(45deg)}:host(:--dir-rtl) [part=pointer]{transform:rotate(-135deg)}");export{r as default};

package/detail/element.d.ts

@@ -0,0 +1,62 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TypePopoverController } from '@blueprintui/components/internals';
+/**
+ * Grid Detail
+ *
+ * ```typescript
+ * import '@blueprintui/grid/include/detail.js';
+ * ```
+ *
+ * @element bp-grid-detail
+ * @since 1.0.0
+ * @event close
+ * @csspart pointer
+ * @csspart close
+ * @cssprop --full-width-breakpoint
+ * @cssprop --background
+ */
+export declare class BpGridDetail extends LitElement {
+    #private;
+    i18n: {
+        sort: string;
+        none: string;
+        ascending: string;
+        descending: string;
+        expand: string;
+        close: string;
+        resize: string;
+        filter: string;
+        loading: string;
+        show: string;
+        hide: string;
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        today: string;
+        browse: string;
+        removeFile: string;
+        files: string;
+        resizeColumn: string;
+        closeDetails: string;
+        noData: string;
+        action: string;
+        dropTarget: string;
+        firstPage: string;
+        previousPage: string;
+        nextPage: string;
+        lastPage: string;
+        pageSize: string;
+    };
+    position: 'inline-start' | 'inline-end';
+    trigger: HTMLElement | string;
+    closable: boolean;
+    protected typePopoverController: TypePopoverController<this>;
+    _internals: ElementInternals;
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): Promise<void>;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues): Promise<void>;
+    disconnectedCallback(): void;
+}

package/detail/element.js

@@ -0,0 +1 @@
+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((t=>({focusTrap:!0,trigger:t.trigger}))),l({key:"actions"}),a(),g()],d);export{d as BpGridDetail};

package/detail/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/detail/index.js

@@ -0,0 +1 @@
+export{BpGridDetail}from"./element.js";

package/draggable-column/index.d.ts

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

package/draggable-column/index.js

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

package/draggable-row/index.d.ts

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

package/draggable-row/index.js

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

package/footer/element.css.js

@@ -1 +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);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);align-items:center;width:100%;display:flex}::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-900,var(--bp-interaction-touch-target));--padding-block:0;--padding-inline:var(--bp-size-600)}[part=internal]{min-height:var(--min-height);padding-inline:var(--padding-inline);padding-block:var(--padding-block);border-top:var(--border-width)solid var(--border-color);color:var(--bp-text-color-500);background:var(--background);font-size:var(--bp-text-size-200);align-items:center;width:100%;display:flex}::slotted(bp-pagination),::slotted(bp-pagination-input){margin-left:auto}");export{i as default};

package/footer/element.d.ts

@@ -13,6 +13,7 @@ import { LitElement } from 'lit';
  * @cssprop --background
  * @cssprop --padding-block
  * @cssprop --padding-inline
+ * @cssprop --border-width
  */
 export declare class BpGridFooter extends LitElement {
     #private;

package/footer/element.js

@@ -1 +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}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/grid/dom.controller.js

@@ -1 +1 @@
-import{insertSpanningCells as t}from"@blueprintui/grid/internals";class s{host;#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}#l;get grid(){if(!this.#l){const s=this.columns.filter((t=>!t.ariaColSpan)),e=t([...s,...Array.from(this.cells)]);for(this.#l=[];e.length;)this.#l.push(e.splice(0,s.length))}return this.#l}#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",(()=>this.host.updateComplete.then((()=>{this.#i(),this.host.shadowRoot.dispatchEvent(new CustomEvent("bp-slotchange"))}))))}#i(){this.#l=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}#l;get grid(){if(!this.#l){const s=this.columns.filter((t=>!t.ariaColSpan)),e=t([...s,...Array.from(this.cells)]);for(this.#l=[];e.length;)this.#l.push(e.splice(0,s.length))}return this.#l}#i=0;get isStatic(){return this.#i++,1===this.#i&&!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",(()=>this.host.updateComplete.then((()=>{this.#h(),this.host.shadowRoot.dispatchEvent(new CustomEvent("bp-slotchange"))}))))}#h(){this.#l=null,this.#r=null,this.#e=null,this.#o=null,this.#t=null,this.#s=null}}export{s as GridDOMController};

package/grid/element.css.js

@@ -1 +1 @@
-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:var(--bp-size-9);--row-height:var(--bp-size-9);--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);flex-direction:column;width:100%;display:flex;overflow:auto}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{margin-top:var(--bp-size-2);flex-direction:column;flex:1;min-width:fit-content;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(--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};
+const r=new CSSStyleSheet;r.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);flex-direction:column;width:100%;display:flex;overflow:auto}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{margin-top:var(--bp-size-200);flex-direction:column;flex:1;min-width:fit-content;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}::-webkit-scrollbar{width:var(--bp-size-500);height:var(--bp-size-500);background:0 0}::-webkit-scrollbar-track{margin-top:var(--bp-interaction-touch-target);box-shadow:inset 0 0 var(--bp-size-500)var(--scrollbar-background)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-background);border-radius:var(--bp-object-border-radius-100);border:var(--bp-size-200)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};