@uh-design-system/component-library 0.2.4 → 0.4.0

package/dist/esm/ds-link-with-arrow.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, g as getElement, h } from './index-42701395.js';
+import { c as classNames } from './index-72ac5051.js';
+import { i as inheritAriaAttributes } from './attributes-9419ac39.js';
+import { i as idGenerator } from './utils-cca2a41a.js';
+import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils-3d1b28cf.js';
+
+const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-bodyText--2xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--2xLarge{font-size:var(--ds-fontSize-22)}}.ds-bodyText--xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--xLarge{font-size:var(--ds-fontSize-20)}}.ds-bodyText--large{color:var(--ds-textColor-default);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)}@media (min-width: 30rem){.ds-bodyText--large{font-size:var(--ds-fontSize-18)}}.ds-bodyText--medium{color:var(--ds-textColor-default);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)}@media (min-width: 30rem){.ds-bodyText--medium{font-size:var(--ds-fontSize-16)}}.ds-bodyText--small{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--small{font-size:var(--ds-fontSize-14)}}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-textColor-link);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible,.ds-link-with-arrow:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-bgColor-primary-hover)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-bgColor-primary-active)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-textColor-link-hover)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}";
+const DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
+
+const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
+const DsLinkWithArrow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    inheritedAttributes = {};
+    icon = 'arrow_forward';
+    rel;
+    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+    get el() { return getElement(this); }
+    text;
+    iconPosition = 'start';
+    href;
+    target;
+    language;
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        if (opensInNewTab(this.target)) {
+            this.icon = 'arrow_outward';
+            this.rel = 'noopener noreferrer';
+        }
+    }
+    render() {
+        const classes = classNames('ds-link-with-arrow');
+        const iconClasses = classNames('ds-link-with-arrow__icon', {
+            'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
+            'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
+        });
+        return (h("a", { key: 'aa1a1272c0323f286e590f1a366f2101410a58c3', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, h("slot", { key: 'e348b24c8c5418cf0f33e18c5337066b6eb579a2', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'e523092b3dc32f936139c53e74195b927a219c0f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '0ec9d65ee348aa75108f9d87474551b6b3c4a0bb', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '55b5ef6cc061bea9f68d784e4e9fb0ebdac0002c', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '8c92b801ac0a1d52e12fead3c89703d41f90fa6a', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+    }
+};
+DsLinkWithArrow.style = DsLinkWithArrowStyle0;
+
+export { DsLinkWithArrow as ds_link_with_arrow };

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

@@ -0,0 +1,50 @@
+import { r as registerInstance, g as getElement, h } from './index-42701395.js';
+import { c as classNames } from './index-72ac5051.js';
+import { i as inheritAriaAttributes } from './attributes-9419ac39.js';
+import { i as idGenerator } from './utils-cca2a41a.js';
+import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils-3d1b28cf.js';
+
+const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-bodyText--2xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--2xLarge{font-size:var(--ds-fontSize-22)}}.ds-bodyText--xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--xLarge{font-size:var(--ds-fontSize-20)}}.ds-bodyText--large{color:var(--ds-textColor-default);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)}@media (min-width: 30rem){.ds-bodyText--large{font-size:var(--ds-fontSize-18)}}.ds-bodyText--medium{color:var(--ds-textColor-default);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)}@media (min-width: 30rem){.ds-bodyText--medium{font-size:var(--ds-fontSize-16)}}.ds-bodyText--small{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--small{font-size:var(--ds-fontSize-14)}}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-textColor-link);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible,.ds-link:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link:active{color:var(--ds-textColor-link-active)}.ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link--standalone{color:var(--ds-textColor-link);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-textColor-link-hover)}.ds-link--standalone:active{color:var(--ds-textColor-link-active)}.ds-link--standalone:focus-visible{color:var(--ds-textColor-link)}.ds-link--standalone:visited{color:var(--ds-textColor-link)}";
+const DsLinkStyle0 = dsLinkCss;
+
+const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
+const DsLink = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    inheritedAttributes = {};
+    rel;
+    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+    get el() { return getElement(this); }
+    text;
+    size;
+    variant = 'inline';
+    weight = 'regular';
+    icon = '';
+    iconPosition = 'end';
+    href;
+    target;
+    download;
+    language;
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        if (opensInNewTab(this.target)) {
+            this.icon = 'open_in_new';
+            this.iconPosition = 'end';
+            this.rel = 'noopener noreferrer';
+        }
+    }
+    render() {
+        const classes = classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
+            [`bodyText--${this.size}`]: Boolean(this.size),
+        });
+        const iconClasses = classNames('ds-link__icon', {
+            [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
+            [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
+        });
+        return (h("a", { key: 'd8922731378178b2c927796fdc636fc26d4cbaea', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, ...this.inheritedAttributes }, h("slot", { key: 'dfbd079b80132f7751501da7e47bb0f1aec4590a', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '2b3d864df8c04b340b0251c9ac185be918f7bb16', name: this.icon, class: iconClasses, size: "1em" })), this.text, h("slot", { key: '2fc2e4a3be8b83d545b27ae19096ffc5fbb72c0e', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '9592ce7c0222bd3c739943fb9b6a37b92e67618c', name: this.icon, class: iconClasses, size: "1em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '43c55dded281f4e3a084ceb64edf695707309494', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+    }
+};
+DsLink.style = DsLinkStyle0;
+
+export { DsLink as ds_link };

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

@@ -1,14 +1,8 @@
-import { r as registerInstance, h, F as Fragment } from './index-4200d514.js';
+import { r as registerInstance, h, F as Fragment } from './index-42701395.js';
 import { c as classNames } from './index-72ac5051.js';
+import { i as idGenerator } from './utils-cca2a41a.js';
 
-function* idGenerator(id) {
-    let currentId = 1;
-    while (true) {
-        yield `${id}-${currentId++}`;
-    }
-}
-
-const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.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)}.label-container.sc-ds-text-input label.required.sc-ds-text-input::after{content:\" *\";color:var(--ds-textColor-secondary)}.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)}.input-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;border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.input-container.invalid.sc-ds-text-input{background-color:var(--ds-palette-danger-light);border-color:var(--ds-borderColor-danger)}.input-container.valid.sc-ds-text-input{background-color:var(--ds-palette-success-light);border-color:var(--ds-borderColor-success)}.input-container.readonly.sc-ds-text-input,.input-container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.input-container.sc-ds-text-input:has(input:active){outline:none}.input-container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){border-color:var(--ds-borderColor-primary)}.input-container.active.sc-ds-text-input:not(.input-container.disabled,.input-container.readonly).sc-ds-text-input{border-color:var(--ds-borderColor-primary)}.input-container.sc-ds-text-input:hover:not(.input-container.disabled,.input-container.readonly.sc-ds-text-input,.input-container.active).sc-ds-text-input{border-color:var(--ds-borderColor-black)}.input-container.sc-ds-text-input:focus-within{outline-width:var(--ds-borderWidth-thin);outline-offset:1px;outline-style:solid;outline-color:var(--ds-palette-black)}.input-container.sc-ds-text-input:focus-within:not(.input-container:focus-within.invalid,.input-container.sc-ds-text-input:focus-within.valid,.input-container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-borderColor-primary)}.input-container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.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)}.input-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);padding-block:var(--ds-spacing-4xSmall);border:none}.input-container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.input-container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.input-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)}.input-container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.input-container.sc-ds-text-input>input[type=number].sc-ds-text-input{-moz-appearance:textfield}.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.input-container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.input-container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.input-container.sc-ds-text-input span.prefix.sc-ds-text-input,.input-container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.input-container.sc-ds-text-input ds-icon.prefix.sc-ds-text-input,.input-container.sc-ds-text-input-s>[slot=prefix],.input-container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.input-container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text-container.sc-ds-text-input,.success-text-container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text-container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text-container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text-container.sc-ds-text-input small.sc-ds-text-input,.success-text-container.sc-ds-text-input small.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)}.error-text-container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text-container.sc-ds-text-input{color:var(--ds-textColor-success)}";
+const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-input--label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input--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-input--label-container.sc-ds-text-input label.required.sc-ds-text-input::after{content:\" *\";color:var(--ds-textColor-secondary)}.ds-input--label-container.sc-ds-text-input label.optional.sc-ds-text-input::after{content:\" (\" attr(data-optional-text, \"optional\") \")\";color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-input--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-input--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;border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.ds-input--container.sc-ds-text-input:focus-visible,.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-input--container.sc-ds-text-input:has(input:active){outline:none}.ds-input--container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){border-color:var(--ds-borderColor-default)}.ds-input--container.active.sc-ds-text-input:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid).sc-ds-text-input{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-input--container.sc-ds-text-input:hover:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.active.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid.sc-ds-text-input,.ds-input--container.sc-ds-text-input:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-input--container.sc-ds-text-input:focus-within:not(.ds-input--container:focus-within.invalid,.ds-input--container.sc-ds-text-input:focus-within.valid,.ds-input--container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-borderColor-primary)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.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-input--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)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-input--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-input--container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-input--container.sc-ds-text-input>input[type=number].sc-ds-text-input{-moz-appearance:textfield}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.ds-input--container.sc-ds-text-input span.prefix.sc-ds-text-input,.ds-input--container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.ds-input--container.sc-ds-text-input ds-icon.prefix.sc-ds-text-input,.ds-input--container.sc-ds-text-input-s>[slot=prefix],.ds-input--container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.ds-input--container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.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)}.error-text--container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text--container.sc-ds-text-input{color:var(--ds-textColor-success)}";
 const DsTextInputStyle0 = dsTextInputCss;
 
 const INPUT_TYPE_ICONS_MAP = {
@@ -37,6 +31,7 @@ const DsTextInput = class {
     dsId = 'input';
     name;
     disabled;
+    optional;
     required;
     readonly;
     value;
@@ -45,6 +40,7 @@ const DsTextInput = class {
     maxlength;
     pattern;
     autocomplete;
+    optionalText;
     errorText;
     successText;
     assistiveText;
@@ -85,7 +81,7 @@ const DsTextInput = class {
         const text = type === 'success' ? this.successText : this.errorText;
         const icon = type === 'success' ? 'check_circle_fill' : 'warning_fill';
         const className = type + '-text';
-        return (h("slot", { name: className }, text && (h("div", { class: `${className}-container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
+        return (h("slot", { name: className }, text && (h("div", { class: `${className}--container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
     }
     renderPrefixContent() {
         if (this.prefixText) {
@@ -115,14 +111,14 @@ const DsTextInput = class {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: 'b36b842382f0f0635c5372a856b140f05f7f5cff' }, h("div", { key: '4cedfdd4a891b8317f8b948824c5fe18b8f2c345', class: "label-container" }, h("slot", { key: '5072f7cab04c4c6dcf3bc2a72f88c83f3da5c74b', name: "label" }, h("label", { key: '513249ab30b24df9ad204ec533eb5b0714a5b36e', class: classNames({ required: this.required }), htmlFor: this.dsId }, this.label)), h("slot", { key: 'c3e05ad3e51365c7e8df7a276b4fc089af4edba7', name: "help-text" }, h("small", { key: 'fdf1904fe96fd22b4ba650e693db0d3fcecdf33a', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: 'd9726a8a031a786169ff47a809f8309117d00eaa', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'c0fb788b2f35f478015169d2fc558885fc9c205a', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('input-container', {
+        return (h(Fragment, { key: 'fe9d038685d4912e0b760bed83e21a6ae8582535' }, h("div", { key: '4c4a662fcbcbf2c9a04986ad44b018736c8ba0d7', class: "ds-input--label-container" }, h("slot", { key: '8fea3c6a05e3f5314eae43c2f2eeedc47735278a', name: "label" }, h("label", { key: '33aa9fa1ab0eba6c36b0e882d8a71000a2a2ff40', "data-optional-text": this.optionalText, class: classNames({ required: this.required, optional: this.optional }), htmlFor: this.dsId }, this.label)), h("slot", { key: '13f7adf5a85a2f2d8d5f3e7b829ff86707f75a3d', name: "help-text" }, h("small", { key: '3595ee7deb43919aeabb938a2f0cc0ce78ca181d', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '001fd7a38ef2034f7e650e86d00d5a30ee217c17', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'ec9f2c0d6ff40bd6c8a4618ec238e966a0756c19', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
                 invalid: !!this.errorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: 'adb2aa8a54d45aeeca8e209f0c0a28d2aa0141f8', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, this.renderPrefixContent(), h("input", { key: '1cd22b415c330cb50c4c9663f6dec3a1e99e256b', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.successTextId]: this.successText,
                     [this.errorTextId]: this.errorText,

package/dist/esm/ds-visually-hidden.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h } from './index-42701395.js';
+
+const dsVisuallyHiddenCss = ":host{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+const DsVisuallyHiddenStyle0 = dsVisuallyHiddenCss;
+
+const DsVisuallyHidden = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("slot", { key: '3a7edab043d1612c06a4eb6fedacec27216f3be3' }));
+    }
+};
+DsVisuallyHidden.style = DsVisuallyHiddenStyle0;
+
+export { DsVisuallyHidden as ds_visually_hidden };

package/dist/esm/{index-4200d514.js → index-42701395.js}

@@ -1,8 +1,8 @@
 const NAMESPACE = 'component-library';
-const BUILD = /* component-library */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* component-library */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
- Stencil Client Platform v4.25.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -483,7 +483,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
               styleContainerNode.append(styleElm);
             }
           }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             styleContainerNode.insertBefore(styleElm, null);
           }
         }
@@ -508,7 +508,7 @@ var attachStyles = (hostRef) => {
   const scopeId2 = addStyle(
     elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+  if ((flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */ || flags & 128 /* shadowNeedsScopedCss */)) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
   }
@@ -1010,13 +1010,13 @@ var insertBefore = (parent, newNode, reference) => {
   }
 };
 function addRemoveSlotScopedClass(reference, slotNode, newParent, oldParent) {
-  var _a;
+  var _a, _b;
   let scopeId2;
   if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (scopeId2 = slotNode["s-si"] || reference.parentNode["s-sc"])) {
     const scopeName = slotNode["s-sn"];
     const hostName = slotNode["s-hn"];
     (_a = newParent.classList) == null ? void 0 : _a.add(scopeId2 + "-s");
-    if (oldParent && oldParent.classList.contains(scopeId2 + "-s")) {
+    if (oldParent && ((_b = oldParent.classList) == null ? void 0 : _b.contains(scopeId2 + "-s"))) {
       let child = (oldParent.__childNodes || oldParent.childNodes)[0];
       let found = false;
       while (child) {
@@ -1051,7 +1051,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   {
     scopeId = hostElm["s-sc"];
   }
-  useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+  useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
   {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -1259,9 +1259,6 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var appDidLoad = (who) => {
-  {
-    addHydratedFlag(doc.documentElement);
-  }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
 var safeCall = (instance, method, arg, elm) => {
@@ -1457,7 +1454,8 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   let Cstr;
   if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
-    {
+    const bundleId = cmpMeta.$lazyBundleId$;
+    if (bundleId) {
       const CstrImport = loadModule(cmpMeta, hostRef);
       if (CstrImport && "then" in CstrImport) {
         const endLoad = uniqueTime();
@@ -1492,6 +1490,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
+    } else {
+      Cstr = elm.constructor;
+      const cmpTag = elm.localName;
+      customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
     if (Cstr && Cstr.style) {
       let style;
@@ -1662,6 +1664,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           plt.raf(() => {
             var _a3;
             const hostRef = getHostRef(this);
+            const i2 = deferredConnectedCallbacks.findIndex((host) => host === this);
+            if (i2 > -1) {
+              deferredConnectedCallbacks.splice(i2, 1);
+            }
             if (((_a3 = hostRef == null ? void 0 : hostRef.$vnode$) == null ? void 0 : _a3.$elm$) instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
               delete hostRef.$vnode$.$elm$;
             }

package/dist/esm/linkUtils-3d1b28cf.js

@@ -0,0 +1,13 @@
+const opensInNewTab = (target) => target === '_blank';
+const visuallyHiddenAssistiveText = (lang) => {
+    switch (lang) {
+        case 'fi':
+            return 'Avautuu uuteen välilehteen';
+        case 'sv':
+            return 'Öppnas i en ny flik';
+        default:
+            return 'Opens in a new tab';
+    }
+};
+
+export { opensInNewTab as o, visuallyHiddenAssistiveText as v };

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-4200d514.js';
-export { s as setNonce } from './index-4200d514.js';
+import { b as bootstrapLazy } from './index-42701395.js';
+export { s as setNonce } from './index-42701395.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["ds-accordion_2",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"ds-id"],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
+  return bootstrapLazy([["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-accordion_3",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-text-input",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-link",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/utils-cca2a41a.js

@@ -0,0 +1,8 @@
+function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
+}
+
+export { idGenerator as i };

package/dist/types/components/00-foundations/icons/categories/social.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/typography/stories/typography.stories.d.ts

@@ -0,0 +1,9 @@
+import '../_typography.scss';
+import '../_base.scss';
+import '../_headings.scss';
+import '../_bodyText.scss';
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const TokenClasses: StoryObj;
+export declare const Typography: StoryObj;

package/dist/types/components/01-base-components/ds-accordion/ds-accordion.d.ts

@@ -6,10 +6,12 @@ export declare class DsAccordion {
     headingLevel: number;
     useCloseButton: boolean;
     closeButtonLabel: string;
+    hideTopBorder: boolean;
     isExpanded: boolean;
     host: HTMLElement;
     private headerButtonRef?;
     private shouldMoveFocus;
+    componentWillLoad(): void;
     watchHandler(isExpanded: boolean): void;
     private handleClick;
     private handleKeyDown;

package/dist/types/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj;
 export declare const WithLinkInBody: Story;
 export declare const WithInputInBody: Story;
 export declare const MultipleAccordions: Story;
+export declare const LongTitles: Story;

package/dist/types/components/01-base-components/ds-button/ds-button.d.ts

@@ -12,6 +12,7 @@ export declare class DsButton {
     iconPosition: 'start' | 'end';
     type: 'button' | 'submit' | 'reset';
     disabled: boolean;
+    fullWidth: boolean;
     ariaDisabled: string;
     componentWillLoad(): void;
     private handleKeyDown;

package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof DsButton.prototype>;
 export default meta;
 export declare const ButtonGroup: StoryObj;
 export declare const ResetAndSubmitButton: StoryObj;
+export declare const FullWidthWithIconsUsingSlots: StoryObj;

package/dist/types/components/01-base-components/ds-button/stories/ds-button.features.stories.d.ts

@@ -14,3 +14,6 @@ export declare const Small: Story;
 export declare const Disabled: Story;
 export declare const IconStart: Story;
 export declare const IconEnd: Story;
+export declare const FullWidth: Story;
+export declare const FullWidthWithStartIcon: Story;
+export declare const FullWidthWithEndIcon: Story;

package/dist/types/components/01-base-components/ds-icon/ds-icon.d.ts

@@ -2,7 +2,7 @@ export declare class DsIcon {
     name: string;
     colour: string;
     size: string;
-    title: string;
+    dsTitle: string;
     role: string;
     hidden: boolean;
     message: string;

package/dist/types/components/01-base-components/ds-link/ds-link.d.ts

@@ -0,0 +1,25 @@
+type LinkSize = '2xLarge' | 'xLarge' | 'large' | 'medium' | 'small' | 'xSmall';
+type LinkVariant = 'inline' | 'standalone';
+type LinkWeight = 'regular' | 'semibold' | 'bold';
+type LinkIconPosition = 'start' | 'end';
+type LinkTarget = '_blank' | '_self' | '_parent' | '_top' | '_unfencedTop';
+type LinkLang = 'fi' | 'sv' | 'en';
+export declare class DsLink {
+    private inheritedAttributes;
+    private rel?;
+    private readonly visuallyHiddenAssistiveTextId;
+    el: HTMLElement;
+    text?: string;
+    size?: LinkSize;
+    variant: LinkVariant;
+    weight: LinkWeight;
+    icon: string;
+    iconPosition: LinkIconPosition;
+    href: string;
+    target?: LinkTarget;
+    download?: boolean;
+    language?: LinkLang;
+    componentWillLoad(): void;
+    render(): any;
+}
+export {};

package/dist/types/components/01-base-components/ds-link/stories/ds-link.examples.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsLink } from '../ds-link';
+declare const meta: Meta<typeof DsLink.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Inline: Story;
+export declare const OpenInANewTab: Story;
+export declare const Back: Story;
+export declare const Download: Story;
+export declare const StandaloneBoldLinkWithIcon: Story;
+export declare const NavigationLink: Story;

package/dist/types/components/01-base-components/ds-link/stories/ds-link.features.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsLink } from '../ds-link';
+declare const meta: Meta<typeof DsLink.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Inline: Story;
+export declare const Standalone: Story;
+export declare const Size: Story;
+export declare const Weight: Story;
+export declare const OpensInANewTab: Story;
+export declare const IconPosition: Story;

package/dist/types/components/01-base-components/ds-link/stories/ds-link.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsLink } from '../ds-link';
+declare const meta: Meta<typeof DsLink.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts

@@ -0,0 +1,18 @@
+type LinkIconPosition = 'start' | 'end';
+type LinkTarget = '_blank' | '_self' | '_parent' | '_top' | '_unfencedTop';
+type LinkLang = 'fi' | 'sv' | 'en';
+export declare class DsLinkWithArrow {
+    private inheritedAttributes;
+    private icon;
+    private rel?;
+    private readonly visuallyHiddenAssistiveTextId;
+    el: HTMLElement;
+    text?: string;
+    iconPosition: LinkIconPosition;
+    href: string;
+    target?: LinkTarget;
+    language?: LinkLang;
+    componentWillLoad(): void;
+    render(): any;
+}
+export {};

package/dist/types/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.examples.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsLinkWithArrow } from '../ds-link-with-arrow';
+declare const meta: Meta<typeof DsLinkWithArrow.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const OpenInANewTab: Story;
+export declare const IconAtTheEnd: Story;

package/dist/types/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.features.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsLinkWithArrow } from '../ds-link-with-arrow';
+declare const meta: Meta<typeof DsLinkWithArrow.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const IconPositionStart: Story;
+export declare const IconPositionEnd: Story;

package/dist/types/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsLinkWithArrow } from '../ds-link-with-arrow';
+declare const meta: Meta<typeof DsLinkWithArrow.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.d.ts

@@ -11,6 +11,7 @@ export declare class DsTextInput {
     dsId?: string;
     name: string;
     disabled?: boolean;
+    optional?: boolean;
     required?: boolean;
     readonly?: boolean;
     value?: string;
@@ -19,6 +20,7 @@ export declare class DsTextInput {
     maxlength?: number;
     pattern?: string;
     autocomplete?: string;
+    optionalText?: string;
     errorText?: string;
     successText?: string;
     assistiveText?: string;

package/dist/types/components/01-base-components/ds-text-input/{ds-text-input.examples.stories.d.ts → stories/ds-text-input.examples.stories.d.ts}

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { DsTextInput } from './ds-text-input';
+import { DsTextInput } from '../ds-text-input';
 declare const meta: Meta<typeof DsTextInput.prototype>;
 export default meta;
 type Story = StoryObj;
 export declare const CustomWidth: Story;
 export declare const UsingSlots: Story;
+export declare const FormValidation: Story;

package/dist/types/components/01-base-components/ds-text-input/{ds-text-input.features.stories.d.ts → stories/ds-text-input.features.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { DsTextInput } from './ds-text-input';
+import { DsTextInput } from '../ds-text-input';
 declare const meta: Meta<typeof DsTextInput.prototype>;
 export default meta;
 type Story = StoryObj;
@@ -8,6 +8,9 @@ export declare const WithAssistiveText: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Required: Story;
+export declare const Optional: Story;
+export declare const OptionalWithCustomText: Story;
+export declare const MaxLength: Story;
 export declare const Valid: Story;
 export declare const Invalid: Story;
 export declare const WithIcon: Story;

package/dist/types/components/01-base-components/ds-text-input/{ds-text-input.stories.d.ts → stories/ds-text-input.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { DsTextInput } from './ds-text-input';
+import { DsTextInput } from '../ds-text-input';
 declare const meta: Meta<typeof DsTextInput.prototype>;
 export default meta;
 type Story = StoryObj;