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

package/dist/cjs/bds-popover.cjs.entry.js

@@ -1,13 +1,16 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
-var anchored_mixin = require('./anchored.mixin-CnIwkaUi.js');
+var index = require('./index-CwYIVC9N.js');
+var getOffset = require('./getOffset-m4hBgyVP.js');
 var _enum = require('./enum-DLblRCkQ.js');
 require('./floating.mixin-Bje4320w.js');
+require('./Keys-DbIXSJF2.js');
 
-const bdsPopoverCss = () => `@charset "UTF-8";:root{--popover-arrow-size:var(--boreal-spacing-s);--popover-width:320px}.popover{position:fixed;margin:0;overflow:visible;border-radius:var(--boreal-radius-xs2);font-size:var(--boreal-typography-font-size-xs);line-height:var(--boreal-typography-line-height-xs);font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular);background:var(--boreal-ui-inverse);-webkit-filter:drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));filter:drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:transparent;cursor:auto}.popover-content{position:relative;padding:var(--boreal-spacing-s)}.popover[popover]:not(:popover-open){display:none}.popover-header{border-bottom:var(--boreal-stroke-default-light) solid 1px;padding:var(--boreal-spacing-m) var(--boreal-spacing-xs) var(--boreal-spacing-m) var(--boreal-spacing-s);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.popover-header__content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.popover-header__title{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.popover-header__icon{font-size:var(--boreal-typography-font-size-md);margin-right:var(--boreal-spacing-3xs)}.popover-header__close{margin-left:var(--boreal-spacing-s)}.popover-footer{border-top:var(--boreal-stroke-default-light) solid 1px;padding:var(--boreal-spacing-s) var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.popover .popover-arrow{position:absolute;width:var(--popover-arrow-size);height:var(--popover-arrow-size);pointer-events:none}.popover .popover-arrow::before{content:"";position:absolute;width:var(--popover-arrow-size);height:var(--popover-arrow-size);background:var(--boreal-ui-inverse);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.popover[data-placement^=top] .popover-arrow{bottom:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=top] .popover-arrow::before{top:0}.popover[data-placement^=bottom] .popover-arrow{top:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=bottom] .popover-arrow::before{top:0}.popover[data-placement^=left] .popover-arrow{right:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=left] .popover-arrow::before{left:0}.popover[data-placement^=right] .popover-arrow{left:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=right] .popover-arrow::before{left:0}`;
+const OFFSET = 11;
 
