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

package/dist/collection/components/feedback/bds-tag/bds-tag.css

@@ -0,0 +1,202 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.bds-tag {
+  display: inline-flex;
+  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) {
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-tag:focus:not(.bds-tag--selected) {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-tag--selected {
+  outline: none;
+  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: flex;
+  padding: var(--boreal-spacing-3xs);
+  width: var(--boreal-spacing-s);
+  height: var(--boreal-spacing-s);
+  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 {
+  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;
+  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;
+  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);
+}

package/dist/collection/components/feedback/bds-tag/bds-tag.js

@@ -0,0 +1,375 @@
+import { Fragment, Host, h } from "@stencil/core";
+import { TAG_COLORS } from "./types";
+import { createId, validatePropValue } from "../../../utils/index";
+/**
+ * Tag component used to represent categories, metadata, or removable filters.
+ *
+ * @summary Displays a label with optional leading/trailing icons and dismissal capability.
+ *
+ * @slot - Default slot for custom text content after the icon.
+ * @slot icon - Icon slot for icon content before the text.
+ *
+ * @fires bdsClose - Emitted when the tag is closed via the close button or Delete key.
+ * @fires bdsSelect - Emitted when the tag is selected via a click or Space/Enter key.
+ *
+ */
+export class BdsTag {
+    constructor() {
+        this._id = 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() {
+        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 (h(Fragment, null, h("span", { "aria-hidden": "true", class: "bds-tag__icon" }, h("slot", { name: "icon" })), h("span", { class: "bds-tag__text" }, h("slot", null))));
+    }
+    renderCloseIcon() {
+        return (h("button", { class: "bds-tag__close-button", "aria-label": this.closeButtonLabel, onClick: e => this.handleClose(e), disabled: this.disabled, type: "button" }, h("em", { class: "bds-icon-close", "aria-hidden": "true" })));
+    }
+    render() {
+        const classes = this.getClasses();
+        const hasCloseButton = !this.readonly;
+        const isSelectable = this.multiselect;
+        return (h(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()));
+    }
+    static get is() { return "bds-tag"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "multiselect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "ITag['multiselect']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ITag": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/feedback/bds-tag/types/index.ts::ITag",
+                            "referenceLocation": "ITag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the tag is selectable or not."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiselect",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "ITag['selected']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ITag": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/feedback/bds-tag/types/index.ts::ITag",
+                            "referenceLocation": "ITag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the tag is selected or not."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "closeButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ITag['closeButtonLabel']",
+                    "resolved": "string",
+                    "references": {
+                        "ITag": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/feedback/bds-tag/types/index.ts::ITag",
+                            "referenceLocation": "ITag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the close button when visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-button-label",
+                "defaultValue": "'Close tag'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ITag['color']",
+                    "resolved": "\"cobalt\" | \"cyan\" | \"gray\" | \"lime\" | \"orange\" | \"purple\" | \"rose\" | \"teal\"",
+                    "references": {
+                        "ITag": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/feedback/bds-tag/types/index.ts::ITag",
+                            "referenceLocation": "ITag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"gray\""
+                        }],
+                    "text": "Visual color variant: 'gray', 'cyan', 'cobalt', 'teal', 'lime', 'orange', 'rose', or 'purple'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "TAG_COLORS.GRAY"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "ITag['readonly']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ITag": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/feedback/bds-tag/types/index.ts::ITag",
+                            "referenceLocation": "ITag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Hides the close button that allows users to dismiss the tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "ITag['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "ITag": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/feedback/bds-tag/types/index.ts::ITag",
+                            "referenceLocation": "ITag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Disables interaction with the tag. Reduces opacity and prevents interactions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalSelected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsClose",
+                "name": "bdsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tag is closed via the close button or Delete key."
+                },
+                "complexType": {
+                    "original": "TagEventPayload",
+                    "resolved": "{ id: string; selected: boolean; el: HTMLElement; }",
+                    "references": {
+                        "TagEventPayload": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/feedback/bds-tag/types/index.ts::TagEventPayload",
+                            "referenceLocation": "TagEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "bdsSelect",
+                "name": "bdsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tag is selected via a click or Space/Enter key."
+                },
+                "complexType": {
+                    "original": "TagEventPayload",
+                    "resolved": "{ id: string; selected: boolean; el: HTMLElement; }",
+                    "references": {
+                        "TagEventPayload": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/feedback/bds-tag/types/index.ts::TagEventPayload",
+                            "referenceLocation": "TagEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "selected",
+                "methodName": "syncSelectedFromProp"
+            }];
+    }
+}

package/dist/collection/components/feedback/bds-tag/types/ITag.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/feedback/bds-tag/types/enum.js

@@ -0,0 +1,10 @@
+export const TAG_COLORS = {
+    GRAY: 'gray',
+    CYAN: 'cyan',
+    TEAL: 'teal',
+    LIME: 'lime',
+    ORANGE: 'orange',
+    COBALT: 'cobalt',
+    ROSE: 'rose',
+    PURPLE: 'purple',
+};

package/dist/collection/components/feedback/bds-tag/types/index.js

@@ -0,0 +1,3 @@
+export * from './enum';
+export * from './ITag';
+export * from './types';

package/dist/collection/components/feedback/bds-tag/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/forms/bds-checkbox/bds-checkbox.js

@@ -130,7 +130,7 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
             'bds-checkbox--error': this.error,
             'bds-checkbox--disabled': this.isDisabled,
         };
-        return (h(Host, { key: 'c65361a26d92b0eb0c7dba951a915e5c3bfe4dbe', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, tabindex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'ab3ba51a82f980852a42eff1bf81b793518a7ec0', class: "bds-checkbox__box" }, this.renderCheckIcon()), h("span", { key: 'b25d1b1dd27098bbead5095610bbf16f6a3eabad', class: "bds-checkbox__label" }, this.label ? this.label : h("slot", null))));
+        return (h(Host, { key: '4c2aa0c0e06451d258204ed2aaf92c41f730a2a8', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, tabindex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'de6763aaef951d9236cbf4df7ac49fd09f998e93', class: "bds-checkbox__box" }, this.renderCheckIcon()), h("span", { key: '571e62e3cde00561465a155bc1399f6074516a03', class: "bds-checkbox__label" }, this.label ? this.label : h("slot", null))));
     }
     static get is() { return "bds-checkbox"; }
     static get formAssociated() { return true; }

