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

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

@@ -2,21 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf84b124.js');
+const index = require('./index-947af833.js');
 const index$1 = require('./index-5b0b9d4c.js');
-const attributes = require('./attributes-5f5b58be.js');
-const controlUtils = require('./controlUtils-041de0fd.js');
-const store = require('./store-9bd20f3c.js');
-const utils = require('./utils-2ba5e075.js');
+const utils = require('./utils-3412cbed.js');
+const controlUtils = require('./controlUtils-8bf55ef0.js');
+const store = require('./store-e8e87298.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;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 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 = utils.idGenerator('ds-checkbox');
 const DsCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsCheckboxInput = index.createEvent(this, "dsCheckboxInput", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -25,16 +23,15 @@ const DsCheckbox = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
     }
+    checkboxGroup = null;
     inputElem;
     labelId;
     inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
-    initialChecked;
     labelClicked = false;
     get el() { return index.getElement(this); }
     internals;
-    dsCheckboxInput;
     identifier = checkboxIdGenerator.next().value;
     checked = false;
     legend;
@@ -48,7 +45,8 @@ const DsCheckbox = class {
     optional = false;
     optionalText;
     ariaLabel;
-    value = this.checked.toString();
+    invalid = !!this.errorText;
+    initialChecked = this.checked;
     validationMessage;
     setIds = () => {
         this.labelId = `${this.identifier}-label`;
@@ -78,24 +76,33 @@ const DsCheckbox = class {
         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 = attributes.inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']);
+        this.inheritedAttributes = {
+            ...utils.inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
+            ...utils.inheritAttributes(this, this.el),
+        };
         if (store.isValidation('server') || this.errorText) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -103,9 +110,7 @@ const DsCheckbox = class {
     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 (store.isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -133,13 +138,13 @@ const DsCheckbox = class {
             'ds-checkbox--no-margin': Boolean(!this.text),
         });
         const inputClasses = index$1.classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': Boolean(this.errorText),
+            'ds-checkbox__input--invalid': Boolean(this.errorText) || this.invalid,
         });
         const errorClasses = index$1.classNames('ds-checkbox-error', {
             'ds-checkbox-error--visible': Boolean(this.validationMessage),
         });
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, index.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": utils.getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (index.h("div", { class: errorClasses }, index.h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
+        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, index.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": utils.getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (index.h("div", { class: errorClasses }, index.h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
     }
     renderFieldset() {
         const fieldsetClasses = index$1.classNames('ds-checkbox-fieldset');

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf84b124.js');
+const index = require('./index-947af833.js');
 const index$1 = require('./index-5b0b9d4c.js');
-const store = require('./store-9bd20f3c.js');
+const store = require('./store-e8e87298.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 = class {
@@ -28,7 +28,7 @@ const DsInputValidity = class {
             'ds-input-validity--success': this.type === 'success',
         });
         const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        return (index.h("div", { key: '2eca152eca6e7b4d7e894ff8aaf50a6d03c3e44f', role: store.isValidation('client') ? this.validityRole : undefined }, this.text && (index.h("div", { key: '73e4cd1b3af6a84b9c7cbca813c166bc10e9dd26', class: classes }, index.h("ds-icon", { key: '4eaad4001e758837f9e8b1aae48292a1c5a1a08f', name: icon }), index.h("small", { key: '3ee5d39785454b9aab9ae6012f3ad940c1f18df0', id: this.identifier }, this.text)))));
+        return (index.h("div", { key: 'b76f90369546a44b88ff02ec08182ebf2299c0e9', role: store.isValidation('client') ? this.validityRole : undefined }, this.text && (index.h("div", { key: '575d68fff500bac58612514a3c4efebdb62dffdb', class: classes }, index.h("ds-icon", { key: '707c95678fdf517f83bc5126a1fcea0d9f8eb5cb', name: icon }), index.h("small", { key: '39e098386b1ed37c9d797513d626bb50e2e50034', id: this.identifier }, this.text)))));
     }
 };
 DsInputValidity.style = DsInputValidityStyle0;

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf84b124.js');
+const index = require('./index-947af833.js');
 const index$1 = require('./index-5b0b9d4c.js');
-const attributes = require('./attributes-5f5b58be.js');
+const utils = require('./utils-3412cbed.js');
 const linkUtils = require('./linkUtils-695da37c.js');
-const utils = require('./utils-2ba5e075.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 = utils.idGenerator('visually-hidden-assistive-text');
@@ -28,7 +27,7 @@ const DsLinkWithArrow = class {
     language;
     ariaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-label']);
+        this.inheritedAttributes = utils.inheritAriaAttributes(this.el, ['aria-label']);
         if (linkUtils.opensInNewTab(this.target)) {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
@@ -40,7 +39,7 @@ const DsLinkWithArrow = class {
             'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
         });
-        return (index.h("a", { key: 'bce4a90f9cc5113ab3d5b300d791d2299e22b7ad', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": utils.getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, index.h("slot", { key: '96ba4a33114443aab36d1301cf65c56437b9a85b', name: "iconStart" }, this.iconPosition === 'start' && index.h("ds-icon", { key: '86d8029de69c1ecb3002a97f5bc0cdbf899b7f91', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, index.h("slot", { key: '7c2dafaee60253b1f5c22819b1afec83d106234b', name: "iconStart" }, this.iconPosition === 'end' && index.h("ds-icon", { key: 'a9fb3e2ddee16cce7c6b8fc0fba0b11970567276', name: this.icon, class: iconClasses, size: "1.4em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: 'f93f37d0d10d7a2d51980ff8feb76915cc4823b2', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (index.h("a", { key: '07c30d407ab9399a29f3949bc4f9ea1139f9fa97', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": utils.getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, index.h("slot", { key: 'bebb1091f27d49871da79235aed5772bd1059f3d', name: "iconStart" }, this.iconPosition === 'start' && index.h("ds-icon", { key: 'c7bfbfdc9953138b510b5e37830cdd1f7837bae6', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, index.h("slot", { key: 'f4a8369cf54fb4d9f8aeea193c7aa52c14a59e2b', name: "iconStart" }, this.iconPosition === 'end' && index.h("ds-icon", { key: '430e7a77fe1bfa7af5f49873f1aff7371437d345', name: this.icon, class: iconClasses, size: "1.4em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '3e0b84c6648fa683320e602df7f83776f9698d74', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
 };
 DsLinkWithArrow.style = DsLinkWithArrowStyle0;

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf84b124.js');
+const index = require('./index-947af833.js');
 const index$1 = require('./index-5b0b9d4c.js');
-const attributes = require('./attributes-5f5b58be.js');
+const utils = require('./utils-3412cbed.js');
 const linkUtils = require('./linkUtils-695da37c.js');
-const utils = require('./utils-2ba5e075.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 = utils.idGenerator('visually-hidden-assistive-text');
@@ -34,7 +33,7 @@ const DsLink = class {
     language;
     ariaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-label']);
+        this.inheritedAttributes = utils.inheritAriaAttributes(this.el, ['aria-label']);
         if (linkUtils.opensInNewTab(this.target)) {
             this.icon = 'open_in_new';
             this.iconPosition = 'end';
@@ -49,7 +48,7 @@ const DsLink = class {
             [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
             [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
         });
-        return (index.h("a", { key: 'f8e36a029709033379e53cc1c409bc9c0069820e', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": utils.getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, index.h("slot", { key: '88f90209b6557942dd956585b5f77632aa647c8e', name: "iconStart" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '87169acfb32913d10d27b35a9c6f714385979aa7', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, index.h("slot", { key: 'b38677240eb8bd7c1200c8dc08876ba75e7b3e81', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: 'c3088e302a43b4cbc5601a9adff54a3dc27a59dc', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '25ac189fd216148a05fddfc6e384cfbde59e0e22', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (index.h("a", { key: 'e8db9e6a903263d717a386e2fd61a2f279c4de1d', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": utils.getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, index.h("slot", { key: '9def43becc24ab8f836ced9eb1f33de903fcfa40', name: "iconStart" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '301bbcf7464dca9e0e44cd9b74ccc77e67cbfac9', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, index.h("slot", { key: 'f6f3b7824f5bb028375f40e2e5743989a56f187d', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '3af94f1f8e4f1199e260929001b99ee56f780dff', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: 'f91801450c834793bf05a40f011b86f500422eee', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
 };
 DsLink.style = DsLinkStyle0;

package/dist/cjs/ds-radio-button-group.cjs.entry.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-947af833.js');
+const index$1 = require('./index-5b0b9d4c.js');
+const utils = require('./utils-3412cbed.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 = utils.idGenerator('ds-radio-button-group');
+const DsRadioButtonGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsRadioGroupValueChange = index.createEvent(this, "dsRadioGroupValueChange", 7);
+        this.dsRadioGroupInvalidStateChange = index.createEvent(this, "dsRadioGroupInvalidStateChange", 7);
+    }
+    fieldsetId = radioButtonGroupIdGenerator.next().value;
+    errorTextId = `${this.fieldsetId}-error`;
+    assistiveTextId = `${this.fieldsetId}-assistive-text`;
+    inheritedAttributes = {};
+    get el() { return index.getElement(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 = utils.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 = index$1.classNames('ds-radio-button-group');
+        const legendClasses = index$1.classNames('ds-radio-button-group__legend');
+        const assistiveTextClasses = index$1.classNames('ds-radio-button-group__assistive-text');
+        const radioButtonsSlotClasses = index$1.classNames('ds-radio-button-group__radio-buttons-slot', {
+            'ds-radio-button-group__radio-buttons-slot--horizontal': this.direction === 'horizontal',
+        });
+        const errorClasses = index$1.classNames('ds-radio-button-group__error');
+        const ariaDescribedBy = [!!this.errorText && this.errorTextId, !!this.assistiveText && this.assistiveTextId].filter(Boolean).join(' ');
+        return (index.h(index.Host, { key: 'c29b30786a96a50976486eb107c707b973c06633', "data-invalid": !!this.errorText || undefined }, index.h("fieldset", { key: '90692a539c75bb81ae692b7209bd757c5d8b6b59', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, index.h("legend", { key: '1d4f2819f0fa4ca020297cddccc87f684fc03461', class: legendClasses }, index.h("slot", { key: 'd9edb199de4975dd876bf68fa834f7d1b841bad2', name: "legend" }, this.legend)), index.h("slot", { key: 'e48f2924efd4e0f47fedb8c30df34735aa6bc2df', name: "assistiveText" }, this.assistiveText && (index.h("small", { key: 'ebbb68a63acce035872ce7ef22d2821941ea3ccc', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText))), index.h("div", { key: 'a146cbf465a9fe97e5380db66d0baecaa46797e1', class: radioButtonsSlotClasses }, index.h("slot", { key: 'd7623edbff9870335ae62451bad2b245e394d4d0', onSlotchange: this.updateFocusableRadioButton })), index.h("div", { key: '85381c3f1b7f28d5508cf866884f0f5df2e2413a', class: errorClasses }, index.h("ds-input-validity", { key: 'ebf9f79454c11f490261959e1bdb5433744f39a3', id: this.errorTextId, text: this.errorText, type: "error" })))));
+    }
+    static get watchers() { return {
+        "errorText": ["errorTextObserver"]
+    }; }
+};
+DsRadioButtonGroup.style = DsRadioButtonGroupStyle0;
+
+exports.ds_radio_button_group = DsRadioButtonGroup;

package/dist/cjs/ds-radio-button.cjs.entry.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-947af833.js');
+const utils = require('./utils-3412cbed.js');
+const controlUtils = require('./controlUtils-8bf55ef0.js');
+const index$1 = require('./index-5b0b9d4c.js');
+const store = require('./store-e8e87298.js');
+
+const dsRadioButtonCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-palette-black-95)}.ds-radio-button--disabled{color:var(--ds-palette-black-40)}.ds-radio-button__validity{margin-left:10px}.ds-radio-button__fieldset{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__fieldset__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__fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-radio-button:focus-within .ds-radio-button__icon{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-radio-button__icon{border-radius:50%;height:44px;width:44px}.ds-radio-button__text{margin-top:11px}.ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-white)}.ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-70);fill:var(--ds-palette-white)}.ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-10)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-palette-white)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-80)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-20)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-palette-white)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-90)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-overlay-black-15)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}";
+const DsRadioButtonStyle0 = dsRadioButtonCss;
+
+const radioButtonIdGenerator = utils.idGenerator('ds-radio-button');
+const DsRadioButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsRadioButtonChecked = index.createEvent(this, "dsRadioButtonChecked", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    radioGroup = null;
+    inputElem;
+    dsRadioButtonChecked;
+    get el() { return index.getElement(this); }
+    internals;
+    identifier = radioButtonIdGenerator.next().value;
+    errorsDisabled = false;
+    value = this.identifier;
+    legend;
+    assistiveText;
+    text;
+    required = false;
+    disabled = false;
+    optional = false;
+    checked = false;
+    optionalText;
+    errorText = '';
+    focusable = true;
+    invalid = !!this.errorText;
+    initialChecked = this.checked;
+    validationMessage;
+    errorTextId = `${this.identifier}-error`;
+    assistiveTextId = `${this.identifier}-assistive-text`;
+    async setFocus() {
+        this.inputElem.focus();
+    }
+    async setFocusable(flag) {
+        this.focusable = flag;
+    }
+    async setChecked() {
+        this.checked = true;
+        this.internals?.setFormValue('true');
+        this.dsRadioButtonChecked.emit();
+        if (store.isValidation('client') && this.validationMessage) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    }
+    inheritedAttributes = {};
+    getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...utils.inheritAttributes(this, this.el),
+        };
+    }
+    formResetCallback() {
+        this.checked = this.initialChecked;
+        this.internals.setValidity({});
+        this.internals.setFormValue(this.checked.toString());
+    }
+    connectedCallback() {
+        this.radioGroup = this.el.closest('ds-radio-button-group');
+        if (this.radioGroup) {
+            this.updateCheckedState();
+            this.invalid = !!this.radioGroup.errorText;
+            this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
+            this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.radioGroup) {
+            this.radioGroup.removeEventListener('dsRadioGroupValueChange', this.updateCheckedState);
+            this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.radioGroup = null;
+    }
+    updateCheckedState = async () => {
+        this.checked = this.value === (await this.radioGroup.getValue());
+    };
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
+    handleInput = () => {
+        this.setChecked();
+    };
+    handleBlur = () => {
+        if (store.isValidation('client')) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    };
+    getLegendText = () => {
+        if (this.required) {
+            return controlUtils.getRequiredText(this.legend);
+        }
+        if (this.optional) {
+            return controlUtils.getOptionalText(this.legend, this.optionalText);
+        }
+        return this.legend;
+    };
+    renderRadioIcon() {
+        const iconClass = 'ds-radio-button__icon';
+        const outerCircleClasses = index$1.classNames(`${iconClass}__outer-circle`, {
+            [`${iconClass}__outer-circle--checked`]: this.checked,
+        });
+        const innerCircleClasses = index$1.classNames(`${iconClass}__inner-circle`);
+        return (index.h("slot", { name: "icon" }, index.h("div", { class: iconClass, "aria-hidden": "true" }, index.h("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { x: "10", y: "10", width: "24", height: "24", rx: "12", fill: "white" }), index.h("circle", { class: outerCircleClasses, cx: "22", cy: "22", r: "10", fill: "white", stroke: "#005A94", "stroke-width": "2" }), this.checked && index.h("circle", { class: innerCircleClasses, cx: "22", cy: "22", r: "6", fill: "#005A94" })))));
+    }
+    renderRadioButton() {
+        const classes = index$1.classNames('ds-radio-button', {
+            'ds-radio-button--disabled': this.disabled,
+            'ds-radio-button--invalid': !!this.errorText || this.invalid,
+        });
+        const inputClasses = index$1.classNames('ds-radio-button__input');
+        const textClasses = index$1.classNames('ds-radio-button__text');
+        const tabindex = this.focusable ? 0 : -1;
+        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { class: classes }, index.h("ds-visually-hidden", null, index.h("input", { ref: ref => (this.inputElem = ref), type: "radio", class: inputClasses, value: this.value, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, checked: this.checked, tabindex: tabindex, ...this.inheritedAttributes })), this.renderRadioIcon(), index.h("slot", null, index.h("span", { class: textClasses }, this.text)))), index.h("slot", { name: "validity" }, index.h("div", { class: "ds-radio-button__validity" }, index.h("ds-input-validity", { text: this.errorText, type: "error", role: "alert", id: this.errorTextId })))));
+    }
+    renderFieldset() {
+        const fieldsetClasses = index$1.classNames('ds-radio-button__fieldset');
+        const legendClasses = index$1.classNames('ds-radio-button__fieldset__legend');
+        const assistiveTextClasses = index$1.classNames('ds-radio-button__fieldset__assistive-text');
+        const ariaDescribedBy = [!!this.errorText && this.errorTextId, !!this.assistiveText && this.assistiveTextId].filter(Boolean).join(' ');
+        return (index.h("fieldset", { class: fieldsetClasses, "aria-describedby": ariaDescribedBy }, index.h("legend", { class: legendClasses }, index.h("slot", { name: "legend" }, this.getLegendText())), index.h("slot", { name: "assistiveText" }, this.assistiveText && (index.h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText))), this.renderRadioButton()));
+    }
+    render() {
+        if (this.legend) {
+            return this.renderFieldset();
+        }
+        return this.renderRadioButton();
+    }
+    static get formAssociated() { return true; }
+};
+DsRadioButton.style = DsRadioButtonStyle0;
+
+exports.ds_radio_button = DsRadioButton;