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

package/dist/esm/Keys-7G4h4DI7.js

@@ -0,0 +1,31 @@
+/**
+ * Keyboard key values matching `KeyboardEvent.key` exactly (W3C UI Events spec).
+ * Use in direct `event.key` comparisons and `.set()` bindings.
+ */
+const KEYBOARD = {
+    // Navigation
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
+    Home: 'Home',
+    End: 'End',
+    // Action
+    Enter: 'Enter',
+    Escape: 'Escape',
+    Space: ' ',
+    // Paging
+    PageUp: 'PageUp',
+    PageDown: 'PageDown',
+};
+/**
+ * Modifier key identifiers in lowercase — match `event.key.toLowerCase()`.
+ * Never compared against `event.key` directly; detected via `event.altKey`, `event.ctrlKey`, etc.
+ * Use in `.set()` chord bindings: `.set([KEYBOARD_MODIFIERS.Control, KEYBOARD.ArrowRight], handler)`.
+ */
+const KEYBOARD_MODIFIERS = {
+    Alt: 'alt',
+    Control: 'control',
+    Meta: 'meta'};
+
+export { KEYBOARD as K, KEYBOARD_MODIFIERS as a };

package/dist/esm/Logger-iq2UuV7c.js

@@ -0,0 +1,49 @@
+/**
+ * Default implementation of the logger service.
+ * This class is responsible for logging errors, warnings and messages to the DevTools console.
+ */
+class Logger {
+    /**
+     * Throw a normalized error with the component name and the message.
+     * @param component Is the name of the component that is throwing the error.
+     * @param message Is the message of the error.
+     * @throws Error with the component name and the message.
+     * @example
+     * const logger = new Logger();
+     * logger.error('MyComponent', 'This is an error');
+     * // Throws an error with the message "[MyComponent]: This is an error"
+     */
+    error(component, message) {
+        throw new Error(`[${component}]: ${message}`);
+    }
+    /**
+     * Log a warning with the component name and the message.
+     * @param component Is the name of the component that is throwing the warning.
+     * @param message Is the message of the warning.
+     * @example
+     * const logger = new Logger();
+     * logger.warn('MyComponent', 'This is a warning');
+     * // Logs a warning with the message "[MyComponent]: This is a warning"
+     */
+    warn(component, message) {
+        console.warn(`[${component}]: ${message}`);
+    }
+    /**
+     * Log a message with the component name and the message.
+     * @param component Is the name of the component that is logging the message.
+     * @param message Is the message of the message.
+     * @example
+     * const logger = new Logger();
+     * logger.log('MyComponent', 'This is a message');
+     * // Logs a message with the message "[MyComponent]: This is a message"
+     * @example
+     * const logger = new Logger();
+     * logger.log('MyComponent', 'This is a message');
+     * // Logs a message with the message "[MyComponent]: This is a message"
+     */
+    log(component, message) {
+        console.log(`[${component}]: ${message}`);
+    }
+}
+
+export { Logger as L };

package/dist/esm/{attributes-CaHOghy5.js → attributes-U9yfbs7i.js}

@@ -73,6 +73,9 @@ const ariaAttributes = [
 ];
 const inheritAriaAttributes = (el, ignoreList) => {
     let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
+    }
     return inheritAttributes(el, attributesToInherit);
 };
 

package/dist/esm/bds-avatar.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
-import { a as inheritAriaAttributes } from './attributes-CaHOghy5.js';
+import { a as inheritAriaAttributes } from './attributes-U9yfbs7i.js';
 import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
 
 const AVATAR_VARIANT = {
@@ -78,7 +78,7 @@ const BdsAvatar = class {
         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))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bds-badge.entry.js

