@uh-design-system/component-library 0.6.1-rc.0 → 0.7.0

package/dist/components/ds-checkbox2.js

@@ -1,34 +1,37 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
 import { i as inheritAttributes, a as inheritAriaAttributes } from './attributes.js';
-import { g as getRequiredText, a as getOptionalText, r as required } from './controlUtils.js';
-import { i as isValidation } from './index.js';
+import { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils.js';
 import { i as idGenerator, d as defineCustomElement$2 } from './ds-icon2.js';
 import { d as defineCustomElement$1 } from './ds-input-validity2.js';
 
-const dsCheckboxCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox__input{cursor:pointer;appearance:none;background-color:var(--ds-palette-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-palette-black-50)}.ds-checkbox__input:hover{background-color:var(--ds-palette-black-10)}.ds-checkbox__input:active{background-color:var(--ds-palette-black-20)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-palette-black-40);background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-palette-mainBlue-70);border-color:var(--ds-overlay-black-00)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-palette-mainBlue-90)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-overlay-black-10)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-palette-black-40)}.ds-checkbox__span--optional{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
+const dsCheckboxCss = ".sc-ds-checkbox:root,.sc-ds-checkbox-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-checkbox-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend.sc-ds-checkbox{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text.sc-ds-checkbox{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-checkbox.sc-ds-checkbox{box-sizing:border-box;color:var(--ds-palette-black-95);display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox__input.sc-ds-checkbox{cursor:pointer;appearance:none;background-color:var(--ds-palette-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50)}.ds-checkbox__input.sc-ds-checkbox:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-checkbox__input.sc-ds-checkbox:hover,.ds-checkbox__input.sc-ds-checkbox:active{border-color:var(--ds-palette-black-50)}.ds-checkbox__input.sc-ds-checkbox:hover{background-color:var(--ds-palette-black-10)}.ds-checkbox__input.sc-ds-checkbox:active{background-color:var(--ds-palette-black-20)}.ds-checkbox__input.sc-ds-checkbox:disabled{cursor:not-allowed;color:var(--ds-palette-black-40);background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}@media (forced-colors: active){.ds-checkbox__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__input--invalid.sc-ds-checkbox,.ds-checkbox__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__input--invalid.sc-ds-checkbox:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input.sc-ds-checkbox:checked,.ds-checkbox__input.sc-ds-checkbox:indeterminate{background-color:var(--ds-palette-mainBlue-70);border-color:var(--ds-overlay-black-00)}.ds-checkbox__input.sc-ds-checkbox:checked:hover,.ds-checkbox__input.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-checkbox__input.sc-ds-checkbox:checked:active,.ds-checkbox__input.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-mainBlue-90)}.ds-checkbox__input.sc-ds-checkbox:checked:disabled,.ds-checkbox__input.sc-ds-checkbox:indeterminate:disabled{background-color:var(--ds-overlay-black-10)}.ds-checkbox__input.sc-ds-checkbox::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input.sc-ds-checkbox:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input.sc-ds-checkbox:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input.sc-ds-checkbox:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input.sc-ds-checkbox:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox--no-margin.sc-ds-checkbox .ds-checkbox__input.sc-ds-checkbox{margin-right:0}.ds-checkbox--disabled.sc-ds-checkbox{color:var(--ds-palette-black-40)}.ds-checkbox__span--optional.sc-ds-checkbox{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14)}.ds-checkbox.sc-ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox-error.sc-ds-checkbox{display:flex}.ds-checkbox-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
 
 const checkboxIdGenerator = idGenerator('ds-checkbox');
 const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.dsChange = createEvent(this, "dsChange");
         this.dsCheckboxFocused = createEvent(this, "dsCheckboxFocused");
         this.dsCheckboxBlurred = createEvent(this, "dsCheckboxBlurred");
-        this.internals = this.attachInternals();
+        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
+        this.dsValidity = createEvent(this, "dsValidity");
     }
     checkboxGroup = null;
-    inputElem;
+    inputElement;
     labelId;
     inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
-    labelClicked = false;
     get el() { return this; }
-    internals;
+    dsChange;
+    dsCheckboxFocused;
+    dsCheckboxBlurred;
+    dsSubmitInvalid;
+    dsValidity;
     dsId = checkboxIdGenerator.next().value;
+    dsName = this.dsId;
     dsValue = this.dsId;
     dsChecked = false;
     dsLegend;
