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

package/dist/components/ds-checkbox-group.js

@@ -0,0 +1,206 @@
+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 inheritAriaAttributes } from './attributes.js';
+import { i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
+import { d as defineCustomElement$4 } from './ds-checkbox2.js';
+import { d as defineCustomElement$2 } from './ds-input-validity2.js';
+
+const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__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-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";
+const DsCheckboxGroupStyle0 = dsCheckboxGroupCss;
+
+const fieldsetIdGenerator = idGenerator('ds-checkbox-group');
+const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange", 7);
+        this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange", 7);
+    }
+    fieldsetId = fieldsetIdGenerator.next().value;
+    checkboxId = `${this.fieldsetId}-checkbox`;
+    errorTextId = `${this.fieldsetId}-error`;
+    assistiveTextId = `${this.fieldsetId}-assistive-text`;
+    nestedId = `${this.fieldsetId}-nested`;
+    inheritedAttributes = {};
+    get el() { return this; }
+    dsCheckboxGroupChange;
+    dsCheckboxGroupIndeterminateChildChange;
+    legend;
+    assistiveText;
+    direction = 'vertical';
+    errorText = '';
+    text = '';
+    checked = false;
+    checkedChildElementCount = 0;
+    disabled = false;
+    parentCheckedCount = 0;
+    childElementsCount = 0;
+    isIndeterminate = false;
+    indeterminateChildCheckboxCount = 0;
+    elementIs = (localName) => (element) => element.localName === localName;
+    elementIsCheckbox = this.elementIs('ds-checkbox');
+    elementIsCheckboxGroup = this.elementIs('ds-checkbox-group');
+    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.errorText) && this.errorTextId].filter(Boolean).join(' ');
+    getChildElements = () => {
+        const slot = this.el.shadowRoot.querySelector('slot');
+        return (slot?.assignedElements() || []);
+    };
+    getChildCheckboxElements = () => {
+        return this.getChildElements().filter(this.elementIsCheckbox);
+    };
+    updateChildElements = (updateFn) => {
+        this.getChildElements().forEach(updateFn);
+    };
+    updateChildCheckboxes = (updateFn) => {
+        this.getChildCheckboxElements().forEach(updateFn);
+    };
+    updateChildElementsChecked = (checked) => {
+        this.checkedChildElementCount = checked ? this.childElementsCount : 0;
+        this.updateChildElements((element) => {
+            element.checked = checked;
+            if (this.elementIsCheckboxGroup(element)) {
+                (async () => {
+                    await element.setChecked(checked);
+                })();
+            }
+        });
+    };
+    async setChecked(newValue) {
+        this.updateChildElementsChecked(newValue);
+    }
+    handleCheckboxDisabledChange(newValue) {
+        this.updateChildElements((element) => {
+            element.disabled = newValue;
+        });
+    }
+    handleCheckedChange(newValue) {
+        this.updateChildElementsChecked(newValue);
+    }
+    handleIndeterminateChange(newValue) {
+        this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
+    }
+    handleIndeterminateChildChange(event) {
+        this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
+    }
+    handleCheckedChildElementCountChange(newValue, oldValue) {
+        this.isIndeterminate =
+            this.checkedChildElementCount !== this.childElementsCount && this.checkedChildElementCount < this.childElementsCount && this.checkedChildElementCount > 0;
+        if (newValue === this.childElementsCount && newValue > oldValue) {
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
+        }
+        else if (oldValue === this.childElementsCount && newValue < oldValue) {
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+        }
+    }
+    updateCheckedChildElementCount = (event) => {
+        if (event.detail.checked) {
+            this.checkedChildElementCount = this.checkedChildElementCount === this.childElementsCount ? this.checkedChildElementCount : this.checkedChildElementCount + 1;
+        }
+        else {
+            this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
+        }
+    };
+    handleCheckboxChange(event) {
+        if (event.detail.id === this.checkboxId) {
+            this.updateChildElementsChecked(event.detail.checked);
+            return;
+        }
+        if (this.getChildCheckboxElements().includes(event.target)) {
+            this.updateCheckedChildElementCount(event);
+        }
+    }
+    handleCheckboxGroupChange(event) {
+        if (this.getChildElements().includes(event.target)) {
+            this.updateCheckedChildElementCount(event);
+        }
+    }
+    setChildElementCount = () => {
+        this.childElementsCount = this.getChildElements().length;
+    };
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
+    }
+    componentDidLoad() {
+        this.setChildElementCount();
+        this.updateChildCheckboxes(element => {
+            element.setAttribute('data-errors-disabled', 'true');
+        });
+    }
+    componentDidUpdate() {
+        this.setChildElementCount();
+    }
+    render() {
+        const classes = classNames('ds-checkbox-group', {
+            'ds-checkbox-group--horizontal': this.direction === 'horizontal',
+        });
+        const legendClasses = classNames('ds-checkbox-group__legend');
+        const assistiveTextClasses = classNames('ds-checkbox-group__assistive-text');
+        const errorClasses = classNames('ds-checkbox-group__error', {
+            'ds-checkbox-group__error--visible': Boolean(this.errorText),
+        });
+        const nestedClasses = classNames('ds-checkbox-group', 'ds-checkbox-group--inset');
+        const checkboxesClasses = classNames('ds-checkbox-group__checkboxes');
+        const ariaDescribedBy = this.getAriaDescribedBy();
+        return (h("fieldset", { key: '2080f4f193fe5bb3a6702287cebcf5d7dcc4a9b7', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: '15754cea90c38ad46ff41196b0de108f10f007a9', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: '7dde97170e62d0668a52b3a21256be65e04ae811', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: 'b2e23012afd2f5439c89d5683f8b3776cf438ce5', class: errorClasses }, h("ds-input-validity", { key: 'cfb43cc67a907b7685d55f1ffdd86eb3f73f1bd0', id: this.errorTextId, text: this.errorText, type: "error" }))));
+    }
+    static get watchers() { return {
+        "disabled": ["handleCheckboxDisabledChange"],
+        "checked": ["handleCheckedChange"],
+        "isIndeterminate": ["handleIndeterminateChange"],
+        "checkedChildElementCount": ["handleCheckedChildElementCountChange"]
+    }; }
+    static get style() { return DsCheckboxGroupStyle0; }
+}, [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"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-checkbox-group", "ds-checkbox", "ds-icon", "ds-input-validity"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-checkbox-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsCheckboxGroup$1);
+            }
+            break;
+        case "ds-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsCheckboxGroup = DsCheckboxGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsCheckboxGroup, defineCustomElement };

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

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

