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

package/dist/collection/components/forms/bds-slider/helpers/SliderDOMController.js

@@ -0,0 +1,61 @@
+export class SliderDOMController {
+    /**
+     * Adds the necessary classes to show the tooltip when a handle is focused or active.
+     * This is used in both focus and active states to ensure the tooltip remains visible.
+     * @param inputEl - The input element to add the states to.
+     * @param blockClass - The block class of the slider.
+     */
+    static addTooltipsStates(inputEl, blockClass) {
+        if (inputEl === undefined)
+            return;
+        inputEl.classList.add(`${blockClass}__tooltip--visible`, `${blockClass}__tooltip--active`);
+    }
+    /**
+     * Removes the necessary classes to hide the tooltip when a handle is blurred or inactive.
+     * @param inputEl - The input element to remove the states from.
+     * @param blockClass - The block class of the slider.
+     */
+    static removeTooltipsStates(inputEl, blockClass) {
+        if (inputEl === undefined)
+            return;
+        inputEl.classList.remove(`${blockClass}__tooltip--visible`, `${blockClass}__tooltip--active`);
+    }
+    /**
+     * Syncs the tooltips with the given values and inputs.
+     * @param values - The values to sync the tooltips with.
+     * @param inputsEl - The inputs to sync the tooltips with.
+     */
+    static syncTooltips(values, inputsEl) {
+        values.forEach((value, index) => {
+            const input = inputsEl[index];
+            if (input === undefined)
+                return;
+            input.value = String(value);
+            input.setAttribute('value', String(value));
+            input.setAttribute('aria-valuenow', String(value));
+        });
+    }
+    /**
+     * Moves the connect element to the given percentage position.
+     * @param connectEl - The connect element to move.
+     * @param segment - The percentage position to move the connect element to.
+     */
+    static moveConnect(connectEl, segment) {
+        connectEl.style.left = `${segment.left}%`;
+        connectEl.style.width = `${segment.width}%`;
+    }
+    /**
+     * Returns the CSS position of the thumb in pixels based on the track and percent.
+     * @param percent - The percentage of the track that the thumb should be positioned at.
+     * @returns The position of the thumb in pixels.
+     */
+    static getThumbCSSPosition(percent) {
+        const thumbSize = 'var(--handle-size, 16px)';
+        return `calc(${percent}% + (${thumbSize} / 2) - (${percent} * ${thumbSize} / 100))`;
+    }
+    static updateInputValue(inputEl, value) {
+        inputEl.value = String(value);
+        inputEl.setAttribute('value', String(value));
+        inputEl.setAttribute('aria-valuenow', String(value));
+    }
+}

package/dist/collection/components/forms/bds-slider/helpers/SliderService.js