-const BdsPopover = class extends index.Mixin(anchored_mixin.anchoredMixin) {
+const bdsPopoverCss = () => `@charset "UTF-8";:root{--popover-arrow-size:var(--boreal-spacing-s);--popover-width:320px}.popover{position:fixed;margin:0;overflow:visible;border-radius:var(--boreal-radius-xs2);font-size:var(--boreal-typography-font-size-xs);line-height:var(--boreal-typography-line-height-xs);font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular);background:var(--boreal-ui-inverse);-webkit-filter:drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));filter:drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:transparent;cursor:auto}.popover-content{position:relative;padding:var(--boreal-spacing-s)}.popover[popover]:not(:popover-open){display:none}.popover-header{border-bottom:var(--boreal-stroke-default-light) solid 1px;padding:var(--boreal-spacing-m) var(--boreal-spacing-xs) var(--boreal-spacing-m) var(--boreal-spacing-s);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.popover-header__content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.popover-header__title{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.popover-header__icon{font-size:var(--boreal-typography-font-size-md);margin-right:var(--boreal-spacing-3xs)}.popover-header__close{margin-left:var(--boreal-spacing-s)}.popover-header__close .bds-button{margin:0;padding:0;width:var(--boreal-spacing-ml);height:var(--boreal-spacing-ml)}.popover-header__close .bds-button__content{width:var(--boreal-spacing-ml);height:var(--boreal-spacing-ml)}.popover-header__close em{font-size:var(--boreal-typography-font-size-xs)}.popover-footer{border-top:var(--boreal-stroke-default-light) solid 1px;padding:var(--boreal-spacing-s) var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.popover .popover-arrow{position:absolute;width:var(--popover-arrow-size);height:var(--popover-arrow-size);pointer-events:none}.popover .popover-arrow::before{content:"";position:absolute;width:var(--popover-arrow-size);height:var(--popover-arrow-size);background:var(--boreal-ui-inverse);-webkit-transform:rotate(45deg);transform:rotate(45deg);inset:0}.popover[data-placement^=top] .popover-arrow{bottom:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=top] .popover-arrow::before{bottom:0}.popover[data-placement^=bottom] .popover-arrow{top:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=bottom] .popover-arrow::before{bottom:0}.popover[data-placement^=left] .popover-arrow{right:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=left] .popover-arrow::before{left:0}.popover[data-placement^=right] .popover-arrow{left:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=right] .popover-arrow::before{left:0}`;
+
+const BdsPopover = class extends index.Mixin(getOffset.anchoredMixin) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -57,7 +60,7 @@ const BdsPopover = class extends index.Mixin(anchored_mixin.anchoredMixin) {
     get options() {
         return {
             placement: this.floatingOptions.placement ?? 'bottom',
-            offset: this.floatingOptions.offset ?? 16,
+            offset: getOffset.getOffset(this.floatingOptions?.hideArrow, this.floatingOptions?.offset, OFFSET),
             arrow: this.floatingOptions.hideArrow ? undefined : this.arrowElement,
             strategy: 'fixed',
             shift: true,
@@ -124,7 +127,13 @@ const BdsPopover = class extends index.Mixin(anchored_mixin.anchoredMixin) {
      */
     setArrowPosition(result) {
         if (result.middlewareData?.arrow && !this.disabled && this.arrowElement?.isConnected) {
-            const { x: arrowX, y: arrowY } = result.middlewareData.arrow;
+            const placement = this.floatingOptions.placement;
+            const arrowData = result.middlewareData.arrow;
+            const isStartPlacement = placement === 'top-start' || placement === 'bottom-start';
+            let arrowX = arrowData.x || undefined;
+            if (isStartPlacement)
+                arrowX = arrowData.x ? 20 : undefined;
+            const arrowY = result.middlewareData.arrow.y;
             Object.assign(this.arrowElement.style, {
                 left: arrowX != null ? `${arrowX}px` : '',
                 top: arrowY != null ? `${arrowY}px` : '',
@@ -138,7 +147,7 @@ const BdsPopover = class extends index.Mixin(anchored_mixin.anchoredMixin) {
      */
     handleClickOutside(e) {
         const target = e.target;
-        const clickedInsideTrigger = this.el.contains(target);
+        const clickedInsideTrigger = this.listenTarget?.contains(target) || this.trigger?.contains(target) || this.triggerSlot?.contains(target);
         const clickedInsideFloating = this.floatingContent.contains(target) || this.floatingContent === target;
         if (!clickedInsideTrigger && !clickedInsideFloating) {
             this.hide();
@@ -262,7 +271,7 @@ const BdsPopover = class extends index.Mixin(anchored_mixin.anchoredMixin) {
         this.trigger.removeEventListener('click', (evt) => this.handleShow(evt));
     }
     render() {
-        return (index.h(index.Host, { key: 'e00cacf63369fc0c409d003aaf495eeef1af424c' }, index.h("div", { key: '0262e5dc2789d817c1332d12d598b7f6bb71a188', class: "popover", style: { width: this.popoverWidth }, popover: "manual", role: "tooltip", "data-placement": this.getPlacement, "data-hidearrow": this.canShowArrow, "aria-hidden": this.isVisible ? 'false' : 'true', onClick: (e) => this.handleContentClick(e), ref: el => (this.floatingContent = el) }, this.header && (index.h("div", { key: '63156ddf954e2c2b6452184f060ea502b9798d2f', class: "popover-header" }, index.h("div", { key: '1183b88e3352637d9fce99d160c3d1df56b6010b', class: "popover-header__content" }, index.h("span", { key: '48dcc7ac417bddfd9f19e388e32833d6930a566c', class: "popover-header__icon" }, index.h("slot", { key: 'a852564051439b09b30f8f0f054c29ccb6c4f722', name: "header-icon" })), index.h("span", { key: 'aaaef66cd3454c4dd3bd4be7e0613187943f49b0', class: "popover-header__title" }, index.h("slot", { key: '231224f3e9115e300998942aecfd07ae7b45dda7', name: "header-title" }))), this.closable && (index.h("bds-button", { key: '67ccc016aa89d0627812ad80ad1121bdb3e25692', class: "popover-header__close", size: _enum.BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, index.h("em", { key: '40cdcbf5e9ca75e55f45cdce3db6af2ed5088298', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (index.h("div", { key: 'a8bd41e82c5f4a0d7fe7a02287c29140490118e4', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("div", { key: 'a205d8490fb192ebf0c75388775a8247b06d4431', class: "popover-content", tabIndex: -1, part: "popover-content" }, index.h("slot", { key: 'e3447f0022c0c78a28d176df5d85ff05daea8bd6' })), this.footer && (index.h("div", { key: 'd16a93b4c702e342c89a7192b9a528f39e035601', class: "popover-footer", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '0c046c725771991b981b5baf090c1ecc023987c6', name: "footer-helper" }), index.h("slot", { key: '3f4391e420d411b0ae84df6fe29d4fc9e96fc206', name: "footer-button" }))))));
+        return (index.h(index.Host, { key: 'd9bdf356fc8aa99312073be3589cf50f4bd1afbe', class: "popover", style: { width: this.popoverWidth }, popover: "manual", role: "tooltip", "data-placement": this.getPlacement, "data-hidearrow": this.canShowArrow, "aria-hidden": this.isVisible ? 'false' : 'true', onClick: (e) => this.handleContentClick(e), ref: el => (this.floatingContent = el) }, this.header && (index.h("div", { key: 'a9172eb13620a218c1a37bd52eddaa6f9b53739c', class: "popover-header" }, index.h("div", { key: '3b8774f0f8f461ce164220d53c48139e95a1b8f5', class: "popover-header__content" }, index.h("span", { key: '86cc8cedf2c7970834a61c8374fc23d67417c2dd', class: "popover-header__icon" }, index.h("slot", { key: '1e356d9b87672942ef4d19f33f5de9c707d02cb2', name: "header-icon" })), index.h("span", { key: 'c014a7a269a4cc79841d4350e7e8efc4fc39cb06', class: "popover-header__title" }, index.h("slot", { key: '39ce847785bbad57635834c7957146b89245438e', name: "header-title" }))), this.closable && (index.h("bds-button", { key: 'a54358b74d8d29f5afeaa9f6fe1f07343f6784c6', class: "popover-header__close", size: _enum.BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, index.h("em", { key: 'efdca5b8e1f0560a15e063e832f1aeb9c754a820', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (index.h("div", { key: '16870352c06b06de9b67e542e9e1753c7e3bff66', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("div", { key: 'b5dddeeedcc5ba9d107af57a25d9ca350a0621a8', class: "popover-content", tabIndex: -1, part: "popover-content" }, index.h("slot", { key: '4bfc174186ab356747175464922c0d6b09d6b608' })), this.footer && (index.h("div", { key: '8476df1ee6751d6cba4cc52efad6675ea74bdc18', class: "popover-footer", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: 'de60d356d96ae56c8e0a1349f6bafa87700998c6', name: "footer-helper" }), index.h("slot", { key: '21e59115a077f31b7b05aeea29cd23394642dd4d', name: "footer-button" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bds-spinner.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
-var validateProps = require('./validateProps-BNOBk1Xs.js');
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
 
 const SPINNER_SIZES = {
     SMALL: 'sm',
@@ -9,7 +9,7 @@ const SPINNER_SIZES = {
     LARGE: 'lg',
 };
 
-const bdsSpinnerCss = () => `@charset "UTF-8";:host{display:block}.bds-spinner{display:inline-block;position:relative;width:1em;height:1em}.bds-spinner::before,.bds-spinner::after{content:"";position:absolute;border-color:transparent transparent var(--boreal-primary-base) transparent;border-radius:50%;border-width:3px;border-style:solid;top:0;left:0;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.bds-spinner::before{opacity:0.2;border-style:dashed;-webkit-animation:spin 0.8s linear infinite;animation:spin 0.8s linear infinite}.bds-spinner::after{-webkit-animation:draw-arc 0.8s linear infinite;animation:draw-arc 0.8s linear infinite}.bds-spinner--small{width:var(--boreal-layout-m);height:var(--boreal-layout-m)}.bds-spinner--medium{width:var(--boreal-layout-ml);height:var(--boreal-layout-ml)}.bds-spinner--large{width:var(--boreal-layout-xl);height:var(--boreal-layout-xl)}.bds-spinner__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+const bdsSpinnerCss = () => `@charset "UTF-8";bds-spinner{display:inline-block;position:relative;width:1em;height:1em}bds-spinner::before,bds-spinner::after{content:"";position:absolute;border-color:transparent transparent var(--boreal-primary-base) transparent;border-radius:50%;border-width:3px;border-style:solid;top:0;left:0;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}bds-spinner::before{opacity:0.2;border-style:dashed;-webkit-animation:spin 0.8s linear infinite;animation:spin 0.8s linear infinite}bds-spinner::after{-webkit-animation:draw-arc 0.8s linear infinite;animation:draw-arc 0.8s linear infinite}.bds-spinner--small{width:var(--boreal-layout-m);height:var(--boreal-layout-m)}.bds-spinner--medium{width:var(--boreal-layout-ml);height:var(--boreal-layout-ml)}.bds-spinner--large{width:var(--boreal-layout-xl);height:var(--boreal-layout-xl)}.bds-spinner__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
 
 const BdsSpinner = class {
     constructor(hostRef) {
@@ -40,7 +40,7 @@ const BdsSpinner = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'b38497732140f7e9dd155199c49f8365f00b004b', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, index.h("span", { key: '47befa4469a3cf297493c54bcb8acc5bca76fbd3', class: "bds-spinner__sr-only" }, this.label)));
+        return (index.h(index.Host, { key: 'd114eb6445b81a4e7beafd0ff08b8aaf6e1a96e7', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, index.h("span", { key: 'fa45675b2e258eca9c44a9374a65f26c781343d5', class: "bds-spinner__sr-only" }, this.label)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-status.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var states = require('./states-BweP5Vpu.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const INDICATOR_TYPES = {
+    NONE: 'none',
+    DOT: 'dot',
+    ICON: 'icon',
+};
+
+const bdsStatusCss = () => `@charset "UTF-8";.bds-status{color:var(--boreal-text-default-ink);text-align:center;font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-xs);font-style:normal;font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-xs);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--boreal-spacing-3xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);min-height:var(--boreal-spacing-ml);border-radius:var(--boreal-radius-xs)}.bds-status>[slot=icon]{display:none}.bds-status--icon>[slot=icon]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--boreal-layout-s);height:var(--boreal-layout-s)}.bds-status__dot{background-color:var(--boreal-icon-default-light);width:var(--boreal-spacing-xs);height:var(--boreal-spacing-xs);border-radius:var(--boreal-radius-full)}.bds-status--neutral{color:var(--boreal-text-default-ink);background-color:var(--boreal-ui-default-lighter)}.bds-status--neutral>.bds-status__dot{background-color:var(--boreal-icon-default-lighter)}.bds-status--neutral>[slot=icon]{color:var(--boreal-icon-default-lighter)}.bds-status--neutral>.bds-status__dot{background-color:var(--boreal-icon-default-light)}.bds-status--pending{color:var(--boreal-text-warning-dark);background-color:var(--boreal-ui-warning-lighter)}.bds-status--pending>.bds-status__dot{background-color:var(--boreal-icon-warning-base)}.bds-status--pending>[slot=icon]{color:var(--boreal-icon-warning-base)}.bds-status--in-progress{color:var(--boreal-text-information-dark);background-color:var(--boreal-ui-info-lighter)}.bds-status--in-progress>.bds-status__dot{background-color:var(--boreal-icon-info-base)}.bds-status--in-progress>[slot=icon]{color:var(--boreal-icon-info-base)}.bds-status--complete{color:var(--boreal-text-success-dark);background-color:var(--boreal-ui-success-lighter)}.bds-status--complete>.bds-status__dot{background-color:var(--boreal-icon-success-base)}.bds-status--complete>[slot=icon]{color:var(--boreal-icon-success-base)}.bds-status--cancel{color:var(--boreal-text-danger-dark);background-color:var(--boreal-ui-danger-lighter)}.bds-status--cancel>.bds-status__dot{background-color:var(--boreal-icon-danger-base)}.bds-status--cancel>[slot=icon]{color:var(--boreal-icon-danger-base)}`;
+
+const BdsStatus = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** state is a string attribute. Controls the visual state variant of the status badge.
+         * Determines the background, accent, and text colors applied to the element.
+         * An invalid value falls back to `"neutral"` and a warning is set on the host element. */
+        this.state = states.PROCESS_STATUS.NEUTRAL;
+        /** indicator is a string attribute. Controls the type of indicator rendered before the slotted label.
+         * An invalid value falls back to `"none"` and a warning is set on the host element. */
+        this.indicator = INDICATOR_TYPES.NONE;
+    }
+    /** Validates the `state` prop against the set of allowed values.
+     * Falls back to `"neutral"` when an invalid value is detected. */
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(states.PROCESS_STATUS), states.PROCESS_STATUS.NEUTRAL, this.el, 'state');
+        validateProps.validatePropValue(Object.values(INDICATOR_TYPES), INDICATOR_TYPES.NONE, this.el, 'indicator');
+    }
+    /** Before component rendered */
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    /* Method to get the class map based on the status prop */
+    get classMap() {
+        return {
+            'bds-status': true,
+            [`bds-status--${this.state}`]: true,
+            [`bds-status--${this.indicator}`]: true,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '36cf2dfe777002b02d126d38cb9ed2bce3f828a6', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? index.h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', index.h("slot", { key: '99ab1fa89dc28f3ffca617508b5c577abf874d7a', name: "icon" }), index.h("slot", { key: '8ff726d294fc524950ac0255c71f4ba65b3c9b96' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "state": [{
+                "checkPropValues": 0
+            }],
+        "indicator": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsStatus.style = bdsStatusCss();
+
+exports.bds_status = BdsStatus;

package/dist/cjs/bds-tag.cjs.entry.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const TAG_COLORS = {
+    GRAY: 'gray',
+    CYAN: 'cyan',
+    TEAL: 'teal',
+    LIME: 'lime',
+    ORANGE: 'orange',
+    COBALT: 'cobalt',
+    ROSE: 'rose',
+    PURPLE: 'purple',
+};
+
+const bdsTagCss = () => `@charset "UTF-8";.bds-tag{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;vertical-align:middle;gap:var(--boreal-spacing-3xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-3xs) var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);border-radius:var(--boreal-radius-m);cursor:default;max-width:100%;min-width:0;font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-xs)}.bds-tag:hover:not(.bds-tag--selected):not(.bds-tag--disabled){-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-tag:focus:not(.bds-tag--selected){outline:none;-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-tag--selected{outline:none;-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-tag__icon{font-size:var(--boreal-typography-font-size-md);max-height:var(--boreal-spacing-m)}.bds-tag__icon:empty{display:none}.bds-tag__text{margin-right:var(--boreal-spacing-2xs);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bds-tag__close-button{display:-ms-flexbox;display:flex;padding:var(--boreal-spacing-3xs);width:var(--boreal-spacing-s);height:var(--boreal-spacing-s);-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:var(--boreal-radius-full);border:0px solid transparent;background-color:transparent;opacity:0.5;cursor:pointer}.bds-tag__close-button:hover{-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);background-color:var(--boreal-ui-inverse);opacity:0.5}.bds-tag__close-button:focus{background-color:var(--boreal-ui-inverse);opacity:0.5;outline:none;-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-tag__close-button:active{background-color:var(--boreal-ui-inverse);opacity:0.5;-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, 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, 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-tag--disabled{cursor:not-allowed}.bds-tag--disabled .bds-tag__close-button{pointer-events:none}.bds-tag--gray{background-color:var(--boreal-extended-onyx-light);color:var(--boreal-extended-onyx-dark)}.bds-tag--gray .bds-tag__close-button{color:var(--boreal-extended-onyx-dark)}.bds-tag--gray.bds-tag--disabled{color:var(--boreal-extended-onyx-base);background-color:var(--boreal-extended-onyx-lighter)}.bds-tag--gray.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-onyx-base)}.bds-tag--purple{background-color:var(--boreal-extended-purple-light);color:var(--boreal-extended-purple-dark)}.bds-tag--purple .bds-tag__close-button{color:var(--boreal-extended-purple-dark)}.bds-tag--purple.bds-tag--disabled{color:var(--boreal-extended-purple-light);background-color:var(--boreal-extended-purple-lighter)}.bds-tag--purple.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-purple-light)}.bds-tag--rose{background-color:var(--boreal-extended-rose-light);color:var(--boreal-extended-rose-dark)}.bds-tag--rose .bds-tag__close-button{color:var(--boreal-extended-rose-dark)}.bds-tag--rose.bds-tag--disabled{color:var(--boreal-extended-rose-light);background-color:var(--boreal-extended-rose-lighter)}.bds-tag--rose.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-rose-light)}.bds-tag--lime{background-color:var(--boreal-extended-lime-light);color:var(--boreal-extended-lime-dark)}.bds-tag--lime .bds-tag__close-button{color:var(--boreal-extended-lime-dark)}.bds-tag--lime.bds-tag--disabled{color:var(--boreal-extended-lime-light);background-color:var(--boreal-extended-lime-lighter)}.bds-tag--lime.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-lime-light)}.bds-tag--cobalt{background-color:var(--boreal-extended-cobalt-light);color:var(--boreal-extended-cobalt-dark)}.bds-tag--cobalt .bds-tag__close-button{color:var(--boreal-extended-cobalt-dark)}.bds-tag--cobalt.bds-tag--disabled{color:var(--boreal-extended-cobalt-light);background-color:var(--boreal-extended-cobalt-lighter)}.bds-tag--cobalt.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-cobalt-light)}.bds-tag--orange{background-color:var(--boreal-extended-orange-light);color:var(--boreal-extended-orange-dark)}.bds-tag--orange .bds-tag__close-button{color:var(--boreal-extended-orange-dark)}.bds-tag--orange.bds-tag--disabled{color:var(--boreal-extended-orange-light);background-color:var(--boreal-extended-orange-lighter)}.bds-tag--orange.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-orange-light)}.bds-tag--teal{background-color:var(--boreal-extended-teal-light);color:var(--boreal-extended-teal-dark)}.bds-tag--teal .bds-tag__close-button{color:var(--boreal-extended-teal-dark)}.bds-tag--teal.bds-tag--disabled{color:var(--boreal-extended-teal-light);background-color:var(--boreal-extended-teal-lighter)}.bds-tag--teal.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-teal-light)}.bds-tag--cyan{background-color:var(--boreal-extended-cyan-light);color:var(--boreal-extended-cyan-dark)}.bds-tag--cyan .bds-tag__close-button{color:var(--boreal-extended-cyan-dark)}.bds-tag--cyan.bds-tag--disabled{color:var(--boreal-extended-cyan-light);background-color:var(--boreal-extended-cyan-lighter)}.bds-tag--cyan.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-cyan-light)}`;
+
+const BdsTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bdsClose = index.createEvent(this, "bdsClose");
+        this.bdsSelect = index.createEvent(this, "bdsSelect");
+        this._id = BaseAttributes.createId('bds-tag');
+        this.internalSelected = false;
+        /**
+         * Whether the tag is selectable or not.
+         * @default false
+         */
+        this.multiselect = false;
+        /**
+         * Whether the tag is selected or not.
+         * @default false
+         */
+        this.selected = false;
+        /**
+         * Aria label for the close button when visible.
+         */
+        this.closeButtonLabel = 'Close tag';
+        /**
+         * Visual color variant: 'gray', 'cyan', 'cobalt', 'teal', 'lime', 'orange', 'rose', or 'purple'.
+         * @default "gray"
+         */
+        this.color = TAG_COLORS.GRAY;
+        /**
+         * Hides the close button that allows users to dismiss the tag.
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Disables interaction with the tag. Reduces opacity and prevents interactions.
+         * @default false
+         */
+        this.disabled = false;
+        this.handleClose = (e) => {
+            if (this.disabled)
+                return;
+            if (e !== undefined) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            this.bdsClose.emit({ id: this._id, selected: this.internalSelected, el: this.el });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const selectionKeys = [' ', 'Enter'];
+            const closeKeys = ['Delete', 'Backspace'];
+            if (!this.readonly && closeKeys.includes(e.key)) {
+                this.handleClose(e);
+                return;
+            }
+            if (selectionKeys.includes(e.key) && e.target === this.el) {
+                e.preventDefault();
+                this.handleSelection();
+            }
+        };
+        this.handleSelection = () => {
+            if (this.disabled)
+                return;
+            if (this.multiselect) {
+                this.internalSelected = !this.internalSelected;
+                this.bdsSelect.emit({ id: this._id, selected: this.internalSelected, el: this.el });
+            }
+        };
+    }
+    componentWillLoad() {
+        this.syncSelectedFromProp(this.selected);
+        this.checkPropValues();
+        this.validateMultiselectRole();
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(TAG_COLORS), TAG_COLORS.GRAY, this.el, 'color');
+    }
+    syncSelectedFromProp(newValue) {
+        this.internalSelected = newValue;
+    }
+    validateMultiselectRole() {
+        if (!this.multiselect)
+            return;
+        const VALID_TAG_PARENTS = '[role="listbox"], [role="group"], bds-tag-group';
+        const el = this.el;
+        if (el.closest(VALID_TAG_PARENTS) === null) {
+            console.warn('[BorealDS Tag] Missing required ARIA parent. Expected role="listbox", role="group", or <bds-tag-group> when multiselect=true.');
+        }
+    }
+    getClasses() {
+        return {
+            'bds-tag': true,
+            [`bds-tag--${this.color}`]: true,
+            'bds-tag--disabled': this.disabled,
+            'bds-tag--selected': this.internalSelected,
+        };
+    }
+    renderTag() {
+        return (index.h(index.Fragment, null, index.h("span", { "aria-hidden": "true", class: "bds-tag__icon" }, index.h("slot", { name: "icon" })), index.h("span", { class: "bds-tag__text" }, index.h("slot", null))));
+    }
+    renderCloseIcon() {
+        return (index.h("button", { class: "bds-tag__close-button", "aria-label": this.closeButtonLabel, onClick: e => this.handleClose(e), disabled: this.disabled, type: "button" }, index.h("em", { class: "bds-icon-close", "aria-hidden": "true" })));
+    }
+    render() {
+        const classes = this.getClasses();
+        const hasCloseButton = !this.readonly;
+        const isSelectable = this.multiselect;
+        return (index.h(index.Host, { key: '0864f3764aef3354e5b2c7494a5c9c2cb261582f', class: classes, role: isSelectable ? 'option' : undefined, tabIndex: isSelectable && !this.disabled ? 0 : -1, "aria-disabled": this.disabled ? 'true' : undefined, "aria-selected": isSelectable ? `${this.internalSelected}` : undefined, onKeyDown: !this.disabled ? (e) => this.handleKeyDown(e) : undefined, onClick: !this.disabled ? this.handleSelection : undefined, id: this._id }, this.renderTag(), hasCloseButton && this.renderCloseIcon()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "color": [{
+                "checkPropValues": 0
+            }],
+        "selected": [{
+                "syncSelectedFromProp": 0
+            }]
+    }; }
+};
+BdsTag.style = bdsTagCss();
+
+exports.bds_tag = BdsTag;

package/dist/cjs/bds-text-field.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
-var internals = require('./internals-X77qKxsK.js');
-var validateProps = require('./validateProps-BNOBk1Xs.js');
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-DXwvF_vW.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
 
 /**
  * Centralized list of `aria-label` values used by interactive elements.
@@ -26,17 +27,6 @@ const ICONS = {
     SightOff: 'bds-icon-sight-off',
 };
 
-/**
- * Generates a stable random ID for internal ARIA linkage.
- * Used by components to wire labels, descriptions, and controls
- * without exposing the ID as a public prop.
- *
- * @param prefix - Component-specific prefix for readability in DevTools.
- */
-function createId(prefix = 'bds') {
-    return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-}
-
 const TEXT_FIELD_TYPES = {
     TEXT: 'text',
     PASSWORD: 'password',
@@ -54,7 +44,7 @@ const TEXT_FIELD_VALIDATION_TIMING = {
 
 const bdsTextFieldCss = () => `@charset "UTF-8";.bds-text-field__container,.bds-text-field__sublabel,.bds-text-field__actions,.bds-text-field__action,.bds-text-field__footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-text-field [slot=prefix],.bds-text-field__sublabel{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-xs)}.bds-text-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--boreal-spacing-2xs);width:var(--bds-text-field-width, 100%);font-family:var(--boreal-typography-font-family-primary);color:var(--boreal-text-default)}.bds-text-field__container{padding:var(--boreal-spacing-1xs);padding-left:0;height:var(--boreal-layout-l);border:1px solid var(--boreal-stroke-default-light);border-radius:var(--boreal-radius-xs);background-color:var(--boreal-ui-inverse);-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;overflow:hidden}.bds-text-field__sublabel{gap:var(--boreal-spacing-3xs);padding-left:var(--boreal-spacing-xs);white-space:nowrap}.bds-text-field__sublabel em[class^=bds-icon-],.bds-text-field__sublabel em[class*=" bds-icon-"]{width:var(--boreal-icons-m);height:var(--boreal-icons-m);font-size:var(--boreal-typography-font-size-md);line-height:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-text-field [slot=prefix]{padding-left:var(--boreal-spacing-xs);overflow:hidden;white-space:nowrap;-ms-flex-negative:0;flex-shrink:0}.bds-text-field__control{min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;padding-left:var(--boreal-spacing-xs);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm)}.bds-text-field__control::-webkit-input-placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control::-moz-placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control:-ms-input-placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control::-ms-input-placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control::placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control:disabled{cursor:not-allowed}.bds-text-field__actions{padding-left:var(--boreal-spacing-xs);gap:var(--boreal-spacing-3xs)}.bds-text-field__action{-ms-flex-pack:center;justify-content:center;background:none;border:none;padding:var(--boreal-spacing-3xs);cursor:pointer;color:var(--boreal-icon-default-light);line-height:1;-webkit-transition:color 0.3s ease, opacity 0.3s ease;transition:color 0.3s ease, opacity 0.3s ease}.bds-text-field__action--clear em[class^=bds-icon-],.bds-text-field__action--clear em[class*=" bds-icon-"]{width:var(--boreal-icons-s);height:var(--boreal-icons-s);font-size:var(--boreal-typography-font-size-xs);line-height:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-text-field__action--password em[class^=bds-icon-],.bds-text-field__action--password em[class*=" bds-icon-"]{width:var(--boreal-icons-l);height:var(--boreal-icons-l);font-size:var(--boreal-typography-font-size-lg);line-height:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-text-field__action:hover{color:var(--boreal-icon-default-dark)}.bds-text-field__action:focus-visible{-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-text-field__footer{-ms-flex-pack:justify;justify-content:space-between}.bds-text-field__char-count{-ms-flex-negative:0;flex-shrink:0;font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-xs);color:var(--boreal-text-default-light)}.bds-text-field--focused .bds-text-field__container{border-color:var(--boreal-stroke-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-text-field--error .bds-text-field__container{border-color:var(--boreal-stroke-danger-base)}.bds-text-field--disabled{cursor:not-allowed}.bds-text-field--disabled .bds-text-field__container{background-color:var(--boreal-ui-default-lighter);border-color:var(--boreal-stroke-default-light)}.bds-text-field--disabled .bds-text-field__sublabel{color:var(--boreal-text-disabled)}.bds-text-field--disabled .bds-text-field__sublabel em[class^=bds-icon-],.bds-text-field--disabled .bds-text-field__sublabel em[class*=" bds-icon-"]{color:var(--boreal-icon-disabled)}.bds-text-field--disabled .bds-text-field__control{color:var(--boreal-icon-disabled)}.bds-text-field--readonly .bds-text-field__container{background-color:transparent;border:none}.bds-text-field--readonly .bds-text-field__control::-webkit-input-placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--readonly .bds-text-field__control::-moz-placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--readonly .bds-text-field__control:-ms-input-placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--readonly .bds-text-field__control::-ms-input-placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--readonly .bds-text-field__control::placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--plain .bds-text-field__container{border-color:transparent}.bds-text-field--plain.bds-text-field--focused .bds-text-field__container{border-color:var(--boreal-stroke-focus)}.bds-text-field--clear-on-hover .bds-text-field__action--clear{opacity:0;pointer-events:none}.bds-text-field--clear-on-hover:hover .bds-text-field__action--clear{opacity:1;pointer-events:auto}`;
 
-const BdsTextField = class extends index.Mixin(internals.formAssociatedMixin) {
+const BdsTextField = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -141,7 +131,7 @@ const BdsTextField = class extends index.Mixin(internals.formAssociatedMixin) {
         /** Error message from the last failed validator. Shown in the footer when `validationError` is `true`. */
         this.validationMessage = '';
         this._valueAtFocus = '';
-        this._id = createId('bds-text-field');
+        this._id = BaseAttributes.createId('bds-text-field');
         this.invalidHandler = (e) => {
             e.preventDefault();
             this.validationError = true;
@@ -192,13 +182,13 @@ const BdsTextField = class extends index.Mixin(internals.formAssociatedMixin) {
         this.updateValidity();
     }
     onValueChange(next) {
-        internals.setFormValue(this.internals, next);
+        formAssociated_mixin.setFormValue(this.internals, next);
         this.currentCharCount = next.length;
         this.updateValidity();
         this.valueChange.emit(next);
     }
     formAssociatedCallback() {
-        internals.setFormValue(this.internals, this.value);
+        formAssociated_mixin.setFormValue(this.internals, this.value);
         this.updateValidity();
     }
     formResetCallback() {
@@ -208,16 +198,16 @@ const BdsTextField = class extends index.Mixin(internals.formAssociatedMixin) {
         this.currentCharCount = 0;
         this.validationError = false;
         this.validationMessage = '';
-        internals.setFormValue(this.internals, null);
+        formAssociated_mixin.setFormValue(this.internals, null);
         this.updateValidity();
     }
     formStateRestoreCallback(state, _mode) {
         this.value = typeof state === 'string' ? state : '';
-        internals.setFormValue(this.internals, this.value);
+        formAssociated_mixin.setFormValue(this.internals, this.value);
         this.updateValidity();
     }
     updateValidity(emitEvent = false) {
-        const valid = internals.runValidators(this.internals, [...this.validators, ...this.customValidators], this.el);
+        const valid = formAssociated_mixin.runValidators(this.internals, [...this.validators, ...this.customValidators], this.el);
         if (emitEvent) {
             this.validationError = !valid;
             this.validationMessage = valid ? '' : this.internals.validationMessage;
@@ -343,7 +333,7 @@ const BdsTextField = class extends index.Mixin(internals.formAssociatedMixin) {
                 : this.helperText;
         const showFooter = helperContent !== '' || (this.counter && this.charCount > 0);
         const typographyState = this.isDisabled ? 'disabled' : effectiveError ? 'error' : 'default';
-        return (index.h(index.Host, { key: '8fcf734b92dfa2ad75a32bef27efea78bd61dd63', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (index.h("bds-typography", { key: 'd50b6407278dd93b52fbbdbbc5e999a1185d4649', id: labelId, variant: "label", htmlFor: this._id, isRequired: this.required, tooltipText: this.info !== '' ? this.info : undefined, state: typographyState }, this.label)), index.h("div", { key: '89dc5c7830197786e7dc67b87f64a0b63c8a8c84', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (index.h("span", { key: 'a4139e0ce3b3d37bb33d55b5811e439974ed9d53', class: "bds-text-field__sublabel" }, this.icon !== '' && index.h("em", { key: '5fc8f5a49b348fe07c63242243274946e21aa782', class: this.icon }), this.sublabel)), index.h("slot", { key: 'a8f62dba555a26aba3b1105402f0afca1378c83a', name: "prefix" }), index.h("input", { key: 'ba2161c8d56c42847c7006d1742a2b60613f4628', id: this._id, class: "bds-text-field__control", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": showFooter && helperContent !== '' ? helperId : undefined, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, type: this.type === TEXT_FIELD_TYPES.PASSWORD && this.showPassword ? TEXT_FIELD_TYPES.TEXT : this.type, value: this.value, disabled: this.isDisabled, readOnly: this.readOnly, tabIndex: this.readOnly ? -1 : undefined, placeholder: this.placeholder, autocomplete: this.autocomplete, pattern: this.pattern !== '' ? this.pattern : undefined, minLength: this.minLength !== 0 ? this.minLength : undefined, maxLength: this.effectiveMaxLength, onMouseDown: (e) => this.handleMouseDown(e), onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e), onFocus: (e) => this.handleFocus(e), onBlur: (e) => this.handleBlur(e) }), (showClear || this.type === TEXT_FIELD_TYPES.PASSWORD) && (index.h("div", { key: 'c9ae74b2be87e2759d60ad69c9c91b95bc199163', class: "bds-text-field__actions" }, showClear && (index.h("button", { key: 'd94534386505f9c54aabe892aec58d81b6a0ea94', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, index.h("em", { key: '7899ffad5be71b731ae8ead1d5601e3fc6b5f6a5', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (index.h("button", { key: '612aff7de193d9f61b955e686484c13baca3ff57', class: "bds-text-field__action bds-text-field__action--password", type: "button", "aria-label": this.showPassword ? ARIA_LABELS.HidePassword : ARIA_LABELS.ShowPassword, onClick: () => this.handleShowPassword() }, index.h("em", { key: 'e886085b840a351a7455a1adb685996835e47118', class: this.showPasswordIcon })))))), showFooter && (index.h("div", { key: '9b47bbaff802d0c4125e45c87f1e7366418dfdcc', class: "bds-text-field__footer" }, helperContent !== '' && (index.h("bds-typography", { key: '64265da85a16152af33b3f94c05e4d8562dc26df', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (index.h("span", { key: '2a264545ba46b8d6908adabe729a1256334535ef', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
+        return (index.h(index.Host, { key: '96b7e057fa7f25e8f7d13b7de0fd17f12de602bb', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (index.h("bds-typography", { key: 'e827b43ea347037ff2d404229aaefdd258d2ad22', id: labelId, variant: "label", htmlFor: this._id, required: this.required, tooltipText: this.info !== '' ? this.info : undefined, state: typographyState }, this.label)), index.h("div", { key: 'f579762db25f65031917874dbb4c2347b5d9f027', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (index.h("span", { key: '191d2ccec9baf8b739163eea112dce9a1073f4bd', class: "bds-text-field__sublabel" }, this.icon !== '' && index.h("em", { key: '1cc1b1b7ece610b2a18ba872c4b7035d2239731b', class: this.icon }), this.sublabel)), index.h("slot", { key: 'ba7b08573b6ae35c10649125991a2bbed15f31f3', name: "prefix" }), index.h("input", { key: '6391338c4f636382cf19f888dc810baaf6820c80', id: this._id, class: "bds-text-field__control", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": showFooter && helperContent !== '' ? helperId : undefined, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, type: this.type === TEXT_FIELD_TYPES.PASSWORD && this.showPassword ? TEXT_FIELD_TYPES.TEXT : this.type, value: this.value, disabled: this.isDisabled, readOnly: this.readOnly, tabIndex: this.readOnly ? -1 : undefined, placeholder: this.placeholder, autocomplete: this.autocomplete, pattern: this.pattern !== '' ? this.pattern : undefined, minLength: this.minLength !== 0 ? this.minLength : undefined, maxLength: this.effectiveMaxLength, onMouseDown: (e) => this.handleMouseDown(e), onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e), onFocus: (e) => this.handleFocus(e), onBlur: (e) => this.handleBlur(e) }), (showClear || this.type === TEXT_FIELD_TYPES.PASSWORD) && (index.h("div", { key: 'e5dc4cab3d536ef09eaeae96ca68a7d4b4e15d92', class: "bds-text-field__actions" }, showClear && (index.h("button", { key: 'b18d06de000c3ea465be221dcbb77ab49bb3949f', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, index.h("em", { key: '0aa5d75c5214b7832a2a2e80a1cd2c42af5bea9a', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (index.h("button", { key: 'fd97135cca8d32178461bf7109c9b6a7eec543e9', class: "bds-text-field__action bds-text-field__action--password", type: "button", "aria-label": this.showPassword ? ARIA_LABELS.HidePassword : ARIA_LABELS.ShowPassword, onClick: () => this.handleShowPassword() }, index.h("em", { key: '0de72e7756ad62bbe4fb5f925526071720f358db', class: this.showPasswordIcon })))))), showFooter && (index.h("div", { key: '9d1c0e8920511650ab6711f2f813c01491d52414', class: "bds-text-field__footer" }, helperContent !== '' && (index.h("bds-typography", { key: 'f27235a7a38f34b9a9f7bae762c3c6be12acd8b0', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (index.h("span", { key: '3aa43ea8bd6a35963f0983ec8814e0ce19ee71ce', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }