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

package/dist/cjs/component-library.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ds-accordion_3.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-checkbox-group.cjs",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[1028],"checkedChildElementCount":[1026,"checked-child-element-count"],"disabled":[4],"parentCheckedCount":[2,"parent-checked-count"],"childElementsCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","handleIndeterminateChildChange"],[0,"dsCheckboxChange","handleCheckboxChange"],[0,"dsCheckboxGroupChange","handleCheckboxGroupChange"]],{"disabled":["handleCheckboxDisabledChange"],"checked":["handleCheckedChange"],"isIndeterminate":["handleIndeterminateChange"],"checkedChildElementCount":["handleCheckedChildElementCountChange"]}]]],["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-link.cjs",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"linkAriaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"linkAriaLabel":[1,"aria-label"]}]]],["ds-input-validity.cjs",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-checkbox.cjs",[[65,"ds-checkbox",{"checkboxId":[1025,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[32],"value":[32],"validationMessage":[32]}]]]], options);
+  return index.bootstrapLazy([["ds-accordion_3.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-input-validity.cjs",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-text-input.cjs",[[70,"ds-text-input",{"label":[1],"placeholder":[1],"identifier":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"validationMessage":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-checkbox.cjs",[[65,"ds-checkbox",{"identifier":[1,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[1,"aria-label"],"value":[32],"validationMessage":[32]}]]],["ds-checkbox-group.cjs",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[4],"disabled":[4],"childElementsCount":[32],"checkedChildElementCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"disabled":["watchCheckboxDisabledChange"],"checked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-link.cjs",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.js');
 const index$1 = require('./index-5b0b9d4c.js');
 const attributes = require('./attributes-5f5b58be.js');
-const utils = require('./utils-c9113835.js');
+const utils = require('./utils-2ba5e075.js');
 
 const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-textColor-default);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-button: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-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__open-button:focus-visible{z-index:1}.ds-accordion__open-button.ds-accordion--default{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__open-button[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__panel--border-aligned{position:relative;width:calc(100% - 32px)}.ds-accordion__panel--border-aligned::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--border-aligned::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--expanded{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);padding-inline:var(--ds-spacing-small)}::slotted([slot=header]){color:var(--ds-textColor-default)}.ds-accordion__content{color:var(--ds-textColor-default, #1A1A1A);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18)}}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
 const DsAccordionStyle0 = dsAccordionCss;
@@ -56,18 +56,18 @@ const DsAccordion = class {
     render() {
         const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
         const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
-        return (index.h("div", { key: '4ab62a504c68a926d59d2b4753aaf3a5b0ebd39d', class: index$1.classNames('ds-accordion', `ds-accordion--${this.variant}`, {
+        return (index.h("div", { key: 'aeaa883c8500bda65c480ccea434cbeadc53ce69', class: index$1.classNames('ds-accordion', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned
-            }), role: "presentation" }, index.h("div", { key: 'f98a24462b341c86d4a9ba71eff5d7b5ffbb2eb0', class: "ds-accordion__item" }, index.h("div", { key: '0da3c96376007d4b597e55ac54cb90de9a4788c7', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, index.h("button", { key: '98885f42ecad0aaf00ea736d147fd7838685f1d0', class: index$1.classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+            }), role: "presentation" }, index.h("div", { key: 'a7947fd7784084bcec3a02f2219fa2494366d590', class: "ds-accordion__item" }, index.h("div", { key: '20532a2d3f109e38341d496ffee0d2d02cfb26f4', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, index.h("button", { key: '40513d75b15c4701498b83c9a6afbcd7a322c73c', class: index$1.classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned,
                 'ds-accordion--hide-top-border': this.hideTopBorder
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, index.h("span", { key: '8f5ee7d3c251b0b34f9b57f74c2fb87ceb7266d3', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, index.h("span", { key: '883d1cbf50b3cfb0beacd62570a1077aa8bd7a04', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
             index.h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
-            : index.h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), index.h("slot", { key: 'a9b391fd0bba7055c68e3995bafbf07d4b069038', name: "header" }))), index.h("div", { key: '551a044a61152ab1799d519fcf9331eb29b428e2', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: index$1.classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
+            : index.h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), index.h("slot", { key: 'a8ddede4cec5ab873fb69ab9963e7f143613fe0f', name: "header" }))), index.h("div", { key: '76cf35006795136597efd9c424237ac1c48bbc74', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: index$1.classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
                 'ds-accordion__panel--border-aligned': this.borderAligned,
                 'ds-accordion__panel--expanded': this.isExpanded
-            }), hidden: !this.isExpanded }, index.h("div", { key: '455ab200c7febf67028a6ec2ef27eeeaa8bff6ae', class: "ds-accordion__content" }, index.h("slot", { key: '31af185bd1680cf70ba81ed7826f977d9620372a', name: "content" })), this.useCloseButton &&
-            index.h("ds-button", { key: 'fdeeae0f9e3c866a1f851a18fe2524afa92124d5', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: index$1.classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
+            }), hidden: !this.isExpanded }, index.h("div", { key: '6236db88bc5735ec4e5618a63e303d997335e1be', class: "ds-accordion__content" }, index.h("slot", { key: '4d206253394878b4fba531cea6870aaaa3e63821', name: "content" })), this.useCloseButton &&
+            index.h("ds-button", { key: 'e5c0f76a802e6046f2872509a4944b72aa376bf1', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: index$1.classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
                     'ds-accordion--border-aligned': this.borderAligned
                 }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
     }
@@ -147,7 +147,7 @@ const DsButton = class {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (index.h("button", { key: '493f90c0fb16bd412af413f08ee5a1d2cdb178eb', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, index.h("slot", { key: '949f90e3355f81064e60d792ea7ecb2340001dc8', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: 'ac90509ba952a69c58749f4e41f6df5390a0709a', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '8b3ac1d3fbcf5e22cde0dc6edd189dc697446d06', class: "button-value" }, this.value), index.h("slot", { key: '7b3ca23198eecb75454b2d46b6db504d456223a6', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '3ddeb9b6c4678fb239ddfc34fda24f3c35b9905e', name: this.icon, size: iconSize }))));
+        return (index.h("button", { key: '50633fbf3df7aeb84c2631dd7b8eb7a1f83cbc29', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, index.h("slot", { key: 'aea86ce3195d3fa5344dfbf2048bc4db7882286b', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '38b833cbc1585a7cf0918dec9b2b2a0f62cc6fe2', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '430bd3e7e54558706bcd8b2cc9fda5d0cc04667c', class: "button-value" }, this.value), index.h("slot", { key: '9c3d1b19e8c96afb9a6bc380fcd0dd04d9ed411e', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: 'dcb2076975dd8648db795c3629cc12c79d4e7d70', name: this.icon, size: iconSize }))));
     }
 };
 DsButton.style = DsButtonStyle0;
@@ -1082,7 +1082,7 @@ const DsIcon = class {
         }
     }
     render() {
-        return (index.h(index.Fragment, { key: '3f68a522cda5ce59a62a8afa72c0c3305b0fb6e0' }, index.h("span", { key: 'cb6c204588d641e847c78bab7860e859d96dd300', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (index.h(index.Fragment, { key: '58309a22dafbad09a1f9e884657aad264261174e' }, index.h("span", { key: '3295d61af901e74ea7c39d1e7a4b7e083f44794f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
 };
 DsIcon.style = DsIconStyle0;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.js');
 const index$1 = require('./index-5b0b9d4c.js');
 const attributes = require('./attributes-5f5b58be.js');
-const utils = require('./utils-c9113835.js');
+const utils = require('./utils-2ba5e075.js');
 
 const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";
 const DsCheckboxGroupStyle0 = dsCheckboxGroupCss;
@@ -32,10 +32,9 @@ const DsCheckboxGroup = class {
     errorText = '';
     text = '';
     checked = false;
-    checkedChildElementCount = 0;
     disabled = false;
-    parentCheckedCount = 0;
     childElementsCount = 0;
+    checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
     elementIs = (localName) => (element) => element.localName === localName;
@@ -69,21 +68,21 @@ const DsCheckboxGroup = class {
     async setChecked(newValue) {
         this.updateChildElementsChecked(newValue);
     }
-    handleCheckboxDisabledChange(newValue) {
+    watchCheckboxDisabledChange(newValue) {
         this.updateChildElements((element) => {
             element.disabled = newValue;
         });
     }
-    handleCheckedChange(newValue) {
+    watchCheckedChange(newValue) {
         this.updateChildElementsChecked(newValue);
     }
-    handleIndeterminateChange(newValue) {
+    watchIndeterminateChange(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
-    handleIndeterminateChildChange(event) {
+    listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
-    handleCheckedChildElementCountChange(newValue, oldValue) {
+    watchCheckedChildElementCountChange(newValue, oldValue) {
         this.isIndeterminate =
             this.checkedChildElementCount !== this.childElementsCount && this.checkedChildElementCount < this.childElementsCount && this.checkedChildElementCount > 0;
         if (newValue === this.childElementsCount && newValue > oldValue) {
@@ -101,7 +100,7 @@ const DsCheckboxGroup = class {
             this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
         }
     };
-    handleCheckboxChange(event) {
+    listenCheckboxChange(event) {
         if (event.detail.id === this.checkboxId) {
             this.updateChildElementsChecked(event.detail.checked);
             return;
@@ -110,7 +109,7 @@ const DsCheckboxGroup = class {
             this.updateCheckedChildElementCount(event);
         }
     }
-    handleCheckboxGroupChange(event) {
+    listenCheckboxGroupChange(event) {
         if (this.getChildElements().includes(event.target)) {
             this.updateCheckedChildElementCount(event);
         }
@@ -142,13 +141,13 @@ const DsCheckboxGroup = class {
         const nestedClasses = index$1.classNames('ds-checkbox-group', 'ds-checkbox-group--inset');
         const checkboxesClasses = index$1.classNames('ds-checkbox-group__checkboxes');
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (index.h("fieldset", { key: '2080f4f193fe5bb3a6702287cebcf5d7dcc4a9b7', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && index.h("legend", { key: '15754cea90c38ad46ff41196b0de108f10f007a9', class: legendClasses }, this.legend), this.assistiveText && (index.h("small", { key: '7dde97170e62d0668a52b3a21256be65e04ae811', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (index.h(index.Fragment, null, index.h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), index.h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, index.h("slot", null)))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), index.h("div", { key: 'b2e23012afd2f5439c89d5683f8b3776cf438ce5', class: errorClasses }, index.h("ds-input-validity", { key: 'cfb43cc67a907b7685d55f1ffdd86eb3f73f1bd0', id: this.errorTextId, text: this.errorText, type: "error" }))));
+        return (index.h("fieldset", { key: '1029763130b4d2d138679c9f84ec72c0231fcc83', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && index.h("legend", { key: 'a9be37aab510d5e402841c8bbda64190548bc1ea', class: legendClasses }, this.legend), this.assistiveText && (index.h("small", { key: '0ae42c2b46e52dad0570ad120180e662db43f2fa', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (index.h(index.Fragment, null, index.h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), index.h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, index.h("slot", null)))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), index.h("div", { key: '3ea5bb7991a99c676cb50a24d1a679b6f68c96bf', class: errorClasses }, index.h("ds-input-validity", { key: '8d5ca5e80b2a5f985e09bf7039538a5a13278e8e', id: this.errorTextId, text: this.errorText, type: "error" }))));
     }
     static get watchers() { return {
-        "disabled": ["handleCheckboxDisabledChange"],
-        "checked": ["handleCheckedChange"],
-        "isIndeterminate": ["handleIndeterminateChange"],
-        "checkedChildElementCount": ["handleCheckedChildElementCountChange"]
+        "disabled": ["watchCheckboxDisabledChange"],
+        "checked": ["watchCheckedChange"],
+        "isIndeterminate": ["watchIndeterminateChange"],
+        "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }; }
 };
 DsCheckboxGroup.style = DsCheckboxGroupStyle0;

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

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.js');
 const index$1 = require('./index-5b0b9d4c.js');
 const attributes = require('./attributes-5f5b58be.js');
-const utils = require('./utils-c9113835.js');
 const controlUtils = require('./controlUtils-041de0fd.js');
+const store = require('./store-9bd20f3c.js');
+const utils = require('./utils-2ba5e075.js');
 
-const dsCheckboxCss = ".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:nowrap;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
+const 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 DsCheckboxStyle0 = dsCheckboxCss;
 
 const checkboxIdGenerator = utils.idGenerator('ds-checkbox');
 const DsCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsCheckboxChange = index.createEvent(this, "dsCheckboxChange", 7);
-        this.dsCheckboxError = index.createEvent(this, "dsCheckboxError", 7);
+        this.dsCheckboxInput = index.createEvent(this, "dsCheckboxInput", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -25,17 +25,17 @@ const DsCheckbox = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
     }
+    inputElem;
     labelId;
-    errorTextId;
+    inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
     initialChecked;
-    inputElem;
+    labelClicked = false;
     get el() { return index.getElement(this); }
     internals;
-    dsCheckboxChange;
-    dsCheckboxError;
-    checkboxId;
+    dsCheckboxInput;
+    identifier = checkboxIdGenerator.next().value;
     checked = false;
     legend;
     assistiveText;
@@ -51,12 +51,11 @@ const DsCheckbox = class {
     value = this.checked.toString();
     validationMessage;
     setIds = () => {
-        this.checkboxId = this.checkboxId || checkboxIdGenerator.next().value;
-        this.labelId = `${this.checkboxId}-label`;
-        this.errorTextId = `${this.checkboxId}-error`;
-        this.assistiveTextId = `${this.checkboxId}-assistive-text`;
+        this.labelId = `${this.identifier}-label`;
+        this.inputValidityId = `${this.identifier}-validity`;
+        this.assistiveTextId = `${this.identifier}-assistive-text`;
     };
-    getErrorText = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     getLegendText = () => {
         if (this.required) {
             return controlUtils.getRequiredText(this.legend);
@@ -78,7 +77,7 @@ const DsCheckbox = class {
         }
         return this.text;
     };
-    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getErrorText()) && this.errorTextId].filter(Boolean).join(' ');
+    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
     restoreInitialState = () => {
         this.checked = this.initialChecked;
         this.value = this.checked.toString();
@@ -90,34 +89,43 @@ const DsCheckbox = class {
         this.value = this.checked.toString();
         this.internals?.setFormValue(this.value);
     };
-    emitCheckboxError = () => {
-        this.dsCheckboxError.emit(this.getErrorText());
-    };
     formResetCallback() {
         this.restoreInitialState();
     }
     componentWillLoad() {
         this.setInitialState();
         this.setIds();
-        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden']);
-    }
-    componentDidLoad() {
-        this.ariaLabel = this.el.getAttribute('aria-label');
-        this.el.removeAttribute('aria-label');
-    }
-    componentDidUpdate() {
-        this.emitCheckboxError();
+        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']);
+        if (store.isValidation('server') || this.errorText) {
+            this.validationMessage = this.getValidationMessage();
+        }
     }
-    handleChange = () => {
-        this.checked = !this.checked;
-        this.value = this.checked.toString();
+    handleInput = (e) => {
+        const target = e.target;
+        this.checked = target.checked;
+        this.value = target.checked.toString();
         this.internals?.setFormValue(this.value);
-        this.dsCheckboxChange.emit({ id: this.checkboxId, checked: this.checked });
+        this.dsCheckboxInput.emit({ id: this.identifier, checked: target.checked });
+        if (store.isValidation('client') && this.validationMessage) {
+            this.validationMessage = this.getValidationMessage();
+        }
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter') {
-            this.handleChange();
+            this.inputElem.dispatchEvent(new Event('input'));
+        }
+    };
+    handleBlur = () => {
+        if (store.isValidation('client') && !this.labelClicked) {
+            this.validationMessage = this.getValidationMessage();
         }
+        this.labelClicked = false;
+    };
+    handleMouseDown = () => {
+        this.labelClicked = true;
+    };
+    handleMouseUp = () => {
+        this.labelClicked = false;
     };
     renderCheckbox() {
         const classes = index$1.classNames('ds-checkbox', {
@@ -127,12 +135,11 @@ const DsCheckbox = class {
         const inputClasses = index$1.classNames('ds-checkbox__input', {
             'ds-checkbox__input--invalid': Boolean(this.errorText),
         });
-        const errorText = this.getErrorText();
         const errorClasses = index$1.classNames('ds-checkbox-error', {
-            'ds-checkbox-error--visible': Boolean(errorText),
+            '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 }, index.h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onChange: this.handleChange, onKeyUp: this.handleKeyUp, value: this.value, disabled: this.disabled, required: this.required, id: this.checkboxId, "aria-describedby": ariaDescribedBy, "aria-label": this.ariaLabel, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (index.h("div", { class: errorClasses }, index.h("ds-input-validity", { id: this.errorTextId, text: errorText, type: "error" })))));
+        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" })))));
     }
     renderFieldset() {
         const fieldsetClasses = index$1.classNames('ds-checkbox-fieldset');

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

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.js');
 const index$1 = require('./index-5b0b9d4c.js');
+const store = require('./store-9bd20f3c.js');
 
 const dsInputValidityCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-textColor-danger)}.ds-input-validity--success{color:var(--ds-textColor-success)}.ds-input-validity ds-icon{display:block;height:1.5rem}.ds-input-validity small{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}";
 const DsInputValidityStyle0 = dsInputValidityCss;
@@ -15,7 +16,7 @@ const DsInputValidity = class {
     get el() { return index.getElement(this); }
     text;
     type = 'error';
-    validityRole = 'status';
+    validityRole;
     identifier;
     componentDidLoad() {
         this.identifier = this.el.getAttribute('id');
@@ -27,10 +28,7 @@ const DsInputValidity = class {
             'ds-input-validity--success': this.type === 'success',
         });
         const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        if (!this.text) {
-            return null;
-        }
-        return (index.h(index.Fragment, null, this.text && (index.h("div", { class: classes, role: this.validityRole }, index.h("ds-icon", { name: icon }), index.h("small", { id: this.identifier }, this.text)))));
+        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)))));
     }
 };
 DsInputValidity.style = DsInputValidityStyle0;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.js');
 const index$1 = require('./index-5b0b9d4c.js');
 const attributes = require('./attributes-5f5b58be.js');
-const linkUtils = require('./linkUtils-e911e899.js');
-const utils = require('./utils-c9113835.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 DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
@@ -26,7 +26,7 @@ const DsLinkWithArrow = class {
     href;
     target;
     language;
-    linkAriaLabel;
+    ariaLabel;
     componentWillLoad() {
         this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-label']);
         if (linkUtils.opensInNewTab(this.target)) {
@@ -40,7 +40,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: '5f43cc989011db22bd8f547957c76289e7bbbf45', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": linkUtils.getAriaLabel(this.text, this.linkAriaLabel), ...this.inheritedAttributes }, index.h("slot", { key: '26615467438d0ae98a8138165cf5152796f2ab00', name: "iconStart" }, this.iconPosition === 'start' && index.h("ds-icon", { key: 'f34a2d05ed9c991e98aaa89f547bde0c1b677115', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, index.h("slot", { key: 'be1ccadeaca632961ed3d44d1d94a26bf35d2963', name: "iconStart" }, this.iconPosition === 'end' && index.h("ds-icon", { key: '7bccce249754d661d9faeddbad2f9c4d8c207cfb', name: this.icon, class: iconClasses, size: "1.4em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '4e864244ee939591f435715889e2f9a240f86d36', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        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)))));
     }
 };
 DsLinkWithArrow.style = DsLinkWithArrowStyle0;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2bddcf4.js');
+const index = require('./index-bf84b124.js');
 const index$1 = require('./index-5b0b9d4c.js');
 const attributes = require('./attributes-5f5b58be.js');
-const linkUtils = require('./linkUtils-e911e899.js');
-const utils = require('./utils-c9113835.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 DsLinkStyle0 = dsLinkCss;
@@ -32,7 +32,7 @@ const DsLink = class {
     target;
     download;
     language;
-    linkAriaLabel;
+    ariaLabel;
     componentWillLoad() {
         this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-label']);
         if (linkUtils.opensInNewTab(this.target)) {
@@ -49,7 +49,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: '92b52d7b61888dd8d39841afe9823286356ec231', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": linkUtils.getAriaLabel(this.text, this.linkAriaLabel), ...this.inheritedAttributes }, index.h("slot", { key: '9125a3b98ed37f1e71a922a071c07f2ad270a661', name: "iconStart" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '5d08c8501703a7d8cf4bb3386d6368047e75f8fe', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, index.h("slot", { key: '6bd3f8fda1ad927ceba8612503dddabb188be692', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: 'e6b7de1ca80eb3485083f5ff1902ebf66821c707', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: 'b7ffb5a0cfa2e02ef793150bd9ea6886e02c7cac', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        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)))));
     }
 };
 DsLink.style = DsLinkStyle0;