@telesign/boreal-web-components 0.1.0-alpha.5 → 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/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: '5f52a0a9553efa1ec140b9edc4d3d332b9b306bc', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (h("bds-typography", { key: 'eea2b4211cb13cc24baa650239ceca1168933eb5', id: labelId, variant: "label", htmlFor: this._id, required: this.required, tooltipText: this.info !== '' ? this.info : undefined, state: typographyState }, this.label)), h("div", { key: '17d9e4b5f7e0d64a7e6e73200073db9e2d89b601', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (h("span", { key: '5557471fd0b5b49a1bb856ea4c1b901ca96039e6', class: "bds-text-field__sublabel" }, this.icon !== '' && h("em", { key: 'e213979d268b2fce51a0a090b82dff0552515a8c', class: this.icon }), this.sublabel)), h("slot", { key: '828b889037a40e562bf45a4b502988542b815701', name: "prefix" }), h("input", { key: 'b842de768f53b095b65fc60da7a0cfabfbcc87d1', 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: '19ffb36c88f72645969fed69eb8368647ea8071c', class: "bds-text-field__actions" }, showClear && (h("button", { key: '1adbe2d791fa48cbc6d0b9d71bda40f01f77efe4', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, h("em", { key: '72e94a903896a8f0d04569ffb4b692c5fe37c621', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (h("button", { key: '795a85ad395254a8dbac151eb225aeb0d0d9266a', 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: 'e84632218e25422ce5ba64ad6efc40a94310a0c5', class: this.showPasswordIcon })))))), showFooter && (h("div", { key: 'ef98f783b7cd1ccf37d04a209d1bcf4b87ca048a', class: "bds-text-field__footer" }, helperContent !== '' && (h("bds-typography", { key: 'c560b15810400be0710368c089294a6ee51746b1', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (h("span", { key: 'e4f7d33f2e3bf588f30ccb7165a9b385d8f5a8e3', 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/bds-divider.js

@@ -34,7 +34,7 @@ export class BdsDivider {
         this.checkPropValues();
     }
     render() {
-        return h("div", { key: 'd89008b1a2cddddb925ee1e6e7c4cb7110ab6bd1', 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() {

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: '26a86e31e803b5c77f09fda1d9f228e3641f0a53', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '906e9708ac61caa1cbf21a9e8019aadaea010970', class: "bds-avatar__container" }, showIcon && (h("div", { key: 'b2962d2a61a5a6561f5cf7f817c3ca270ba42671', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '44b5aa4c4ea78479b83b2f39121ae767d0304182', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: 'e3b5af88572994fbecfb0bff46d4f6b417c74d16', 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: '52672cc265a59d6556eb4ae677c650b19696dbdc', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, h("slot", { key: '6c0f0b89777a754a91d273838940cd8721b79d5c' })));
+        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: 'e16ec21f8fcabbf3091ed3469a120aaff37f4274', style: this.getHostStyles() }, h("slot", { key: 'b1fa7e071660a4f4f50d9fd31ee9646069678d10' })));
+        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;
+}