@@ -42,12 +45,9 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     dsOptional = false;
     dsOptionalText;
     dsAriaLabel;
-    dsChange;
-    dsCheckboxFocused;
-    dsCheckboxBlurred;
     groupInvalid = false;
-    validationMessage;
-    showInvalidState = false;
+    hasFocus = false;
+    wasInvalidOnBlur = false;
     initialChecked = false;
     isPressingEnter = false;
     setIds = () => {
@@ -55,21 +55,12 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         this.inputValidityId = `${this.dsId}-validity`;
         this.assistiveTextId = `${this.dsId}-assistive-text`;
     };
-    getValidationMessage = () => !this.dsErrorsDisabled
-        ? this.dsErrorText || (this.showInvalidState ? this.internals?.validationMessage : '') || (this.showInvalidState ? this.inputElem?.validationMessage : '')
-        : '';
-    getInvalid = () => {
-        if (this.checkboxGroup && this.groupInvalid) {
-            return true;
-        }
-        if (!this.dsErrorsDisabled && !!this.dsErrorText) {
-            return true;
-        }
-        if (this.showInvalidState && !!this.internals?.validationMessage) {
-            return true;
-        }
-        return this.showInvalidState && this.inputElem ? !this.inputElem.validity.valid : false;
-    };
+    async dsFocus() {
+        this.inputElement.focus();
+    }
+    async dsCheckValidity() {
+        return this.inputElement?.checkValidity();
+    }
     getLegendText = () => {
         if (this.dsRequired) {
             return getRequiredText(this.dsLegend);
@@ -91,63 +82,76 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         }
         return this.dsText;
     };
-    getAriaDescribedBy = () => [!!this.dsAssistiveText && this.assistiveTextId, !!this.getValidationMessage() && this.inputValidityId].filter(Boolean).join(' ');
     formResetCallback() {
+        this.dsErrorText = '';
         this.dsChecked = this.initialChecked;
-        this.showInvalidState = false;
         this.checkboxGroup = this.el.closest('ds-checkbox-group');
         if (this.checkboxGroup) {
             this.groupInvalid = !!this.checkboxGroup.dsErrorText;
+            this.dsErrorText = this.checkboxGroup.dsErrorText;
         }
     }
     connectedCallback() {
         this.checkboxGroup = this.el.closest('ds-checkbox-group');
         if (this.checkboxGroup) {
             this.groupInvalid = !!this.checkboxGroup.dsErrorText;
-            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+            this.dsErrorText = this.checkboxGroup.dsErrorText;
+            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateGroupInvalidState);
         }
     }
     disconnectedCallback() {
         if (this.checkboxGroup) {
-            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateGroupInvalidState);
         }
         this.checkboxGroup = null;
     }
-    updateInvalidState = (e) => {
-        this.groupInvalid = e.detail;
+    handleInvalid = (e) => {
+        e.preventDefault();
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsSubmitInvalid.emit({
+                    flag: key,
+                    message: validityMessage(key),
+                });
+                break;
+            }
+        }
+    };
+    updateGroupInvalidState = (e) => {
+        this.groupInvalid = !!e.detail;
+        this.dsErrorText = e.detail;
     };
     componentWillLoad() {
         this.setIds();
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
-            ...inheritAttributes(this, this.el, ['value']),
+            ...inheritAttributes(this, this.el, ['value', 'name', 'id']),
         };
         this.initialChecked = this.dsChecked;
-        if (isValidation('server') || this.dsErrorText) {
-            this.validationMessage = this.getValidationMessage();
-        }
-    }
-    componentDidLoad() {
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !this.dsChecked }, required(), this.el.shadowRoot?.querySelector('input'));
-        }
     }
     dsCheckedObserver(isChecked) {
-        this.dsChange.emit(isChecked);
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !isChecked }, required(), this.el.shadowRoot?.querySelector('input'));
+        this.dsChange.emit({ checked: isChecked, value: this.dsValue });
+        if (!this.wasInvalidOnBlur || this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsValidity.emit({
+                    flag: key,
+                    message: validityMessage(key),
+                });
+                break;
+            }
         }