@@ -34,7 +34,7 @@ const BdsBadge = class {
         };
     }
     render() {
-        return (h(Host, { key: 'fd04d8986fd170056769871a07f838c3cf200108', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '0186c80b8fbce04a7c96949ca39ecf0319abf352', name: "icon" }), h("slot", { key: 'd79b91a4c5b93280c977dce033e0e05fad2c7524' })));
+        return (h(Host, { key: 'f686ff59037a77660bc82262b9374193dface206', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '5089ac4144f7fdd1023ee3561010859b6b96ef3b', name: "icon" }), h("slot", { key: '44addf6e20aa27f1ed3df4ab728b5a0a37cc2f20' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bds-banner.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-BqJlOB6b.js';
 import { S as STATUS_VARIANT } from './states-Bfazyxqi.js';
-import { i as inheritAttributes, a as inheritAriaAttributes } from './attributes-CaHOghy5.js';
+import { i as inheritAttributes, a as inheritAriaAttributes } from './attributes-U9yfbs7i.js';
 
 const bdsBannerCss = () => `@charset "UTF-8";.bds-banner{position:relative;display:-ms-flexbox;display:flex;border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-info-base);border-radius:var(--boreal-radius-xs);border-left:0;font-family:var(--boreal-typography-font-family-primary);height:100%;-webkit-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out}.bds-banner__vertical-line{width:var(--boreal-spacing-2xs);border-top-left-radius:var(--boreal-radius-xs);border-bottom-left-radius:var(--boreal-radius-xs);background-color:var(--boreal-stroke-info-base)}.bds-banner__container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%;gap:var(--boreal-spacing-xs);padding:var(--boreal-spacing-s)}.bds-banner__content{width:100%}.bds-banner__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md)}.bds-banner__body{padding-top:var(--boreal-spacing-2xs);font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-sm)}.bds-banner__actions{padding-top:var(--boreal-spacing-s);min-height:0px}.bds-banner__actions:empty{display:none}.bds-banner__status-icon{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);margin-top:var(--boreal-spacing-3xs)}.bds-banner__close-icon{background:none;border:none;-ms-flex-item-align:start;align-self:start;font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-neutral-base);cursor:pointer}.bds-banner--info{border-color:var(--boreal-stroke-info-base);background-color:var(--boreal-ui-info-lighter)}.bds-banner--info .bds-banner__vertical-line{background-color:var(--boreal-stroke-info-base)}.bds-banner--info .bds-banner__status-icon{color:var(--boreal-stroke-info-base)}.bds-banner--success{border-color:var(--boreal-stroke-success-base);background-color:var(--boreal-ui-success-lighter)}.bds-banner--success .bds-banner__vertical-line{background-color:var(--boreal-stroke-success-base)}.bds-banner--success .bds-banner__status-icon{color:var(--boreal-stroke-success-base)}.bds-banner--warning{border-color:var(--boreal-stroke-warning);background-color:var(--boreal-ui-warning-lighter)}.bds-banner--warning .bds-banner__vertical-line{background-color:var(--boreal-stroke-warning)}.bds-banner--warning .bds-banner__status-icon{color:var(--boreal-stroke-warning)}.bds-banner--danger{border-color:var(--boreal-stroke-danger-base);background-color:var(--boreal-ui-danger-lighter)}.bds-banner--danger .bds-banner__vertical-line{background-color:var(--boreal-stroke-danger-base)}.bds-banner--danger .bds-banner__status-icon{color:var(--boreal-stroke-danger-base)}.bds-banner--closing{opacity:0}.bds-banner--hidden{display:none}`;
 
@@ -107,7 +107,7 @@ const BdsBanner = class {
         const closeIcon = this.renderCloseIcon();
         const classes = this.getStyles();
         const iconName = this.getIconName();
-        return (h(Host, { key: '1a07d4c50cb16abf16a6202fc0a6453028030c94', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '2fa91a3e46f6660cb80302bc56619c107f3cf1a9' }, h("div", { key: '406c8ce24b6c8d9467f83baea3c521ef823b7ff6', class: "bds-banner__vertical-line" }), h("div", { key: '1a2c84c6480397e179a212056e0d9896a4ffcd5c', class: "bds-banner__container" }, h("div", { key: 'c3a259dae39176720f74fb4961b01166956f8e5c', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '6d24dc0d611b85a0c9f524f29948552607fc124f', "aria-hidden": "true", class: iconName })), h("div", { key: '6c4af02b7d783417cd016c81214ae4ae9a9040ff', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '74d4b78b0e6a058c48d2681b0d49742266f6653d', class: "bds-banner__title" }, h("slot", { key: '65baf563140619dd68ba6da5b1a2e61acfae61e6', name: "title" })), h("div", { key: 'a24a1af35cf217bcdadff0a9c2d3bbef8d21e232', class: "bds-banner__body" }, h("slot", { key: '5ea6dd31fbcf8eb9fd06426a2e98e36c537857b1' })), h("div", { key: '41cc79e73c212e381f8bfca997d62710f94e6ba4', class: "bds-banner__actions" }, h("slot", { key: '0266cc63e42d35a7fcbb836dfe7d11c47f192321', name: "actions" }))), this.closable && closeIcon)))));
+        return (h(Host, { key: 'e5ece2606d360add80831cb5cff99c07bb6fe9a6', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '1f25dabb048e75db7f9b155ed660ee3c07b878e7' }, h("div", { key: '363d11782e11ab9e34c30981653da02d62753611', class: "bds-banner__vertical-line" }), h("div", { key: '256f0e83e848d7e50b851524364314ac8a15f195', class: "bds-banner__container" }, h("div", { key: '3f16aa2ab24f0621e754276032dea90ba7a2fcae', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '1ee1cd86ac8e6fe63d77ab815f3467623e3701bf', "aria-hidden": "true", class: iconName })), h("div", { key: 'b56334ec515aa5036143a21e17ccbab0284edd52', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '454a4dd729fa18675c9db2a8101732688b15d4d7', class: "bds-banner__title" }, h("slot", { key: '06d51ebe3e862210035d98b2ecde35ba9872309f', name: "title" })), h("div", { key: '773524e70efc9e2412c3ca71913cc1f4da80a493', class: "bds-banner__body" }, h("slot", { key: '483f4358227e080db9ee884e6462743042a17bfe' })), h("div", { key: '6180025c2b07adc050d716269f76783f3f8164d2', class: "bds-banner__actions" }, h("slot", { key: '4e45498d447a003859421f98d884f289fc18e084', name: "actions" }))), this.closable && closeIcon)))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bds-breadcrumb-item.entry.js

