@telesign/boreal-web-components 0.1.0-alpha.5 → 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/bds-avatar.entry.js

@@ -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: '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))));
     }
     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

@@ -4,15 +4,18 @@ 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:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-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 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'`. */
@@ -55,6 +58,24 @@ const BdsButtonGroup = class {
     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() {
@@ -64,7 +85,7 @@ const BdsButtonGroup = class {
         };
     }
     render() {
-        return (h(Host, { key: 'c8f201f1b9aa35e8a7f92a096f0d06a3f0918ce6', ...this.inheritedAttributes, tabindex: "-1", class: this.classMapButtonGroup, "aria-orientation": this.orientation, "aria-label": this.label }, h("slot", { key: 'd7b2601d9ae72c0dc79a99f8b1b428966e79c943' })));
+        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 {

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

@@ -3,8 +3,12 @@ import { C as COMPONENT_STATES } from './states-Bfazyxqi.js';
 import { b as BUTTON_TYPES, a as BUTTON_VARIANTS, B as BUTTON_SIZES } from './enum-DlVzZK7o.js';
 import { C as CORE_COLORS } from './coreColors-Dwo1hcd9.js';
 import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
+import { K as KeyboardController, a as KEY_TRIGGERS } from './KeyboardController-DcnXb5F5.js';
+import { K as KEYBOARD } from './Keys-7G4h4DI7.js';
+import './Logger-iq2UuV7c.js';
+import './orientation-CPvuMm5C.js';
 
-const bdsButtonCss = () => `@charset "UTF-8";bds-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.bds-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;margin:var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);outline:none;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-semibold);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;vertical-align:middle}.bds-button .bds-button__content{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-button--is-loading{pointer-events:none;position:relative;color:transparent !important}.bds-button--is-loading::after{position:absolute;content:" ";-webkit-box-sizing:inherit;box-sizing:inherit;-webkit-animation:rotateSpinner 0.5s linear infinite;animation:rotateSpinner 0.5s linear infinite;border-radius:9999px;display:block;height:1em;width:1em;rotate:45deg;left:calc(50% - 0.5em);top:calc(50% - 0.5em);border:3px solid;border-right-color:transparent;border-top-color:transparent}.bds-button--size-sm{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);line-height:var(--boreal-typography-line-height-xs);height:26px}.bds-button--size-sm .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-sm .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-xs)}.bds-button--size-sm .bds-button__content-icon:empty{display:none}.bds-button--size-sm .bds-button__content{}.bds-button--size-sm .bds-button__content-badge:empty{display:none}.bds-button--size-sm .bds-button__content-badge{display:none}.bds-button--size-md{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-sm);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-1xs);line-height:var(--boreal-typography-line-height-sm);height:32px}.bds-button--size-md .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-md .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-sm)}.bds-button--size-md .bds-button__content-icon:empty{display:none}.bds-button--size-md .bds-button__content{}.bds-button--size-md .bds-button__content-badge:empty{display:none}.bds-button--size-lg{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-md);padding:var(--boreal-spacing-xs);line-height:var(--boreal-typography-line-height-md);height:44px}.bds-button--size-lg .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-lg .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-md)}.bds-button--size-lg .bds-button__content-icon:empty{display:none}.bds-button--size-lg .bds-button__content{}.bds-button--size-lg .bds-button__content-badge:empty{display:none}.bds-button.bds-button--var-default.bds-button--default{color:var(--boreal-text-default);background-color:var(--boreal-ui-inverse);border-color:transparent}.bds-button.bds-button--var-default.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-default.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--default:active,.bds-button.bds-button--var-default.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-default.bds-button--primary{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-primary-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--primary:hover{background-color:var(--boreal-ui-primary-dark);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-default.bds-button--primary:focus{background-color:var(--boreal-ui-primary-base);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--primary:active,.bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-dark);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-primary-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-default.bds-button--success{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-success-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--success:hover{background-color:var(--boreal-ui-success-dark);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-default.bds-button--success:focus{background-color:var(--boreal-ui-success-base);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--success:active,.bds-button.bds-button--var-default.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-dark);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-success-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-default.bds-button--error{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-danger-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--error:hover{background-color:var(--boreal-ui-danger-dark);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-default.bds-button--error:focus{background-color:var(--boreal-ui-danger-base);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--error:active,.bds-button.bds-button--var-default.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-dark);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-danger-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-outline{background-color:transparent}.bds-button.bds-button--var-outline.bds-button--default{color:var(--boreal-text-default);background-color:transparent;border-color:var(--boreal-stroke-default-light)}.bds-button.bds-button--var-outline.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-outline.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--default:active,.bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-default-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-outline.bds-button--primary{color:var(--boreal-text-primary-base);background-color:transparent;border-color:var(--boreal-ui-primary-base)}.bds-button.bds-button--var-outline.bds-button--primary:hover{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-outline.bds-button--primary:focus{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--primary:active,.bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-primary-light);background-color:transparent;border-color:var(--boreal-stroke-primary-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-primary-light);border-bottom-color:var(--boreal-text-primary-light)}.bds-button.bds-button--var-outline.bds-button--success{color:var(--boreal-text-success-base);background-color:transparent;border-color:var(--boreal-stroke-success-base)}.bds-button.bds-button--var-outline.bds-button--success:hover{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-outline.bds-button--success:focus{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--success:active,.bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-success-light);background-color:transparent;border-color:var(--boreal-stroke-success-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-success-light);border-bottom-color:var(--boreal-text-success-light)}.bds-button.bds-button--var-outline.bds-button--error{color:var(--boreal-text-danger-base);background-color:transparent;border-color:var(--boreal-stroke-danger-base)}.bds-button.bds-button--var-outline.bds-button--error:hover{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-outline.bds-button--error:focus{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--error:active,.bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-danger-light);background-color:transparent;border-color:var(--boreal-stroke-danger-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-danger-light);border-bottom-color:var(--boreal-text-danger-light)}.bds-button.bds-button--var-plain{background-color:transparent}.bds-button.bds-button--var-plain.bds-button--default{color:var(--boreal-text-default);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-plain.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-plain.bds-button--default:active,.bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-plain.bds-button--primary{color:var(--boreal-text-primary-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--primary:hover{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-plain.bds-button--primary:focus{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-plain.bds-button--primary:active,.bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-primary-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-primary-light);border-bottom-color:var(--boreal-text-primary-light)}.bds-button.bds-button--var-plain.bds-button--success{color:var(--boreal-text-success-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--success:hover{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-plain.bds-button--success:focus{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-plain.bds-button--success:active,.bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-success-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-success-light);border-bottom-color:var(--boreal-text-success-light)}.bds-button.bds-button--var-plain.bds-button--error{color:var(--boreal-text-danger-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--error:hover{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-button.bds-button--var-plain.bds-button--error:focus{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-button.bds-button--var-plain.bds-button--error:active,.bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-danger-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-danger-light);border-bottom-color:var(--boreal-text-danger-light)}@-webkit-keyframes rotateSpinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateSpinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+const bdsButtonCss = () => `@charset "UTF-8";bds-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.bds-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;margin:var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);outline:none;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-semibold);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;vertical-align:middle}.bds-button .bds-button__content{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-button--is-loading{pointer-events:none;position:relative;color:transparent !important}.bds-button--is-loading::after{position:absolute;content:" ";-webkit-box-sizing:inherit;box-sizing:inherit;-webkit-animation:rotateSpinner 0.5s linear infinite;animation:rotateSpinner 0.5s linear infinite;border-radius:9999px;display:block;height:1em;width:1em;rotate:45deg;left:calc(50% - 0.5em);top:calc(50% - 0.5em);border:3px solid;border-right-color:transparent;border-top-color:transparent}.bds-button--size-sm{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);line-height:var(--boreal-typography-line-height-xs);height:26px}.bds-button--size-sm .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-sm .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-xs)}.bds-button--size-sm .bds-button__content-icon:empty{display:none}.bds-button--size-sm .bds-button__content{}.bds-button--size-sm .bds-button__content-badge:empty{display:none}.bds-button--size-sm .bds-button__content-badge{display:none}.bds-button--size-md{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-sm);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-1xs);line-height:var(--boreal-typography-line-height-sm);height:32px}.bds-button--size-md .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-md .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-sm)}.bds-button--size-md .bds-button__content-icon:empty{display:none}.bds-button--size-md .bds-button__content{}.bds-button--size-md .bds-button__content-badge:empty{display:none}.bds-button--size-lg{border-radius:var(--boreal-radius-xs);font-size:var(--boreal-typography-font-size-md);padding:var(--boreal-spacing-xs);line-height:var(--boreal-typography-line-height-md);height:44px}.bds-button--size-lg .bds-button__content{padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs)}.bds-button--size-lg .bds-button__content-icon{display:-ms-flexbox;display:flex;font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-md)}.bds-button--size-lg .bds-button__content-icon:empty{display:none}.bds-button--size-lg .bds-button__content{}.bds-button--size-lg .bds-button__content-badge:empty{display:none}.bds-button.bds-button--var-default.bds-button--default{color:var(--boreal-text-default);background-color:var(--boreal-ui-inverse);border-color:transparent}.bds-button.bds-button--var-default.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-default.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--default:active,.bds-button.bds-button--var-default.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-default.bds-button--primary{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-primary-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--primary:hover{background-color:var(--boreal-ui-primary-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-default.bds-button--primary:focus{background-color:var(--boreal-ui-primary-base);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--primary:active,.bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-primary-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-default.bds-button--success{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-success-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--success:hover{background-color:var(--boreal-ui-success-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-default.bds-button--success:focus{background-color:var(--boreal-ui-success-base);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--success:active,.bds-button.bds-button--var-default.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-success-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-default.bds-button--error{color:var(--boreal-text-inverse);background-color:var(--boreal-ui-danger-base);border-color:transparent}.bds-button.bds-button--var-default.bds-button--error:hover{background-color:var(--boreal-ui-danger-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-default.bds-button--error:focus{background-color:var(--boreal-ui-danger-base);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--error:active,.bds-button.bds-button--var-default.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-dark);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-inverse);background-color:var(--boreal-ui-danger-light);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-inverse);border-bottom-color:var(--boreal-text-inverse)}.bds-button.bds-button--var-outline{background-color:transparent}.bds-button.bds-button--var-outline.bds-button--default{color:var(--boreal-text-default);background-color:transparent;border-color:var(--boreal-stroke-default-light)}.bds-button.bds-button--var-outline.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-outline.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--default:active,.bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-default-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-outline.bds-button--primary{color:var(--boreal-text-primary-base);background-color:transparent;border-color:var(--boreal-ui-primary-base)}.bds-button.bds-button--var-outline.bds-button--primary:hover{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-outline.bds-button--primary:focus{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--primary:active,.bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-primary-light);background-color:transparent;border-color:var(--boreal-stroke-primary-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-primary-light);border-bottom-color:var(--boreal-text-primary-light)}.bds-button.bds-button--var-outline.bds-button--success{color:var(--boreal-text-success-base);background-color:transparent;border-color:var(--boreal-stroke-success-base)}.bds-button.bds-button--var-outline.bds-button--success:hover{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-outline.bds-button--success:focus{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--success:active,.bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-success-light);background-color:transparent;border-color:var(--boreal-stroke-success-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-success-light);border-bottom-color:var(--boreal-text-success-light)}.bds-button.bds-button--var-outline.bds-button--error{color:var(--boreal-text-danger-base);background-color:transparent;border-color:var(--boreal-stroke-danger-base)}.bds-button.bds-button--var-outline.bds-button--error:hover{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-outline.bds-button--error:focus{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--error:active,.bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-danger-light);background-color:transparent;border-color:var(--boreal-stroke-danger-light);-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-danger-light);border-bottom-color:var(--boreal-text-danger-light)}.bds-button.bds-button--var-plain{background-color:transparent}.bds-button.bds-button--var-plain.bds-button--default{color:var(--boreal-text-default);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--default:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-plain.bds-button--default:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-plain.bds-button--default:active,.bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-disabled);background-color:var(--boreal-ui-inverse);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading::after{border-left-color:var(--boreal-text-disabled);border-bottom-color:var(--boreal-text-disabled)}.bds-button.bds-button--var-plain.bds-button--primary{color:var(--boreal-text-primary-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--primary:hover{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-plain.bds-button--primary:focus{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-plain.bds-button--primary:active,.bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active{background-color:var(--boreal-ui-primary-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-primary-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading::after{border-left-color:var(--boreal-text-primary-light);border-bottom-color:var(--boreal-text-primary-light)}.bds-button.bds-button--var-plain.bds-button--success{color:var(--boreal-text-success-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--success:hover{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-plain.bds-button--success:focus{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-plain.bds-button--success:active,.bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active{background-color:var(--boreal-ui-success-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-success-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading::after{border-left-color:var(--boreal-text-success-light);border-bottom-color:var(--boreal-text-success-light)}.bds-button.bds-button--var-plain.bds-button--error{color:var(--boreal-text-danger-base);background-color:transparent;border-color:transparent}.bds-button.bds-button--var-plain.bds-button--error:hover{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-button.bds-button--var-plain.bds-button--error:focus{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-button.bds-button--var-plain.bds-button--error:active,.bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active{background-color:var(--boreal-ui-danger-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled,.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading{cursor:not-allowed;color:var(--boreal-text-danger-light);background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading::after{border-left-color:var(--boreal-text-danger-light);border-bottom-color:var(--boreal-text-danger-light)}@-webkit-keyframes rotateSpinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateSpinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
 
 const BdsButton = class {
     constructor(hostRef) {
@@ -17,6 +21,7 @@ const BdsButton = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        this._keyboard = new KeyboardController();
         /** State to manage states */
         this.currentState = COMPONENT_STATES.DEFAULT;
         /* Props to manage the button attributes */
@@ -40,10 +45,14 @@ const BdsButton = class {
         this.disclosure = false;
         /** Event for listen keydown from button, make navigation easier */
         this.handleKeyDown = (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                this.currentState = COMPONENT_STATES.ACTIVE;
-                event.preventDefault();
-                this.handleClick(event);
+            this.currentState = COMPONENT_STATES.ACTIVE;
+            if (this.disabled || this.loading)
+                return;
+            if (this.type === BUTTON_TYPES.SUBMIT || this.type === BUTTON_TYPES.RESET) {
+                this.processFormClick();
+            }
+            else {
+                this.bdsClick.emit(event);
             }
         };
         /** reset status on keyup */
@@ -56,6 +65,8 @@ const BdsButton = class {
             event.stopPropagation();
             if (this.disabled || this.loading)
                 return;
+            if (event.detail === 0)
+                return;
             if (this.type === BUTTON_TYPES.SUBMIT || this.type === BUTTON_TYPES.RESET) {
                 this.processFormClick();
             }
@@ -78,6 +89,19 @@ const BdsButton = class {
     /** After component rendered */
     componentDidLoad() {
         this.setupFormAssociation();
+        this.setupKeyboard();
+    }
+    /** Bind keyboard events through KeyboardController. */
+    setupKeyboard() {
+        this._keyboard
+            .attach(this.el)
+            .set([KEYBOARD.Enter, KEYBOARD.Space], (event) => {
+            if (event.type === KEY_TRIGGERS.KEYDOWN)
+                this.handleKeyDown(event);
+            else
+                this.handleKeyUp();
+        }, { triggers: [KEY_TRIGGERS.KEYDOWN, KEY_TRIGGERS.KEYUP], preventDefault: false })
+            .onFocusOut(this.handleKeyUp);
     }
     /** Select closest form or internal form from ElementInternals */
     setupFormAssociation() {
@@ -108,6 +132,9 @@ const BdsButton = class {
         }
         return;
     }
+    disconnectedCallback() {
+        this._keyboard.detach();
+    }
     /* Method to get the class map for the button based on the props */
     get getClassMap() {
         return {
@@ -122,7 +149,7 @@ const BdsButton = class {
     }
     /* render button depends on variant */
     render() {
-        return (h("button", { key: 'e1b3c4e0ae8662427a037f861cd57050051cc80a', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, h("div", { key: '24e37c5a359e19163411ab5ed7028eaa84caa2e5', class: "bds-button__content" }, h("span", { key: '90f4956274656c46ca43f7a903c9947d89367aba', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: 'd4a5344f9e3ebd5279b5e25a8f1982d523e6d2b8', name: "icon" })), h("slot", { key: '14b26b5e5f3bbabb1b88596b721f7ea864df1b15' }), h("span", { key: '34cb88da064a6c74596a4bb477fb0a9d6880b391', class: "bds-button__content-badge" }, h("slot", { key: '00775c4a742d49ca7f23d7dbe061f4333ed43907', name: "badge" })), this.disclosure && (h("span", { key: '0b959969969cf4c5a651b6c1488d35b1d0ec9b7b', class: "bds-button__content-icon" }, h("i", { key: '316154f31f1f57b67e126d407b3596c60f532b1a', class: "bds-icon-chevron-down" }))))));
+        return (h("button", { key: 'c79564584911edae6ec1cafeb98cc3df848bf70c', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyUp: this.handleKeyUp }, h("div", { key: '75b3061a16259a504177bf8824cfa9f236a72411', class: "bds-button__content" }, h("span", { key: '53d81ba990237be2c48f98d4d9e995d5a7330cdc', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '6cebb89369396fc34480821720fa6da635409563', name: "icon" })), h("slot", { key: '237237e29f08ee510cd95bafbd481f3856f1b08f' }), h("span", { key: '67c515f4faaac368d0bcdf20ef64a6717cfda3be', class: "bds-button__content-badge" }, h("slot", { key: 'd0e6fc25d95ba960e4b3b3940321a4221769e8ad', name: "badge" })), this.disclosure && (h("span", { key: 'ffae85e8d38481098323ee36549596bfb61e5b4a', class: "bds-button__content-icon" }, h("i", { key: '633b27a4306ba7c159f15eac9e5b9e712e19cbe0', class: "bds-icon-chevron-down" }))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -0,0 +1,117 @@
+import { M as Mixin, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { f as formAssociatedMixin } from './form-associated.mixin-C4HM8wQe.js';
+import { u as useFormCheckbox } from './checkbox-form-association-cgdh1LO-.js';
+
+const bdsCheckboxButtonCss = () => `@charset "UTF-8";.bds-checkbox-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--boreal-spacing-2xs);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-s);border:1px solid transparent;border-radius:var(--boreal-radius-s);background-color:var(--boreal-ui-default-base);color:var(--boreal-text-default);cursor:pointer;outline:none;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-checkbox-button input[type=checkbox],.bds-checkbox-button input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-checkbox-button [slot=icon]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-checkbox-button:hover:not(.bds-checkbox-button--disabled):not(.bds-checkbox-button--checked):not(.bds-checkbox-button--error){background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-checkbox-button:focus-visible,.bds-checkbox-button:focus{z-index:1;background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus);outline:none}.bds-checkbox-button:active:not(.bds-checkbox-button--disabled):not(.bds-checkbox-button--checked):not(.bds-checkbox-button--error){z-index:1;background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-checkbox-button--checked{background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-primary-base);color:var(--boreal-text-primary-base)}.bds-checkbox-button--checked:hover,.bds-checkbox-button--checked:focus-visible,.bds-checkbox-button--checked:focus,.bds-checkbox-button--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-checkbox-button--error{background-color:var(--boreal-ui-inverse);color:var(--boreal-text-danger-base)}.bds-checkbox-button--error:hover,.bds-checkbox-button--error:focus-visible,.bds-checkbox-button--error:focus,.bds-checkbox-button--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-checkbox-button--error.bds-checkbox-button--checked{border-color:var(--boreal-stroke-danger-base)}.bds-checkbox-button--disabled{cursor:not-allowed;pointer-events:none;background-color:var(--boreal-ui-inverse);color:var(--boreal-text-disabled)}.bds-checkbox-button--disabled.bds-checkbox-button--checked{border-color:var(--boreal-stroke-primary-light);color:var(--boreal-text-primary-light)}.bds-checkbox-button__label{font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.bds-checkbox-button__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-checkbox-button__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-checkbox-button__icon:empty{display:none}.bds-checkbox-button__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}`;
+
+const BdsCheckboxButton = class extends Mixin(formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+        this.bdsChange = createEvent(this, "bdsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.isDisabled = false;
+        this.isInvalid = false;
+        /** Name of the form control, submitted as a key in the form data. */
+        this.name = '';
+        /** Disables the button, preventing interaction. Propagated by `bds-checkbox-group` when the group is disabled. */
+        this.disabled = false;
+        /** Marks this button as required for form submission. Has no effect when used inside `bds-checkbox-group`. */
+        this.required = false;
+        /** Toggle state of this button. Flips on every interaction when not disabled. */
+        this.checked = false;
+        /** Shows error styling on the button. */
+        this.error = false;
+        /** Value associated with this button; submitted with form data when checked. */
+        this.value = 'on';
+        /** Label text displayed inside the button. Falls back to the default slot when empty. */
+        this.label = '';
+        /** Tooltip text shown on an info icon next to the label. */
+        this.info = '';
+        this.formCheckbox = useFormCheckbox(this, this.value);
+        this.handleClick = () => this.toggle();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.toggle();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.isDisabled = this.disabled;
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
+    }
+    onCheckedChange() {
+        this.formCheckbox.syncFormValue();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    formAssociatedCallback() {
+        this.formCheckbox.formAssociatedCallback();
+    }
+    formResetCallback() {
+        this.formCheckbox.formResetCallback();
+    }
+    formStateRestoreCallback(state) {
+        this.formCheckbox.formStateRestoreCallback(state);
+    }
+    formDisabledCallback(disabled) {
+        this.formCheckbox.formDisabledCallback(disabled);
+    }
+    handleInvalid(event) {
+        event.preventDefault();
+        this.isInvalid = true;
+    }
+    /** Returns whether this button satisfies its validation constraints. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** Reports validity to the user, showing native validation UI if invalid. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.checked = !this.checked;
+        this.bdsChange.emit({ checked: this.checked, value: this.value });
+        this.valueChange.emit(this.checked);
+    }
+    get isError() {
+        return (this.error && !this.isDisabled) || this.isInvalid;
+    }
+    get classMap() {
+        return {
+            'bds-checkbox-button': true,
+            'bds-checkbox-button--checked': this.checked,
+            'bds-checkbox-button--error': this.isError,
+            'bds-checkbox-button--disabled': this.isDisabled,
+        };
+    }
+    render() {
+        return (h(Host, { key: '39d1432637929a38909bb0d3a768619d27af09c1', class: this.classMap, role: "checkbox", "aria-checked": `${this.checked}`, "aria-disabled": this.isDisabled ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-invalid": this.isError ? 'true' : null, tabIndex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", { key: 'fdd48deeb69445ecdde9cb2ce3556a3f07286602', type: "checkbox", value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '96783bbf11a64262b8ebe88487cd2cc16f4d4263', class: "bds-checkbox-button__icon" }, h("slot", { key: 'de45f31aa9a6774f33a36c6238380014be066d50', name: "icon" })), h("span", { key: '9f94a920639d50a6949bf5272bc6fe6057701bee', class: "bds-checkbox-button__label" }, this.label || h("slot", { key: '8fb82d43c376371110a24a0310a15a7911f42964' })), this.info && (h("span", { key: '9f128d14a257bae34ab64be3e1b76b1ccfce295b', class: "bds-checkbox-button__info" }, h("span", { key: 'b3baa9bf7172810a8d5971d9e58939de24861da8', class: "bds-checkbox-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: 'bea872bace0b177316103002f7a3d17ac65fb951' }, this.info)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "checked": [{
+                "onCheckedChange": 0
+            }],
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+BdsCheckboxButton.style = bdsCheckboxButtonCss();
+
+export { BdsCheckboxButton as bds_checkbox_button };