@uh-design-system/component-library 1.4.0-rc.1 → 1.4.0-rc.3

package/dist/esm/ds-tablist.entry.js

@@ -0,0 +1,164 @@
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-B2DLd639.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-D28csnUe.js';
+import { t as transformTagName, e as throttle, a as ifDefined, d as declareComponentDependencies } from './utils-J5Ghj1_T.js';
+import { t as tabsFactory } from './tabsFactory-BpAOOQo9.js';
+import './tabsContext-9ZMZNA_E.js';
+
+const dsTablistCss = () => `.ds-no-style-leak.sc-ds-tablist *.sc-ds-tablist{all:unset;box-sizing:border-box;display:block}.ds-tablist__KmYz6O.sc-ds-tablist{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__scrollable.sc-ds-tablist{display:flex;gap:var(--ds-spacing-2xSmall);overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__scrollable.sc-ds-tablist:focus,.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__scrollable.sc-ds-tablist:focus-visible,.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__scrollable.sc-ds-tablist:-moz-focusring{outline:none;box-shadow:none}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__scrollable--container.sc-ds-tablist{background:linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__scrollable--line.sc-ds-tablist{background:linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button.sc-ds-tablist{position:absolute;top:0;bottom:0;display:flex;aspect-ratio:1;justify-content:center;align-items:center}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button--backward.sc-ds-tablist{left:0}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button--forward.sc-ds-tablist{right:0}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button--container.sc-ds-tablist{border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-neutralLight)}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button--line.sc-ds-tablist{border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button--container.ds-tablist__KmYz6O__button--backward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 calc(-1 * var(--ds-spacing-small)) 0 0)}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button--container.ds-tablist__KmYz6O__button--forward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 0 0 calc(-1 * var(--ds-spacing-small)))}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button[hidden].sc-ds-tablist{display:none}.ds-tablist__KmYz6O.sc-ds-tablist .ds-tablist__KmYz6O__button__ds-button.sc-ds-tablist{width:100%;height:100%}`;
+
+const DsTablist = class extends Mixin(tabsFactory) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.dsTabChange = createEvent(this, "dsTabChange", 7);
+    }
+    get el() { return getElement(this); }
+    RESIZE_THROTTLE_TIMEOUT = 100;
+    scrollableElement;
+    backwardButtonElement;
+    forwardButtonElement;
+    dsTabChange;
+    dsAriaLabel;
+    dsAriaLabelledby;
+    showBackwardButton = false;
+    showForwardButton = false;
+    get DsTab() {
+        return transformTagName('ds-tab', 'ds-tablist', this.el);
+    }
+    get DsButton() {
+        return transformTagName('ds-button', 'ds-tablist', this.el);
+    }
+    setButtonsVisibility = (target) => {
+        if (!target)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = target;
+        this.showBackwardButton = scrollLeft > 0;
+        this.showForwardButton = Math.round(scrollLeft + clientWidth) < scrollWidth;
+    };
+    throttledSetButtonsVisibility = throttle(this.setButtonsVisibility, this.RESIZE_THROTTLE_TIMEOUT);
+    async tabConnected() {
+        this.setButtonsVisibility(this.scrollableElement);
+    }
+    async tabDisconnected() {
+        this.setButtonsVisibility(this.scrollableElement);
+    }
+    handleResize() {
+        this.throttledSetButtonsVisibility(this.scrollableElement);
+    }
+    handleTabClick(event) {
+        event.stopPropagation();
+        if (event.detail.tabId === this.context?.currentTab)
+            return;
+        this.dsTabChange.emit(event.detail);
+    }
+    scrollTabIntoView = (tab) => {
+        if (!this.scrollableElement)
+            return;
+        const tabNode = tab.querySelector('[role="tab"]');
+        if (!tabNode)
+            return;
+        const leftCover = this.backwardButtonElement && !this.backwardButtonElement.hidden ? this.backwardButtonElement.offsetWidth : 0;
+        const rightCover = this.forwardButtonElement && !this.forwardButtonElement.hidden ? this.forwardButtonElement.offsetWidth : 0;
+        const { left, right } = this.scrollableElement.getBoundingClientRect();
+        const { left: tabLeft, right: tabRight } = tabNode.getBoundingClientRect();
+        const visibilityBuffer = 16;
+        let next = this.scrollableElement.scrollLeft;
+        if (tabLeft < left + leftCover + visibilityBuffer) {
+            next -= left + leftCover + visibilityBuffer - tabLeft;
+        }
+        else if (tabRight > right - rightCover - visibilityBuffer) {
+            next += tabRight - (right - rightCover - visibilityBuffer);
+        }
+        const max = this.scrollableElement.scrollWidth - this.scrollableElement.clientWidth;
+        this.scrollableElement.scrollTo({ left: Math.max(0, Math.min(next, max)), behavior: 'auto' });
+    };
+    handleTabFocus(event) {
+        event.stopPropagation();
+        this.scrollTabIntoView(event.target);
+    }
+    handleKeyDown = (event) => {
+        event.stopPropagation();
+        const activeTab = event.target.closest(this.DsTab);
+        const tabs = Array.from(this.el.querySelectorAll(this.DsTab));
+        const activeTabIndex = tabs.indexOf(activeTab);
+        if (activeTabIndex === -1)
+            return;
+        let nextIndex = 0;
+        switch (event.key) {
+            case 'Enter':
+            case ' ': {
+                if (this.context?.currentTab === tabs[activeTabIndex].dsId)
+                    return;
+                this.dsTabChange.emit({ tabId: tabs[activeTabIndex].dsId, tabPanelId: tabs[activeTabIndex].dsTabPanelId });
+                return;
+            }
+            case 'ArrowRight': {
+                nextIndex = (activeTabIndex + 1) % tabs.length;
+                break;
+            }
+            case 'ArrowLeft': {
+                nextIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
+                break;
+            }
+            case 'Home': {
+                nextIndex = 0;
+                break;
+            }
+            case 'End': {
+                nextIndex = tabs.length - 1;
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        tabs[nextIndex].setFocus();
+    };
+    handleScroll = (event) => {
+        const target = event.target;
+        this.setButtonsVisibility(target);
+    };
+    handleButtonClick = (direction) => {
+        if (!this.scrollableElement)
+            return;
+        const scrollAmount = this.scrollableElement.clientWidth * 0.8;
+        const left = direction === 'backward' ? this.scrollableElement.scrollLeft - scrollAmount : this.scrollableElement.scrollLeft + scrollAmount;
+        this.scrollableElement.scrollTo({ left, behavior: 'smooth' });
+    };
+    connectedCallback() {
+        this.el.addEventListener('keydown', this.handleKeyDown);
+    }
+    componentDidLoad() {
+        this.setButtonsVisibility(this.scrollableElement);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+    }
+    renderButton = (direction) => {
+        const baseClass = cx('ds-tablist');
+        const iconName = direction === 'backward' ? 'chevron_backward' : 'chevron_forward';
+        return (h(this.DsButton, { class: `${baseClass}__button__ds-button`, onClick: () => this.handleButtonClick(direction), dsAriaHidden: true, dsTabIndex: -1, dsVariant: "supplementary", dsColour: "black", dsIcon: iconName }));
+    };
+    render() {
+        const baseClass = cx('ds-tablist');
+        const scrollableClass = `${baseClass}__scrollable`;
+        const buttonClass = `${baseClass}__button`;
+        return (h("div", { key: '0b8939092cebd964f1d059c39e96356c9667b30b', class: baseClass }, h("div", { key: '95df4f0c08c9d7683b7ad33c619f6316a01645bd', ref: el => (this.scrollableElement = el), class: classNames(scrollableClass, {
+                [`${scrollableClass}--container`]: this.context?.variant === 'container',
+                [`${scrollableClass}--line`]: this.context?.variant === 'line',
+            }), role: "tablist", ...ifDefined('aria-label', this.dsAriaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), onScroll: this.handleScroll }, h("slot", { key: '4f8a069e168c9de0387347d08c618abd0b6167a6' })), h("div", { key: '53fb3cbeca8828a5e8cb29252b62458902b2d292', ref: el => (this.backwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--backward`, {
+                [`${buttonClass}--container`]: this.context?.variant === 'container',
+                [`${buttonClass}--line`]: this.context?.variant === 'line',
+            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), h("div", { key: '4a4b57eb33f521de240bb884252b0c557c03e7be', ref: el => (this.forwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--forward`, {
+                [`${buttonClass}--container`]: this.context?.variant === 'container',
+                [`${buttonClass}--line`]: this.context?.variant === 'line',
+            }), "aria-hidden": "true", hidden: !this.showForwardButton }, this.renderButton('forward'))));
+    }
+};
+declareComponentDependencies([h("ds-tab", { dsId: "", dsTabPanelId: "" }), h("ds-button", null)]);
+DsTablist.style = dsTablistCss();
+
+export { DsTablist as ds_tablist };

package/dist/esm/ds-tabpanel.entry.js

@@ -0,0 +1,29 @@
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-B2DLd639.js';
+import { c as cx } from './cx-D28csnUe.js';
+import { t as tabsFactory } from './tabsFactory-BpAOOQo9.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import './tabsContext-9ZMZNA_E.js';
+import './utils-J5Ghj1_T.js';
+
+const dsTabpanelCss = () => `.ds-no-style-leak.sc-ds-tabpanel *.sc-ds-tabpanel{all:unset;box-sizing:border-box;display:block}.ds-tabpanel__KmYz6O.sc-ds-tabpanel{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-tabpanel__KmYz6O--container.sc-ds-tabpanel{border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tabpanel__KmYz6O--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__KmYz6O--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-medium)}}.ds-tabpanel__KmYz6O--container.ds-tabpanel__KmYz6O--padded.sc-ds-tabpanel{padding:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__KmYz6O--container.ds-tabpanel__KmYz6O--padded.sc-ds-tabpanel{padding:var(--ds-spacing-medium)}}.ds-tabpanel__KmYz6O[hidden].sc-ds-tabpanel{display:none}`;
+
+const DsTabpanel = class extends Mixin(tabsFactory) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsId;
+    dsTabId;
+    dsPadded = true;
+    render() {
+        const baseClass = cx('ds-tabpanel');
+        return (h("div", { key: '02cfe60faa9a5482863fd37c36fe8280065c63c2', id: this.dsId, class: classNames(baseClass, {
+                [`${baseClass}--container`]: this.context?.variant === 'container',
+                [`${baseClass}--padded`]: this.dsPadded,
+            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '180822110e02fc238cc144ca5028eb64d2b365dc' })));
+    }
+};
+DsTabpanel.style = dsTabpanelCss();
+
+export { DsTabpanel as ds_tabpanel };

package/dist/esm/ds-tabs.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, e as getElement, h } from './index-B2DLd639.js';
+import { c as cx } from './cx-D28csnUe.js';
+import { s as storeTabsContext, p as provideTabsContext } from './tabsContext-9ZMZNA_E.js';
+import './utils-J5Ghj1_T.js';
+
+const dsTabsCss = () => `.ds-no-style-leak.sc-ds-tabs *.sc-ds-tabs{all:unset;box-sizing:border-box;display:block}.ds-tabs__KmYz6O.sc-ds-tabs{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}`;
+
+const DsTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsCurrentTab;
+    dsCurrentTabPanel;
+    dsVariant = 'container';
+    handleTabChange(event) {
+        event.stopPropagation();
+    }
+    createContext = () => {
+        return {
+            currentTab: this.dsCurrentTab,
+            currentTabPanel: this.dsCurrentTabPanel,
+            variant: this.dsVariant,
+        };
+    };
+    storeContext = () => {
+        const context = this.createContext();
+        storeTabsContext(this.el, context);
+    };
+    updateContext = () => {
+        const context = this.createContext();
+        provideTabsContext(this.el, context);
+    };
+    componentWillLoad() {
+        this.storeContext();
+    }
+    componentDidUpdate() {
+        this.updateContext();
+    }
+    render() {
+        const baseClass = cx('ds-tabs');
+        return (h("div", { key: '8d1dd34db51da0c57559334cc3702ac2f8874eb4', class: baseClass }, h("slot", { key: '33780bd8adb124f21410b823712bff55c2c6ff2d' })));
+    }
+};
+DsTabs.style = dsTabsCss();
+
+export { DsTabs as ds_tabs };

