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

package/dist/cjs/{form-associated.mixin-DXwvF_vW.js → internals-D8x7GMfR.js}

@@ -80,36 +80,5 @@ function runValidators(internals, validators, el) {
     return valid;
 }
 
-/**
- * Shared base mixin for Form-Associated Custom Elements in Boreal DS.
- *
- * Provides `formDisabledCallback` — the only behavior that is identical across
- * all FACE components. It writes to the component's `isDisabled` state, which
- * each component must declare as `@State() private isDisabled: boolean = false`.
- *
- * Each component must declare directly on its class body:
- * - `@AttachInternals() internals!: ElementInternals`
- * - `@Prop({ reflect: true }) readonly name!: string`
- * - `@Prop({ reflect: true }) readonly disabled: boolean = false`
- * - `@Prop({ reflect: true }) readonly required: boolean = false`
- * - `@State() private isDisabled: boolean = false`
- * - `@Watch('disabled') onDisabledChange(next: boolean) { this.isDisabled = next; }`
- *
- * Stencil's compiler requires `@Prop` and `@State` decorators to be statically
- * visible on the component class — they cannot be inherited from a mixin.
- *
- * Components must also implement `IFormControl<T>` for value registration,
- * reset, state restoration, and 2-way binding event emission.
- */
-const formAssociatedMixin = (Base) => {
-    class FormAssociated extends Base {
-        formDisabledCallback(disabled) {
-            this.isDisabled = disabled;
-        }
-    }
-    return FormAssociated;
-};
-
-exports.formAssociatedMixin = formAssociatedMixin;
 exports.runValidators = runValidators;
 exports.setFormValue = setFormValue;

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bds-list-menu-item.cjs",[[772,"bds-list-menu-item",{"variant":[513],"name":[1],"disabled":[516],"selected":[516],"value":[513],"activeItem":[516,"active-item"],"href":[1],"newTab":[4,"new-tab"],"download":[1],"currentState":[32]},null,{"variant":[{"checkPropsVariant":0}]}]]],["bds-text-field.cjs",[[836,"bds-text-field",{"name":[513],"disabled":[516],"required":[516],"value":[1537],"error":[516],"errorMessage":[1,"error-message"],"customValidators":[16],"validationTiming":[1,"validation-timing"],"type":[513],"variant":[513],"placeholder":[1],"readOnly":[4,"readonly"],"autocomplete":[1],"pattern":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"label":[1],"sublabel":[1],"icon":[1],"helperText":[1,"helper-text"],"info":[1],"clearable":[4],"clearOnHover":[4,"clear-on-hover"],"charCount":[2,"char-count"],"counter":[4],"customWidth":[1,"custom-width"],"isDisabled":[32],"focused":[32],"showPassword":[32],"touched":[32],"dirty":[32],"currentCharCount":[32],"validationError":[32],"validationMessage":[32],"checkValidity":[64],"reportValidity":[64]},null,{"disabled":[{"onDisabledChange":0}],"type":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"validationTiming":[{"checkPropValues":0}],"customValidators":[{"onCustomValidatorsChange":0}],"value":[{"onValueChange":0}]}]]],["bds-toggle.cjs",[[576,"bds-toggle",{"name":[513],"disabled":[516],"required":[516],"info":[1],"error":[516],"errorMessage":[513,"error-message"],"checked":[516],"placement":[513],"label":[513],"helperText":[513,"helper-text"],"value":[1],"isDisabled":[32],"validationError":[32],"validationMessage":[32],"isChecked":[32]},null,{"checked":[{"onCheckedChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["bds-dialog.cjs",[[772,"bds-dialog",{"active":[1540],"preventClose":[4,"prevent-close"],"height":[1],"width":[1],"layout":[1],"contentPadding":[1,"content-padding"],"backdropClose":[4,"backdrop-close"],"escapeClose":[4,"escape-close"],"size":[1],"variant":[1],"titleDialog":[1,"title-dialog"],"maximizable":[4],"closable":[4],"open":[64],"close":[64]},null,{"active":[{"handleIsOpenChange":0}]}]]],["bds-popover.cjs",[[772,"bds-popover",{"floatingOptions":[16],"disabled":[4],"width":[8],"header":[4],"footer":[4],"closable":[4],"isVisible":[32]}]]],["bds-avatar.cjs",[[0,"bds-avatar",{"username":[1],"variant":[1],"background":[1],"initialsColor":[1,"initials-color"]}]]],["bds-badge.cjs",[[260,"bds-badge",{"variant":[1],"disabled":[4]},null,{"variant":[{"checkPropValues":0}]}]]],["bds-banner.cjs",[[260,"bds-banner",{"variant":[1],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"isClosing":[32],"isOpen":[32],"open":[64],"close":[64]}]]],["bds-checkbox.cjs",[[836,"bds-checkbox",{"name":[513],"disabled":[516],"required":[516],"checked":[1540],"indeterminate":[1540],"error":[516],"value":[1],"label":[1],"isDisabled":[32]},null,{"checked":[{"onCheckedChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["bds-divider.cjs",[[0,"bds-divider",{"orientation":[513]},null,{"orientation":[{"checkPropValues":0}]}]]],["bds-flag.cjs",[[0,"bds-flag",{"alignFlag":[1,"align-flag"],"callSign":[4,"call-sign"],"country":[1],"customFlags":[16],"identifier":[1],"label":[4],"shape":[1],"shortName":[4,"short-name"]},null,{"alignFlag":[{"checkPropValues":0}],"identifier":[{"checkPropValues":0}],"shape":[{"checkPropValues":0}]}]]],["bds-grid.cjs",[[260,"bds-grid",{"layout":[1],"rowGap":[1,"row-gap"]},null,{"layout":[{"checkPropValues":0}]}]]],["bds-grid-item.cjs",[[260,"bds-grid-item",{"colSpan":[520,"col-span"],"colSpanSm":[520,"col-span-sm"],"colSpanMd":[520,"col-span-md"],"colSpanLg":[520,"col-span-lg"],"colSpanXl":[520,"col-span-xl"],"colSpan2xl":[520,"col-span-2xl"],"rowSpan":[520,"row-span"],"offset":[514]},null,{"colSpan":[{"checkPropValues":0}],"colSpanSm":[{"checkPropValues":0}],"colSpanMd":[{"checkPropValues":0}],"colSpanLg":[{"checkPropValues":0}],"colSpanXl":[{"checkPropValues":0}],"colSpan2xl":[{"checkPropValues":0}],"rowSpan":[{"checkPropValues":0}],"offset":[{"checkPropValues":0}]}]]],["bds-list-menu.cjs",[[260,"bds-list-menu",{"multiple":[4],"menuRole":[1,"menu-role"],"selectedValues":[32],"getSelectedValues":[64],"setSelectedValues":[64]},[[0,"bdsSelect","handleItemClick"]]]]],["bds-spinner.cjs",[[0,"bds-spinner",{"size":[1],"label":[1]},null,{"size":[{"checkPropValues":0}]}]]],["bds-status.cjs",[[260,"bds-status",{"state":[1],"indicator":[1]},null,{"state":[{"checkPropValues":0}],"indicator":[{"checkPropValues":0}]}]]],["bds-tag.cjs",[[260,"bds-tag",{"multiselect":[4],"selected":[4],"closeButtonLabel":[1,"close-button-label"],"color":[1],"readonly":[4],"disabled":[4],"internalSelected":[32]},null,{"color":[{"checkPropValues":0}],"selected":[{"syncSelectedFromProp":0}]}]]],["bds-button.cjs",[[324,"bds-button",{"label":[1],"disabled":[4],"name":[1],"type":[1],"color":[1],"variant":[1],"size":[1],"loading":[4],"disclosure":[4],"currentState":[32]},null,{"type":[{"checkPropValues":0}],"color":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"size":[{"checkPropValues":0}]}]]],["bds-tooltip_2.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"required":[516],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"downloadable":[4],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}],[772,"bds-tooltip",{"multiline":[4],"disabled":[4],"floatingOptions":[16],"isVisible":[32]}]]]], options);
+  return index.bootstrapLazy(JSON.parse("[[\"bds-checkbox-group.cjs\",[[836,\"bds-checkbox-group\",{\"disabled\":[516],\"error\":[516],\"errorMessage\":[1,\"error-message\"],\"helperText\":[1,\"helper-text\"],\"info\":[1],\"label\":[1],\"name\":[513],\"orientation\":[513],\"required\":[516],\"type\":[513],\"value\":[1040],\"joined\":[516],\"isDisabled\":[32],\"isInvalid\":[32],\"checkValidity\":[64],\"reportValidity\":[64]},[[2,\"bdsChange\",\"handleCheckboxChange\"],[0,\"invalid\",\"handleInvalid\"],[2,\"valueChange\",\"handleValueChange\"]],{\"joined\":[{\"onJoinedChange\":0}],\"orientation\":[{\"checkPropValues\":0}],\"disabled\":[{\"onDisabledChange\":0}],\"error\":[{\"onErrorChange\":0}],\"isInvalid\":[{\"onErrorChange\":0}],\"value\":[{\"onValuesChange\":0}]}]]],[\"bds-list-menu.cjs\",[[260,\"bds-list-menu\",{\"selectionMode\":[1,\"selection-mode\"],\"menuRole\":[513,\"menu-role\"],\"selectControls\":[4,\"select-controls\"],\"empty\":[516],\"checkable\":[4],\"emptyText\":[1,\"empty-text\"],\"selectedValues\":[32],\"getSelectedValues\":[64],\"setSelectedValues\":[64],\"getAllItems\":[64]},[[0,\"bdsSelectItem\",\"handleItemClick\"]],{\"selectionMode\":[{\"checkProps\":0}],\"menuRole\":[{\"checkProps\":0}]}]]],[\"bds-list-menu-item.cjs\",[[772,\"bds-list-menu-item\",{\"variant\":[513],\"name\":[1],\"disabled\":[516],\"selected\":[516],\"value\":[513],\"checkable\":[516],\"activeItem\":[516,\"active-item\"],\"href\":[1],\"newTab\":[4,\"new-tab\"],\"download\":[1],\"currentState\":[32],\"boxChecked\":[32]},null,{\"variant\":[{\"checkPropsVariant\":0}],\"selected\":[{\"handleSelectedChange\":0}]}]]],[\"bds-radio-group.cjs\",[[836,\"bds-radio-group\",{\"disabled\":[516],\"error\":[516],\"errorMessage\":[1,\"error-message\"],\"helperText\":[1,\"helper-text\"],\"info\":[1],\"label\":[1],\"name\":[513],\"orientation\":[513],\"required\":[516],\"type\":[513],\"value\":[1025],\"joined\":[516],\"isDisabled\":[32],\"isInvalid\":[32],\"checkValidity\":[64],\"reportValidity\":[64]},[[0,\"bdsChange\",\"handleRadioChange\"],[0,\"invalid\",\"handleInvalid\"]],{\"joined\":[{\"onJoinedChange\":0}],\"orientation\":[{\"checkPropValues\":0}],\"disabled\":[{\"onDisabledChange\":0}],\"error\":[{\"onErrorChange\":0}],\"value\":[{\"onValueChange\":0}]}]]],[\"bds-breadcrumb-item.cjs\",[[260,\"bds-breadcrumb-item\",{\"active\":[4],\"router\":[4],\"collapsed\":[4],\"showCollapse\":[4,\"show-collapse\"],\"href\":[1],\"target\":[1],\"downloadable\":[4],\"filename\":[1],\"rel\":[1]}]]],[\"bds-checkbox-card.cjs\",[[836,\"bds-checkbox-card\",{\"name\":[513],\"disabled\":[516],\"required\":[516],\"value\":[513],\"label\":[1],\"checked\":[1540],\"indeterminate\":[516],\"error\":[516],\"isDisabled\":[32],\"isInvalid\":[32],\"isIndeterminate\":[32],\"checkValidity\":[64],\"reportValidity\":[64]},[[0,\"invalid\",\"handleInvalid\"]],{\"disabled\":[{\"onDisabledChange\":0}],\"indeterminate\":[{\"onIndeterminateChange\":0}],\"checked\":[{\"onCheckedChange\":0}]}]]],[\"bds-radio-card.cjs\",[[260,\"bds-radio-card\",{\"value\":[513],\"info\":[1],\"name\":[1],\"label\":[1],\"checked\":[1540],\"disabled\":[516],\"error\":[516]}]]],[\"bds-select.cjs\",[[260,\"bds-select\",{\"value\":[1537],\"searchable\":[4],\"name\":[1],\"valueString\":[32],\"popoverVisible\":[32]},null,{\"popoverVisible\":[{\"watchPopoverVisible\":0}],\"value\":[{\"watchValue\":0}],\"valueString\":[{\"watchValueString\":0}]}]]],[\"bds-slider.cjs\",[[576,\"bds-slider\",{\"min\":[514],\"max\":[514],\"type\":[513],\"label\":[513],\"step\":[514],\"showLimits\":[516,\"show-limits\"],\"value\":[1],\"disabled\":[516],\"name\":[513],\"disabledHandlers\":[513,\"disabled-handlers\"],\"discrete\":[516],\"tooltip\":[513],\"isDisabled\":[32],\"isDiscrete\":[32],\"internalValues\":[32],\"getValues\":[64],\"setValues\":[64]},null,{\"disabled\":[{\"onDisabledChange\":0}],\"disabledHandlers\":[{\"onDisabledHandlersChange\":0}],\"value\":[{\"onValueChange\":0}],\"type\":[{\"onConfigChange\":0}],\"discrete\":[{\"onConfigChange\":0}],\"min\":[{\"onRangeChange\":0}],\"max\":[{\"onRangeChange\":0}],\"step\":[{\"onRangeChange\":0}]}]]],[\"bds-text-field.cjs\",[[836,\"bds-text-field\",{\"name\":[513],\"disabled\":[516],\"required\":[516],\"value\":[1537],\"error\":[516],\"errorMessage\":[1,\"error-message\"],\"customValidators\":[16],\"validationTiming\":[1,\"validation-timing\"],\"type\":[513],\"variant\":[513],\"placeholder\":[1],\"readOnly\":[4,\"readonly\"],\"autocomplete\":[1],\"pattern\":[1],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"label\":[1],\"sublabel\":[1],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"info\":[1],\"clearable\":[4],\"clearOnHover\":[4,\"clear-on-hover\"],\"charCount\":[2,\"char-count\"],\"counter\":[4],\"customWidth\":[1,\"custom-width\"],\"selectable\":[4],\"iconRight\":[1,\"icon-right\"],\"isDisabled\":[32],\"focused\":[32],\"showPassword\":[32],\"touched\":[32],\"dirty\":[32],\"currentCharCount\":[32],\"validationError\":[32],\"validationMessage\":[32],\"checkValidity\":[64],\"reportValidity\":[64]},null,{\"disabled\":[{\"onDisabledChange\":0}],\"type\":[{\"checkPropValues\":0}],\"variant\":[{\"checkPropValues\":0}],\"validationTiming\":[{\"checkPropValues\":0}],\"customValidators\":[{\"onCustomValidatorsChange\":0}],\"value\":[{\"onValueChange\":0}]}]]],[\"bds-toggle.cjs\",[[576,\"bds-toggle\",{\"name\":[513],\"disabled\":[516],\"required\":[516],\"info\":[1],\"error\":[516],\"errorMessage\":[513,\"error-message\"],\"checked\":[516],\"placement\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[1],\"isDisabled\":[32],\"validationError\":[32],\"validationMessage\":[32],\"isChecked\":[32]},null,{\"checked\":[{\"onCheckedChange\":0}],\"disabled\":[{\"onDisabledChange\":0}]}]]],[\"bds-checkbox-button.cjs\",[[836,\"bds-checkbox-button\",{\"name\":[513],\"disabled\":[516],\"required\":[516],\"checked\":[1540],\"error\":[516],\"value\":[1],\"label\":[1],\"info\":[1],\"isDisabled\":[32],\"isInvalid\":[32],\"checkValidity\":[64],\"reportValidity\":[64]},[[0,\"invalid\",\"handleInvalid\"]],{\"checked\":[{\"onCheckedChange\":0}],\"disabled\":[{\"onDisabledChange\":0}]}]]],[\"bds-dialog.cjs\",[[772,\"bds-dialog\",{\"active\":[1540],\"preventClose\":[4,\"prevent-close\"],\"height\":[1],\"width\":[1],\"layout\":[1],\"contentPadding\":[1,\"content-padding\"],\"backdropClose\":[4,\"backdrop-close\"],\"escapeClose\":[4,\"escape-close\"],\"size\":[1],\"variant\":[1],\"titleDialog\":[1,\"title-dialog\"],\"maximizable\":[4],\"closable\":[4],\"open\":[64],\"close\":[64]},null,{\"active\":[{\"handleIsOpenChange\":0}]}]]],[\"bds-radio.cjs\",[[260,\"bds-radio\",{\"checked\":[1540],\"disabled\":[516],\"value\":[1],\"name\":[513],\"label\":[1],\"error\":[516],\"info\":[1]}]]],[\"bds-radio-button.cjs\",[[260,\"bds-radio-button\",{\"checked\":[1540],\"disabled\":[516],\"error\":[516],\"value\":[1],\"name\":[513],\"label\":[1],\"info\":[1]}]]],[\"bds-avatar.cjs\",[[0,\"bds-avatar\",{\"username\":[1],\"variant\":[1],\"background\":[1],\"initialsColor\":[1,\"initials-color\"]}]]],[\"bds-badge.cjs\",[[260,\"bds-badge\",{\"variant\":[1],\"disabled\":[4]},null,{\"variant\":[{\"checkPropValues\":0}]}]]],[\"bds-banner.cjs\",[[260,\"bds-banner\",{\"variant\":[1],\"closable\":[4],\"closeButtonLabel\":[1,\"close-button-label\"],\"isClosing\":[32],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"bds-breadcrumb.cjs\",[[260,\"bds-breadcrumb\",{\"separator\":[1],\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"]},[[2,\"bdsClickCollapse\",\"onCollapsedClick\"],[2,\"bdsClick\",\"onBreadcrumbClick\"]],{\"separator\":[{\"onSeparatorChange\":0}],\"maxItems\":[{\"onMaxItemsChange\":0}]}]]],[\"bds-button-group.cjs\",[[260,\"bds-button-group\",{\"size\":[1],\"orientation\":[1],\"label\":[1],\"color\":[1],\"variant\":[1]},null,{\"size\":[{\"validateProps\":0},{\"propagatePropsToButtons\":0}],\"orientation\":[{\"validateProps\":0}],\"color\":[{\"validateProps\":0},{\"propagatePropsToButtons\":0}],\"variant\":[{\"validateProps\":0},{\"propagatePropsToButtons\":0}]}]]],[\"bds-flag.cjs\",[[0,\"bds-flag\",{\"alignFlag\":[1,\"align-flag\"],\"callSign\":[4,\"call-sign\"],\"country\":[1],\"customFlags\":[16],\"identifier\":[1],\"label\":[4],\"shape\":[1],\"shortName\":[4,\"short-name\"]},null,{\"alignFlag\":[{\"checkPropValues\":0}],\"identifier\":[{\"checkPropValues\":0}],\"shape\":[{\"checkPropValues\":0}]}]]],[\"bds-grid.cjs\",[[260,\"bds-grid\",{\"layout\":[1],\"rowGap\":[1,\"row-gap\"]},null,{\"layout\":[{\"checkPropValues\":0}]}]]],[\"bds-grid-item.cjs\",[[260,\"bds-grid-item\",{\"colSpan\":[520,\"col-span\"],\"colSpanSm\":[520,\"col-span-sm\"],\"colSpanMd\":[520,\"col-span-md\"],\"colSpanLg\":[520,\"col-span-lg\"],\"colSpanXl\":[520,\"col-span-xl\"],\"colSpan2xl\":[520,\"col-span-2xl\"],\"rowSpan\":[520,\"row-span\"],\"offset\":[514]},null,{\"colSpan\":[{\"checkPropValues\":0}],\"colSpanSm\":[{\"checkPropValues\":0}],\"colSpanMd\":[{\"checkPropValues\":0}],\"colSpanLg\":[{\"checkPropValues\":0}],\"colSpanXl\":[{\"checkPropValues\":0}],\"colSpan2xl\":[{\"checkPropValues\":0}],\"rowSpan\":[{\"checkPropValues\":0}],\"offset\":[{\"checkPropValues\":0}]}]]],[\"bds-spinner.cjs\",[[0,\"bds-spinner\",{\"size\":[1],\"label\":[1]},null,{\"size\":[{\"checkPropValues\":0}]}]]],[\"bds-status.cjs\",[[260,\"bds-status\",{\"state\":[1],\"indicator\":[1]},null,{\"state\":[{\"checkPropValues\":0}],\"indicator\":[{\"checkPropValues\":0}]}]]],[\"bds-tag.cjs\",[[260,\"bds-tag\",{\"multiselect\":[4],\"selected\":[4],\"closeButtonLabel\":[1,\"close-button-label\"],\"color\":[1],\"readonly\":[4],\"disabled\":[4],\"internalSelected\":[32]},null,{\"color\":[{\"checkPropValues\":0}],\"selected\":[{\"syncSelectedFromProp\":0}]}]]],[\"bds-popover.cjs\",[[772,\"bds-popover\",{\"floatingOptions\":[16],\"disabled\":[4],\"width\":[8],\"header\":[4],\"footer\":[4],\"closable\":[4],\"isVisible\":[32],\"openPopover\":[64],\"closePopover\":[64]}]]],[\"bds-tooltip_2.cjs\",[[260,\"bds-typography\",{\"variant\":[513],\"size\":[513],\"state\":[513],\"rel\":[1],\"customClass\":[1,\"custom-class\"],\"element\":[1],\"align\":[1],\"ellipsis\":[4],\"maxLines\":[2,\"max-lines\"],\"tooltipText\":[1,\"tooltip-text\"],\"required\":[516],\"htmlFor\":[1,\"html-for\"],\"href\":[1],\"target\":[1],\"downloadable\":[4],\"filename\":[1],\"sanitizedHref\":[32]},null,{\"href\":[{\"updateSanitizedHref\":0}]}],[772,\"bds-tooltip\",{\"multiline\":[4],\"disabled\":[4],\"floatingOptions\":[16],\"isVisible\":[32]}]]],[\"bds-checkbox.cjs\",[[836,\"bds-checkbox\",{\"name\":[513],\"info\":[513],\"disabled\":[516],\"required\":[516],\"checked\":[1540],\"indeterminate\":[1540],\"error\":[516],\"value\":[1],\"label\":[1],\"isDisabled\":[32],\"isInvalid\":[32],\"checkValidity\":[64],\"reportValidity\":[64]},[[0,\"invalid\",\"handleInvalid\"]],{\"checked\":[{\"onCheckedChange\":0}],\"disabled\":[{\"onDisabledChange\":0}]}]]],[\"bds-divider.cjs\",[[0,\"bds-divider\",{\"orientation\":[513]},null,{\"orientation\":[{\"checkPropValues\":0}]}]]],[\"bds-button.cjs\",[[324,\"bds-button\",{\"label\":[1],\"disabled\":[4],\"name\":[1],\"type\":[1],\"color\":[1],\"variant\":[1],\"size\":[1],\"loading\":[4],\"disclosure\":[4],\"currentState\":[32]},null,{\"type\":[{\"checkPropValues\":0}],\"color\":[{\"checkPropValues\":0}],\"variant\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}]}]]]]"), options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/orientation-DQAIleEJ.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const ORIENTATIONS = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+
+exports.ORIENTATIONS = ORIENTATIONS;

package/dist/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
     "components/actions/bds-button/bds-button.js",
+    "components/actions/bds-button-group/bds-button-group.js",
     "components/actions/bds-list-menu/bds-list-menu/bds-list-menu.js",
     "components/actions/bds-list-menu/bds-list-menu-item/bds-list-menu-item.js",
     "components/actions/bds-toggle/bds-toggle.js",
@@ -9,17 +10,28 @@
     "components/feedback/bds-spinner/bds-spinner.js",
     "components/feedback/bds-status/bds-status.js",
     "components/feedback/bds-tag/bds-tag.js",
-    "components/forms/bds-checkbox/bds-checkbox.js",
+    "components/forms/bds-checkbox/bds-checkbox/bds-checkbox.js",
+    "components/forms/bds-checkbox/bds-checkbox-button/bds-checkbox-button.js",
+    "components/forms/bds-checkbox/bds-checkbox-card/bds-checkbox-card.js",
+    "components/forms/bds-checkbox/bds-checkbox-group/bds-checkbox-group.js",
+    "components/titles-text/bds-typography/bds-typography.js",
     "components/forms/bds-flag/bds-flag.js",
+    "components/forms/bds-radio/bds-radio/bds-radio.js",
+    "components/forms/bds-radio/bds-radio-button/bds-radio-button.js",
+    "components/forms/bds-radio/bds-radio-card/bds-radio-card.js",
+    "components/forms/bds-radio/bds-radio-group/bds-radio-group.js",
+    "components/forms/bds-select/bds-select.js",
+    "components/forms/bds-slider/bds-slider.js",
     "components/forms/bds-text-field/bds-text-field.js",
-    "components/helpers/bds-divider.js",
+    "components/helpers/bds-divider/bds-divider.js",
     "components/images-icons/bds-avatar/bds-avatar.js",
-    "components/layouts/bds-grid/grid/bds-grid.js",
-    "components/layouts/bds-grid/grid-item/bds-grid-item.js",
+    "components/layouts/bds-grid/bds-grid/bds-grid.js",
+    "components/layouts/bds-grid/bds-grid-item/bds-grid-item.js",
+    "components/navigation/bds-breadcrumb/bds-breadcrumb.js",
+    "components/navigation/bds-breadcrumb-item/bds-breadcrumb-item.js",
     "components/overlays/bds-dialog/bds-dialog.js",
     "components/overlays/bds-popover/bds-popover.js",
-    "components/overlays/bds-tooltip/bds-tooltip.js",
-    "components/titles-text/bds-typography/bds-typography.js"
+    "components/overlays/bds-tooltip/bds-tooltip.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/actions/bds-button/bds-button.css

@@ -65,79 +65,79 @@ bds-button {
   border-right-color: transparent;
   border-top-color: transparent;
 }
-.bds-button--size-small {
+.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-small .bds-button__content {
+.bds-button--size-sm .bds-button__content {
   padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
 }
-.bds-button--size-small .bds-button__content-icon {
+.bds-button--size-sm .bds-button__content-icon {
   display: flex;
   font-size: var(--boreal-typography-font-size-sm);
   line-height: var(--boreal-typography-line-height-xs);
 }
-.bds-button--size-small .bds-button__content-icon:empty {
+.bds-button--size-sm .bds-button__content-icon:empty {
   display: none;
 }
-.bds-button--size-small .bds-button__content {
+.bds-button--size-sm .bds-button__content {
   /* TODO: Adjust badge styles when badge component is created */
 }
-.bds-button--size-small .bds-button__content-badge:empty {
+.bds-button--size-sm .bds-button__content-badge:empty {
   display: none;
 }
-.bds-button--size-small .bds-button__content-badge {
+.bds-button--size-sm .bds-button__content-badge {
   display: none;
 }
-.bds-button--size-medium {
+.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-medium .bds-button__content {
+.bds-button--size-md .bds-button__content {
   padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
 }
-.bds-button--size-medium .bds-button__content-icon {
+.bds-button--size-md .bds-button__content-icon {
   display: flex;
   font-size: var(--boreal-typography-font-size-md);
   line-height: var(--boreal-typography-line-height-sm);
 }
-.bds-button--size-medium .bds-button__content-icon:empty {
+.bds-button--size-md .bds-button__content-icon:empty {
   display: none;
 }
-.bds-button--size-medium .bds-button__content {
+.bds-button--size-md .bds-button__content {
   /* TODO: Adjust badge styles when badge component is created */
 }
-.bds-button--size-medium .bds-button__content-badge:empty {
+.bds-button--size-md .bds-button__content-badge:empty {
   display: none;
 }
-.bds-button--size-large {
+.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-large .bds-button__content {
+.bds-button--size-lg .bds-button__content {
   padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
 }
-.bds-button--size-large .bds-button__content-icon {
+.bds-button--size-lg .bds-button__content-icon {
   display: flex;
   font-size: var(--boreal-typography-font-size-lg);
   line-height: var(--boreal-typography-line-height-md);
 }
-.bds-button--size-large .bds-button__content-icon:empty {
+.bds-button--size-lg .bds-button__content-icon:empty {
   display: none;
 }
-.bds-button--size-large .bds-button__content {
+.bds-button--size-lg .bds-button__content {
   /* TODO: Adjust badge styles when badge component is created */
 }
-.bds-button--size-large .bds-button__content-badge:empty {
+.bds-button--size-lg .bds-button__content-badge:empty {
   display: none;
 }
 .bds-button.bds-button--var-default.bds-button--default {
@@ -147,15 +147,15 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--default:hover {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  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: 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;
@@ -175,15 +175,15 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--primary:hover {
   background-color: var(--boreal-ui-primary-dark);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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;
@@ -203,15 +203,15 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--success:hover {
   background-color: var(--boreal-ui-success-dark);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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;
@@ -231,15 +231,15 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--error:hover {
   background-color: var(--boreal-ui-danger-dark);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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;
@@ -262,15 +262,15 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--default:hover {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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;
@@ -290,15 +290,15 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--primary:hover {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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;
@@ -318,15 +318,15 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--success:hover {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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;
@@ -346,15 +346,15 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--error:hover {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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;
@@ -377,15 +377,15 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--default:hover {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  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: 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;
@@ -405,15 +405,15 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--primary:hover {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  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: 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;
@@ -433,15 +433,15 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--success:hover {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  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: 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;
@@ -461,15 +461,15 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--error:hover {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-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);
-  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: 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;

package/dist/collection/components/actions/bds-button/bds-button.js

@@ -3,6 +3,7 @@ import { COMPONENT_STATES } from "../../../types/index";
 import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS } from "./types/enum";
 import { CORE_COLORS } from "../../../types/coreColors";
 import { validatePropValue } from "../../../utils/helpers/validateProps";
+import { KEYBOARD, KeyboardController, KEY_TRIGGERS } from "../../../utils/index";
 /**
  *  Button component for user interactions, form submissions, supporting various styles, sizes, and states.
  *
@@ -17,7 +18,7 @@ import { validatePropValue } from "../../../utils/helpers/validateProps";
  * @attr {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
  * @attr {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
  * @attr {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
- * @attr {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+ * @attr {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
  * @attr {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
  * @attr {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
  *
@@ -27,14 +28,14 @@ import { validatePropValue } from "../../../utils/helpers/validateProps";
  * @property {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
  * @property {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
  * @property {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
- * @property {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+ * @property {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
  * @property {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
  * @property {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
  *
  * @default 'button' - Default type value
  * @default 'default' - Default color value
  * @default 'default' - Default variant value
- * @default 'medium' - Default size value
+ * @default 'md' - Default size value
  * @default 'default' - Default status value
  * @default false - Default disabled value
  * @default '' - Default label value
@@ -44,6 +45,7 @@ import { validatePropValue } from "../../../utils/helpers/validateProps";
  */
 export class BdsButton {
     constructor() {
+        this._keyboard = new KeyboardController();
         /** State to manage states */
         this.currentState = COMPONENT_STATES.DEFAULT;
         /* Props to manage the button attributes */
@@ -59,7 +61,7 @@ export class BdsButton {
         this.color = CORE_COLORS.DEFAULT;
         /** variant is a string attribute. The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.*/
         this.variant = BUTTON_VARIANTS.DEFAULT;
-        /** size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'. */
+        /** size is a string attribute. The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'. */
         this.size = BUTTON_SIZES.MEDIUM;
         /** loading is a boolean attribute. Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false. */
         this.loading = false;
@@ -67,10 +69,14 @@ export class BdsButton {
         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 */
@@ -83,6 +89,8 @@ export class BdsButton {
             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();
             }
@@ -105,6 +113,19 @@ export class BdsButton {
     /** 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() {
@@ -135,6 +156,9 @@ export class BdsButton {
         }
         return;
     }
+    disconnectedCallback() {
+        this._keyboard.detach();
+    }
     /* Method to get the class map for the button based on the props */
     get getClassMap() {
         return {
@@ -149,7 +173,7 @@ export class BdsButton {
     }
     /* render button depends on variant */
     render() {
-        return (h("button", { key: 'e5e7dd996abf7f32218d1871069f4cdd5070cb6b', 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: '815ced9f3e464c73f371227c098ea65a7097f376', class: "bds-button__content" }, h("span", { key: '350acb5924bb036afeb2c252c71261c5b2015b1e', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '57feb7a77e7edd0d43c3432a5822cdaec60729f6', name: "icon" })), h("slot", { key: '07536c420613bc6d4d53b5947524e69999937d19' }), h("span", { key: 'ae96692ab7ffe82df0f2a2cb685704912724df35', class: "bds-button__content-badge" }, h("slot", { key: '6a802ae2b19f85c3678c16f7950b597efc981da6', name: "badge" })), this.disclosure && (h("span", { key: 'c38f71595010045c86257f6d5c3ce48a504966ad', class: "bds-button__content-icon" }, h("i", { key: 'a51aff2455184cd38b2d7ebd52cc9c590b81601c', 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 is() { return "bds-button"; }
     static get formAssociated() { return true; }
@@ -332,7 +356,7 @@ export class BdsButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IButton['size']",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                     "references": {
                         "IButton": {
                             "location": "import",
@@ -346,7 +370,7 @@ export class BdsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'."
+                    "text": "size is a string attribute. The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/actions/bds-button/types/enum.js

@@ -4,9 +4,9 @@ export const BUTTON_VARIANTS = {
     PLAIN: 'plain',
 };
 export const BUTTON_SIZES = {
-    SMALL: 'small',
-    MEDIUM: 'medium',
-    LARGE: 'large',
+    SMALL: 'sm',
+    MEDIUM: 'md',
+    LARGE: 'lg',
 };
 export const BUTTON_TYPES = {
     BUTTON: 'button',