@@ -0,0 +1,104 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BqJlOB6b.js';
+
+const bdsBreadcrumbItemCss = () => `@charset "UTF-8";bds-breadcrumb-item:last-child li::after{display:none}.bds-breadcrumb-item{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:default}.bds-breadcrumb-item__text{font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-sm);font-family:var(--boreal-typography-font-family-primary)}.bds-breadcrumb-item__collapse-indicator{display:-ms-inline-flexbox;display:inline-flex}.bds-breadcrumb-item:not(.bds-breadcrumb-item--active)::after{content:var(--bds-breadcrumb-separator, "/");margin:0 var(--boreal-spacing-xs);color:var(--boreal-text-disabled);font-weight:normal;line-height:var(--boreal-typography-line-height-sm)}.bds-breadcrumb-item .bds-typography--link:not(:hover){color:var(--boreal-text-default)}.bds-breadcrumb-item--collapsed{display:none}.bds-breadcrumb-item--collapsed .bds-breadcrumb-item__text{display:none}.bds-breadcrumb-item--collapsed::after{display:none}.bds-breadcrumb-item--collapsed:has(.bds-breadcrumb-item__collapse-indicator){display:-ms-inline-flexbox;display:inline-flex}.bds-breadcrumb-item--active{font-weight:var(--boreal-typography-font-weight-semibold)}.bds-breadcrumb-item--active .bds-breadcrumb-item{color:var(--boreal-text-base)}.bds-breadcrumb-item:not(.bds-breadcrumb-item--active){cursor:pointer}`;
+
+const BdsBreadcrumbItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bdsClick = createEvent(this, "bdsClick");
+        this.bdsClickCollapse = createEvent(this, "bdsClickCollapse");
+        /**
+         * Marks this breadcrumb item as the current page.
+         *
+         * When true, the item is non-interactive and has aria-current="page".
+         *
+         * @default false
+         */
+        this.active = false;
+        /**
+         * Enables router-based navigation instead of native link navigation.
+         *
+         * @default false
+         */
+        this.router = false;
+        /**
+         * Internal prop controlled by the parent breadcrumb.
+         * Indicates that this item is part of a collapsed range.
+         *
+         * @default false
+         */
+        this.collapsed = false;
+        /**
+         * Internal prop controlled by the parent breadcrumb.
+         * Renders the collapse indicator ("...") for hidden items.
+         *
+         * @default false
+         */
+        this.showCollapse = false;
+        /**
+         * URL for the breadcrumb link.
+         *
+         * @default ''
+         */
+        this.href = '';
+        /**
+         * Specifies where to open the linked document.
+         *
+         * @default '_self'
+         */
+        this.target = '_self';
+        /**
+         * Enables download behavior for the link.
+         *
+         * @default false
+         */
+        this.downloadable = false;
+        /**
+         * Suggested filename for the downloaded file.
+         *
+         * @default 'filename'
+         */
+        this.filename = 'filename';
+        /**
+         * Relationship between the current document and the linked resource.
+         *
+         * @default ''
+         */
+        this.rel = '';
+    }
+    handleClick(event) {
+        if (this.active) {
+            event.preventDefault();
+            return;
+        }
+        if (this.router)
+            event.preventDefault();
+        this.bdsClick.emit({ element: this.el, href: this.href, router: this.router });
+    }
+    get breadcrumbItem() {
+        return this.href !== '' && !this.active ? (h("bds-typography", { onClick: e => this.handleClick(e), href: this.href, target: this.target, downloadable: this.downloadable, filename: this.filename, rel: this.rel, variant: "link", element: "a", class: "bds-breadcrumb-item__text" }, h("slot", null))) : (h("span", { class: "bds-breadcrumb-item__text", onClick: e => this.handleClick(e) }, h("slot", null)));
+    }
+    handleCollapseClick(e) {
+        e.preventDefault();
+        this.bdsClickCollapse.emit({ element: this.collapsedRef });
+    }
+    get cssClasses() {
+        return {
+            ['bds-breadcrumb-item']: true,
+            ['bds-breadcrumb-item--active']: this.active,
+            ['bds-breadcrumb-item--collapsed']: this.collapsed,
+        };
+    }
+    render() {
+        return (h("li", { key: 'bca5cb70296f745ae669b5cd7f88e8252979fe9b', class: this.cssClasses, "aria-current": this.active ? 'page' : null }, this.breadcrumbItem, this.showCollapse && (h("bds-typography", { key: '9ed493f2a5112d5cf20c0a02d48ea8a8c69eb991', class: "bds-breadcrumb-item bds-breadcrumb-item__collapse-indicator", ref: collapsedEl => (this.collapsedRef = collapsedEl), onClick: e => this.handleCollapseClick(e), onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleCollapseClick(e);
+                }
+            }, variant: "link", element: "a" }, "..."))));
+    }
+    get el() { return getElement(this); }
+};
+BdsBreadcrumbItem.style = bdsBreadcrumbItemCss();
+
+export { BdsBreadcrumbItem as bds_breadcrumb_item };