package/dist/esm/ds-tag-group.entry.js

@@ -1,9 +1,9 @@
-import { h, r as registerInstance, d as getElement } from './index-BFo2Vd2B.js';
+import { h, r as registerInstance, e as getElement } from './index-B2DLd639.js';
 import { i as idGenerator, d as declareComponentDependencies, t as transformTagName, a as ifDefined } from './utils-J5Ghj1_T.js';
-import { c as cx } from './cx-CXBTg5Nh.js';
+import { c as cx } from './cx-D28csnUe.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
 
-const dsTagGroupCss = ".ds-tag-group__MGLLcm__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
+const dsTagGroupCss = () => `.ds-tag-group__KmYz6O__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}`;
 
 const tagGroupIdGenerator = idGenerator('ds-tag-group');
 const DsTagGroup = class {
@@ -29,10 +29,10 @@ const DsTagGroup = class {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
-        return (h("div", { key: 'ee16fff7ff64a4875ab3498b62b6931e9da237d2', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'd1b371536759a7dbfc875c50044b9ea73057ae6f', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'a44a327d8b6b0b82a6ae9e82d0f0d9b31b263ede', name: "label" }), h("slot", { key: '644f840a3910ca10ac6a105d6c821c9b825fe8c2', name: "assistiveText" })), h("div", { key: '78624b38d7b19433ef54b120a3c3590db538ccec', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '725fc438b3050a584cbb0c6c6fa2a353568c3647' }))));
+        return (h("div", { key: '506cb8b9335b5cdbf8dcd67e1ac09b523dbc7c71', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'cfbd992d2f91d68192e511d61dbfd88cf1fc5cb5', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '00fdecc8b0e2fbe3b57b9dd59803bb8e84c604c1', name: "label" }), h("slot", { key: '209aa3a2a855dfa78e2f776d01472c9bb08d049d', name: "assistiveText" })), h("div", { key: '0bfdd460d007fc112e931770e41c593b874692dc', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '87b3169b5eb8eb25f83889f533005c738fadee7e' }))));
     }
 };
 declareComponentDependencies([h("ds-group-label", null)]);
