@uh-design-system/component-library 0.5.2 → 0.5.3

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

@@ -5,7 +5,7 @@ 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 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-palette-black-70);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');
@@ -16,7 +16,9 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         this.__attachShadow();
         this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange", 7);
         this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange", 7);
+        this.dsCheckboxGroupInvalidStateChange = createEvent(this, "dsCheckboxGroupInvalidStateChange", 7);
     }
+    checkboxElem;
     fieldsetId = fieldsetIdGenerator.next().value;
     checkboxId = `${this.fieldsetId}-checkbox`;
     errorTextId = `${this.fieldsetId}-error`;
@@ -26,6 +28,7 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     get el() { return this; }
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
+    dsCheckboxGroupInvalidStateChange;
     legend;
     assistiveText;
     direction = 'vertical';
@@ -33,7 +36,7 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     text = '';
     checked = false;
     disabled = false;
-    childElementsCount = 0;
+    childElementsCount = 1;
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
@@ -79,55 +82,61 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     watchIndeterminateChange(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
+    errorTextObserver(errorText) {
+        this.dsCheckboxGroupInvalidStateChange.emit(!!errorText);
+    }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
-    watchCheckedChildElementCountChange(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 });
-        }
+    watchCheckedChildElementCountChange() {
+        this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
     }
