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

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

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bfa0f441.js');
+const index$1 = require('./index-5b0b9d4c.js');
+const attributes = require('./attributes-f7831329.js');
+const utils = require('./utils-8b73aa91.js');
+const linkUtils = require('./linkUtils-695da37c.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 = utils.idGenerator('visually-hidden-assistive-text');
+const DsLinkWithArrow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    inheritedAttributes = {};
+    icon = 'arrow_forward';
+    rel;
+    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+    get el() { return index.getElement(this); }
+    text;
+    iconPosition = 'start';
+    href;
+    target;
+    language;
+    componentWillLoad() {
+        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el);
+        if (linkUtils.opensInNewTab(this.target)) {
+            this.icon = 'arrow_outward';
+            this.rel = 'noopener noreferrer';
+        }
+    }
+    render() {
+        const classes = index$1.classNames('ds-link-with-arrow');
+        const iconClasses = index$1.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 (index.h("a", { key: 'aa1a1272c0323f286e590f1a366f2101410a58c3', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, index.h("slot", { key: 'e348b24c8c5418cf0f33e18c5337066b6eb579a2', name: "iconStart" }, this.iconPosition === 'start' && index.h("ds-icon", { key: 'e523092b3dc32f936139c53e74195b927a219c0f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, index.h("slot", { key: '0ec9d65ee348aa75108f9d87474551b6b3c4a0bb', name: "iconStart" }, this.iconPosition === 'end' && index.h("ds-icon", { key: '55b5ef6cc061bea9f68d784e4e9fb0ebdac0002c', name: this.icon, class: iconClasses, size: "1.4em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '8c92b801ac0a1d52e12fead3c89703d41f90fa6a', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+    }
+};
+DsLinkWithArrow.style = DsLinkWithArrowStyle0;
+
+exports.ds_link_with_arrow = DsLinkWithArrow;

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bfa0f441.js');
+const index$1 = require('./index-5b0b9d4c.js');
+const attributes = require('./attributes-f7831329.js');
+const utils = require('./utils-8b73aa91.js');
+const linkUtils = require('./linkUtils-695da37c.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 = utils.idGenerator('visually-hidden-assistive-text');
+const DsLink = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    inheritedAttributes = {};
+    rel;
+    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+    get el() { return index.getElement(this); }
+    text;
+    size;
+    variant = 'inline';
+    weight = 'regular';
+    icon = '';
+    iconPosition = 'end';
+    href;
+    target;
+    download;
+    language;
+    componentWillLoad() {
+        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el);
+        if (linkUtils.opensInNewTab(this.target)) {
+            this.icon = 'open_in_new';
+            this.iconPosition = 'end';
+            this.rel = 'noopener noreferrer';
+        }
+    }
+    render() {
+        const classes = index$1.classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
+            [`bodyText--${this.size}`]: Boolean(this.size),
+        });
+        const iconClasses = index$1.classNames('ds-link__icon', {
+            [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
+            [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
+        });
+        return (index.h("a", { key: 'd8922731378178b2c927796fdc636fc26d4cbaea', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, ...this.inheritedAttributes }, index.h("slot", { key: 'dfbd079b80132f7751501da7e47bb0f1aec4590a', name: "iconStart" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '2b3d864df8c04b340b0251c9ac185be918f7bb16', name: this.icon, class: iconClasses, size: "1em" })), this.text, index.h("slot", { key: '2fc2e4a3be8b83d545b27ae19096ffc5fbb72c0e', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '9592ce7c0222bd3c739943fb9b6a37b92e67618c', name: this.icon, class: iconClasses, size: "1em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '43c55dded281f4e3a084ceb64edf695707309494', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+    }
+};
+DsLink.style = DsLinkStyle0;
+
+exports.ds_link = DsLink;

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

@@ -2,17 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fd4f6cd2.js');
+const index = require('./index-bfa0f441.js');
 const index$1 = require('./index-5b0b9d4c.js');
+const utils = require('./utils-8b73aa91.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 = {
@@ -22,10 +16,10 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
     search: ({ clearButtonVisible }) => (clearButtonVisible ? 'cancel_fill' : ''),
     password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
 };
-const assistiveTextIdGenerator = idGenerator('ds-assistive-text');
-const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
-const successTextIdGenerator = idGenerator('success-text');
-const errorTextIdGenerator = idGenerator('error-text');
+const assistiveTextIdGenerator = utils.idGenerator('ds-assistive-text');
+const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
+const successTextIdGenerator = utils.idGenerator('success-text');
+const errorTextIdGenerator = utils.idGenerator('error-text');
 const DsTextInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -41,6 +35,7 @@ const DsTextInput = class {
     dsId = 'input';
     name;
     disabled;
+    optional;
     required;
     readonly;
     value;
@@ -49,6 +44,7 @@ const DsTextInput = class {
     maxlength;
     pattern;
     autocomplete;
+    optionalText;
     errorText;
     successText;
     assistiveText;
@@ -89,7 +85,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 (index.h("slot", { name: className }, text && (index.h("div", { class: `${className}-container` }, index.h("ds-icon", { name: icon }), index.h("small", { id: textId, class: className }, text)))));
+        return (index.h("slot", { name: className }, text && (index.h("div", { class: `${className}--container` }, index.h("ds-icon", { name: icon }), index.h("small", { id: textId, class: className }, text)))));
     }
     renderPrefixContent() {
         if (this.prefixText) {
@@ -119,14 +115,14 @@ const DsTextInput = class {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (index.h(index.Fragment, { key: 'b36b842382f0f0635c5372a856b140f05f7f5cff' }, index.h("div", { key: '4cedfdd4a891b8317f8b948824c5fe18b8f2c345', class: "label-container" }, index.h("slot", { key: '5072f7cab04c4c6dcf3bc2a72f88c83f3da5c74b', name: "label" }, index.h("label", { key: '513249ab30b24df9ad204ec533eb5b0714a5b36e', class: index$1.classNames({ required: this.required }), htmlFor: this.dsId }, this.label)), index.h("slot", { key: 'c3e05ad3e51365c7e8df7a276b4fc089af4edba7', name: "help-text" }, index.h("small", { key: 'fdf1904fe96fd22b4ba650e693db0d3fcecdf33a', id: this.assistiveTextId }, this.assistiveText), index.h("ds-visually-hidden", { key: 'd9726a8a031a786169ff47a809f8309117d00eaa', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), index.h("div", { key: 'c0fb788b2f35f478015169d2fc558885fc9c205a', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('input-container', {
+        return (index.h(index.Fragment, { key: 'fe9d038685d4912e0b760bed83e21a6ae8582535' }, index.h("div", { key: '4c4a662fcbcbf2c9a04986ad44b018736c8ba0d7', class: "ds-input--label-container" }, index.h("slot", { key: '8fea3c6a05e3f5314eae43c2f2eeedc47735278a', name: "label" }, index.h("label", { key: '33aa9fa1ab0eba6c36b0e882d8a71000a2a2ff40', "data-optional-text": this.optionalText, class: index$1.classNames({ required: this.required, optional: this.optional }), htmlFor: this.dsId }, this.label)), index.h("slot", { key: '13f7adf5a85a2f2d8d5f3e7b829ff86707f75a3d', name: "help-text" }, index.h("small", { key: '3595ee7deb43919aeabb938a2f0cc0ce78ca181d', id: this.assistiveTextId }, this.assistiveText), index.h("ds-visually-hidden", { key: '001fd7a38ef2034f7e650e86d00d5a30ee217c17', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), index.h("div", { key: 'ec9f2c0d6ff40bd6c8a4618ec238e966a0756c19', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('ds-input--container', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
                 invalid: !!this.errorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), index.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(), index.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 ||
                 index$1.classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.successTextId]: this.successText,
                     [this.errorTextId]: this.errorText,

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bfa0f441.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) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("slot", { key: '3a7edab043d1612c06a4eb6fedacec27216f3be3' }));
+    }
+};
+DsVisuallyHidden.style = DsVisuallyHiddenStyle0;
+
+exports.ds_visually_hidden = DsVisuallyHidden;

package/dist/cjs/{index-fd4f6cd2.js → index-bfa0f441.js}

@@ -21,10 +21,10 @@ function _interopNamespace(e) {
 }
 
 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) => {
@@ -505,7 +505,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);
           }
         }
@@ -530,7 +530,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");
   }
@@ -1032,13 +1032,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) {
@@ -1073,7 +1073,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;
@@ -1281,9 +1281,6 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var appDidLoad = (who) => {
-  {
-    addHydratedFlag(doc.documentElement);
-  }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
 var safeCall = (instance, method, arg, elm) => {
@@ -1479,7 +1476,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();
@@ -1514,6 +1512,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;
@@ -1684,6 +1686,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/cjs/linkUtils-695da37c.js

@@ -0,0 +1,16 @@
+'use strict';
+
+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';
+    }
+};
+
+exports.opensInNewTab = opensInNewTab;
+exports.visuallyHiddenAssistiveText = visuallyHiddenAssistiveText;

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fd4f6cd2.js');
+const index = require('./index-bfa0f441.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ds-accordion_2.cjs",[[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.cjs",[[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.cjs",[[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 index.bootstrapLazy([["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-accordion_3.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/utils-8b73aa91.js

@@ -0,0 +1,10 @@
+'use strict';
+
+function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
+}
+
+exports.idGenerator = idGenerator;

package/dist/collection/collection-manifest.json

@@ -3,12 +3,14 @@
     "components/01-base-components/ds-accordion/ds-accordion.js",
     "components/01-base-components/ds-button/ds-button.js",
     "components/01-base-components/ds-icon/ds-icon.js",
+    "components/01-base-components/ds-link/ds-link.js",
+    "components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js",
     "components/01-base-components/ds-text-input/ds-text-input.js",
     "components/01-base-components/ds-visually-hidden/ds-visually-hidden.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.25.1",
+    "version": "4.26.0",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/00-foundations/icons/categories/arrows.js

@@ -28,6 +28,9 @@ import ZoomInMapIcon from "@material-symbols/svg-700/sharp/zoom_in_map.svg";
 import ArrowDropUpIcon from "@material-symbols/svg-700/sharp/arrow_drop_up.svg";
 import ArrowDropDownIcon from "@material-symbols/svg-700/sharp/arrow_drop_down.svg";
 import FunctionIcon from "@material-symbols/svg-700/sharp/function.svg";
+import TrendingDownIcon from "@material-symbols/svg-700/sharp/trending_down.svg";
+import TrendingUpIcon from "@material-symbols/svg-700/sharp/trending_up.svg";
+import SwapHorizIcon from "@material-symbols/svg-700/sharp/swap_horiz.svg";
 export const icons = [
     { name: 'arrow_upward', component: ArrowUpwardIcon, category: category },
     { name: 'add', component: AddIcon, category: category },
@@ -58,4 +61,7 @@ export const icons = [
     { name: 'arrow_drop_up', component: ArrowDropUpIcon, category: category },
     { name: 'arrow_drop_down', component: ArrowDropDownIcon, category: category },
     { name: 'function', component: FunctionIcon, category: category },
+    { name: 'trending_down', component: TrendingDownIcon, category: category },
+    { name: 'trending_up', component: TrendingUpIcon, category: category },
+    { name: 'swap_horiz', component: SwapHorizIcon, category: category },
 ];

package/dist/collection/components/00-foundations/icons/categories/information.js

@@ -43,6 +43,12 @@ import CheckBoxOutlineBlankIcon from "@material-symbols/svg-700/sharp/check_box_
 import AccountBalanceIcon from "@material-symbols/svg-700/sharp/account_balance.svg";
 import AccountBalanceFillIcon from "@material-symbols/svg-700/sharp/account_balance-fill.svg";
 import ProgressActivityIcon from "@material-symbols/svg-700/sharp/progress_activity.svg";
+import BarChartIcon from "@material-symbols/svg-700/sharp/bar_chart.svg";
+import ShowChartIcon from "@material-symbols/svg-700/sharp/show_chart.svg";
+import PieChartIcon from "@material-symbols/svg-700/sharp/pie_chart.svg";
+import PieChartFillIcon from "@material-symbols/svg-700/sharp/pie_chart-fill.svg";
+import TableIcon from "@material-symbols/svg-700/sharp/table.svg";
+import TableFillIcon from "@material-symbols/svg-700/sharp/table-fill.svg";
 export const icons = [
     { name: 'calendar_month', component: CalendarMonthIcon, category: category },
     { name: 'calendar_month_fill', component: CalendarMonthFillIcon, category: category },
@@ -88,4 +94,10 @@ export const icons = [
     { name: 'account_balance', component: AccountBalanceIcon, category: category },
     { name: 'account_balance_fill', component: AccountBalanceFillIcon, category: category },
     { name: 'progress_activity', component: ProgressActivityIcon, category: category },
+    { name: 'bar_chart', component: BarChartIcon, category: category },
+    { name: 'show_chart', component: ShowChartIcon, category: category },
+    { name: 'pie_chart', component: PieChartIcon, category: category },
+    { name: 'pie_chart_fill', component: PieChartFillIcon, category: category },
+    { name: 'table', component: TableIcon, category: category },
+    { name: 'table_fill', component: TableFillIcon, category: category },
 ];

package/dist/collection/components/00-foundations/icons/categories/media.js

@@ -22,6 +22,8 @@ import StopFillIcon from "@material-symbols/svg-700/sharp/stop-fill.svg";
 import PlayPauseIcon from "@material-symbols/svg-700/sharp/play_pause.svg";
 import PlayArrowIcon from "@material-symbols/svg-700/sharp/play_arrow.svg";
 import PlayArrowFillIcon from "@material-symbols/svg-700/sharp/play_arrow-fill.svg";
+import PlayCircleIcon from "@material-symbols/svg-700/sharp/play_circle.svg";
+import PlayCircleFillIcon from "@material-symbols/svg-700/sharp/play_circle-fill.svg";
 import SkipPreviousIcon from "@material-symbols/svg-700/sharp/skip_previous.svg";
 import SkipPreviousFillIcon from "@material-symbols/svg-700/sharp/skip_previous-fill.svg";
 import SkipNextIcon from "@material-symbols/svg-700/sharp/skip_next.svg";
@@ -58,6 +60,8 @@ export const icons = [
     { name: 'play_pause', component: PlayPauseIcon, category: category },
     { name: 'play_arrow', component: PlayArrowIcon, category: category },
     { name: 'play_arrow_fill', component: PlayArrowFillIcon, category: category },
+    { name: 'play_circle', component: PlayCircleIcon, category: category },
+    { name: 'play_circle_fill', component: PlayCircleFillIcon, category: category },
     { name: 'skip_previous', component: SkipPreviousIcon, category: category },
     { name: 'skip_previous_fill', component: SkipPreviousFillIcon, category: category },
     { name: 'skip_next', component: SkipNextIcon, category: category },

package/dist/collection/components/00-foundations/icons/categories/social.js

@@ -0,0 +1,17 @@
+const category = 'Social media';
+import FacebookIcon from "../../../../../custom-icons/facebook.svg";
+import InstagramIcon from "../../../../../custom-icons/instagram.svg";
+import LinkedInIcon from "../../../../../custom-icons/linkedin.svg";
+import TikTokIcon from "../../../../../custom-icons/tiktok.svg";
+import XIcon from "../../../../../custom-icons/x.svg";
+import YouTubeIcon from "../../../../../custom-icons/youtube.svg";
+import BlueskyIcon from "../../../../../custom-icons/bluesky.svg";
+export const icons = [
+    { name: 'facebook', component: FacebookIcon, category: category },
+    { name: 'instagram', component: InstagramIcon, category: category },
+    { name: 'linkedin', component: LinkedInIcon, category: category },
+    { name: 'tiktok', component: TikTokIcon, category: category },
+    { name: 'x', component: XIcon, category: category },
+    { name: 'youtube', component: YouTubeIcon, category: category },
+    { name: 'bluesky', component: BlueskyIcon, category: category },
+];

package/dist/collection/components/00-foundations/icons/iconList.js

@@ -5,6 +5,7 @@ import { icons as informationIcons } from "./categories/information";
 import { icons as navigationIcons } from "./categories/navigation";
 import { icons as notificationIcons } from "./categories/notifications";
 import { icons as mediaIcons } from "./categories/media";
+import { icons as socialIcons } from "./categories/social";
 import { icons as textIcons } from "./categories/text";
 import { icons as userIcons } from "./categories/users";
 export const icons = [
@@ -15,6 +16,7 @@ export const icons = [
     ...navigationIcons,
     ...notificationIcons,
     ...mediaIcons,
+    ...socialIcons,
     ...textIcons,
     ...userIcons,
 ];