-DsTagGroup.style = dsTagGroupCss;
+DsTagGroup.style = dsTagGroupCss();
 
 export { DsTagGroup as ds_tag_group };

package/dist/esm/ds-text-area.entry.js

@@ -1,22 +1,22 @@
-import { h, r as registerInstance, c as createEvent, d as getElement, f as forceUpdate, F as Fragment } from './index-BFo2Vd2B.js';
+import { h, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, F as Fragment } from './index-B2DLd639.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { q as characterOverage, u as tooLong, x as charactersRemaining, g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-mf-AhR8R.js';
+import { q as characterOverage, u as tooLong, x as charactersRemaining, g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-DqRIe20i.js';
 import { i as idGenerator, d as declareComponentDependencies, b as debounce, t as transformTagName, a as ifDefined } from './utils-J5Ghj1_T.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { c as cx } from './cx-CXBTg5Nh.js';
+import { c as cx } from './cx-D28csnUe.js';
 import { a as FEEDBACK_SET_TIMEOUT } from './constants-CLNvzo86.js';
-import './store-8AoWWX-3.js';
+import './store-DkpUIa5P.js';
 
-const dsTextAreaCss = ".ds-no-style-leak.sc-ds-text-area *.sc-ds-text-area,.ds-text-area__MGLLcm.sc-ds-text-area,.ds-text-area__MGLLcm.sc-ds-text-area .sc-ds-text-area:where([class*=__MGLLcm]){all:unset;box-sizing:border-box}.ds-no-style-leak.sc-ds-text-area *.sc-ds-text-area{display:block}.sc-ds-text-area-h{display:inline-block}.sc-ds-text-area-h:has(.ds-text-area__MGLLcm__container--full-width){width:100%}.ds-text-area__MGLLcm.sc-ds-text-area{display:block}.ds-text-area__MGLLcm__container.sc-ds-text-area:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-text-area__MGLLcm__container.sc-ds-text-area:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-text-area__MGLLcm__container.sc-ds-text-area{box-sizing:border-box;display:inline-flex;position:relative;align-items:flex-start;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding:0}.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid.sc-ds-text-area{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid.sc-ds-text-area:hover:not(.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid.ds-text-area__MGLLcm__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-area__MGLLcm__container--valid.sc-ds-text-area{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-area__MGLLcm__container--valid.sc-ds-text-area:hover:not(.ds-text-area__MGLLcm__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-area__MGLLcm__container--valid.ds-text-area__MGLLcm__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-area__MGLLcm__container--readonly.sc-ds-text-area,.ds-text-area__MGLLcm__container--disabled.sc-ds-text-area{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-area__MGLLcm__container.sc-ds-text-area:focus-within:not(.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--valid.sc-ds-text-area,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--readonly).sc-ds-text-area{border-color:var(--ds-borderColor-primary)}.ds-text-area__MGLLcm__container.sc-ds-text-area:hover:not(.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--disabled,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--readonly.sc-ds-text-area,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--active.sc-ds-text-area,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid.sc-ds-text-area,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--valid.sc-ds-text-area,.ds-text-area__MGLLcm__container.sc-ds-text-area:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-area__MGLLcm__container.active.sc-ds-text-area:not(.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--disabled,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--readonly.sc-ds-text-area,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--invalid.sc-ds-text-area,.ds-text-area__MGLLcm__container.ds-text-area__MGLLcm__container--valid).sc-ds-text-area{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-area__MGLLcm__container--full-width.sc-ds-text-area{width:100%}.ds-text-area__MGLLcm__external-button.sc-ds-text-area,.ds-text-area__MGLLcm.sc-ds-text-area-s>[slot=suffix],.ds-text-area__MGLLcm .sc-ds-text-area-s>[slot=suffix]{margin-inline-start:var(--ds-spacing-xSmall);align-self:flex-start}.ds-text-area__MGLLcm__validity-container.sc-ds-text-area{align-items:center;width:100%;font-size:var(--ds-fontSize-14)}.ds-text-area__MGLLcm__validity-container--has-character-limit.sc-ds-text-area{display:flex;gap:var(--ds-spacing-small);justify-content:space-between}.ds-text-area__MGLLcm__character-count.sc-ds-text-area{margin-top:var(--ds-spacing-2xSmall)}.ds-text-area__MGLLcm__character-count--over-limit.sc-ds-text-area{color:var(--ds-textColor-danger)}.ds-text-area__MGLLcm__character-count.sc-ds-text-area>small.sc-ds-text-area{display:inline-block;font-size:inherit}.ds-text-area__MGLLcm__textarea.sc-ds-text-area{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:288px;min-width:0;min-height:96px;box-sizing:border-box;background-color:unset;color:var(--ds-textColor-default);border:none;padding:var(--ds-spacing-2xSmall)}.ds-text-area__MGLLcm__textarea.sc-ds-text-area::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-area__MGLLcm__textarea.sc-ds-text-area:disabled{color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);cursor:not-allowed}.ds-text-area__MGLLcm__textarea.sc-ds-text-area:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-area__MGLLcm__textarea.sc-ds-text-area:focus{outline:none;border:none}.ds-text-area__MGLLcm__textarea--resize-both.sc-ds-text-area{resize:both}.ds-text-area__MGLLcm__textarea--resize-auto.sc-ds-text-area,.ds-text-area__MGLLcm__textarea--resize-none.sc-ds-text-area{resize:none}.ds-text-area__MGLLcm__textarea--resize-auto.sc-ds-text-area{overflow:hidden}.ds-text-area__MGLLcm__textarea--resize-vertical.sc-ds-text-area{resize:vertical}.ds-text-area__MGLLcm__textarea--resize-horizontal.sc-ds-text-area{resize:horizontal}.ds-text-area__MGLLcm__textarea--full-width.sc-ds-text-area{width:100%}";
+const dsTextAreaCss = () => `.ds-no-style-leak.sc-ds-text-area *.sc-ds-text-area{all:unset;box-sizing:border-box;display:block}.sc-ds-text-area-h{display:inline-block}.sc-ds-text-area-h:has(.ds-text-area__KmYz6O__container--full-width){width:100%}.ds-text-area__KmYz6O.sc-ds-text-area{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-text-area__KmYz6O__container.sc-ds-text-area:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-text-area__KmYz6O__container.sc-ds-text-area:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-text-area__KmYz6O__container.sc-ds-text-area{box-sizing:border-box;display:inline-flex;position:relative;align-items:flex-start;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding:0}.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid.sc-ds-text-area{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid.sc-ds-text-area:hover:not(.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid.ds-text-area__KmYz6O__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-area__KmYz6O__container--valid.sc-ds-text-area{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-area__KmYz6O__container--valid.sc-ds-text-area:hover:not(.ds-text-area__KmYz6O__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-area__KmYz6O__container--valid.ds-text-area__KmYz6O__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-area__KmYz6O__container--readonly.sc-ds-text-area,.ds-text-area__KmYz6O__container--disabled.sc-ds-text-area{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-area__KmYz6O__container.sc-ds-text-area:focus-within:not(.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--valid.sc-ds-text-area,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--readonly).sc-ds-text-area{border-color:var(--ds-borderColor-primary)}.ds-text-area__KmYz6O__container.sc-ds-text-area:hover:not(.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--disabled,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--readonly.sc-ds-text-area,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--active.sc-ds-text-area,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid.sc-ds-text-area,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--valid.sc-ds-text-area,.ds-text-area__KmYz6O__container.sc-ds-text-area:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-area__KmYz6O__container.active.sc-ds-text-area:not(.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--disabled,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--readonly.sc-ds-text-area,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--invalid.sc-ds-text-area,.ds-text-area__KmYz6O__container.ds-text-area__KmYz6O__container--valid).sc-ds-text-area{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-area__KmYz6O__container--full-width.sc-ds-text-area{width:100%}.ds-text-area__KmYz6O__external-button.sc-ds-text-area,.ds-text-area__KmYz6O.sc-ds-text-area-s>[slot=suffix],.ds-text-area__KmYz6O .sc-ds-text-area-s>[slot=suffix]{margin-inline-start:var(--ds-spacing-xSmall);align-self:flex-start}.ds-text-area__KmYz6O__validity-container.sc-ds-text-area{align-items:center;width:100%;font-size:var(--ds-fontSize-14)}.ds-text-area__KmYz6O__validity-container--has-character-limit.sc-ds-text-area{display:flex;gap:var(--ds-spacing-small);justify-content:space-between}.ds-text-area__KmYz6O__character-count.sc-ds-text-area{margin-top:var(--ds-spacing-2xSmall)}.ds-text-area__KmYz6O__character-count--over-limit.sc-ds-text-area{color:var(--ds-textColor-danger)}.ds-text-area__KmYz6O__character-count.sc-ds-text-area>small.sc-ds-text-area{display:inline-block;font-size:inherit}.ds-text-area__KmYz6O__textarea.sc-ds-text-area{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:288px;min-width:0;min-height:96px;box-sizing:border-box;background-color:unset;color:var(--ds-textColor-default);border:none;padding:var(--ds-spacing-2xSmall)}.ds-text-area__KmYz6O__textarea.sc-ds-text-area::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-area__KmYz6O__textarea.sc-ds-text-area:disabled{color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);cursor:not-allowed}.ds-text-area__KmYz6O__textarea.sc-ds-text-area:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-area__KmYz6O__textarea.sc-ds-text-area:focus{outline:none;border:none}.ds-text-area__KmYz6O__textarea--resize-both.sc-ds-text-area{resize:both}.ds-text-area__KmYz6O__textarea--resize-auto.sc-ds-text-area,.ds-text-area__KmYz6O__textarea--resize-none.sc-ds-text-area{resize:none}.ds-text-area__KmYz6O__textarea--resize-auto.sc-ds-text-area{overflow:hidden}.ds-text-area__KmYz6O__textarea--resize-vertical.sc-ds-text-area{resize:vertical}.ds-text-area__KmYz6O__textarea--resize-horizontal.sc-ds-text-area{resize:horizontal}.ds-text-area__KmYz6O__textarea--full-width.sc-ds-text-area{width:100%}`;
 
 const textareaIdGenerator = idGenerator('ds-text-area');
 const DsTextArea = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dsChange = createEvent(this, "dsChange");
-        this.dsInput = createEvent(this, "dsInput");
-        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
-        this.dsValidity = createEvent(this, "dsValidity");
+        this.dsChange = createEvent(this, "dsChange", 7);
+        this.dsInput = createEvent(this, "dsInput", 7);
+        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid", 7);
+        this.dsValidity = createEvent(this, "dsValidity", 7);
     }
     inheritedAttributes = {};
     textareaElement;