package/dist/components/ds-checkbox.js

@@ -0,0 +1,6 @@
+import { D as DsCheckbox$1, d as defineCustomElement$1 } from './ds-checkbox2.js';
+
+const DsCheckbox = DsCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsCheckbox, defineCustomElement };

package/dist/components/ds-checkbox2.js

@@ -0,0 +1,185 @@
+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 inheritAriaAttributes } from './attributes.js';
+import { i as idGenerator, d as defineCustomElement$2 } from './ds-icon2.js';
+import { g as getRequiredText, a as getOptionalText } from './controlUtils.js';
+import { d as defineCustomElement$1 } from './ds-input-validity2.js';
+
+const dsCheckboxCss = ".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-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:nowrap;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;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-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.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: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::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: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-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
+const DsCheckboxStyle0 = dsCheckboxCss;
+
+const checkboxIdGenerator = idGenerator('ds-checkbox');
+const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsCheckboxChange = createEvent(this, "dsCheckboxChange", 7);
+        this.dsCheckboxError = createEvent(this, "dsCheckboxError", 7);
+        this.internals = this.attachInternals();
+    }
+    labelId;
+    errorTextId;
+    assistiveTextId;
+    inheritedAttributes = {};
+    initialChecked;
+    inputElem;
+    get el() { return this; }
+    internals;
+    dsCheckboxChange;
+    dsCheckboxError;
+    checkboxId;
+    checked = false;
+    legend;
+    assistiveText;
+    text;
+    indeterminate = false;
+    disabled = false;
+    errorText = '';
+    errorsDisabled = false;
+    required = false;
+    optional = false;
+    optionalText;
+    ariaLabel;
+    value = this.checked.toString();
+    validationMessage;
+    setIds = () => {
+        this.checkboxId = this.checkboxId || checkboxIdGenerator.next().value;
+        this.labelId = `${this.checkboxId}-label`;
+        this.errorTextId = `${this.checkboxId}-error`;
+        this.assistiveTextId = `${this.checkboxId}-assistive-text`;
+    };
+    getErrorText = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getLegendText = () => {
+        if (this.required) {
+            return getRequiredText(this.legend);
+        }
+        if (this.optional) {
+            return getOptionalText(this.legend, this.optionalText);
+        }
+        return this.legend;
+    };
+    getCheckboxText = () => {
+        if (this.legend) {
+            return this.text;
+        }
+        if (this.required) {
+            return getRequiredText(this.text);
+        }
+        if (this.optional) {
+            return getOptionalText(this.text, this.optionalText);
+        }
+        return this.text;
+    };
+    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getErrorText()) && this.errorTextId].filter(Boolean).join(' ');
+    restoreInitialState = () => {
+        this.checked = this.initialChecked;
+        this.value = this.checked.toString();
+        this.internals?.setValidity({});
+        this.internals?.setFormValue(this.value);
+    };
+    setInitialState = () => {
+        this.initialChecked = this.checked;
+        this.value = this.checked.toString();
+        this.internals?.setFormValue(this.value);
+    };
+    emitCheckboxError = () => {
+        this.dsCheckboxError.emit(this.getErrorText());
+    };
+    formResetCallback() {
+        this.restoreInitialState();
+    }
+    componentWillLoad() {
+        this.setInitialState();
+        this.setIds();
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden']);
+    }
+    componentDidLoad() {
+        this.ariaLabel = this.el.getAttribute('aria-label');
+        this.el.removeAttribute('aria-label');
+    }
+    componentDidUpdate() {
+        this.emitCheckboxError();
+    }
+    handleChange = () => {
+        this.checked = !this.checked;
+        this.value = this.checked.toString();
+        this.internals?.setFormValue(this.value);
+        this.dsCheckboxChange.emit({ id: this.checkboxId, checked: this.checked });
+    };
+    handleKeyUp = (event) => {
+        if (event.key === 'Enter') {
+            this.handleChange();
+        }
+    };
+    renderCheckbox() {
+        const classes = classNames('ds-checkbox', {
+            'ds-checkbox--disabled': this.disabled,
+            'ds-checkbox--no-margin': Boolean(!this.text),
+        });
+        const inputClasses = classNames('ds-checkbox__input', {
+            'ds-checkbox__input--invalid': Boolean(this.errorText),
+        });
+        const errorText = this.getErrorText();
+        const errorClasses = classNames('ds-checkbox-error', {
+            'ds-checkbox-error--visible': Boolean(errorText),
+        });
+        const ariaDescribedBy = this.getAriaDescribedBy();
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onChange: this.handleChange, onKeyUp: this.handleKeyUp, value: this.value, disabled: this.disabled, required: this.required, id: this.checkboxId, "aria-describedby": ariaDescribedBy, "aria-label": this.ariaLabel, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.errorTextId, text: errorText, type: "error" })))));
+    }
+    renderFieldset() {
+        const fieldsetClasses = classNames('ds-checkbox-fieldset');
+        const legendClasses = classNames('ds-checkbox-fieldset__legend');
+        const assistiveTextClasses = classNames('ds-checkbox-fieldset__assistive-text');
+        return (h("fieldset", { class: fieldsetClasses }, h("legend", { class: legendClasses }, this.getLegendText()), this.assistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.renderCheckbox()));
+    }
+    render() {
+        if (this.legend) {
+            return this.renderFieldset();
+        }
+        return this.renderCheckbox();
+    }
+    static get formAssociated() { return true; }
+    static get style() { return DsCheckboxStyle0; }
+}, [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]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-checkbox", "ds-icon", "ds-input-validity"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsCheckbox);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DsCheckbox as D, defineCustomElement as d };

