@telesign/boreal-web-components 0.1.0-alpha.3 → 0.1.0-alpha.4

package/dist/cjs/bds-button.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
-var states = require('./states-iIYiazaM.js');
+var index = require('./index-CwYIVC9N.js');
+var states = require('./states-BweP5Vpu.js');
 var _enum = require('./enum-DLblRCkQ.js');
-var validateProps = require('./validateProps-BNOBk1Xs.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
 
 const CORE_COLORS = {
     DEFAULT: 'default',
@@ -51,7 +51,7 @@ const BdsButton = class {
             if (event.key === 'Enter' || event.key === ' ') {
                 this.currentState = states.COMPONENT_STATES.ACTIVE;
                 event.preventDefault();
-                this.bdsClick.emit(event);
+                this.handleClick(event);
             }
         };
         /** reset status on keyup */
@@ -130,7 +130,7 @@ const BdsButton = class {
     }
     /* render button depends on variant */
     render() {
-        return (index.h("button", { key: '4f71bb10d1910ea7b1fc0d64eedb6269e7049a89', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, index.h("div", { key: 'e28da0b776917c6a2c0efc6c7140a2bfa979b708', class: "bds-button__content" }, index.h("span", { key: 'ce3d60b504bbf38dc7116560dbfbe51c955f79db', class: "bds-button__content-icon bds-button__content-icon--start" }, index.h("slot", { key: '23b6bbb9d4fbf8ad5e0e584cddaac477edf4a91e', name: "icon" })), index.h("slot", { key: 'adcdc5d87a8db4e346d272b843966405692a2a32' }), index.h("span", { key: 'c908b3a8a18ba4cce854ee20d064178f6420d007', class: "bds-button__content-badge" }, index.h("slot", { key: 'ce66f69366dc7436a8f8ca1b2b8f55b91a225ec8', name: "badge" })), this.disclosure && (index.h("span", { key: '921c0f144f2616da238356705c1e5ff634406b87', class: "bds-button__content-icon" }, index.h("i", { key: '9dc7a891ac4fcb1a73113aeae83976d74cff0c2e', class: "bds-icon-chevron-down" }))))));
+        return (index.h("button", { key: 'e5e7dd996abf7f32218d1871069f4cdd5070cb6b', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, index.h("div", { key: '815ced9f3e464c73f371227c098ea65a7097f376', class: "bds-button__content" }, index.h("span", { key: '350acb5924bb036afeb2c252c71261c5b2015b1e', class: "bds-button__content-icon bds-button__content-icon--start" }, index.h("slot", { key: '57feb7a77e7edd0d43c3432a5822cdaec60729f6', name: "icon" })), index.h("slot", { key: '07536c420613bc6d4d53b5947524e69999937d19' }), index.h("span", { key: 'ae96692ab7ffe82df0f2a2cb685704912724df35', class: "bds-button__content-badge" }, index.h("slot", { key: '6a802ae2b19f85c3678c16f7950b597efc981da6', name: "badge" })), this.disclosure && (index.h("span", { key: 'c38f71595010045c86257f6d5c3ce48a504966ad', class: "bds-button__content-icon" }, index.h("i", { key: 'a51aff2455184cd38b2d7ebd52cc9c590b81601c', class: "bds-icon-chevron-down" }))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/bds-checkbox.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
-var internals = require('./internals-X77qKxsK.js');
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-DXwvF_vW.js');
 var attributes = require('./attributes-wIHueigW.js');
 
 const bdsCheckboxCss = () => `@charset "UTF-8";bds-checkbox{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:8px;cursor:pointer;outline:none}bds-checkbox .bds-checkbox__label{font-family:var(--boreal-typography-font-family-primary)}bds-checkbox .bds-checkbox__box{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:18px;height:18px;border:2px solid var(--boreal-stroke-default-light);background:transparent;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:4px}bds-checkbox:hover .bds-checkbox__box{border-color:var(--boreal-stroke-default-light)}bds-checkbox:focus-visible .bds-checkbox__box{border-color:var(--boreal-stroke-focus);outline:2px solid var(--boreal-stroke-focus);outline-offset:1px}bds-checkbox:active .bds-checkbox__box{border-color:var(--boreal-stroke-default-light);background:var(--boreal-bg-neutral);outline:2px solid var(--boreal-stroke-primary-light)}bds-checkbox.bds-checkbox--checked .bds-checkbox__box,bds-checkbox.bds-checkbox--indeterminate .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);color:#fff}bds-checkbox.bds-checkbox--checked:hover .bds-checkbox__box,bds-checkbox.bds-checkbox--indeterminate:hover .bds-checkbox__box{border-color:var(--boreal-ui-primary-dark);background:var(--boreal-ui-primary-dark)}bds-checkbox.bds-checkbox--checked:focus-visible .bds-checkbox__box,bds-checkbox.bds-checkbox--indeterminate:focus-visible .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);outline:2px solid var(--boreal-stroke-focus)}bds-checkbox.bds-checkbox--checked:active .bds-checkbox__box,bds-checkbox.bds-checkbox--indeterminate:active .bds-checkbox__box{border-color:var(--boreal-ui-primary-dark);background:var(--boreal-ui-primary-dark)}bds-checkbox.bds-checkbox--error .bds-checkbox__box{border-color:var(--boreal-stroke-danger-base)}bds-checkbox.bds-checkbox--error.bds-checkbox--checked .bds-checkbox__box,bds-checkbox.bds-checkbox--error.bds-checkbox--indeterminate .bds-checkbox__box{border-color:var(--boreal-stroke-danger-base);background:var(--boreal-stroke-danger-base)}bds-checkbox.bds-checkbox--disabled{pointer-events:none}bds-checkbox.bds-checkbox--disabled .bds-checkbox__box{border-color:var(--boreal-stroke-default-light);background:var(--boreal-bg-neutral)}bds-checkbox.bds-checkbox--disabled .bds-checkbox__label{color:var(--boreal-text-disabled)}bds-checkbox.bds-checkbox--disabled.bds-checkbox--checked .bds-checkbox__box,bds-checkbox.bds-checkbox--disabled.bds-checkbox--indeterminate .bds-checkbox__box{border-color:var(--boreal-ui-primary-light);background:var(--boreal-ui-primary-light);color:#fff}`;
 
-const BdsCheckbox = class extends index.Mixin(internals.formAssociatedMixin) {
+const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -77,7 +77,7 @@ const BdsCheckbox = class extends index.Mixin(internals.formAssociatedMixin) {
     formResetCallback() {
         this.checked = false;
         this.indeterminate = false;
-        internals.setFormValue(this.internals, null);
+        formAssociated_mixin.setFormValue(this.internals, null);
     }
     formStateRestoreCallback(state, _mode) {
         this.checked = state === this.value;
@@ -90,7 +90,7 @@ const BdsCheckbox = class extends index.Mixin(internals.formAssociatedMixin) {
     // Private helpers
     // ---------------------------------------------------------------------------
     syncFormValue() {
-        internals.setFormValue(this.internals, this.checked ? this.value : null);
+        formAssociated_mixin.setFormValue(this.internals, this.checked ? this.value : null);
     }
     toggle() {
         if (this.isDisabled)
@@ -128,7 +128,7 @@ const BdsCheckbox = class extends index.Mixin(internals.formAssociatedMixin) {
             'bds-checkbox--error': this.error,
             'bds-checkbox--disabled': this.isDisabled,
         };
-        return (index.h(index.Host, { key: 'c65361a26d92b0eb0c7dba951a915e5c3bfe4dbe', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, tabindex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("span", { key: 'ab3ba51a82f980852a42eff1bf81b793518a7ec0', class: "bds-checkbox__box" }, this.renderCheckIcon()), index.h("span", { key: 'b25d1b1dd27098bbead5095610bbf16f6a3eabad', class: "bds-checkbox__label" }, this.label ? this.label : index.h("slot", null))));
+        return (index.h(index.Host, { key: '4c2aa0c0e06451d258204ed2aaf92c41f730a2a8', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, tabindex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("span", { key: 'de6763aaef951d9236cbf4df7ac49fd09f998e93', class: "bds-checkbox__box" }, this.renderCheckIcon()), index.h("span", { key: '571e62e3cde00561465a155bc1399f6074516a03', class: "bds-checkbox__label" }, this.label ? this.label : index.h("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/bds-dialog.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
+var index = require('./index-CwYIVC9N.js');
 var floating_mixin = require('./floating.mixin-Bje4320w.js');
 var attributes = require('./attributes-wIHueigW.js');
-var validateProps = require('./validateProps-BNOBk1Xs.js');
-var states = require('./states-iIYiazaM.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+var states = require('./states-BweP5Vpu.js');
 
 const backdropMixin = (Base) => {
     /**
@@ -303,7 +303,8 @@ const BdsDialog = class extends index.Mixin(backdropMixin) {
      * otherwise, the hide will be triggered after the transition ends.
      */
     transitionBeforeClose() {
-        this.active = false;
+        if (this.active)
+            this.active = false;
         this.removeTransitionAnimation('enter');
         const { transitionDuration } = getComputedStyle(this.dialogElement);
         const duration = parseFloat(transitionDuration);
@@ -355,10 +356,10 @@ const BdsDialog = class extends index.Mixin(backdropMixin) {
     }
     render() {
         const inheritedAriaAttr = this.inheritedAttributes;
-        return (index.h("dialog", { key: '0cc772f12b48d93bf8304597580157400846eb3a', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
+        return (index.h("dialog", { key: '73f9b2516aa414e3016e8a18b5f0d2de7f46a09a', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
                 if (el !== undefined)
                     this.dialogElement = el;
-            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, index.h("div", { key: '43fe62c1ddf4537008058d4e1e178a164db98d45', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (index.h("div", { key: '2404606784ae0f915191d5994716eaef6682ba9f', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), index.h("div", { key: 'fe00d0e4ebf041a2734d40245c098ecfd80deb0b', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, index.h("slot", { key: 'd00c4e8bd26f392003e0de17551177615d26b74a' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (index.h("div", { key: 'ce63e120119b918e0ec1b1d55a71ce2ef11ed4d9', class: "bds-dialog__footer" }, index.h("slot", { key: 'ffd76edb35b7fcfd68861d0364e9f94059f5da92', name: "footer" }))))));
+            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, index.h("div", { key: 'ef900b6a99ed650db043fb8123c90c3cd7322ec6', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (index.h("div", { key: '81d96f353eef6bd9f38baba8702b88599d6c02a3', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), index.h("div", { key: 'd36d2c112a87e885e53bd4a8740530ac7b196980', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, index.h("slot", { key: 'c296c8e91a44d7f40284586b3b425a6b87964cdd' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (index.h("div", { key: '98c17852b5dc519207c66850c38d679d31d27b5b', class: "bds-dialog__footer" }, index.h("slot", { key: '159426b4095804e6da864d86a0f6ef7a8e2197e3', name: "footer" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-divider.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const DIVIDER_ORIENTATIONS = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+
+const bdsDividerCss = () => `@charset "UTF-8";bds-divider[orientation=vertical]{display:inline-block;height:100%}bds-divider[orientation=horizontal]{display:block;width:100%}.bds-divider{background-color:var(--boreal-ui-default-lighter)}.bds-divider--horizontal{width:100%;height:var(--boreal-spacing-4xs)}.bds-divider--vertical{width:var(--boreal-spacing-4xs);height:100%}`;
+
+const BdsDivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The orientation of the divider.
+         * Allowed values: horizontal | vertical
+         */
+        this.orientation = DIVIDER_ORIENTATIONS.HORIZONTAL;
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(DIVIDER_ORIENTATIONS), DIVIDER_ORIENTATIONS.HORIZONTAL, this.el, 'orientation');
+    }
+    get orientationClass() {
+        return {
+            'bds-divider': true,
+            [`bds-divider--${this.orientation}`]: true,
+        };
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    render() {
+        return index.h("div", { key: 'd34f930e98129a75ca706f4695e40e577d5a12f6', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "orientation": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsDivider.style = bdsDividerCss();
+
+exports.bds_divider = BdsDivider;

package/dist/cjs/bds-flag.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
-var validateProps = require('./validateProps-BNOBk1Xs.js');
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
 
 /**
  * The identifier to be used to resolve the country code.
@@ -2931,7 +2931,7 @@ const BdsFlag = class {
         const flagContentClass = this.flagContentClass;
         const flagClass = this.flagClass;
         const flagStyle = !this.isGlobal ? { backgroundImage: `url(${this.flagUrl(flag)})` } : {};
-        return (index.h(index.Host, { key: 'a3d7548922ce9ad6bd67bdc906e0cd3590a76a35', class: flagClass, "aria-label": countryName, role: "img" }, flag && index.h("span", { key: '44299f5031e4adb04837eabefa37f70f7dc8a9b8', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), index.h("span", { key: 'ce37d02816caf7bfc7fa22f1897de481a8d82bbb', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
+        return (index.h(index.Host, { key: 'c8f41b293eb2cfb1313aaa5c1ecbd4de3bf2e27c', class: flagClass, "aria-label": countryName, role: "img" }, flag && index.h("span", { key: '21f885fe3f7de150dd3766d3c942a6131d420a26', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), index.h("span", { key: '08b819e1754ea9675306060ef1b8bcfa94546b09', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
     }
     static get assetsDirs() { return ["./constants"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/bds-grid-item.cjs.entry.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const GRID_ITEM_COL_SPAN = {
+    SM_MAX: 4,
+    MD_MAX: 8,
+    LG_MAX: 12,
+    XL_MAX: 12,
+    XXL_MAX: 12,
+    DEFAULT: 12,
+    OFFSET_MIN: 0,
+    OFFSET_MAX: 11,
+};
+
+const bdsGridItemCss = () => `@charset "UTF-8";bds-grid-item{--_col-span:var(--_col-base, 12);grid-column-end:span var(--_col-span);grid-row-end:span var(--_row-base, 1)}bds-grid-item[col-span=full]{grid-column:1/-1}bds-grid-item[row-span=full]{grid-row:1/-1}@media (min-width: 320px){bds-grid-item{--_col-span:var(--_col-sm, var(--_col-base, 12))}bds-grid-item[col-span-sm=full]{grid-column:1/-1}}@media (min-width: 769px){bds-grid-item{--_col-span:var(--_col-md, var(--_col-sm, var(--_col-base, 12)))}bds-grid-item[col-span-md=full]{grid-column:1/-1}}@media (min-width: 960px){bds-grid-item{--_col-span:var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12))))}bds-grid-item[col-span-lg=full]{grid-column:1/-1}}@media (min-width: 1152px){bds-grid-item{--_col-span:var(--_col-xl, var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12)))))}bds-grid-item[col-span-xl=full]{grid-column:1/-1}}@media (min-width: 1344px){bds-grid-item{--_col-span:var(--_col-2xl, var(--_col-xl, var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12))))))}bds-grid-item[col-span-2xl=full]{grid-column:1/-1}}`;
+
+const BdsGridItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Column span at all breakpoints (fallback). `'full'` spans all columns (`grid-column: 1 / -1`). */
+        this.colSpan = GRID_ITEM_COL_SPAN.DEFAULT;
+        /** Column offset: shifts the item right by N columns (0–11). */
+        this.offset = 0;
+    }
+    checkPropValues() {
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.DEFAULT, this.el, 'colSpan');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.SM_MAX, this.el, 'colSpanSm');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.MD_MAX, this.el, 'colSpanMd');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.LG_MAX, this.el, 'colSpanLg');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.XL_MAX, this.el, 'colSpanXl');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.XXL_MAX, this.el, 'colSpan2xl');
+        validateProps.validateNumericProp(1, undefined, this.el, 'rowSpan');
+        validateProps.validateNumericProp(GRID_ITEM_COL_SPAN.OFFSET_MIN, GRID_ITEM_COL_SPAN.OFFSET_MAX, this.el, 'offset');
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    getHostStyles() {
+        const styles = {};
+        if (this.colSpan !== 'full')
+            styles['--_col-base'] = String(this.colSpan);
+        if (this.colSpanSm !== undefined && this.colSpanSm !== 'full')
+            styles['--_col-sm'] = String(this.colSpanSm);
+        if (this.colSpanMd !== undefined && this.colSpanMd !== 'full')
+            styles['--_col-md'] = String(this.colSpanMd);
+        if (this.colSpanLg !== undefined && this.colSpanLg !== 'full')
+            styles['--_col-lg'] = String(this.colSpanLg);
+        if (this.colSpanXl !== undefined && this.colSpanXl !== 'full')
+            styles['--_col-xl'] = String(this.colSpanXl);
+        if (this.colSpan2xl !== undefined && this.colSpan2xl !== 'full')
+            styles['--_col-2xl'] = String(this.colSpan2xl);
+        if (this.rowSpan !== undefined && this.rowSpan !== 'full')
+            styles['--_row-base'] = String(this.rowSpan);
+        if (this.offset > 0)
+            styles['grid-column-start'] = String(Number(this.offset) + 1);
+        return styles;
+    }
+    render() {
+        return (index.h(index.Host, { key: '3e3465db3dcedd8d2f2cbb6035ff859b45841461', style: this.getHostStyles() }, index.h("slot", { key: 'db935ab4c60fb1d70df5ba03cbb7ee97944de6fa' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "colSpan": [{
+                "checkPropValues": 0
+            }],
+        "colSpanSm": [{
+                "checkPropValues": 0
+            }],
+        "colSpanMd": [{
+                "checkPropValues": 0
+            }],
+        "colSpanLg": [{
+                "checkPropValues": 0
+            }],
+        "colSpanXl": [{
+                "checkPropValues": 0
+            }],
+        "colSpan2xl": [{
+                "checkPropValues": 0
+            }],
+        "rowSpan": [{
+                "checkPropValues": 0
+            }],
+        "offset": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsGridItem.style = bdsGridItemCss();
+
+exports.bds_grid_item = BdsGridItem;

package/dist/cjs/bds-grid.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const GRID_LAYOUT = {
+    FIXED: 'fixed',
+    FLUID: 'fluid',
+};
+
+const bdsGridCss = () => `@charset "UTF-8";bds-grid{--bds-grid-columns:var(--boreal-grid-columns-sm);--bds-grid-gutter:var(--boreal-grid-gutter-sm);--bds-grid-margin:var(--boreal-grid-margin-sm);display:grid;grid-template-columns:repeat(var(--bds-grid-columns), 1fr);gap:var(--bds-grid-gutter);padding-inline:var(--bds-grid-margin);-webkit-margin-start:var(--bds-grid-nav-offset, 0px);margin-inline-start:var(--bds-grid-nav-offset, 0px);-webkit-box-sizing:border-box;box-sizing:border-box}@media (min-width: 769px){bds-grid{--bds-grid-columns:var(--boreal-grid-columns-md)}}@media (min-width: 960px){bds-grid{--bds-grid-columns:var(--boreal-grid-columns-lg);--bds-grid-margin:var(--boreal-grid-margin-lg)}}@media (min-width: 1152px){bds-grid{--bds-grid-gutter:var(--boreal-grid-gutter-xl);--bds-grid-margin:var(--boreal-grid-margin-xl)}}@media (min-width: 1344px){bds-grid{--bds-grid-margin:var(--boreal-grid-margin-2xl)}}bds-grid.bds-grid--fixed{max-width:calc(var(--boreal-grid-fixed-max-columns-width) + 2 * var(--bds-grid-margin));margin-inline:auto}`;
+
+const BdsGrid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** `'fluid'` fills full width; `'fixed'` caps the column area at 960px and centres the container. */
+        this.layout = GRID_LAYOUT.FLUID;
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(GRID_LAYOUT), GRID_LAYOUT.FLUID, this.el, 'layout');
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e5610c3140f86d79b275de56c8a815badccdf03d', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, index.h("slot", { key: 'ac13145d26bd923b6f5abe415b062728757d0fd5' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "layout": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsGrid.style = bdsGridCss();
+
+exports.bds_grid = BdsGrid;