@@ -212,7 +212,7 @@ const DsTextArea = class {
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Fragment, { key: '96a12866718d05b8d0bcec52ae110b47ecb87087' }, h(DsControlLabel, { key: '37329da40f540d2a03198b983cc8f1f8c652b907', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: 'e14d89ddcd0350757d7eabf6f858817f947ec718', name: "label" }), h("slot", { key: 'f30fb8640e9a7cfb09ca2db3a798afa691e0206c', name: "assistiveText" })), h("div", { key: '0bf1214ac9652c40f4e8958943bd900757d8ecad', onMouseDown: () => (this.textareaActive = true), onMouseUp: () => (this.textareaActive = false), onClick: () => this.handleTextareaContainerClick(), class: classNames(containerClass, {
+        return (h(Fragment, { key: 'b552302f5db01214407d5f62545b2ef07a9dfb44' }, h(DsControlLabel, { key: '37035555f649c105ec460e6399752efaf1236f51', dsHtmlFor: this.dsId, dsLabel: this.getLabelText(), dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId }, h("slot", { key: 'a68186dfa927d07149c2d63138077da1cc08db74', name: "label" }), h("slot", { key: 'd40242957ab517309673badf3740068d22db6705', name: "assistiveText" })), h("div", { key: '5edc680c64cdcdecb3d5e6f4cad5e96858ed3644', onMouseDown: () => (this.textareaActive = true), onMouseUp: () => (this.textareaActive = false), onClick: () => this.handleTextareaContainerClick(), class: classNames(containerClass, {
                 [`${containerClass}--disabled`]: this.dsDisabled,
                 [`${containerClass}--readonly`]: this.dsReadonly,
                 [`${containerClass}--valid`]: !!this.dsSuccessText,
@@ -220,7 +220,7 @@ const DsTextArea = class {
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.textareaActive,
                 [`${containerClass}--full-width`]: this.dsFullWidth,
-            }) }, h("textarea", { key: 'e33eed220489e8ae118e34dbeaf0c9e27ed9648c', ref: e => (this.textareaElement = e), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: this.dsValue !== undefined ? this.dsValue : this.internalValue, placeholder: this.dsPlaceholder, readonly: this.dsReadonly, required: this.dsRequired, class: classNames(`${baseClass}__textarea`, `${baseClass}__textarea--resize-${this.dsResizing}`, {
+            }) }, h("textarea", { key: '22b3486c977abffe10ffefa1a61bf0f8a8b6e73a', ref: e => (this.textareaElement = e), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, value: this.dsValue !== undefined ? this.dsValue : this.internalValue, placeholder: this.dsPlaceholder, readonly: this.dsReadonly, required: this.dsRequired, class: classNames(`${baseClass}__textarea`, `${baseClass}__textarea--resize-${this.dsResizing}`, {
                 [`${baseClass}__textarea--full-width`]: this.dsFullWidth,
             }), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby ||
                 classNames({
@@ -228,23 +228,35 @@ const DsTextArea = class {
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.errorTextId]: !!this.dsErrorText,
                     [this.successTextId]: !!this.dsSuccessText,
-                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: 'd817515bf8c7089ba8971ccc8fe0c9328b8d8d8f', class: classNames(`${baseClass}__validity-container`, {
+                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes })), h("div", { key: '27a9a1949248fdb652873a7d4543a52e39fc9883', class: classNames(`${baseClass}__validity-container`, {
                 [`${baseClass}__validity-container--has-character-limit`]: !!this.dsCharacterLimit,
-            }) }, h("slot", { key: '831db886d20b7c862f3d834b0a6475dc330731f2', name: "validity" }, h(DsInputValidity, { key: '60bcedf145d0bc46b0598589fdf6a3a71fe3386b', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "assertive" }, this.dsCharacterLimit && h(DsVisuallyHidden, { key: '1c0c58e5199e82e0f4c84484238765de8b61e9cd', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: '025c80d7426db961e2da7ac502a67e8284ffbbdb', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success" })), this.dsCharacterLimit && (h("div", { key: 'be82d462f7e9090e600b58beb21596082d016f2d', class: classNames(`${baseClass}__character-count`, {
+            }) }, h("slot", { key: 'f42131cd8a54a22509a2405d1c4e869ea890f078', name: "validity" }, h(DsInputValidity, { key: '5c98f82c2bc965ab24be16b9898b3261a539e09f', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "assertive" }, this.dsCharacterLimit && h(DsVisuallyHidden, { key: '4078803a0f3bea8c94f23e62222bb3d81b13a439', dsTag: "span" }, this.hiddenCharacterCountText)), h(DsInputValidity, { key: '4d4dd7ac89b088a67591828f53e2e8891381dafb', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success" })), this.dsCharacterLimit && (h("div", { key: 'aaf767b66c448f8bcaf6e517df4688286470bff1', class: classNames(`${baseClass}__character-count`, {
                 [`${baseClass}__character-count--over-limit`]: this.characterCount > this.dsCharacterLimit,
-            }) }, h("small", { key: '87fab68a27cbb9cbde84b88247d0a3f26775992d' }, this.characterCount, "/", this.dsCharacterLimit))))));
+            }) }, h("small", { key: 'bd86a6b1ed6ee31cdfb1a4105f6a74e3edf9e312' }, this.characterCount, "/", this.dsCharacterLimit))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
-        "internalValue": ["internalValueObserver"],
-        "dsValue": ["valueObserver"],
-        "dsCharacterLimit": ["characterLimitObserver"],
-        "aria-label": ["ariaAttributeObserver"],
-        "aria-labelledby": ["ariaAttributeObserver"],
-        "aria-describedby": ["ariaAttributeObserver"]
+        "internalValue": [{
+                "internalValueObserver": 0
+            }],
+        "dsValue": [{
+                "valueObserver": 0
+            }],
+        "dsCharacterLimit": [{
+                "characterLimitObserver": 0
+            }],
+        "aria-label": [{
+                "ariaAttributeObserver": 0
+            }],
+        "aria-labelledby": [{
+                "ariaAttributeObserver": 0
+            }],
+        "aria-describedby": [{
+                "ariaAttributeObserver": 0
+            }]
     }; }
 };
 declareComponentDependencies([h("ds-input-validity", null), h("ds-visually-hidden", null), h("ds-control-label", null)]);
-DsTextArea.style = dsTextAreaCss;
+DsTextArea.style = dsTextAreaCss();
 
 export { DsTextArea as ds_text_area };

package/dist/esm/ds-text-input.entry.js

@@ -1,13 +1,13 @@
-import { M as Mixin, r as registerInstance, c as createEvent, d as getElement, f as forceUpdate, h, F as Fragment } from './index-BFo2Vd2B.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h, F as Fragment } from './index-B2DLd639.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { j as hidePassword, k as showPassword, o as clearField, v as validityMessage } from './controlUtils-mf-AhR8R.js';
+import { j as hidePassword, k as showPassword, o as clearField, v as validityMessage } from './controlUtils-DqRIe20i.js';
 import { i as idGenerator, t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './utils-J5Ghj1_T.js';
 import { d as disableEventsFactory } from './disableEventsFactory-D5btmZkj.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { c as cx } from './cx-CXBTg5Nh.js';
-import './store-8AoWWX-3.js';
+import { c as cx } from './cx-D28csnUe.js';
+import './store-DkpUIa5P.js';
 
-const dsTextInputCss = ".ds-no-style-leak.sc-ds-text-input *.sc-ds-text-input,.ds-text-input__MGLLcm.sc-ds-text-input,.ds-text-input__MGLLcm.sc-ds-text-input .sc-ds-text-input:where([class*=__MGLLcm]){all:unset;box-sizing:border-box}.ds-no-style-leak.sc-ds-text-input *.sc-ds-text-input{display:block}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-text-input__MGLLcm.sc-ds-text-input{display:block}.ds-text-input__MGLLcm__label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-text-input__MGLLcm__label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-text-input__MGLLcm__label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary)}.ds-text-input__MGLLcm__container.sc-ds-text-input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-text-input__MGLLcm__container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-text-input__MGLLcm__container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;background-color:var(--ds-bgColor-white);border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid.sc-ds-text-input:hover:not(.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid.ds-text-input__MGLLcm__container--active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid.sc-ds-text-input:hover:not(.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid.sc-ds-text-input .ds-text-input__MGLLcm__container--active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--readonly.sc-ds-text-input,.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-input__MGLLcm__container.sc-ds-text-input:has(span.ds-text-input__MGLLcm__prefix,.ds-text-input__MGLLcm__icon).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-text-input__MGLLcm__container.sc-ds-text-input:has(.ds-text-input__MGLLcm__button){padding-inline-end:unset}.ds-text-input__MGLLcm__container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:read-only){border-color:var(--ds-borderColor-default)}.ds-text-input__MGLLcm__container.sc-ds-text-input:has(input:active){outline:none}.ds-text-input__MGLLcm__container.active.sc-ds-text-input:not(.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--disabled,.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--readonly.sc-ds-text-input,.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid.sc-ds-text-input,.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid).sc-ds-text-input{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-input__MGLLcm__container.sc-ds-text-input:hover:not(.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--disabled,.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--readonly.sc-ds-text-input,.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--active.sc-ds-text-input,.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--invalid.sc-ds-text-input,.ds-text-input__MGLLcm__container.ds-text-input__MGLLcm__container--valid.sc-ds-text-input,.ds-text-input__MGLLcm__container.sc-ds-text-input:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-input__MGLLcm__container.sc-ds-text-input:focus-within:not(.ds-text-input__MGLLcm__container:focus-within.ds-text-input__MGLLcm__container--invalid,.ds-text-input__MGLLcm__container.sc-ds-text-input:focus-within.ds-text-input__MGLLcm__container--valid,.ds-text-input__MGLLcm__container.sc-ds-text-input:focus-within.ds-text-input__MGLLcm__container--readonly){border-color:var(--ds-borderColor-primary)}.ds-text-input__MGLLcm__container.sc-ds-text-input:focus-within *.sc-ds-text-input>.ds-text-input__MGLLcm__button.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall);padding-inline:0}.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-text-input__MGLLcm__container.sc-ds-text-input>input[type=number].sc-ds-text-input{appearance:textfield}.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-text-input__MGLLcm__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{appearance:none;margin:0}.ds-text-input__MGLLcm__container.sc-ds-text-input:has(span.ds-text-input__MGLLcm__prefix,.ds-text-input__MGLLcm__icon).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-text-input__MGLLcm__container.sc-ds-text-input span.ds-text-input__MGLLcm__prefix.sc-ds-text-input,.ds-text-input__MGLLcm__container.sc-ds-text-input span.ds-text-input__MGLLcm__suffix.sc-ds-text-input{font-family:var(--ds-fontFamily-body);color:var(--ds-textColor-link-standalone)}.ds-text-input__MGLLcm__container.sc-ds-text-input .ds-text-input__MGLLcm__icon.sc-ds-text-input,.ds-text-input__MGLLcm__container.sc-ds-text-input-s>[slot=prefix],.ds-text-input__MGLLcm__container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.ds-text-input__MGLLcm__container.sc-ds-text-input .ds-text-input__MGLLcm__button.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}";
+const dsTextInputCss = () => `.ds-no-style-leak.sc-ds-text-input *.sc-ds-text-input{all:unset;box-sizing:border-box;display:block}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-text-input__KmYz6O.sc-ds-text-input{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-text-input__KmYz6O__label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-text-input__KmYz6O__label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-text-input__KmYz6O__label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary)}.ds-text-input__KmYz6O__container.sc-ds-text-input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-text-input__KmYz6O__container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-text-input__KmYz6O__container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;background-color:var(--ds-bgColor-white);border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid.sc-ds-text-input:hover:not(.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid.ds-text-input__KmYz6O__container--active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid.sc-ds-text-input:hover:not(.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid.sc-ds-text-input .ds-text-input__KmYz6O__container--active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--readonly.sc-ds-text-input,.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-input__KmYz6O__container.sc-ds-text-input:has(span.ds-text-input__KmYz6O__prefix,.ds-text-input__KmYz6O__icon).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-text-input__KmYz6O__container.sc-ds-text-input:has(.ds-text-input__KmYz6O__button){padding-inline-end:unset}.ds-text-input__KmYz6O__container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:read-only){border-color:var(--ds-borderColor-default)}.ds-text-input__KmYz6O__container.sc-ds-text-input:has(input:active){outline:none}.ds-text-input__KmYz6O__container.active.sc-ds-text-input:not(.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--disabled,.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--readonly.sc-ds-text-input,.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid.sc-ds-text-input,.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid).sc-ds-text-input{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-input__KmYz6O__container.sc-ds-text-input:hover:not(.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--disabled,.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--readonly.sc-ds-text-input,.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--active.sc-ds-text-input,.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--invalid.sc-ds-text-input,.ds-text-input__KmYz6O__container.ds-text-input__KmYz6O__container--valid.sc-ds-text-input,.ds-text-input__KmYz6O__container.sc-ds-text-input:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-input__KmYz6O__container.sc-ds-text-input:focus-within:not(.ds-text-input__KmYz6O__container:focus-within.ds-text-input__KmYz6O__container--invalid,.ds-text-input__KmYz6O__container.sc-ds-text-input:focus-within.ds-text-input__KmYz6O__container--valid,.ds-text-input__KmYz6O__container.sc-ds-text-input:focus-within.ds-text-input__KmYz6O__container--readonly){border-color:var(--ds-borderColor-primary)}.ds-text-input__KmYz6O__container.sc-ds-text-input:focus-within *.sc-ds-text-input>.ds-text-input__KmYz6O__button.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall);padding-inline:0}.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-text-input__KmYz6O__container.sc-ds-text-input>input[type=number].sc-ds-text-input{appearance:textfield}.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-text-input__KmYz6O__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{appearance:none;margin:0}.ds-text-input__KmYz6O__container.sc-ds-text-input:has(span.ds-text-input__KmYz6O__prefix,.ds-text-input__KmYz6O__icon).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-text-input__KmYz6O__container.sc-ds-text-input span.ds-text-input__KmYz6O__prefix.sc-ds-text-input,.ds-text-input__KmYz6O__container.sc-ds-text-input span.ds-text-input__KmYz6O__suffix.sc-ds-text-input{font-family:var(--ds-fontFamily-body);color:var(--ds-textColor-link-standalone)}.ds-text-input__KmYz6O__container.sc-ds-text-input .ds-text-input__KmYz6O__icon.sc-ds-text-input,.ds-text-input__KmYz6O__container.sc-ds-text-input-s>[slot=prefix],.ds-text-input__KmYz6O__container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.ds-text-input__KmYz6O__container.sc-ds-text-input .ds-text-input__KmYz6O__button.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}`;
 
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
@@ -21,11 +21,11 @@ const DsTextInput = class extends Mixin(disableEventsFactory) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.dsChange = createEvent(this, "dsChange");
-        this.dsInput = createEvent(this, "dsInput");
-        this.dsClear = createEvent(this, "dsClear");
-        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
-        this.dsValidity = createEvent(this, "dsValidity");
+        this.dsChange = createEvent(this, "dsChange", 7);
+        this.dsInput = createEvent(this, "dsInput", 7);
+        this.dsClear = createEvent(this, "dsClear", 7);
+        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid", 7);
+        this.dsValidity = createEvent(this, "dsValidity", 7);
     }
     inheritedAttributes = {};
     suffixButtonElement;
@@ -266,30 +266,40 @@ const DsTextInput = class extends Mixin(disableEventsFactory) {
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Fragment, { key: '0c039defda6e5e459caae3edf7a3e3b4d2e1eeee' }, h(DsControlLabel, { key: '2e4854fafe431cb609d882a7eec385e7039a811c', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText }, h("slot", { key: '11e0cfbf92b2feb619c539981e0d53a91383bd80', name: "label" }), h("slot", { key: '80330e56ec8123b94e4b964c8f4665b9463daed6', name: "assistiveText" })), h("div", { key: '0e27e30dfa8ceb9912a6c53ed250f71c85fd32d0', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
+        return (h(Fragment, { key: 'b5909f4e07fabad5576727aeb6fb53c36611825e' }, h(DsControlLabel, { key: '5e7d8621878e9fa59b2b6c281b84a7d0267b9538', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText }, h("slot", { key: 'f229a02a180ce4dccedc4074c67802bc58553226', name: "label" }), h("slot", { key: '9af9d202f45e46979c8e7cb2cb1b5be5510b45c1', name: "assistiveText" })), h("div", { key: '8512cd070e27542a8aba3c5091c815de7e4165e2', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
                 [`${containerClass}--disabled`]: this.dsDisabled,
                 [`${containerClass}--readonly`]: this.dsReadonly,
                 [`${containerClass}--valid`]: !!this.dsSuccessText,
                 [`${containerClass}--invalid`]: !!this.dsErrorText,
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.inputActive,
-            }) }, this.renderPrefixContent(baseClass), h("input", { key: '392c0880d844648434ce6bea242169fc60955e23', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.internalValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, step: this.dsStep, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby ||
+            }) }, this.renderPrefixContent(baseClass), h("input", { key: 'edd83a08f59fee3004b097214d10038803015beb', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.internalValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, step: this.dsStep, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby ||
                 classNames({
                     [this.assistiveTextId]: !!this.dsAssistiveText,
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.validityId]: !!this.dsErrorText || !!this.dsSuccessText,
-                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: '5d11d089cda76beae7ff3cc786de38cb82a14f1b', name: "validity" }, h(DsInputValidity, { key: 'dc39d80a03f9be5ddb9b9de306dd5dd763520951', id: this.validityId, dsText: this.validityText, dsType: this.validityType, dsAriaLive: "assertive" }))));
+                })), "aria-invalid": this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: 'c8ace1da007e859d7c5862c26e6b58eb6972f480', name: "validity" }, h(DsInputValidity, { key: '6f8f4d3fe0d20ba285d97a5627e796c9798a6be6', id: this.validityId, dsText: this.validityText, dsType: this.validityType, dsAriaLive: "assertive" }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
-        "dsValue": ["valueObserver"],
-        "internalValue": ["internalValueObserver"],
-        "aria-label": ["onAriaChanged"],
-        "aria-labelledby": ["onAriaChanged"],
-        "aria-describedby": ["onAriaChanged"]
+        "dsValue": [{
+                "valueObserver": 0
+            }],
+        "internalValue": [{
+                "internalValueObserver": 0
+            }],
+        "aria-label": [{
+                "onAriaChanged": 0
+            }],
+        "aria-labelledby": [{
+                "onAriaChanged": 0
+            }],
+        "aria-describedby": [{
+                "onAriaChanged": 0
+            }]
     }; }
 };
 declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-button", null), h("ds-input-validity", null), h("ds-control-label", null)]);
-DsTextInput.style = dsTextInputCss;
+DsTextInput.style = dsTextInputCss();
 
 export { DsTextInput as ds_text_input };