package/dist/components/ds-icon2.js

@@ -380,6 +380,16 @@ const TableIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48
 
 const TableFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M450-328H95v233h355v-233Zm60 0v233h356v-233H510Zm-60-60v-234H95v234h355Zm60 0h356v-234H510v234ZM95-682h771v-184H95v184Z"/></svg>`;
 
+const DSCheckSmall = `<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" />
+</svg>
+`;
+
+const DSCheckIndeterminateSmall = `<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)" />
+</svg>
+`;
+
 const category$6 = 'Information';
 const icons$7 = [
     { name: 'calendar_month', component: CalendarMonthIcon, category: category$6 },
@@ -432,6 +442,8 @@ const icons$7 = [
     { name: 'pie_chart_fill', component: PieChartFillIcon, category: category$6 },
     { name: 'table', component: TableIcon, category: category$6 },
     { name: 'table_fill', component: TableFillIcon, category: category$6 },
+    { name: 'ds_check_small', component: DSCheckSmall, category: category$6 },
+    { name: 'ds_check_indeterminate_small', component: DSCheckIndeterminateSmall, category: category$6 },
 ];
 
 const HomeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M229-189h124v-258h254v258h124v-377L480-754 229-565.67V-189Zm-94 94v-518l345-259 346 259v518H524v-269h-88v269H135Zm345-377Z"/></svg>`;
@@ -865,10 +877,18 @@ const icons = [
     ...icons$1,
 ];
 
-function remToPx(remString) {
+const formatAs = (value, suffix) => value.endsWith(suffix) ? value : `${value}${suffix}`;
+const formatAsPx = (value) => formatAs(value, 'px');
+const remToPx = (remString) => {
     const rootFontSize = 16;
     const rem = parseFloat(remString);
-    return `${rem * rootFontSize}px`;
+    return formatAsPx(`${rem * rootFontSize}`);
+};
+function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
 }
 
 const dsIconCss = ":host{display:flex}.ds-icon--container{display:flex}";
@@ -926,7 +946,7 @@ const DsIcon = proxyCustomElement(class DsIcon extends H {
         }
     }
     render() {
-        return (h(Fragment, { key: 'cc6f636f46e631b82570aaa156bbced5e7c23fc6' }, h("span", { key: 'c3305714b164807c119ff1e9ab4d9496dd3eb105', class: 'ds-icon--container', innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '3f68a522cda5ce59a62a8afa72c0c3305b0fb6e0' }, h("span", { key: 'cb6c204588d641e847c78bab7860e859d96dd300', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get style() { return DsIconStyle0; }
 }, [1, "ds-icon", {
@@ -952,4 +972,4 @@ function defineCustomElement() {
     } });
 }
 
-export { DsIcon as D, defineCustomElement as d };
+export { DsIcon as D, defineCustomElement as d, idGenerator as i };

package/dist/components/ds-input-validity.d.ts

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

package/dist/components/ds-input-validity.js

@@ -0,0 +1,6 @@
+import { D as DsInputValidity$1, d as defineCustomElement$1 } from './ds-input-validity2.js';
+
+const DsInputValidity = DsInputValidity$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsInputValidity, defineCustomElement };

package/dist/components/ds-input-validity2.js

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, h, F as Fragment } from './index2.js';
+import { c as classNames } from './index3.js';
+import { d as defineCustomElement$1 } from './ds-icon2.js';
+
+const dsInputValidityCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-textColor-danger)}.ds-input-validity--success{color:var(--ds-textColor-success)}.ds-input-validity ds-icon{display:block;height:1.5rem}.ds-input-validity small{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)}";
+const DsInputValidityStyle0 = dsInputValidityCss;
+
+const DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    get el() { return this; }
+    text;
+    type = 'error';
+    validityRole = 'status';
+    identifier;
+    componentDidLoad() {
+        this.identifier = this.el.getAttribute('id');
+        this.el.removeAttribute('id');
+    }
+    render() {
+        const classes = classNames('ds-input-validity', {
+            'ds-input-validity--error': this.type === 'error',
+            'ds-input-validity--success': this.type === 'success',
+        });
+        const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
+        if (!this.text) {
+            return null;
+        }
+        return (h(Fragment, null, this.text && (h("div", { class: classes, role: this.validityRole }, h("ds-icon", { name: icon }), h("small", { id: this.identifier }, this.text)))));
+    }
+    static get style() { return DsInputValidityStyle0; }
+}, [0, "ds-input-validity", {
+        "text": [1],
+        "type": [1],
+        "validityRole": [1, "role"],
+        "identifier": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-input-validity", "ds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsInputValidity);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DsInputValidity as D, defineCustomElement as d };