@@ -0,0 +1,93 @@
+import { SLIDER_TYPE } from "../types";
+export class SliderService {
+    constructor(options) {
+        this.options = options;
+    }
+    /**
+     * Clamps a value between min and max.
+     */
+    clamp(value) {
+        return Math.min(Math.max(value, this.options.min), this.options.max);
+    }
+    /**
+     * Rounds a value to the nearest step.
+     */
+    snapToStep(value) {
+        const stepped = Math.round((value - this.options.min) / this.options.step) * this.options.step + this.options.min;
+        return this.clamp(stepped);
+    }
+    /**
+     * Applies collision prevention for range mode.
+     * Ensures handles never overlap — always at least 1 step apart.
+     */
+    applyCollision(values, changedIndex) {
+        const result = [...values];
+        const margin = this.options.step;
+        if (this.options.type !== SLIDER_TYPE.RANGE || result.length < 2)
+            return result;
+        if (changedIndex === 0) {
+            // Min handle cannot exceed max handle - margin
+            const maxVal = result[1] ?? this.options.max;
+            result[0] = Math.min(result[0] ?? this.options.min, maxVal - margin);
+        }
+        else {
+            // Max handle cannot go below min handle + margin
+            const minVal = result[0] ?? this.options.min;
+            result[1] = Math.max(result[1] ?? this.options.max, minVal + margin);
+        }
+        return result;
+    }
+    /**
+     * Calculates the percentage position of a value along the track.
+     */
+    toPercent(value) {
+        const range = this.options.max - this.options.min;
+        if (range === 0)
+            return 0;
+        return ((value - this.options.min) / range) * 100;
+    }
+    /**
+     * Returns connect segments for the track.
+     * single: [left=0, width=percent of value]
+     * range:  [left=percent of min, width=percent of (max - min)]
+     */
+    getConnectSegment(values) {
+        if (this.options.type === SLIDER_TYPE.SINGLE) {
+            return {
+                left: 0,
+                width: this.toPercent(values[0] ?? this.options.min),
+            };
+        }
+        const val0 = values[0] ?? this.options.min;
+        const val1 = values[1] ?? this.options.max;
+        return {
+            left: this.toPercent(val0),
+            width: this.toPercent(val1 - val0 + this.options.min),
+        };
+    }
+    /**
+     * Returns pip positions as percentages, excluding min and max.
+     */
+    getPipPositions() {
+        const { min, max, step } = this.options;
+        const positions = [];
+        const total = (max - min) / step;
+        for (let i = 1; i < total; i++) {
+            const value = min + i * step;
+            positions.push(this.toPercent(value));
+        }
+        return positions;
+    }
+    /**
+     * Returns the CSS position of the thumb in pixels based on the track and percent.
+     * @param value - The value of the slider at the given clientX position.
+     * @param trackWidth - The width of the track element.
+     * @param thumbSize - The size of the thumb element.
+     * @returns The position of the thumb in pixels.
+     */
+    getThumbCSSPosition(value, trackWidth, thumbSize) {
+        const percent = this.toPercent(value) / 100;
+        const usableWidth = trackWidth - thumbSize;
+        return percent * usableWidth + thumbSize / 2;
+    }
+}

package/dist/collection/components/forms/bds-slider/helpers/index.js

@@ -0,0 +1,3 @@
+export * from './parseValues';
+export * from './SliderService';
+export * from './SliderDOMController';

package/dist/collection/components/forms/bds-slider/helpers/parseValues.js

@@ -0,0 +1,43 @@
+import { SLIDER_TYPE } from "../types";
+/**
+ * Parses any valid `values` input into a clean `number[]`.
+ * This is the single source of truth for value normalization.
+ *
+ * Handles:
+ * - `number[]` → `[10, 50, 80]` (passthrough, filtered for NaN)
+ * - `"[10, 50, 80]"` → `[10, 50, 80]`
+ * - anything malformed → `[this.min]` as safe fallback
+ */
+export function parseValues(raw, fallback = [0]) {
+    if (Array.isArray(raw)) {
+        const result = raw.map(Number).filter(n => !isNaN(n));
+        return result.length > 0 ? result : fallback;
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        const arr = Array.isArray(parsed) ? parsed : [parsed];
+        const result = arr.map(Number).filter(n => !isNaN(n));
+        return result.length > 0 ? result : fallback;
+    }
+    catch {
+        const n = Number(raw);
+        return isNaN(n) ? fallback : [n];
+    }
+}
+/**
+ * Serialize the value for the form: a single number → "10", multiple → "10,20,30"
+ * FormData does not support arrays natively, so we use CSV.
+ */
+export function serializeFormValue(values) {
+    return values.join(',');
+}
+export function resolveValues(raw, min, max, type) {
+    const parsed = parseValues(raw, [Number(min)]);
+    if (type === SLIDER_TYPE.RANGE) {
+        if (parsed.length >= 2) {
+            return [parsed[0] ?? Number(min), parsed[1] ?? Number(max)];
+        }
+        return [parsed[0] ?? Number(min), Number(max)];
+    }
+    return [parsed[0] ?? Number(min)];
+}

package/dist/collection/components/forms/bds-slider/types/ChangeDetail.js

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