-        this.internals?.setFormValue(isChecked ? this.dsValue : null);
     }
     handleInput = (e) => {
-        if (!this.showInvalidState) {
-            this.showInvalidState = true;
-        }
         const target = e.target;
         this.dsChecked = target.checked;
-        if (isValidation('client')) {
-            this.validationMessage = this.getValidationMessage();
-        }
     };
     handleKeyDown = (event) => {
         if (event.key === 'Enter' && !this.isPressingEnter) {
@@ -156,43 +160,45 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter' && this.isPressingEnter) {
-            this.inputElem.click();
+            this.inputElement.click();
             this.isPressingEnter = false;
         }
     };
     handleFocus = () => {
+        this.hasFocus = true;
         this.dsCheckboxFocused.emit(this.dsId);
     };
     handleBlur = () => {
-        if (!this.showInvalidState) {
-            this.showInvalidState = true;
+        this.hasFocus = false;
+        this.dsCheckboxBlurred.emit(this.dsId);
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
         }
-        if (isValidation('client') && !this.labelClicked) {
-            this.validationMessage = this.getValidationMessage();
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.wasInvalidOnBlur = key !== 'valid';
+                this.dsValidity.emit({
+                    flag: key,
+                    message: validityMessage(key),
+                });
+                break;
+            }
         }
-        this.labelClicked = false;
-        this.dsCheckboxBlurred.emit(this.dsId);
-    };
-    handleMouseDown = () => {
-        this.labelClicked = true;
-    };
-    handleMouseUp = () => {
-        this.labelClicked = false;
     };
     renderCheckbox() {
-        const isInvalid = this.getInvalid();
         const classes = classNames('ds-checkbox', {
             'ds-checkbox--disabled': this.dsDisabled,
             'ds-checkbox--no-margin': !this.dsText,
         });
         const inputClasses = classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': isInvalid,
+            'ds-checkbox__input--invalid': !!this.dsErrorText,
         });
         const errorClasses = classNames('ds-checkbox-error', {
-            'ds-checkbox-error--visible': !!this.validationMessage,
+            'ds-checkbox-error--visible': !!this.dsErrorText,
         });
-        const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, onFocus: this.handleFocus, value: this.dsValue, disabled: this.dsDisabled, required: this.dsRequired, id: this.dsId, "aria-describedby": ariaDescribedBy, "aria-label": this.dsAriaLabel, "aria-invalid": isInvalid, ...this.inheritedAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, dsText: this.validationMessage, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !this.dsErrorsDisabled && !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes }, h("input", { ref: inputElement => (this.inputElement = inputElement), type: "checkbox", class: inputClasses, checked: this.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, value: this.dsValue, disabled: this.dsDisabled, required: this.dsRequired, id: this.dsId, name: this.dsName, "aria-describedby": ariaDescribedBy, "aria-label": this.dsAriaLabel, "aria-invalid": !!this.dsErrorText, ...this.inheritedAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-checkbox-fieldset');
@@ -206,14 +212,14 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         }
         return this.renderCheckbox();
     }
-    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "dsChecked": ["dsCheckedObserver"]
     }; }
     static get style() { return dsCheckboxCss; }
-}, [81, "ds-checkbox", {
+}, [66, "ds-checkbox", {
         "dsId": [1, "ds-id"],
+        "dsName": [1, "ds-name"],
         "dsValue": [1, "ds-value"],
         "dsChecked": [1028, "ds-checked"],
         "dsLegend": [1, "ds-legend"],
@@ -221,15 +227,17 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         "dsText": [1, "ds-text"],
         "dsIndeterminate": [4, "ds-indeterminate"],
         "dsDisabled": [4, "ds-disabled"],
-        "dsErrorText": [1, "ds-error-text"],
+        "dsErrorText": [1025, "ds-error-text"],
         "dsErrorsDisabled": [4, "ds-errors-disabled"],
         "dsRequired": [4, "ds-required"],
         "dsOptional": [4, "ds-optional"],
         "dsOptionalText": [1, "ds-optional-text"],
         "dsAriaLabel": [1, "ds-aria-label"],
         "groupInvalid": [32],
-        "validationMessage": [32],
-        "showInvalidState": [32]
+        "hasFocus": [32],
+        "wasInvalidOnBlur": [32],
+        "dsFocus": [64],
+        "dsCheckValidity": [64]
     }, undefined, {
         "dsChecked": ["dsCheckedObserver"]
     }]);

