@uh-design-system/component-library 0.4.2 → 0.5.0

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.js');
 const index$1 = require('./index-5b0b9d4c.js');
-const utils = require('./utils-c9113835.js');
 const controlUtils = require('./controlUtils-041de0fd.js');
+const store = require('./store-9bd20f3c.js');
+const utils = require('./utils-2ba5e075.js');
 
 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 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{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.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;
@@ -18,26 +19,32 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
     password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
 };
 const inputIdGenerator = utils.idGenerator('ds-input');
-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);
+        this.clear = index.createEvent(this, "clear", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
     suffixButtonElement;
     inputElement;
-    assistiveTextId = assistiveTextIdGenerator.next().value;
-    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
-    successTextId = successTextIdGenerator.next().value;
-    errorTextId = errorTextIdGenerator.next().value;
+    assistiveTextId;
+    visuallyHiddenAssistiveTextId;
+    errorTextId;
+    successTextId;
     hasPrefixSlot = false;
     hasSuffixSlot = false;
     get el() { return index.getElement(this); }
+    internals;
+    clear;
     label;
     placeholder;
-    dsId = inputIdGenerator.next().value;
+    identifier = inputIdGenerator.next().value;
     name;
     disabled;
     optional;
@@ -66,6 +73,14 @@ const DsTextInput = class {
     clearButtonVisible = false;
     passwordInputVisible = false;
     inputActive = false;
+    validationMessage;
+    setIds = () => {
+        this.assistiveTextId = `${this.identifier}-assistive-text`;
+        this.visuallyHiddenAssistiveTextId = `${this.identifier}-visually-hidden-assistive-text`;
+        this.errorTextId = `${this.identifier}-error-text`;
+        this.successTextId = `${this.identifier}-success-text`;
+    };
+    getValidationMessage = () => this.errorText || this.internals?.validationMessage || this.inputElement?.validationMessage;
     async togglePasswordVisibility() {
         return (this.passwordInputVisible = !this.passwordInputVisible);
     }
@@ -73,6 +88,7 @@ const DsTextInput = class {
         this.inputElement.value = '';
         this.inputElement.focus();
         this.clearButtonVisible = false;
+        this.clear.emit({ id: this.identifier });
     }
     getLabelText = () => {
         if (this.required) {
@@ -84,9 +100,27 @@ const DsTextInput = class {
         return this.label;
     };
     componentWillLoad() {
+        this.setIds();
         this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
         this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
+        if (store.isValidation('server') || this.errorText) {
+            this.validationMessage = this.getValidationMessage();
+        }
     }
+    handleInput = (e) => {
+        const target = e.target;
+        this.clearButtonVisible = !!target.value;
+        this.internals?.setFormValue(target.value);
+        if (store.isValidation('client') && this.validationMessage) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    };
+    handleBlur = () => {
+        this.hasFocus = false;
+        if (store.isValidation('client')) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    };
     onActionButtonClicked = (e) => {
         e.stopPropagation();
         switch (this.type) {
@@ -98,13 +132,6 @@ const DsTextInput = class {
                 return;
         }
     };
-    renderValidityMessage(type) {
-        const textId = type === 'success' ? this.successTextId : this.errorTextId;
-        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)))));
-    }
     renderPrefixContent() {
         if (this.hasPrefixSlot) {
             return index.h("slot", { name: "prefix" });
@@ -139,19 +166,20 @@ const DsTextInput = class {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (index.h(index.Fragment, { key: '4d3ad7cc3f0d7c6aba4bcb8e5b05d0794b614f32' }, index.h("div", { key: '1cad6e50d1a9c0f4214824d1ff46a8418a095790', class: "ds-input--label-container" }, index.h("slot", { key: '67d096bb1eecd6ac492a5dcd14bd6f9bda21eb2c', name: "label" }, index.h("label", { key: 'cfffb9b06f2122dd80e4ad94831ca69b71e5a0de', htmlFor: this.dsId }, this.getLabelText())), index.h("slot", { key: '2256dfda0cf19eae50307b9badc2a2a97d9e190b', name: "help-text" }, index.h("small", { key: 'b9496a9afec60a4a64a0ff66505a7572362387ac', id: this.assistiveTextId }, this.assistiveText), index.h("ds-visually-hidden", { key: '23026b2453728e607802aabb7760f07229edeb7c', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), index.h("div", { key: '161a4d4eed706c5fd6ba2af90029e68b1c6b95c9', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('ds-input--container', {
+        return (index.h(index.Fragment, { key: 'efb783f742bb82b01fd6807a628eb693666a819b' }, index.h("div", { key: 'dde260b136af4b68de1fa15928529f5e57f54c3a', class: "ds-input--label-container" }, index.h("slot", { key: 'e7ba428a8b8202c9b3e4d9a9c6d4257b0b48d83a', name: "label" }, index.h("label", { key: '1f28c5fd53249068de50c6d0ea0aa88ccf65a1ec', htmlFor: this.identifier }, this.getLabelText())), index.h("slot", { key: 'e3c1ea925cfc7f9599ee651da0aeaab98fa806bb', name: "help-text" }, index.h("small", { key: '671ab99029e2775d964feb012beb8a20912be5e3', id: this.assistiveTextId }, this.assistiveText), index.h("ds-visually-hidden", { key: '8eb744be9b95ddceb1dd5bed0274d29a26e7ec1d', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), index.h("div", { key: 'b7fa7067a52d176b810eb88777423adf50dfd8b9', 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: 'a04e9ed4de86a65290206ca62efde1c27d76aa80', 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: 'f619722a0c088fbd99d851b4cc49a220538da0ae', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": utils.getAriaLabel(this.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,
-                }), disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: e => (this.clearButtonVisible = !!e.target.value), onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false) }), this.renderSuffixContent()), this.renderValidityMessage('error'), this.renderValidityMessage('success')));
+                    [this.errorTextId]: Boolean(this.validationMessage),
+                    [this.successTextId]: Boolean(this.successText),
+                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur }), this.renderSuffixContent()), index.h("slot", { key: 'b70c638ad0de13e0bfa1c2f0ec366e748ab8e4e2', name: "input-validity" }, index.h("ds-input-validity", { key: '7c1da6ba8d42add8de43f4926c24c8a64bbe32e2', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), index.h("ds-input-validity", { key: '46258021c17e3461ea4a0c2ae720fb44305550c5', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
     }
+    static get formAssociated() { return true; }
 };
 DsTextInput.style = DsTextInputStyle0;
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.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;
@@ -12,7 +12,7 @@ const DsVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("slot", { key: '4307602964aa15c8d3f4fb0f4b89188cf0a8b55e' }));
+        return (index.h("slot", { key: '083eaed9210a85360479b367769c8904a6089f64' }));
     }
 };
 DsVisuallyHidden.style = DsVisuallyHiddenStyle0;

package/dist/cjs/{index-b2bddcf4.js → index-bf84b124.js}

@@ -1336,8 +1336,10 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
     }
   }
 };
+var renderingRef = null;
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
   try {
+    renderingRef = instance;
     instance = instance.render() ;
     {
       hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
@@ -1355,8 +1357,10 @@ var callRender = (hostRef, instance, elm, isInitialLoad) => {
   } catch (e) {
     consoleError(e, hostRef.$hostElement$);
   }
+  renderingRef = null;
   return null;
 };
+var getRenderingRef = () => renderingRef;
 var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
@@ -1395,6 +1399,16 @@ var postUpdateComponent = (hostRef) => {
     hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
   }
 };
+var forceUpdate = (ref) => {
+  {
+    const hostRef = getHostRef(ref);
+    const isConnected = hostRef.$hostElement$.isConnected;
+    if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+      scheduleUpdate(hostRef, false);
+    }
+    return isConnected;
+  }
+};
 var appDidLoad = (who) => {
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
@@ -1945,7 +1959,9 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 exports.Fragment = Fragment;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;
+exports.forceUpdate = forceUpdate;
 exports.getElement = getElement;
+exports.getRenderingRef = getRenderingRef;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/index.cjs.js

@@ -1,2 +1,10 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const store = require('./store-9bd20f3c.js');
+require('./index-bf84b124.js');
+
+
+
+exports.configure = store.configure;

package/dist/cjs/{linkUtils-e911e899.js → linkUtils-695da37c.js}

@@ -11,16 +11,6 @@ const visuallyHiddenAssistiveText = (lang) => {
             return 'Opens in a new tab';
     }
 };
-const getAriaLabel = (text, ariaLabel) => {
-    if (!ariaLabel) {
-        return undefined;
-    }
-    if (ariaLabel.startsWith(text)) {
-        return ariaLabel;
-    }
-    return [text, ariaLabel].join(' ');
-};
 
-exports.getAriaLabel = getAriaLabel;
 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-b2bddcf4.js');
+const index = require('./index-bf84b124.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_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-checkbox-group.cjs",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[1028],"checkedChildElementCount":[1026,"checked-child-element-count"],"disabled":[4],"parentCheckedCount":[2,"parent-checked-count"],"childElementsCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","handleIndeterminateChildChange"],[0,"dsCheckboxChange","handleCheckboxChange"],[0,"dsCheckboxGroupChange","handleCheckboxGroupChange"]],{"disabled":["handleCheckboxDisabledChange"],"checked":["handleCheckedChange"],"isIndeterminate":["handleIndeterminateChange"],"checkedChildElementCount":["handleCheckedChildElementCountChange"]}]]],["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["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"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"linkAriaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"linkAriaLabel":[1,"aria-label"]}]]],["ds-input-validity.cjs",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-checkbox.cjs",[[65,"ds-checkbox",{"checkboxId":[1025,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[32],"value":[32],"validationMessage":[32]}]]]], options);
+  return index.bootstrapLazy([["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-input-validity.cjs",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-text-input.cjs",[[70,"ds-text-input",{"label":[1],"placeholder":[1],"identifier":[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],"validationMessage":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-checkbox.cjs",[[65,"ds-checkbox",{"identifier":[1,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[1,"aria-label"],"value":[32],"validationMessage":[32]}]]],["ds-checkbox-group.cjs",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[4],"disabled":[4],"childElementsCount":[32],"checkedChildElementCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"disabled":["watchCheckboxDisabledChange"],"checked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-link.cjs",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/store-9bd20f3c.js

@@ -0,0 +1,207 @@
+'use strict';
+
+const index = require('./index-bf84b124.js');
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2_000);
+const stencilSubscription = () => {
+    if (typeof index.getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = index.getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const initialState = {
+    validation: 'client',
+};
+const { state, set } = createStore({
+    ...initialState,
+});
+const isValidation = (validation) => state.validation === validation;
+const configure = ({ validation }) => {
+    set('validation', validation || initialState.validation);
+};
+
+exports.configure = configure;
+exports.isValidation = isValidation;

package/dist/cjs/{utils-c9113835.js → utils-2ba5e075.js}

@@ -13,6 +13,16 @@ function* idGenerator(id) {
         yield `${id}-${currentId++}`;
     }
 }
+const getAriaLabel = (text, ariaLabel) => {
+    if (!ariaLabel) {
+        return undefined;
+    }
+    if (ariaLabel.startsWith(text)) {
+        return ariaLabel;
+    }
+    return [text, ariaLabel].join(' ');
+};
 
+exports.getAriaLabel = getAriaLabel;
 exports.idGenerator = idGenerator;
 exports.remToPx = remToPx;

package/dist/collection/collection-manifest.json

@@ -2,13 +2,13 @@
   "entries": [
     "components/01-base-components/ds-checkbox/ds-checkbox.js",
     "components/01-base-components/ds-checkbox-group/ds-checkbox-group.js",
+    "components/01-base-components/ds-text-input/ds-text-input.js",
     "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-input-validity/ds-input-validity.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": {

package/dist/collection/components/00-foundations/types.js

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

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js

@@ -43,18 +43,18 @@ export class DsAccordion {
     render() {
         const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
         const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
-        return (h("div", { key: '4ab62a504c68a926d59d2b4753aaf3a5b0ebd39d', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
+        return (h("div", { key: 'aeaa883c8500bda65c480ccea434cbeadc53ce69', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned
-            }), role: "presentation" }, h("div", { key: 'f98a24462b341c86d4a9ba71eff5d7b5ffbb2eb0', class: "ds-accordion__item" }, h("div", { key: '0da3c96376007d4b597e55ac54cb90de9a4788c7', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '98885f42ecad0aaf00ea736d147fd7838685f1d0', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+            }), role: "presentation" }, h("div", { key: 'a7947fd7784084bcec3a02f2219fa2494366d590', class: "ds-accordion__item" }, h("div", { key: '20532a2d3f109e38341d496ffee0d2d02cfb26f4', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '40513d75b15c4701498b83c9a6afbcd7a322c73c', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned,
                 'ds-accordion--hide-top-border': this.hideTopBorder
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '8f5ee7d3c251b0b34f9b57f74c2fb87ceb7266d3', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '883d1cbf50b3cfb0beacd62570a1077aa8bd7a04', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
             h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
-            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'a9b391fd0bba7055c68e3995bafbf07d4b069038', name: "header" }))), h("div", { key: '551a044a61152ab1799d519fcf9331eb29b428e2', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
+            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'a8ddede4cec5ab873fb69ab9963e7f143613fe0f', name: "header" }))), h("div", { key: '76cf35006795136597efd9c424237ac1c48bbc74', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
                 'ds-accordion__panel--border-aligned': this.borderAligned,
                 'ds-accordion__panel--expanded': this.isExpanded
-            }), hidden: !this.isExpanded }, h("div", { key: '455ab200c7febf67028a6ec2ef27eeeaa8bff6ae', class: "ds-accordion__content" }, h("slot", { key: '31af185bd1680cf70ba81ed7826f977d9620372a', name: "content" })), this.useCloseButton &&
-            h("ds-button", { key: 'fdeeae0f9e3c866a1f851a18fe2524afa92124d5', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
+            }), hidden: !this.isExpanded }, h("div", { key: '6236db88bc5735ec4e5618a63e303d997335e1be', class: "ds-accordion__content" }, h("slot", { key: '4d206253394878b4fba531cea6870aaaa3e63821', name: "content" })), this.useCloseButton &&
+            h("ds-button", { key: 'e5c0f76a802e6046f2872509a4944b72aa376bf1', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
                     'ds-accordion--border-aligned': this.borderAligned
                 }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
     }

package/dist/collection/components/01-base-components/ds-button/ds-button.js

@@ -65,7 +65,7 @@ export class DsButton {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", { key: '493f90c0fb16bd412af413f08ee5a1d2cdb178eb', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: '949f90e3355f81064e60d792ea7ecb2340001dc8', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: 'ac90509ba952a69c58749f4e41f6df5390a0709a', name: this.icon, size: iconSize })), this.value && h("span", { key: '8b3ac1d3fbcf5e22cde0dc6edd189dc697446d06', class: "button-value" }, this.value), h("slot", { key: '7b3ca23198eecb75454b2d46b6db504d456223a6', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '3ddeb9b6c4678fb239ddfc34fda24f3c35b9905e', name: this.icon, size: iconSize }))));
+        return (h("button", { key: '50633fbf3df7aeb84c2631dd7b8eb7a1f83cbc29', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: 'aea86ce3195d3fa5344dfbf2048bc4db7882286b', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '38b833cbc1585a7cf0918dec9b2b2a0f62cc6fe2', name: this.icon, size: iconSize })), this.value && h("span", { key: '430bd3e7e54558706bcd8b2cc9fda5d0cc04667c', class: "button-value" }, this.value), h("slot", { key: '9c3d1b19e8c96afb9a6bc380fcd0dd04d9ed411e', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'dcb2076975dd8648db795c3629cc12c79d4e7d70', name: this.icon, size: iconSize }))));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.css

@@ -26,7 +26,7 @@
   align-items: center;
   flex-direction: row;
   flex-wrap: nowrap;
-  text-wrap: nowrap;
+  text-wrap: wrap;
   position: relative;
   cursor: pointer;
   user-select: none;