package/dist/collection/components/forms/bds-slider/types/ISlider.js

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

package/dist/collection/components/forms/bds-slider/types/ISliderOptions.js

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

package/dist/collection/components/forms/bds-slider/types/enum.js

@@ -0,0 +1,16 @@
+/**
+ * Available tooltip types for the slider component.
+ * Used to control the visibility of the tooltip.
+ */
+export const SLIDER_TOOLTIP = {
+    NEVER: 'never',
+    FOCUS: 'focus',
+};
+/**
+ * Available slider types for the slider component.
+ * Used to control the behavior of the slider.
+ */
+export const SLIDER_TYPE = {
+    SINGLE: 'single',
+    RANGE: 'range',
+};

package/dist/collection/components/forms/bds-slider/types/index.js

@@ -0,0 +1,5 @@
+export * from './ChangeDetail';
+export * from './enum';
+export * from './types';
+export * from './ISlider';
+export * from './ISliderOptions';

package/dist/collection/components/forms/bds-slider/types/types.js

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

package/dist/collection/components/forms/bds-text-field/bds-text-field.css

@@ -82,6 +82,9 @@
 .bds-text-field__control:disabled {
   cursor: not-allowed;
 }
+.bds-text-field__control[aria-expanded=true] ~ .bds-text-field__actions .bds-text-field__action--icon-right {
+  transform: rotate(180deg);
+}
 .bds-text-field__actions {
   padding-left: var(--boreal-spacing-xs);
   gap: var(--boreal-spacing-3xs);
@@ -94,7 +97,7 @@
   cursor: pointer;
   color: var(--boreal-icon-default-light);
   line-height: 1;
-  transition: color 0.3s ease, opacity 0.3s ease;
+  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease-in-out;
 }
 .bds-text-field__action--clear em[class^=bds-icon-], .bds-text-field__action--clear em[class*=" bds-icon-"] {
   width: var(--boreal-icons-s);
@@ -120,7 +123,7 @@
   color: var(--boreal-icon-default-dark);
 }
 .bds-text-field__action:focus-visible {
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-text-field__footer {
   justify-content: space-between;
@@ -134,7 +137,7 @@
 }
 .bds-text-field--focused .bds-text-field__container {
   border-color: var(--boreal-stroke-focus);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-text-field--error .bds-text-field__container {
   border-color: var(--boreal-stroke-danger-base);
@@ -155,6 +158,10 @@
 .bds-text-field--disabled .bds-text-field__control {
   color: var(--boreal-icon-disabled);
 }
+.bds-text-field--selectable .bds-text-field__container input {
+  cursor: pointer;
+  pointer-events: auto;
+}
 .bds-text-field--readonly .bds-text-field__container {
   background-color: transparent;
   border: none;

package/dist/collection/components/forms/bds-text-field/bds-text-field.js

@@ -105,6 +105,10 @@ export class BdsTextField extends Mixin(formAssociatedMixin) {
         this.counter = false;
         /** Sets a custom width via the `--bds-text-field-width` CSS custom property. */
         this.customWidth = '';
+        /** Set mode readonly to use in selects */
+        this.selectable = false;
+        /** Icon rendered on the right side of the input, on the actions containers. (e.g., 'bds-icon-settings') */
+        this.iconRight = '';
         /** Tracks focus state to drive the `bds-text-field--focused` CSS modifier. */
         this.focused = false;
         /** Controls whether the password input renders as plain text. */
@@ -174,7 +178,7 @@ export class BdsTextField extends Mixin(formAssociatedMixin) {
     onValueChange(next) {
         setFormValue(this.internals, next);
         this.currentCharCount = next.length;
-        this.updateValidity();
+        this.updateValidity(this.touched || this.validationError);
         this.valueChange.emit(next);
     }
     formAssociatedCallback() {
@@ -300,6 +304,7 @@ export class BdsTextField extends Mixin(formAssociatedMixin) {
             'bds-text-field--readonly': this.readOnly,
             'bds-text-field--plain': this.variant === TEXT_FIELD_VARIANTS.PLAIN,
             'bds-text-field--clear-on-hover': this.clearOnHover,
+            'bds-text-field--selectable': this.selectable,
         };
     }
     get hostStyle() {
@@ -323,7 +328,7 @@ export class BdsTextField extends Mixin(formAssociatedMixin) {
                 : this.helperText;
         const showFooter = helperContent !== '' || (this.counter && this.charCount > 0);
         const typographyState = this.isDisabled ? 'disabled' : effectiveError ? 'error' : 'default';
-        return (h(Host, { key: '96b7e057fa7f25e8f7d13b7de0fd17f12de602bb', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (h("bds-typography", { key: 'e827b43ea347037ff2d404229aaefdd258d2ad22', id: labelId, variant: "label", htmlFor: this._id, required: this.required, tooltipText: this.info !== '' ? this.info : undefined, state: typographyState }, this.label)), h("div", { key: 'f579762db25f65031917874dbb4c2347b5d9f027', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (h("span", { key: '191d2ccec9baf8b739163eea112dce9a1073f4bd', class: "bds-text-field__sublabel" }, this.icon !== '' && h("em", { key: '1cc1b1b7ece610b2a18ba872c4b7035d2239731b', class: this.icon }), this.sublabel)), h("slot", { key: 'ba7b08573b6ae35c10649125991a2bbed15f31f3', name: "prefix" }), h("input", { key: '6391338c4f636382cf19f888dc810baaf6820c80', id: this._id, class: "bds-text-field__control", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": showFooter && helperContent !== '' ? helperId : undefined, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, type: this.type === TEXT_FIELD_TYPES.PASSWORD && this.showPassword ? TEXT_FIELD_TYPES.TEXT : this.type, value: this.value, disabled: this.isDisabled, readOnly: this.readOnly, tabIndex: this.readOnly ? -1 : undefined, placeholder: this.placeholder, autocomplete: this.autocomplete, pattern: this.pattern !== '' ? this.pattern : undefined, minLength: this.minLength !== 0 ? this.minLength : undefined, maxLength: this.effectiveMaxLength, onMouseDown: (e) => this.handleMouseDown(e), onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e), onFocus: (e) => this.handleFocus(e), onBlur: (e) => this.handleBlur(e) }), (showClear || this.type === TEXT_FIELD_TYPES.PASSWORD) && (h("div", { key: 'e5dc4cab3d536ef09eaeae96ca68a7d4b4e15d92', class: "bds-text-field__actions" }, showClear && (h("button", { key: 'b18d06de000c3ea465be221dcbb77ab49bb3949f', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, h("em", { key: '0aa5d75c5214b7832a2a2e80a1cd2c42af5bea9a', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (h("button", { key: 'fd97135cca8d32178461bf7109c9b6a7eec543e9', class: "bds-text-field__action bds-text-field__action--password", type: "button", "aria-label": this.showPassword ? ARIA_LABELS.HidePassword : ARIA_LABELS.ShowPassword, onClick: () => this.handleShowPassword() }, h("em", { key: '0de72e7756ad62bbe4fb5f925526071720f358db', class: this.showPasswordIcon })))))), showFooter && (h("div", { key: '9d1c0e8920511650ab6711f2f813c01491d52414', class: "bds-text-field__footer" }, helperContent !== '' && (h("bds-typography", { key: 'f27235a7a38f34b9a9f7bae762c3c6be12acd8b0', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (h("span", { key: '3aa43ea8bd6a35963f0983ec8814e0ce19ee71ce', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
+        return (h(Host, { key: '6481e9c4eac94aee0b9a24fdaae8a00d3ae100b3', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (h("bds-typography", { key: 'f21f1a20b452876a3d3e91276318142e517d4099', id: labelId, variant: "label", htmlFor: this._id, required: this.required, tooltipText: this.info !== '' ? this.info : undefined, state: typographyState }, this.label)), h("div", { key: '08c4e6498a31ee97f8ab1e3b6f2774bd30b933df', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (h("span", { key: 'aad475c4e9b6870ea2dae597a14aa9a42a3eb837', class: "bds-text-field__sublabel" }, this.icon !== '' && h("em", { key: 'f6cdaddf127e35143fcc3749395438e2082eb7c1', class: this.icon }), this.sublabel)), h("slot", { key: '29fae2b0cf57634c0fa64eacc450a4989d4bbbf0', name: "prefix" }), h("slot", { key: '446a355e5d028e0a8ed0401c2f6452ab32a51959', name: "tags" }), h("input", { key: 'd4dbc554a0121ac773d965d39277291562924e3f', id: this._id, class: "bds-text-field__control", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": showFooter && helperContent !== '' ? helperId : undefined, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, type: this.type === TEXT_FIELD_TYPES.PASSWORD && this.showPassword ? TEXT_FIELD_TYPES.TEXT : this.type, value: this.value, disabled: this.isDisabled, readOnly: this.readOnly || this.selectable, tabIndex: this.readOnly ? -1 : undefined, placeholder: this.placeholder, autocomplete: this.autocomplete, pattern: this.pattern !== '' ? this.pattern : undefined, minLength: this.minLength !== 0 ? this.minLength : undefined, maxLength: this.effectiveMaxLength, onMouseDown: (e) => this.handleMouseDown(e), onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e), onFocus: (e) => this.handleFocus(e), onBlur: (e) => this.handleBlur(e) }), (showClear || this.type === TEXT_FIELD_TYPES.PASSWORD || this.iconRight !== '') && (h("div", { key: '47964ef2af3f328434fee12cbea2db2976c12d13', class: "bds-text-field__actions" }, showClear && (h("button", { key: 'f5265e5b44d1025697b4bb8237d4c6fccf5e1c2a', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, h("em", { key: 'bddaa1e6a9f347fea502e9d59eef0e008329b76b', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (h("button", { key: 'deb294a70355419c49748f7821db56c83e811115', class: "bds-text-field__action bds-text-field__action--password", type: "button", "aria-label": this.showPassword ? ARIA_LABELS.HidePassword : ARIA_LABELS.ShowPassword, onClick: () => this.handleShowPassword() }, h("em", { key: '29945864601c1461054da11465ac0695a9c4432e', class: this.showPasswordIcon }))), this.iconRight !== '' && (h("span", { key: 'a69939fe890b5c05a7752bbdba6cff9c159ea08c', class: "bds-text-field__action bds-text-field__action--icon-right", "aria-hidden": "true" }, h("i", { key: 'db51d8c6dc8a3d74f26190ea8859a3fb19fad879', class: this.iconRight })))))), showFooter && (h("div", { key: '0052fb8c0e466d74afc7e30d55ae8016f48fe20b', class: "bds-text-field__footer" }, helperContent !== '' && (h("bds-typography", { key: 'aa7528b125145b7b36582dd1607cc80bf85948e4', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (h("span", { key: '5274eea422b00ec03da9f0b3ff90d055336b2727', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
     }
     static get is() { return "bds-text-field"; }
     static get formAssociated() { return true; }
@@ -884,6 +889,46 @@ export class BdsTextField extends Mixin(formAssociatedMixin) {
                 "reflect": false,
                 "attribute": "custom-width",
                 "defaultValue": "''"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set mode readonly to use in selects"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "iconRight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon rendered on the right side of the input, on the actions containers. (e.g., 'bds-icon-settings')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-right",
+                "defaultValue": "''"
             }
         };
     }

package/dist/collection/components/helpers/{bds-divider.css → bds-divider/bds-divider.css}

@@ -14,23 +14,31 @@
 * 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-divider {
+  /**
+   * @prop --bds-divider-color: Custom color for the divider. Default is $boreal-ui-default-lighter.
+    * @prop --bds-divider-gap: Custom gap between dividers. Default is $boreal-spacing-3xs.
+   */
+}
 bds-divider[orientation=vertical] {
-  display: inline-block;
-  height: 100%;
+  display: flex;
+  align-self: stretch;
+  margin-inline: var(--bds-divider-gap, 0px);
 }
 bds-divider[orientation=horizontal] {
   display: block;
   width: 100%;
+  margin-block: var(--bds-divider-gap, 0px);
 }
 
 .bds-divider {
-  background-color: var(--boreal-ui-default-lighter);
+  background-color: var(--bds-divider-color, var(--boreal-ui-default-lighter));
 }
 .bds-divider--horizontal {
   width: 100%;
   height: var(--boreal-spacing-4xs);
 }
 .bds-divider--vertical {
+  flex: 1;
   width: var(--boreal-spacing-4xs);
-  height: 100%;
 }

package/dist/collection/components/helpers/{bds-divider.js → bds-divider/bds-divider.js}

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { DIVIDER_ORIENTATIONS } from "./types/enum";
-import { validatePropValue } from "../../utils/index";
+import { validatePropValue } from "../../../utils/index";
 /**
  * Divider component for creating visual separators between content sections.
  *
@@ -34,7 +34,7 @@ export class BdsDivider {
         this.checkPropValues();
     }
     render() {
-        return h("div", { key: 'd34f930e98129a75ca706f4695e40e577d5a12f6', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
+        return h("div", { key: 'a64c78979ba69f2de16edd48265cdb61d86d7026', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
     }
     static get is() { return "bds-divider"; }
     static get originalStyleUrls() {
@@ -59,7 +59,7 @@ export class BdsDivider {
                         "IDivider": {
                             "location": "import",
                             "path": "./types/IDivider",
-                            "id": "src/components/helpers/types/IDivider.ts::IDivider",
+                            "id": "src/components/helpers/bds-divider/types/IDivider.ts::IDivider",
                             "referenceLocation": "IDivider"
                         }
                     }

package/dist/collection/components/helpers/bds-divider/types/IDivider.js

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

package/dist/collection/components/helpers/bds-divider/types/types.js

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

package/dist/collection/components/images-icons/bds-avatar/bds-avatar.js

@@ -87,7 +87,7 @@ export class BdsAvatar {
         const avatarAriaLabel = this.normalizedUsername.length > 0 ? `User name: ${this.normalizedUsername}` : 'User name';
         const showIcon = this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.ICON;
         const showName = this.normalizedUsername && (this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.NAME);
-        return (h(Host, { key: '8c3cc5b02c02997a8aad688ae043522d07bc3239', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '357ec2fbb0f4ad6c9b3fa54da78c55eab0a4f7f7', class: "bds-avatar__container" }, showIcon && (h("div", { key: '2dbc77e00bedf5e67f08337dad76eeca9fcffb28', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '6bbd987437cf03bc573363d86092349da5d12521', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: '05e0480670c5ba15b8518325910a661aefb32da8', class: "bds-avatar__name" }, this.normalizedUsername))));
+        return (h(Host, { key: 'b29800e27c95008eb9257c7ec5c9aab2fb907b98', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '807c804a557b55f06c6437208102226b7284423c', class: "bds-avatar__container" }, showIcon && (h("div", { key: '6f9ab3e1b6822b82e59fb5ac982c68cc0de2c43d', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '90fedd34dff914024fed3a305a134808da2b0967', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: 'fba46730ab9ed74841e3919f79a8f7df1eea3192', class: "bds-avatar__name" }, this.normalizedUsername))));
     }
     static get is() { return "bds-avatar"; }
     static get originalStyleUrls() {

package/dist/collection/components/layouts/bds-grid/{grid → bds-grid}/bds-grid.js

@@ -20,7 +20,7 @@ export class BdsGrid {
         this.checkPropValues();
     }
     render() {
-        return (h(Host, { key: 'e5610c3140f86d79b275de56c8a815badccdf03d', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, h("slot", { key: 'ac13145d26bd923b6f5abe415b062728757d0fd5' })));
+        return (h(Host, { key: '72e2dd4c1ab75d6a7e71dc8e75456d482afbb4b8', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, h("slot", { key: '8c47051a287548daff2402a71aab7bd2aef50da0' })));
     }
     static get is() { return "bds-grid"; }
     static get originalStyleUrls() {
@@ -45,7 +45,7 @@ export class BdsGrid {
                         "IGrid": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid/types/index.ts::IGrid",
+                            "id": "src/components/layouts/bds-grid/bds-grid/types/index.ts::IGrid",
                             "referenceLocation": "IGrid"
                         }
                     }
@@ -72,7 +72,7 @@ export class BdsGrid {
                         "IGrid": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid/types/index.ts::IGrid",
+                            "id": "src/components/layouts/bds-grid/bds-grid/types/index.ts::IGrid",
                             "referenceLocation": "IGrid"
                         }
                     }

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

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

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

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

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

@@ -48,7 +48,7 @@ export class BdsGridItem {
         return styles;
     }
     render() {
-        return (h(Host, { key: '3e3465db3dcedd8d2f2cbb6035ff859b45841461', style: this.getHostStyles() }, h("slot", { key: 'db935ab4c60fb1d70df5ba03cbb7ee97944de6fa' })));
+        return (h(Host, { key: '4a50b7d73fa449f56a533e6357f92c039c7b73c7', style: this.getHostStyles() }, h("slot", { key: 'e077c11e511f232ec25456676699c56c4bbcb483' })));
     }
     static get is() { return "bds-grid-item"; }
     static get originalStyleUrls() {
@@ -73,7 +73,7 @@ export class BdsGridItem {
                         "IGridItem": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "id": "src/components/layouts/bds-grid/bds-grid-item/types/index.ts::IGridItem",
                             "referenceLocation": "IGridItem"
                         }
                     }
@@ -100,7 +100,7 @@ export class BdsGridItem {
                         "IGridItem": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "id": "src/components/layouts/bds-grid/bds-grid-item/types/index.ts::IGridItem",
                             "referenceLocation": "IGridItem"
                         }
                     }
@@ -126,7 +126,7 @@ export class BdsGridItem {
                         "IGridItem": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "id": "src/components/layouts/bds-grid/bds-grid-item/types/index.ts::IGridItem",
                             "referenceLocation": "IGridItem"
                         }
                     }
@@ -152,7 +152,7 @@ export class BdsGridItem {
                         "IGridItem": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "id": "src/components/layouts/bds-grid/bds-grid-item/types/index.ts::IGridItem",
                             "referenceLocation": "IGridItem"
                         }
                     }
@@ -178,7 +178,7 @@ export class BdsGridItem {
                         "IGridItem": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "id": "src/components/layouts/bds-grid/bds-grid-item/types/index.ts::IGridItem",
                             "referenceLocation": "IGridItem"
                         }
                     }
@@ -204,7 +204,7 @@ export class BdsGridItem {
                         "IGridItem": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "id": "src/components/layouts/bds-grid/bds-grid-item/types/index.ts::IGridItem",
                             "referenceLocation": "IGridItem"
                         }
                     }
@@ -230,7 +230,7 @@ export class BdsGridItem {
                         "IGridItem": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "id": "src/components/layouts/bds-grid/bds-grid-item/types/index.ts::IGridItem",
                             "referenceLocation": "IGridItem"
                         }
                     }
@@ -256,7 +256,7 @@ export class BdsGridItem {
                         "IGridItem": {
                             "location": "import",
                             "path": "./types",
-                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "id": "src/components/layouts/bds-grid/bds-grid-item/types/index.ts::IGridItem",
                             "referenceLocation": "IGridItem"
                         }
                     }

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

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

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

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

package/dist/collection/components/navigation/bds-breadcrumb/bds-breadcrumb.css

@@ -0,0 +1,21 @@
+@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-breadcrumb__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}