package/dist/collection/components/forms/bds-flag/bds-flag.js

@@ -182,7 +182,7 @@ export class BdsFlag {
         const flagContentClass = this.flagContentClass;
         const flagClass = this.flagClass;
         const flagStyle = !this.isGlobal ? { backgroundImage: `url(${this.flagUrl(flag)})` } : {};
-        return (h(Host, { key: 'a3d7548922ce9ad6bd67bdc906e0cd3590a76a35', class: flagClass, "aria-label": countryName, role: "img" }, flag && h("span", { key: '44299f5031e4adb04837eabefa37f70f7dc8a9b8', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), h("span", { key: 'ce37d02816caf7bfc7fa22f1897de481a8d82bbb', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
+        return (h(Host, { key: 'c8f41b293eb2cfb1313aaa5c1ecbd4de3bf2e27c', class: flagClass, "aria-label": countryName, role: "img" }, flag && h("span", { key: '21f885fe3f7de150dd3766d3c942a6131d420a26', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), h("span", { key: '08b819e1754ea9675306060ef1b8bcfa94546b09', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
     }
     static get is() { return "bds-flag"; }
     static get originalStyleUrls() {

package/dist/collection/components/forms/bds-text-field/bds-text-field.js

@@ -323,7 +323,7 @@ export class BdsTextField extends Mixin(formAssociatedMixin) {
                 : this.helperText;
         const showFooter = helperContent !== '' || (this.counter && this.charCount > 0);
         const typographyState = this.isDisabled ? 'disabled' : effectiveError ? 'error' : 'default';
-        return (h(Host, { key: '8fcf734b92dfa2ad75a32bef27efea78bd61dd63', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (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)), h("div", { key: '89dc5c7830197786e7dc67b87f64a0b63c8a8c84', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (h("span", { key: 'a4139e0ce3b3d37bb33d55b5811e439974ed9d53', class: "bds-text-field__sublabel" }, this.icon !== '' && h("em", { key: '5fc8f5a49b348fe07c63242243274946e21aa782', class: this.icon }), this.sublabel)), h("slot", { key: 'a8f62dba555a26aba3b1105402f0afca1378c83a', name: "prefix" }), 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) && (h("div", { key: 'c9ae74b2be87e2759d60ad69c9c91b95bc199163', class: "bds-text-field__actions" }, showClear && (h("button", { key: 'd94534386505f9c54aabe892aec58d81b6a0ea94', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, h("em", { key: '7899ffad5be71b731ae8ead1d5601e3fc6b5f6a5', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (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() }, h("em", { key: 'e886085b840a351a7455a1adb685996835e47118', class: this.showPasswordIcon })))))), showFooter && (h("div", { key: '9b47bbaff802d0c4125e45c87f1e7366418dfdcc', class: "bds-text-field__footer" }, helperContent !== '' && (h("bds-typography", { key: '64265da85a16152af33b3f94c05e4d8562dc26df', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (h("span", { key: '2a264545ba46b8d6908adabe729a1256334535ef', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
+        return (h(Host, { key: '96b7e057fa7f25e8f7d13b7de0fd17f12de602bb', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (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)), h("div", { key: 'f579762db25f65031917874dbb4c2347b5d9f027', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (h("span", { key: '191d2ccec9baf8b739163eea112dce9a1073f4bd', class: "bds-text-field__sublabel" }, this.icon !== '' && h("em", { key: '1cc1b1b7ece610b2a18ba872c4b7035d2239731b', class: this.icon }), this.sublabel)), h("slot", { key: 'ba7b08573b6ae35c10649125991a2bbed15f31f3', name: "prefix" }), 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) && (h("div", { key: 'e5dc4cab3d536ef09eaeae96ca68a7d4b4e15d92', class: "bds-text-field__actions" }, showClear && (h("button", { key: 'b18d06de000c3ea465be221dcbb77ab49bb3949f', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, h("em", { key: '0aa5d75c5214b7832a2a2e80a1cd2c42af5bea9a', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (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() }, h("em", { key: '0de72e7756ad62bbe4fb5f925526071720f358db', class: this.showPasswordIcon })))))), showFooter && (h("div", { key: '9d1c0e8920511650ab6711f2f813c01491d52414', class: "bds-text-field__footer" }, helperContent !== '' && (h("bds-typography", { key: 'f27235a7a38f34b9a9f7bae762c3c6be12acd8b0', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (h("span", { key: '3aa43ea8bd6a35963f0983ec8814e0ce19ee71ce', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
     }
     static get is() { return "bds-text-field"; }
     static get formAssociated() { return true; }