package/dist/esm/bds-breadcrumb.entry.js

@@ -0,0 +1,125 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BqJlOB6b.js';
+import { a as inheritAriaAttributes } from './attributes-U9yfbs7i.js';
+
+const bdsBreadcrumbCss = () => `@charset "UTF-8";.bds-breadcrumb__list{list-style:none;padding:0;margin:0}`;
+
+const BdsBreadcrumb = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bdsClickCollapsed = createEvent(this, "bdsClickCollapsed");
+        this.bdsClickBreadcrumb = createEvent(this, "bdsClickBreadcrumb");
+        this.inheritedAttributes = {};
+        /**
+         * Separator rendered between breadcrumb items.
+         * @default "/"
+         */
+        this.separator = '/';
+        /**
+         * Maximum number of breadcrumb items visible before collapsing.
+         * If set to 0 or undefined, no collapsing is applied.
+         * @default 0
+         */
+        this.maxItems = 0;
+        /**
+         * Number of items visible at the start before collapse occurs.
+         * @default 1
+         */
+        this.itemsBeforeCollapse = 1;
+        /**
+         * Number of items visible at the end after collapse occurs.
+         * @default 1
+         */
+        this.itemsAfterCollapse = 1;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = { ...inheritAriaAttributes(this.el) };
+        this.handleSlotChange();
+    }
+    onSeparatorChange() {
+        this.applyCustomSeparator();
+    }
+    onMaxItemsChange() {
+        this.updateBreadcrumbCollapse();
+    }
+    onCollapsedClick(ev) {
+        ev.stopPropagation();
+        const breadcrumbs = this.getBreadcrumbItems();
+        const collapsedBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.collapsed);
+        const detail = {
+            element: ev.detail.element,
+            collapsedBreadcrumbs,
+        };
+        this.bdsClickCollapsed.emit(detail);
+    }
+    onBreadcrumbClick(ev) {
+        ev.stopPropagation();
+        const items = this.getBreadcrumbItems();
+        const index = items.indexOf(ev.detail.element);
+        this.bdsClickBreadcrumb.emit({
+            element: ev.detail.element,
+            index,
+            href: ev.detail.href,
+            router: ev.detail.router,
+        });
+    }
+    applyCustomSeparator() {
+        this.el.style.setProperty('--bds-breadcrumb-separator', `"${this.separator}"`);
+    }
+    handleSlotChange() {
+        this.applyCustomSeparator();
+        this.updateBreadcrumbCollapse();
+    }
+    updateBreadcrumbCollapse() {
+        if (!this.shouldCollapse()) {
+            this.showAllItems();
+            return;
+        }
+        const items = this.getBreadcrumbItems();
+        this.applyVisibility(items);
+    }
+    shouldCollapse() {
+        const items = this.getBreadcrumbItems();
+        const maxItems = this.maxItems === this.itemsBeforeCollapse + this.itemsAfterCollapse ? this.maxItems + 1 : this.maxItems;
+        return maxItems > 0 && items.length > maxItems && this.itemsBeforeCollapse + this.itemsAfterCollapse < maxItems;
+    }
+    getBreadcrumbItems() {
+        return Array.from(this.el.querySelectorAll('bds-breadcrumb-item'));
+    }
+    showAllItems() {
+        const items = this.getBreadcrumbItems();
+        items.forEach(item => {
+            item.collapsed = false;
+            item.showCollapse = false;
+        });
+    }
+    applyVisibility(items) {
+        const collapseStart = this.itemsBeforeCollapse;
+        const collapseEnd = items.length - this.itemsAfterCollapse;
+        items.forEach((breadcrumb, index) => {
+            breadcrumb.collapsed = false;
+            breadcrumb.showCollapse = false;
+            if (index >= collapseStart && index < collapseEnd) {
+                breadcrumb.collapsed = true;
+            }
+            const hasCollapsedItems = collapseEnd > collapseStart;
+            if (hasCollapsedItems && index === collapseStart) {
+                breadcrumb.showCollapse = true;
+            }
+        });
+    }
+    render() {
+        return (h("nav", { key: '1a981018c53a8f3a75ff183c519962ff56db45b7', "aria-label": "Breadcrumb navigation", ...this.inheritedAttributes, class: "bds-breadcrumb" }, h("ol", { key: 'b831faa04943ec15f0aba65c497ff550c057b6e2', class: "bds-breadcrumb__list" }, h("slot", { key: 'a43ca3510691046d72777a4e9a25049263104ad3', onSlotchange: () => this.handleSlotChange() }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "separator": [{
+                "onSeparatorChange": 0
+            }],
+        "maxItems": [{
+                "onMaxItemsChange": 0
+            }]
+    }; }
+};
+BdsBreadcrumb.style = bdsBreadcrumbCss();
+
+export { BdsBreadcrumb as bds_breadcrumb };

package/dist/esm/bds-button-group.entry.js

@@ -0,0 +1,114 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { O as ORIENTATIONS } from './orientation-CPvuMm5C.js';
+import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
+import { C as CORE_COLORS } from './coreColors-Dwo1hcd9.js';
+import { B as BUTTON_SIZES, a as BUTTON_VARIANTS } from './enum-DlVzZK7o.js';
+import { a as inheritAriaAttributes } from './attributes-U9yfbs7i.js';
+import { K as KeyboardController } from './KeyboardController-DcnXb5F5.js';
+import { L as Logger } from './Logger-iq2UuV7c.js';
+import './Keys-7G4h4DI7.js';
+
+const bdsButtonGroupCss = () => `@charset "UTF-8";.bds-button-group{display:-ms-inline-flexbox;display:inline-flex;margin:var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);border-radius:var(--boreal-radius-xs);outline:none}.bds-button-group:focus{-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button-group bds-button{position:relative}.bds-button-group bds-button button{margin:0;border-radius:var(--boreal-radius-none);width:100%}.bds-button-group bds-button:hover{z-index:1}.bds-button-group bds-button:focus-within,.bds-button-group bds-button:active{z-index:2}.bds-button-group--horizontal{-ms-flex-direction:row;flex-direction:row;gap:var(--boreal-spacing-4xs)}.bds-button-group--horizontal bds-button:only-child button{border-radius:var(--boreal-radius-xs)}.bds-button-group--horizontal bds-button:first-child:not(:only-child) button{border-radius:var(--boreal-radius-xs) var(--boreal-radius-none) var(--boreal-radius-none) var(--boreal-radius-xs)}.bds-button-group--horizontal bds-button:last-child:not(:only-child) button{border-radius:var(--boreal-radius-none) var(--boreal-radius-xs) var(--boreal-radius-xs) var(--boreal-radius-none)}.bds-button-group--horizontal:has(.bds-button--var-outline){gap:0}.bds-button-group--horizontal:has(.bds-button--var-outline) bds-button:nth-child(n+2){margin-left:calc(-1 * var(--boreal-spacing-4xs))}.bds-button-group--vertical{-ms-flex-direction:column;flex-direction:column;gap:var(--boreal-spacing-4xs)}.bds-button-group--vertical bds-button:only-child button{border-radius:var(--boreal-radius-xs)}.bds-button-group--vertical bds-button:first-child:not(:only-child) button{border-radius:var(--boreal-radius-xs) var(--boreal-radius-xs) var(--boreal-radius-none) var(--boreal-radius-none)}.bds-button-group--vertical bds-button:last-child:not(:only-child) button{border-radius:var(--boreal-radius-none) var(--boreal-radius-none) var(--boreal-radius-xs) var(--boreal-radius-xs)}.bds-button-group--vertical:has(.bds-button--var-outline){gap:0}.bds-button-group--vertical:has(.bds-button--var-outline) bds-button:nth-child(n+2){margin-top:calc(-1 * var(--boreal-spacing-4xs))}`;
+
+const BdsButtonGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inheritedAttributes = {};
+        this.logger = new Logger();
+        this._keyboard = new KeyboardController();
+        /** Controls the size applied to all child `<bds-button>` elements. Accepted values: `'sm'`, `'md'`, `'lg'`. Default is `'md'`. */
+        this.size = BUTTON_SIZES.MEDIUM;
+        /** Controls the layout direction of the grouped buttons. Accepted values: `'horizontal'`, `'vertical'`. Default is `'horizontal'`. */
+        this.orientation = ORIENTATIONS.HORIZONTAL;
+        /** Provides an accessible label for the button group. */
+        this.label = 'Button group';
+        /** Controls the color applied to all child `<bds-button>` elements. Accepted values: see `CoreColors`. Default is `default`. */
+        this.color = CORE_COLORS.DEFAULT;
+        /** Controls the variant applied to all child `<bds-button>` elements. Accepted values: `'default'`, `'outline'`, `'plain'`. Default is `'default'`. */
+        this.variant = BUTTON_VARIANTS.DEFAULT;
+    }
+    /** Validates `size`, `orientation`, `color`, and `variant` prop values on change, falling back to defaults if invalid. */
+    validateProps() {
+        validatePropValue(Object.values(BUTTON_SIZES), BUTTON_SIZES.MEDIUM, this.el, 'size');
+        validatePropValue(Object.values(ORIENTATIONS), ORIENTATIONS.HORIZONTAL, this.el, 'orientation');
+        validatePropValue(Object.values(CORE_COLORS), CORE_COLORS.DEFAULT, this.el, 'color');
+        validatePropValue(Object.values(BUTTON_VARIANTS), BUTTON_VARIANTS.DEFAULT, this.el, 'variant');
+    }
+    /** Propagates `size`, `color` and `variant` to all child `<bds-button>` elements via `setAttribute`. */
+    propagatePropsToButtons() {
+        this.el.querySelectorAll('bds-button').forEach((button) => {
+            button.setAttribute('size', this.size);
+            button.setAttribute('color', this.color);
+            button.setAttribute('variant', this.variant);
+        });
+    }
+    /** Validates props before the first render. */
+    componentWillLoad() {
+        this.validateProps();
+        this.inheritedAttributes = { ...inheritAriaAttributes(this.el) };
+    }
+    /** Warns when non-`<bds-button>` elements are placed in the default slot. */
+    validateSlotContent() {
+        const invalid = Array.from(this.el.children).filter(el => el.tagName.toLowerCase() !== 'bds-button');
+        if (invalid.length > 0) {
+            this.logger.warn('bds-button-group', `Only <bds-button> elements are allowed as children. Found: ${invalid.map(el => `<${el.tagName.toLowerCase()}>`).join(', ')}`);
+        }
+    }
+    /** Propagates initial props to child buttons after the component is mounted. */
+    componentDidLoad() {
+        this.validateSlotContent();
+        this.propagatePropsToButtons();
+        this._setupKeyboard();
+    }
+    disconnectedCallback() {
+        this._keyboard.detach();
+    }
+    get _role() {
+        return this.inheritedAttributes['role'] ?? 'toolbar';
+    }
+    _setupKeyboard() {
+        if (this._role === 'group') {
+            return;
+        }
+        this._keyboard.attach(this.el).setLinearNavigation({
+            items: 'bds-button:not([disabled]) button',
+            orientation: this.orientation,
+            focusStrategy: { type: 'roving-tabindex' },
+            onActivate: () => document.activeElement?.click(),
+        });
+    }
+    /** Builds the CSS class map applied to the host element based `orientation`. */
+    get classMapButtonGroup() {
+        return {
+            'bds-button-group': true,
+            [`bds-button-group--${this.orientation}`]: true,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'ff0a8da321995a4bd1057fd0c866248e48ec5bdf', ...this.inheritedAttributes, role: this._role, tabindex: "-1", class: this.classMapButtonGroup, "aria-orientation": this._role === 'toolbar' ? this.orientation : undefined, "aria-label": this.label }, h("slot", { key: '9e59ad6dd8a6c58da722e17dd6e8b8ff49d8568b' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "size": [{
+                "validateProps": 0
+            }, {
+                "propagatePropsToButtons": 0
+            }],
+        "orientation": [{
+                "validateProps": 0
+            }],
+        "color": [{
+                "validateProps": 0
+            }, {
+                "propagatePropsToButtons": 0
+            }],
+        "variant": [{
+                "validateProps": 0
+            }, {
+                "propagatePropsToButtons": 0
+            }]
+    }; }
+};
+BdsButtonGroup.style = bdsButtonGroupCss();
+
+export { BdsButtonGroup as bds_button_group };