-    updateCheckedChildElementCount = (event) => {
-        if (event.detail.checked) {
-            this.checkedChildElementCount = this.checkedChildElementCount === this.childElementsCount ? this.checkedChildElementCount : this.checkedChildElementCount + 1;
+    updateCheckedChildElementCount = (checked) => {
+        if (checked) {
+            this.checkedChildElementCount = Math.min(this.childElementsCount, this.checkedChildElementCount + 1);
         }
         else {
-            this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
+            this.checkedChildElementCount = Math.max(0, this.checkedChildElementCount - 1);
         }
     };
     listenCheckboxChange(event) {
-        if (event.detail.id === this.checkboxId) {
-            this.updateChildElementsChecked(event.detail.checked);
+        if (event.target === this.el) {
+            this.updateChildElementsChecked(this.checkboxElem.checked);
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: this.checkboxElem.checked });
             return;
         }
-        if (this.getChildCheckboxElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+        const target = event.target;
+        if (this.getChildCheckboxElements().includes(target)) {
+            const previousCheckedChildElementCount = this.checkedChildElementCount;
+            this.updateCheckedChildElementCount(target.checked);
+            if (this.checkedChildElementCount === this.childElementsCount && this.checkedChildElementCount > previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
+            }
+            else if (previousCheckedChildElementCount === this.childElementsCount && this.checkedChildElementCount < previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+            }
         }
     }
     listenCheckboxGroupChange(event) {
         if (this.getChildElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+            event.stopPropagation();
+            this.updateCheckedChildElementCount(event.detail.checked);
         }
     }
-    setChildElementCount = () => {
-        this.childElementsCount = this.getChildElements().length;
-    };
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
     }
     componentDidLoad() {
-        this.setChildElementCount();
+        this.childElementsCount = this.getChildElements().length;
         this.updateChildCheckboxes(element => {
             element.setAttribute('data-errors-disabled', 'true');
         });
     }
     componentDidUpdate() {
-        this.setChildElementCount();
+        const childElementCount = this.getChildElements().length;
+        if (this.childElementsCount !== childElementCount) {
+            this.childElementsCount = childElementCount;
+        }
     }
     render() {
         const classes = classNames('ds-checkbox-group', {
@@ -141,12 +150,13 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         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: '1029763130b4d2d138679c9f84ec72c0231fcc83', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: 'a9be37aab510d5e402841c8bbda64190548bc1ea', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: '0ae42c2b46e52dad0570ad120180e662db43f2fa', 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: '3ea5bb7991a99c676cb50a24d1a679b6f68c96bf', class: errorClasses }, h("ds-input-validity", { key: '8d5ca5e80b2a5f985e09bf7039538a5a13278e8e', id: this.errorTextId, text: this.errorText, type: "error" }))));
+        return (h("fieldset", { key: '25b932a80cf1b2c7467ef5ea012661992cb88853', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: 'e96b23987622f5df0144a9499122f7afba552648', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: 'ae3fb6f287dd518ad911391054f6ed4de7e8ea6f', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { ref: checkboxElem => (this.checkboxElem = checkboxElem), 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: 'd2719bdb242a526af73e628d2ce7bca234c94961', class: errorClasses }, h("ds-input-validity", { key: 'a31a78918c1894bd8f68207c3ea3f9df984bd52b', id: this.errorTextId, text: this.errorText, type: "error" }))));
     }
     static get watchers() { return {
         "disabled": ["watchCheckboxDisabledChange"],
         "checked": ["watchCheckedChange"],
         "isIndeterminate": ["watchIndeterminateChange"],
+        "errorText": ["errorTextObserver"],
         "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }; }
     static get style() { return DsCheckboxGroupStyle0; }
@@ -163,10 +173,11 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         "isIndeterminate": [32],
         "indeterminateChildCheckboxCount": [32],
         "setChecked": [64]
-    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "dsCheckboxInput", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"]], {
+    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "input", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"]], {
         "disabled": ["watchCheckboxDisabledChange"],
         "checked": ["watchCheckedChange"],
         "isIndeterminate": ["watchIndeterminateChange"],
+        "errorText": ["errorTextObserver"],
         "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }]);
 function defineCustomElement$1() {

package/dist/components/ds-checkbox2.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './index2.js';
+import { p as proxyCustomElement, H, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
 import { i as inheritAriaAttributes, b as inheritAttributes } from './attributes.js';
 import { g as getRequiredText, a as getOptionalText } from './controlUtils.js';
@@ -6,7 +6,7 @@ import { i as isValidation } from './store.js';
 import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$2 } from './ds-icon2.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:wrap;word-wrap:break-word;word-break:break-all;white-space:normal;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;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-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 dsCheckboxCss = ":root{--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-direction:row;flex-wrap: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--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__input{cursor:pointer;-webkit-appearance:none;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-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.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{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: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:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-palette-black-40)}.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');
@@ -15,19 +15,17 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.dsCheckboxInput = createEvent(this, "dsCheckboxInput", 7);
         this.internals = this.attachInternals();
     }
+    checkboxGroup = null;
     inputElem;
     labelId;
     inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
-    initialChecked;
     labelClicked = false;
     get el() { return this; }
     internals;
-    dsCheckboxInput;
     identifier = checkboxIdGenerator.next().value;
     checked = false;
     legend;
@@ -41,7 +39,8 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     optional = false;
     optionalText;
     ariaLabel;
-    value = this.checked.toString();
+    invalid = !!this.errorText;
+    initialChecked = this.checked;
     validationMessage;
     setIds = () => {
         this.labelId = `${this.identifier}-label`;
@@ -71,22 +70,28 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         return this.text;
     };
     getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
-    restoreInitialState = () => {
+    formResetCallback() {
         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);
-    };
-    formResetCallback() {
-        this.restoreInitialState();
+        this.internals?.setFormValue(this.checked.toString());
     }
+    connectedCallback() {
+        this.checkboxGroup = this.el.closest('ds-checkbox-group');
+        if (this.checkboxGroup) {
+            this.invalid = !!this.checkboxGroup.errorText;
+            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.checkboxGroup) {
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.checkboxGroup = null;
+    }
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
     componentWillLoad() {
-        this.setInitialState();
         this.setIds();
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
@@ -99,9 +104,7 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     handleInput = (e) => {
         const target = e.target;
         this.checked = target.checked;
-        this.value = target.checked.toString();
-        this.internals?.setFormValue(this.value);
-        this.dsCheckboxInput.emit({ id: this.identifier, checked: target.checked });
+        this.internals?.setFormValue(target.checked.toString());
         if (isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -129,13 +132,13 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
             'ds-checkbox--no-margin': Boolean(!this.text),
         });
         const inputClasses = classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': Boolean(this.errorText),
+            'ds-checkbox__input--invalid': Boolean(this.errorText) || this.invalid,
         });
         const errorClasses = classNames('ds-checkbox-error', {
             'ds-checkbox-error--visible': Boolean(this.validationMessage),
         });
         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.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.value, disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
+        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.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.checked.toString(), disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-checkbox-fieldset');
@@ -165,7 +168,8 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         "optional": [4],
         "optionalText": [1, "optional-text"],
         "ariaLabel": [1, "aria-label"],
-        "value": [32],
+        "invalid": [32],
+        "initialChecked": [32],
         "validationMessage": [32]
     }]);
 function defineCustomElement() {

package/dist/components/ds-icon2.js

@@ -958,7 +958,7 @@ const DsIcon = proxyCustomElement(class DsIcon extends H {
         }
     }
     render() {
-        return (h(Fragment, { key: '58309a22dafbad09a1f9e884657aad264261174e' }, h("span", { key: '3295d61af901e74ea7c39d1e7a4b7e083f44794f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '71d2466d7ab9bdac086b7e4723bdbcae85f46179' }, h("span", { key: 'b19955f6f321b89dfce0d7843dcc41d3db92b29f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get style() { return DsIconStyle0; }
 }, [1, "ds-icon", {

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

@@ -3,7 +3,7 @@ import { c as classNames } from './index3.js';
 import { i as isValidation } from './store.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 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-palette-red-70)}.ds-input-validity--success{color:var(--ds-palette-green-70)}.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 {
@@ -26,7 +26,7 @@ const DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
             'ds-input-validity--success': this.type === 'success',
         });
         const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        return (h("div", { key: '2eca152eca6e7b4d7e894ff8aaf50a6d03c3e44f', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '73e4cd1b3af6a84b9c7cbca813c166bc10e9dd26', class: classes }, h("ds-icon", { key: '4eaad4001e758837f9e8b1aae48292a1c5a1a08f', name: icon }), h("small", { key: '3ee5d39785454b9aab9ae6012f3ad940c1f18df0', id: this.identifier }, this.text)))));
+        return (h("div", { key: 'b76f90369546a44b88ff02ec08182ebf2299c0e9', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '575d68fff500bac58612514a3c4efebdb62dffdb', class: classes }, h("ds-icon", { key: '707c95678fdf517f83bc5126a1fcea0d9f8eb5cb', name: icon }), h("small", { key: '39e098386b1ed37c9d797513d626bb50e2e50034', id: this.identifier }, this.text)))));
     }
     static get style() { return DsInputValidityStyle0; }
 }, [0, "ds-input-validity", {

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

@@ -5,7 +5,7 @@ import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtil
 import { g as getAriaLabel, 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}: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 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-palette-mainBlue-70);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-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);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-palette-white);background-color:var(--ds-palette-mainBlue-70)}.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-palette-mainBlue-80)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-palette-mainBlue-90)}.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-palette-mainBlue-80)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-palette-mainBlue-90)}";
 const DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
 
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
@@ -39,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: 'bce4a90f9cc5113ab3d5b300d791d2299e22b7ad', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '96ba4a33114443aab36d1301cf65c56437b9a85b', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: '86d8029de69c1ecb3002a97f5bc0cdbf899b7f91', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '7c2dafaee60253b1f5c22819b1afec83d106234b', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: 'a9fb3e2ddee16cce7c6b8fc0fba0b11970567276', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'f93f37d0d10d7a2d51980ff8feb76915cc4823b2', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: '07c30d407ab9399a29f3949bc4f9ea1139f9fa97', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: 'bebb1091f27d49871da79235aed5772bd1059f3d', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'c7bfbfdc9953138b510b5e37830cdd1f7837bae6', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: 'f4a8369cf54fb4d9f8aeea193c7aa52c14a59e2b', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '430e7a77fe1bfa7af5f49873f1aff7371437d345', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '3e0b84c6648fa683320e602df7f83776f9698d74', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get style() { return DsLinkWithArrowStyle0; }
 }, [1, "ds-link-with-arrow", {

package/dist/components/ds-link.js

@@ -5,7 +5,7 @@ import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtil
 import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsLinkCss = ":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{display:inline-flex;align-items:center;color:var(--ds-textColor-link);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link:active{color:var(--ds-textColor-link-active)}.ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link--standalone{color:var(--ds-textColor-link);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-textColor-link-hover)}.ds-link--standalone:active{color:var(--ds-textColor-link-active)}.ds-link--standalone:focus-visible{color:var(--ds-textColor-link)}.ds-link--standalone:visited{color:var(--ds-textColor-link)}";
+const dsLinkCss = ":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{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-palette-mainBlue-80)}.ds-link:active{color:var(--ds-palette-mainBlue-90)}.ds-link:visited{color:#551a8b}.ds-link--standalone{color:var(--ds-palette-mainBlue-70);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-palette-mainBlue-80)}.ds-link--standalone:active{color:var(--ds-palette-mainBlue-90)}.ds-link--standalone:focus-visible{color:var(--ds-palette-mainBlue-70)}.ds-link--standalone:visited{color:var(--ds-palette-mainBlue-70)}";
 const DsLinkStyle0 = dsLinkCss;
 
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
@@ -48,7 +48,7 @@ const DsLink$1 = proxyCustomElement(class DsLink extends H {
             [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
             [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
         });
-        return (h("a", { key: 'f8e36a029709033379e53cc1c409bc9c0069820e', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '88f90209b6557942dd956585b5f77632aa647c8e', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '87169acfb32913d10d27b35a9c6f714385979aa7', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: 'b38677240eb8bd7c1200c8dc08876ba75e7b3e81', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'c3088e302a43b4cbc5601a9adff54a3dc27a59dc', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '25ac189fd216148a05fddfc6e384cfbde59e0e22', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: 'e8db9e6a903263d717a386e2fd61a2f279c4de1d', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '9def43becc24ab8f836ced9eb1f33de903fcfa40', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '301bbcf7464dca9e0e44cd9b74ccc77e67cbfac9', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: 'f6f3b7824f5bb028375f40e2e5743989a56f187d', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '3af94f1f8e4f1199e260929001b99ee56f780dff', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'f91801450c834793bf05a40f011b86f500422eee', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get style() { return DsLinkStyle0; }
 }, [1, "ds-link", {

package/dist/components/ds-radio-button-group.d.ts

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

package/dist/components/ds-radio-button-group.js

@@ -0,0 +1,147 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './index2.js';
+import { c as classNames } from './index3.js';
+import { i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
+import { i as inheritAriaAttributes } from './attributes.js';
+import { d as defineCustomElement$2 } from './ds-input-validity2.js';
+
+const dsRadioButtonGroupCss = ".ds-radio-button-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__radio-buttons-slot--horizontal{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}.ds-radio-button-group__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}";
+const DsRadioButtonGroupStyle0 = dsRadioButtonGroupCss;
+
+const radioButtonGroupIdGenerator = idGenerator('ds-radio-button-group');
+const DsRadioButtonGroup$1 = proxyCustomElement(class DsRadioButtonGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsRadioGroupValueChange = createEvent(this, "dsRadioGroupValueChange", 7);
+        this.dsRadioGroupInvalidStateChange = createEvent(this, "dsRadioGroupInvalidStateChange", 7);
+    }
+    fieldsetId = radioButtonGroupIdGenerator.next().value;
+    errorTextId = `${this.fieldsetId}-error`;
+    assistiveTextId = `${this.fieldsetId}-assistive-text`;
+    inheritedAttributes = {};
+    get el() { return this; }
+    legend;
+    assistiveText;
+    initialValue;
+    direction = 'vertical';
+    errorText = '';
+    value;
+    dsRadioGroupValueChange;
+    dsRadioGroupInvalidStateChange;
+    getRadios = () => {
+        return Array.from(this.el.querySelectorAll('ds-radio-button')).filter(e => !e.disabled);
+    };
+    updateFocusableRadioButton = () => {
+        const radios = this.getRadios();
+        if (!radios.length) {
+            return;
+        }
+        let focusableBtn = null;
+        for (const radio of radios) {
+            const isFocusable = radio.value === this.value;
+            radio.setFocusable(isFocusable);
+            if (isFocusable) {
+                focusableBtn = radio;
+            }
+        }
+        if (!focusableBtn) {
+            radios[0].setFocusable(true);
+        }
+    };
+    componentWillLoad() {
+        this.value = this.initialValue;
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
+        this.updateFocusableRadioButton();
+    }
+    async getValue() {
+        return this.value;
+    }
+    errorTextObserver(errorText) {
+        this.dsRadioGroupInvalidStateChange.emit(!!errorText);
+    }
+    onInputChange(e) {
+        e.stopPropagation();
+        const targetElem = e.target;
+        this.value = targetElem.value;
+        this.dsRadioGroupValueChange.emit(this.value);
+        this.updateFocusableRadioButton();
+    }
+    onKeyDown(e) {
+        if (!['ArrowUp', 'ArrowLeft', 'ArrowDown', 'ArrowRight'].includes(e.key)) {
+            return;
+        }
+        if (e.target && !this.el.contains(e.target)) {
+            return;
+        }
+        const radios = this.getRadios();
+        if (e.target && !radios.includes(e.target)) {
+            return;
+        }
+        e.preventDefault();
+        const currentIndex = radios.findIndex(r => r === e.target);
+        let nextIndex;
+        if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
+            nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
+        }
+        if (['ArrowDown', 'ArrowRight'].includes(e.key)) {
+            nextIndex = (currentIndex + 1) % radios.length;
+        }
+        const nextElem = radios[nextIndex];
+        nextElem.setFocus();
+        nextElem.setChecked();
+    }
+    render() {
+        const classes = classNames('ds-radio-button-group');
+        const legendClasses = classNames('ds-radio-button-group__legend');
+        const assistiveTextClasses = classNames('ds-radio-button-group__assistive-text');
+        const radioButtonsSlotClasses = classNames('ds-radio-button-group__radio-buttons-slot', {
+            'ds-radio-button-group__radio-buttons-slot--horizontal': this.direction === 'horizontal',
+        });
+        const errorClasses = classNames('ds-radio-button-group__error');
+        const ariaDescribedBy = [!!this.errorText && this.errorTextId, !!this.assistiveText && this.assistiveTextId].filter(Boolean).join(' ');
+        return (h(Host, { key: 'c29b30786a96a50976486eb107c707b973c06633', "data-invalid": !!this.errorText || undefined }, h("fieldset", { key: '90692a539c75bb81ae692b7209bd757c5d8b6b59', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, h("legend", { key: '1d4f2819f0fa4ca020297cddccc87f684fc03461', class: legendClasses }, h("slot", { key: 'd9edb199de4975dd876bf68fa834f7d1b841bad2', name: "legend" }, this.legend)), h("slot", { key: 'e48f2924efd4e0f47fedb8c30df34735aa6bc2df', name: "assistiveText" }, this.assistiveText && (h("small", { key: 'ebbb68a63acce035872ce7ef22d2821941ea3ccc', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText))), h("div", { key: 'a146cbf465a9fe97e5380db66d0baecaa46797e1', class: radioButtonsSlotClasses }, h("slot", { key: 'd7623edbff9870335ae62451bad2b245e394d4d0', onSlotchange: this.updateFocusableRadioButton })), h("div", { key: '85381c3f1b7f28d5508cf866884f0f5df2e2413a', class: errorClasses }, h("ds-input-validity", { key: 'ebf9f79454c11f490261959e1bdb5433744f39a3', id: this.errorTextId, text: this.errorText, type: "error" })))));
+    }
+    static get watchers() { return {
+        "errorText": ["errorTextObserver"]
+    }; }
+    static get style() { return DsRadioButtonGroupStyle0; }
+}, [1, "ds-radio-button-group", {
+        "legend": [1],
+        "assistiveText": [1, "assistive-text"],
+        "initialValue": [1, "value"],
+        "direction": [1],
+        "errorText": [1, "error-text"],
+        "value": [32],
+        "getValue": [64]
+    }, [[0, "dsRadioButtonChecked", "onInputChange"], [4, "keydown", "onKeyDown"]], {
+        "errorText": ["errorTextObserver"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-radio-button-group", "ds-icon", "ds-input-validity"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-radio-button-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsRadioButtonGroup$1);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsRadioButtonGroup = DsRadioButtonGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsRadioButtonGroup, defineCustomElement };

package/dist/components/ds-radio-button.d.ts

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