package/dist/components/ds-link-with-arrow.js

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
-import { i as inheritAriaAttributes, c as classNames } from './attributes.js';
-import { i as idGenerator } from './utils.js';
-import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils.js';
-import { d as defineCustomElement$3 } from './ds-icon2.js';
+import { c as classNames } from './index3.js';
+import { i as inheritAriaAttributes } from './attributes.js';
+import { o as opensInNewTab, v as visuallyHiddenAssistiveText, g as getAriaLabel } from './linkUtils.js';
+import { i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.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 dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}: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{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-bgColor-primary-hover)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-bgColor-primary-active)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-textColor-link-hover)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}";
 const DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
 
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
@@ -25,8 +25,9 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
     href;
     target;
     language;
+    linkAriaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
         if (opensInNewTab(this.target)) {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
@@ -38,7 +39,7 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
             'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
         });
-        return (h("a", { key: 'aa1a1272c0323f286e590f1a366f2101410a58c3', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, h("slot", { key: 'e348b24c8c5418cf0f33e18c5337066b6eb579a2', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'e523092b3dc32f936139c53e74195b927a219c0f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '0ec9d65ee348aa75108f9d87474551b6b3c4a0bb', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '55b5ef6cc061bea9f68d784e4e9fb0ebdac0002c', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '8c92b801ac0a1d52e12fead3c89703d41f90fa6a', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: '5f43cc989011db22bd8f547957c76289e7bbbf45', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.linkAriaLabel), ...this.inheritedAttributes }, h("slot", { key: '26615467438d0ae98a8138165cf5152796f2ab00', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'f34a2d05ed9c991e98aaa89f547bde0c1b677115', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: 'be1ccadeaca632961ed3d44d1d94a26bf35d2963', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '7bccce249754d661d9faeddbad2f9c4d8c207cfb', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '4e864244ee939591f435715889e2f9a240f86d36', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get style() { return DsLinkWithArrowStyle0; }
 }, [1, "ds-link-with-arrow", {
@@ -46,7 +47,8 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
         "iconPosition": [1, "icon-position"],
         "href": [1],
         "target": [1],
-        "language": [1, "lang"]
+        "language": [1, "lang"],
+        "linkAriaLabel": [1, "aria-label"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {