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

package/dist/collection/components/layouts/bds-grid/grid-item/bds-grid-item.css

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+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;
+  }
+}

package/dist/collection/components/layouts/bds-grid/grid-item/bds-grid-item.js

@@ -0,0 +1,306 @@
+import { h, Host } from "@stencil/core";
+import { GRID_ITEM_COL_SPAN } from "./types";
+import { validateNumericProp } from "../../../../utils/index";
+/**
+ * Grid item child of `bds-grid`. Must be a direct child of `bds-grid`.
+ *
+ * @slot - Item content. The grid item manages position only — content styling is
+ *   the responsibility of the slotted element.
+ */
+export class BdsGridItem {
+    constructor() {
+        /** 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() {
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.DEFAULT, this.el, 'colSpan');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.SM_MAX, this.el, 'colSpanSm');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.MD_MAX, this.el, 'colSpanMd');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.LG_MAX, this.el, 'colSpanLg');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.XL_MAX, this.el, 'colSpanXl');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.XXL_MAX, this.el, 'colSpan2xl');
+        validateNumericProp(1, undefined, this.el, 'rowSpan');
+        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 (h(Host, { key: '3e3465db3dcedd8d2f2cbb6035ff859b45841461', style: this.getHostStyles() }, h("slot", { key: 'db935ab4c60fb1d70df5ba03cbb7ee97944de6fa' })));
+    }
+    static get is() { return "bds-grid-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-grid-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-grid-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colSpan": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpan']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column span at all breakpoints (fallback). `'full'` spans all columns (`grid-column: 1 / -1`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span",
+                "defaultValue": "GRID_ITEM_COL_SPAN.DEFAULT"
+            },
+            "colSpanSm": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpanSm']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `sm` breakpoint (\u2265320px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-sm"
+            },
+            "colSpanMd": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpanMd']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `md` breakpoint (\u2265769px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-md"
+            },
+            "colSpanLg": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpanLg']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `lg` breakpoint (\u2265960px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-lg"
+            },
+            "colSpanXl": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpanXl']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `xl` breakpoint (\u22651152px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-xl"
+            },
+            "colSpan2xl": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpan2xl']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `2xl` breakpoint (\u22651344px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-2xl"
+            },
+            "rowSpan": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['rowSpan']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row span. `'full'` maps to `grid-row: 1 / -1`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-span"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['offset']",
+                    "resolved": "number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column offset: shifts the item right by N columns (0\u201311)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "offset",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colSpan",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpanSm",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpanMd",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpanLg",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpanXl",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpan2xl",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "rowSpan",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "offset",
+                "methodName": "checkPropValues"
+            }];
+    }
+}

package/dist/collection/components/layouts/bds-grid/grid-item/types/IGridItem.js

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

package/dist/collection/components/layouts/bds-grid/grid-item/types/enum.js

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

package/dist/collection/components/layouts/bds-grid/grid-item/types/index.js

@@ -0,0 +1,3 @@
+export * from './IGridItem';
+export * from './types';
+export * from './enum';

package/dist/collection/components/layouts/bds-grid/grid-item/types/types.js

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

package/dist/collection/components/overlays/bds-dialog/bds-dialog.css

@@ -0,0 +1,105 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.bds-dialog {
+  font-family: var(--boreal-typography-font-family-primary);
+  display: flex;
+  flex-direction: column;
+}
+.bds-dialog__header {
+  height: var(--boreal-spacing-4xl);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-l);
+}
+.bds-dialog__header:empty {
+  display: none;
+}
+.bds-dialog__header-right, .bds-dialog__header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--boreal-spacing-2xs);
+}
+.bds-dialog__title {
+  color: var(--boreal-text-default-light);
+  font-size: var(--boreal-typography-font-size-md);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-md);
+}
+.bds-dialog__body {
+  height: 100%;
+  overflow-y: auto;
+  padding: var(--boreal-spacing-s) var(--boreal-spacing-l);
+}
+.bds-dialog__footer {
+  padding: var(--boreal-spacing-s) var(--boreal-spacing-xs);
+}
+.bds-dialog__body, .bds-dialog__footer {
+  box-shadow: 0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset;
+}
+.bds-dialog__body:empty, .bds-dialog__footer:empty {
+  display: none;
+}
+.bds-dialog--sm {
+  width: min(448px, 100vw - var(--boreal-spacing-m) * 2);
+}
+.bds-dialog--md {
+  width: min(640px, 100vw - var(--boreal-spacing-m) * 2);
+}
+.bds-dialog--lg {
+  width: min(960px, 100vw - var(--boreal-spacing-m) * 2);
+}
+.bds-dialog--full {
+  width: min(1280px, 100vw - var(--boreal-spacing-m) * 2);
+  height: calc(100vh - var(--boreal-spacing-4xl));
+}
+.bds-dialog--custom-size {
+  width: var(--bds-dialog-width, auto);
+  height: var(--bds-dialog-height, auto);
+}
+.bds-dialog--info .bds-dialog__variant-icon {
+  color: var(--boreal-icon-info-base);
+}
+.bds-dialog--warning .bds-dialog__variant-icon {
+  color: var(--boreal-icon-warning-base);
+}
+.bds-dialog--danger .bds-dialog__variant-icon {
+  color: var(--boreal-icon-danger-base);
+}
+.bds-dialog--success .bds-dialog__variant-icon {
+  color: var(--boreal-icon-success-base);
+}
+.bds-dialog--no-padding {
+  padding: 0;
+}
+
+bds-dialog dialog {
+  border: none;
+  border-radius: var(--boreal-radius-xs);
+  background-color: var(--boreal-white);
+  box-shadow: 0 8px 12px 0 rgba(19, 19, 22, 0.15);
+  align-self: center;
+  justify-self: center;
+}
+bds-dialog dialog,
+bds-dialog dialog::backdrop {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+bds-dialog dialog[open].enter,
+bds-dialog dialog[open].enter::backdrop {
+  opacity: 1;
+}