package/dist/components/ds-chip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsChip extends Components.DsChip, HTMLElement {}
+export const DsChip: {
+    prototype: DsChip;
+    new (): DsChip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-chip.js

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
+import { r as removeSelection } from './controlUtils.js';
+import { d as defineCustomElement$3 } from './ds-icon2.js';
+import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
+
+const dsChipCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-chip{box-sizing:border-box;display:inline-flex;align-items:center;background-color:var(--ds-palette-white);color:var(--ds-palette-mainBlue-70);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);padding:calc(var(--ds-spacing-3xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);border:var(--ds-borderWidth-thin) solid var(--ds-palette-mainBlue-70);border-radius:1rem}.ds-chip:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-chip:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-chip:active{background-color:var(--ds-palette-mainBlue-10)}.ds-chip__text{padding:0 var(--ds-spacing-3xSmall)}";
+
+const DsChip$1 = proxyCustomElement(class DsChip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsClick = createEvent(this, "dsClick");
+    }
+    get el() { return this; }
+    index = 0;
+    dsText = 'Label';
+    dsIcon = '';
+    dsClick;
+    handleClick = () => {
+        this.dsClick.emit(this.index);
+    };
+    render() {
+        return (h("button", { key: '2dff69a4f4cf9271001d6bb7249b3943a84ef98d', class: "ds-chip", onClick: this.handleClick }, h("slot", { key: '24db78eaad28add961c4f931c8e3aab854b6401e', name: "prefix" }, this.dsIcon && h("ds-icon", { key: '096f35e15e6260b48e1f3bbb4608ac86d2403213', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '3f8e7696850b427eef1c460b0d01e9b1ced95c4c', class: "ds-chip__text" }, h("slot", { key: '4ccec3133434f93ed8c3da94aa09365249badb57' }, this.dsText), h("ds-visually-hidden", { key: 'cd95b98b33f2e1475313a1f26222044a13789179', "ds-tag": "span" }, ", ", removeSelection())), h("ds-icon", { key: '1ca26c3f4eea21ccf80c49680b2f854cdacaefda', dsName: "close", dsSize: "1rem" })));
+    }
+    static get style() { return dsChipCss; }
+}, [1, "ds-chip", {
+        "index": [2],
+        "dsText": [1, "ds-text"],
+        "dsIcon": [1, "ds-icon"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-chip", "ds-icon", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-chip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsChip$1);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsChip = DsChip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsChip, defineCustomElement };

package/dist/components/ds-grid.js

@@ -34,14 +34,14 @@ const DsGrid$1 = proxyCustomElement(class DsGrid extends H {
         const classes = classNames('ds-grid', {
             'ds-grid--container': this.dsContainer,
         });
-        return (h(Host, { key: '83c89448a6eacc98c3ff6d7e25b220cca71e5438', class: classes, style: {
+        return (h(Host, { key: 'aef2d6bd2a78cdf9962c694ffe9784fefb0747ec', class: classes, style: {
                 '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
                 '--ds-parent-size-tablet': `${this.dsParentSizeTablet}`,
                 '--ds-parent-size-desktop': `${this.dsParentSizeDesktop}`,
                 '--ds-size-mobile': `${this.dsSizeMobile ? this.dsSizeMobile * 3 : this.dsSize}`,
                 '--ds-size-tablet': `${this.dsSizeTablet ? this.dsSizeTablet * 2 : this.dsSize}`,
                 '--ds-size-desktop': `${this.dsSizeDesktop || this.dsSize}`,
-            } }, h("slot", { key: '9279cd18bcfda32deeb73971cf96a157e97def70' })));
+            } }, h("slot", { key: 'fc9efb4fc8a7bdec52aeda3ae8f35eb9bff6d521' })));
     }
     static get style() { return dsGridCss; }
 }, [4, "ds-grid", {

package/dist/components/ds-icon-360.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsIcon360 extends Components.DsIcon360, HTMLElement {}
+export const DsIcon360: {
+    prototype: DsIcon360;
+    new (): DsIcon360;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-icon-360.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index2.js';
+
+const DsIcon360$1 = proxyCustomElement(class DsIcon360 extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    dsSize;
+    dsTitle = 'Icon';
+    dsRole = 'img';
+    dsColour;
+    render() {
+        return (h(Host, { key: '99033e07a3f6d8009a593fc2565e2c5a56445121', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '4af8d13b04870eca966f62ef7ddc24e48b1e65fb', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'c5e5382db308d48ba59c0a202394da331c285e64', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
+    }
+}, [0, "ds-icon-360", {
+        "dsSize": [1, "ds-size"],
+        "dsTitle": [1, "ds-title"],
+        "dsRole": [1, "ds-role"],
+        "dsColour": [1, "ds-colour"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-icon-360"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-icon-360":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsIcon360$1);
+            }
+            break;
+    } });
+}
+
+const DsIcon360 = DsIcon360$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsIcon360, defineCustomElement };

package/dist/components/ds-icon-account-balance-fill.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsIconAccountBalanceFill extends Components.DsIconAccountBalanceFill, HTMLElement {}
+export const DsIconAccountBalanceFill: {
+    prototype: DsIconAccountBalanceFill;
+    new (): DsIconAccountBalanceFill;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-icon-account-balance-fill.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index2.js';
+
+const DsIconAccountBalanceFill$1 = proxyCustomElement(class DsIconAccountBalanceFill extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    dsSize;
+    dsTitle = 'Icon';
+    dsRole = 'img';
+    dsColour;
+    render() {
+        return (h(Host, { key: 'b627bc4ac4f5013eaa0f73d3cbb90ad2482f6574', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e59772d05d66fbc679540af0738ed86e9a353a34', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'e082b9bde352c4801f29714e9827bd2b27f6946d', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+    }
+}, [0, "ds-icon-account-balance-fill", {
+        "dsSize": [1, "ds-size"],
+        "dsTitle": [1, "ds-title"],
+        "dsRole": [1, "ds-role"],
+        "dsColour": [1, "ds-colour"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-icon-account-balance-fill"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-icon-account-balance-fill":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsIconAccountBalanceFill$1);
+            }
+            break;
+    } });
+}
+
+const DsIconAccountBalanceFill = DsIconAccountBalanceFill$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsIconAccountBalanceFill, defineCustomElement };

package/dist/components/ds-icon-account-balance.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsIconAccountBalance extends Components.DsIconAccountBalance, HTMLElement {}
+export const DsIconAccountBalance: {
+    prototype: DsIconAccountBalance;
+    new (): DsIconAccountBalance;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-icon-account-balance.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index2.js';
+
+const DsIconAccountBalance$1 = proxyCustomElement(class DsIconAccountBalance extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    dsSize;
+    dsTitle = 'Icon';
+    dsRole = 'img';
+    dsColour;
+    render() {
+        return (h(Host, { key: '16439309514f561af0334219d85fbaaa59c4299b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'eeb3d565a4791607a9eced6af8baf13afffc5ed7', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: '8abae98943b5250b7cc43b68d74d659c6314e6b3', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
+    }
+}, [0, "ds-icon-account-balance", {
+        "dsSize": [1, "ds-size"],
+        "dsTitle": [1, "ds-title"],
+        "dsRole": [1, "ds-role"],
+        "dsColour": [1, "ds-colour"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-icon-account-balance"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-icon-account-balance":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsIconAccountBalance$1);
+            }
+            break;
+    } });
+}
+
+const DsIconAccountBalance = DsIconAccountBalance$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsIconAccountBalance, defineCustomElement };

package/dist/components/ds-icon-account-circle-fill.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsIconAccountCircleFill extends Components.DsIconAccountCircleFill, HTMLElement {}
+export const DsIconAccountCircleFill: {
+    prototype: DsIconAccountCircleFill;
+    new (): DsIconAccountCircleFill;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-icon-account-circle-fill.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index2.js';
+
+const DsIconAccountCircleFill$1 = proxyCustomElement(class DsIconAccountCircleFill extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    dsSize;
+    dsTitle = 'Icon';
+    dsRole = 'img';
+    dsColour;
+    render() {
+        return (h(Host, { key: '4b5bf1762b216f45b9747741bf8a594cbcebe332', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '4f3c716846e08df5f6196385952f9cb1a193e4db', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsTitle }, h("path", { key: 'fe766ac4c1a8bf0e76201d225095b3defdad8416', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
+    }
+}, [0, "ds-icon-account-circle-fill", {
+        "dsSize": [1, "ds-size"],
+        "dsTitle": [1, "ds-title"],
+        "dsRole": [1, "ds-role"],
+        "dsColour": [1, "ds-colour"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-icon-account-circle-fill"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-icon-account-circle-fill":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsIconAccountCircleFill$1);
+            }
+            break;
+    } });
+}
+
+const DsIconAccountCircleFill = DsIconAccountCircleFill$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsIconAccountCircleFill, defineCustomElement };

package/dist/components/ds-icon-account-circle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsIconAccountCircle extends Components.DsIconAccountCircle, HTMLElement {}
+export const DsIconAccountCircle: {
+    prototype: DsIconAccountCircle;
+    new (): DsIconAccountCircle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;