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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf84b124.js');
+const index = require('./index-947af833.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-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);
+  return index.bootstrapLazy([["ds-accordion_5.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],"isLoading":[4,"is-loading"],"useSpinner":[4,"use-spinner"],"spinnerHiddenText":[1,"spinner-hidden-text"],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-spinner",{"text":[1],"size":[1],"spinnerTextPosition":[1,"spinner-text-position"],"spinnerColor":[1,"spinner-color"],"useRoleAlert":[4,"use-role-alert"],"useAriaLive":[4,"use-aria-live"],"hiddenAssistiveText":[1,"hidden-assistive-text"]}],[1,"ds-visually-hidden"],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[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-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,"input","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"disabled":["watchCheckboxDisabledChange"],"checked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"errorText":["errorTextObserver"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-radio-button.cjs",[[65,"ds-radio-button",{"identifier":[1,"id"],"errorsDisabled":[4,"data-errors-disabled"],"value":[1],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"required":[4],"disabled":[4],"optional":[4],"checked":[4],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"focusable":[32],"invalid":[32],"initialChecked":[32],"validationMessage":[32],"setFocus":[64],"setFocusable":[64],"setChecked":[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"],"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"]}]]],["ds-input-validity.cjs",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-radio-button-group.cjs",[[1,"ds-radio-button-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"initialValue":[1,"value"],"direction":[1],"errorText":[1,"error-text"],"value":[32],"getValue":[64]},[[0,"dsRadioButtonChecked","onInputChange"],[4,"keydown","onKeyDown"]],{"errorText":["errorTextObserver"]}]]],["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"],"invalid":[32],"initialChecked":[32],"validationMessage":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{controlUtils-041de0fd.js → controlUtils-8bf55ef0.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const getOptionalText = (text, optionalText) => [text, Boolean(optionalText) ? optionalText : '(optional)'].join(' ');
+const getOptionalText = (text, optionalText) => [text, optionalText || '(optional)'].join(' ');
 const getRequiredText = (text) => [text, '*'].join(' ');
 
 exports.getOptionalText = getOptionalText;

package/dist/cjs/{ds-accordion_3.cjs.entry.js → ds-accordion_5.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 utils = require('./utils-3412cbed.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 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-palette-black-95);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-palette-black-95);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-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-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-overlay-black-10)}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-overlay-black-15)}.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-palette-black-20)}: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-palette-black-20)}.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-palette-black-20);padding-inline:var(--ds-spacing-small)}::slotted([slot=header]){color:var(--ds-palette-black-95)}.ds-accordion__content{color:var(--ds-palette-black-95);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;
 
 const DsAccordion = class {
@@ -44,31 +44,29 @@ const DsAccordion = class {
     handleKeyDown = (event) => {
         switch (event.key) {
             case 'Enter':
-            case ' ':
+            case ' ': {
                 event.preventDefault();
                 const isCloseButton = event.target.closest('.ds-accordion__close-button');
                 this.shouldMoveFocus = isCloseButton ? true : false;
                 this.isExpanded = !this.isExpanded;
                 break;
+            }
         }
     };
     render() {
         const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
         const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
-        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: '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}`, {
+        return (index.h("div", { key: '4f11a49feb015126dade5f95608ef6d02ddc04be', class: index$1.classNames('ds-accordion', `ds-accordion--${this.variant}`, {
+                'ds-accordion--border-aligned': this.borderAligned,
+            }), role: "presentation" }, index.h("div", { key: '8e8c4eaee0a6d89768856330e42205601da619e7', class: "ds-accordion__item" }, index.h("div", { key: 'ccc39341fadb2b83eab4b1df6eab08adaef26402', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, index.h("button", { key: 'ed7493083f683eaf3fb4b62b11d3dec94864f186', 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: '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: '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--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: '7da3b276200740ceec215ca60a3fe9fdf231cff5', 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: '6703dfa726891be180aa667f985288c0ec86287a', name: "header" }))), index.h("div", { key: 'c8d05bc7d6f243c5df2acc8bf21f218bbceb9005', 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: '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' })))));
+                'ds-accordion__panel--expanded': this.isExpanded,
+            }), hidden: !this.isExpanded }, index.h("div", { key: '45e490a2d046cb05e403d8fc9be0baa3f0ec8401', class: "ds-accordion__content" }, index.h("slot", { key: 'efa60ab6f417045bfb0dd34d663581fc935b3307', name: "content" })), this.useCloseButton && (index.h("ds-button", { key: 'dfb14603e659d905a606cee3cfccedd0b4a9f04e', "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" }))))));
     }
     static get watchers() { return {
         "isExpanded": ["watchHandler"]
@@ -76,7 +74,7 @@ const DsAccordion = class {
 };
 DsAccordion.style = DsAccordionStyle0;
 
-const dsButtonCss = ".no-style-leak.sc-ds-button *.sc-ds-button,.sc-ds-button-h *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.blue.sc-ds-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-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button.primary.blue[aria-disabled=true].sc-ds-button,.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.black.sc-ds-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-button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button.primary.black[aria-disabled=true].sc-ds-button,.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button.primary.white[aria-disabled=true].sc-ds-button,.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button.secondary.blue.sc-ds-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-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.secondary.blue[aria-disabled=true].sc-ds-button,.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button.secondary.black.sc-ds-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-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.secondary.black[aria-disabled=true].sc-ds-button,.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.secondary.white[aria-disabled=true].sc-ds-button,.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary)}.ds-button.supplementary.blue.sc-ds-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-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue[aria-disabled=true].sc-ds-button,.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default)}.ds-button.supplementary.black.sc-ds-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-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black[aria-disabled=true].sc-ds-button,.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white[aria-disabled=true].sc-ds-button,.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
+const dsButtonCss = ".dsNoStyleLeak.sc-ds-button *.sc-ds-button,.sc-ds-button-h *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:has(ds-spinner) .button-value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-palette-mainBlue-70);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.blue.sc-ds-button: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-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-90)}.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-palette-black-95);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.black.sc-ds-button: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-button.primary.black.sc-ds-button:hover{background-color:var(--ds-palette-black-80)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-palette-white-70)}.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-palette-white);border-color:transparent;color:var(--ds-palette-black-95)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-palette-black-10)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-palette-black-20)}.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-overlay-white-10);border-color:transparent;color:var(--ds-overlay-white-40)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-palette-white);border-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-mainBlue-70)}.ds-button.secondary.blue.sc-ds-button: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-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-palette-white);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-black-95);color:var(--ds-palette-black-95)}.ds-button.secondary.black.sc-ds-button: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-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-white);color:var(--ds-palette-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-white-15);color:var(--ds-overlay-white-40)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-mainBlue-70)}.ds-button.supplementary.blue.sc-ds-button: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-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-95)}.ds-button.supplementary.black.sc-ds-button: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-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-overlay-white-40)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
 const DsButtonStyle0 = dsButtonCss;
 
 const DsButton = class {
@@ -96,9 +94,15 @@ const DsButton = class {
     iconPosition = 'start';
     type = 'button';
     disabled = false;
+    isLoading = false;
+    useSpinner = false;
+    spinnerHiddenText;
     fullWidth = false;
     ariaDisabled = 'false';
     componentWillLoad() {
+        if (this.useSpinner && !this.spinnerHiddenText) {
+            throw new Error('spinnerHiddenText is required when useSpinner is true.');
+        }
         this.inheritedAttributes = {
             ...utils.inheritAriaAttributes(this.el, ['aria-disabled']),
             ...utils.inheritSpecifiedAttributes(this.el, [
@@ -139,15 +143,35 @@ const DsButton = class {
                 break;
         }
     };
-    render() {
+    getSpinnerColour = () => {
+        if (this.variant === 'primary') {
+            if (this.colour === 'blue')
+                return 'white';
+            if (this.colour === 'white')
+                return 'black';
+            if (this.colour === 'black')
+                return 'white';
+        }
+        return this.colour;
+    };
+    renderButton = () => {
         const classes = index$1.classNames(`ds-button ${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
             'icon-end': this.icon && this.iconPosition === 'end' && this.value,
             'icon-only': this.icon && !this.value,
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
-        const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (index.h("button", { key: 'a88d1c763917de40eeaefc79cadace3a107a761e', 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: '5a576ddabcd8be9957832560a1503ffc9b0a4b4c', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '44506977ee4a8e0d2044efa9c4e66f52e901c98c', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '0a2a0ff071b51cfb9df7f4bc27b1ea6469f3a47e', class: "button-value" }, this.value), index.h("slot", { key: '757002ca6ed2f98f692b8f5b630ecfd0f6e83f5c', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '2605d1808580c30f68717660a516d07fe8fcfc59', name: this.icon, size: iconSize }))));
+        return (index.h("button", { ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": this.ariaDisabled == 'true' ? 'true' : 'false', disabled: this.disabled, ...this.inheritedAttributes }, this.isLoading ?
+            index.h(index.Fragment, null, index.h("ds-spinner", { hiddenAssistiveText: this.spinnerHiddenText, spinnerColor: this.getSpinnerColour(), size: this.size == 'small' ? 'small' : 'medium' }), this.value && index.h("span", { class: "button-value" }, this.value))
+            :
+                index.h(index.Fragment, null, index.h("slot", { name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { name: this.icon, size: iconSize })), this.value && index.h("span", { class: "button-value" }, this.value), index.h("slot", { name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { name: this.icon, size: iconSize })))));
+    };
+    render() {
+        const buttonElement = this.renderButton();
+        return (this.useSpinner ?
+            index.h("div", { "aria-live": "polite" }, buttonElement)
+            :
+                buttonElement);
     }
 };
 DsButton.style = DsButtonStyle0;
@@ -1085,11 +1109,82 @@ const DsIcon = class {
         }
     }
     render() {
-        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' })));
+        return (index.h(index.Fragment, { key: '71d2466d7ab9bdac086b7e4723bdbcae85f46179' }, index.h("span", { key: 'b19955f6f321b89dfce0d7843dcc41d3db92b29f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
 };
 DsIcon.style = DsIconStyle0;
 
+const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font--heading{font-family:var(--ds-fontFamily-heading)}.ds-font--body{font-family:var(--ds-fontFamily-body)}.ds-font--regular{font-weight:var(--ds-fontWeight-regular)}.ds-font--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font--semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font--bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking--xtight{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking--tight{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking--normal{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking--wide{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking--xwide{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading--small{line-height:var(--ds-lineHeight-small)}.ds-leading--medium{line-height:var(--ds-lineHeight-medium)}.ds-leading--large{line-height:var(--ds-lineHeight-large)}.ds-leading--xlarge{line-height:var(--ds-lineHeight-xLarge)}.ds-width--normal{font-stretch:var(--ds-fontWidth-normal)}.ds-width--condense{font-stretch:var(--ds-fontWidth-condense)}.ds-number--proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph--16{margin-bottom:var(--ds-fontSize-16)}.ds-paragraph--20{margin-bottom:var(--ds-fontSize-20)}.ds-list--spacing{gap:4px}.ds-text-color--default{color:var(--ds-palette-black-95)}.ds-text--2xl-regular{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text--xl-regular{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text--lg-regular{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text--md-regular{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text--sm-regular{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text--xs-regular{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text--2xl-semibold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xl-semibold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text--lg-semibold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text--md-semibold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text--sm-semibold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xs-semibold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text--2xl-bold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text--xl-bold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text--lg-bold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text--md-bold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text--sm-bold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text--xs-bold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__container{display:flex;align-items:center;justify-content:center}.ds-spinner__container__size--small{padding:1.5px}.ds-spinner__container__size--small:has(.ds-spinner__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner__container__size--medium{padding:3px}.ds-spinner__container__size--medium:has(.ds-spinner__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner__container__size--large{padding:3px}.ds-spinner__container__size--large:has(.ds-spinner__text){gap:var(--ds-spacing-xSmall)}.ds-spinner__container__size--xLarge{padding:5.5px}.ds-spinner__container__size--xLarge:has(.ds-spinner__text){gap:10px}.ds-spinner__container__size--2xLarge{padding:5.5px}.ds-spinner__container__size--2xLarge:has(.ds-spinner__text){gap:var(--ds-spacing-small)}.ds-spinner__container--below{flex-direction:column;align-items:center}.ds-spinner__container--right{flex-direction:row;align-items:center}.ds-spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-overlay-black-15);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__text{font-family:var(--ds-fontFamily-body);color:var(--ds-palette-black-95)}.ds-spinner__text__color--white{color:var(--ds-palette-white)}.ds-spinner__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005A94);border-radius:50%;animation:ds-spinner__rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005A94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__segment--1{animation-delay:-0.3s}.ds-spinner__segment--2{animation-delay:-0.2s}.ds-spinner__segment--3{animation-delay:-0.1s}@keyframes ds-spinner__rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__segment--1{animation-delay:-0.6s}.ds-spinner__segment--2{animation-delay:-0.4s}.ds-spinner__segment--3{animation-delay:-0.2s}}";
+const DsSpinnerStyle0 = dsSpinnerCss;
+
+const SPINNER_SIZES = {
+    'small': 10,
+    'medium': 14,
+    'large': 20,
+    'xLarge': 28,
+    '2xLarge': 40
+};
+const SPINNER_TEXT_SIZES = {
+    'small': 'ds-text--xs-regular',
+    'medium': 'ds-text--sm-regular',
+    'large': 'ds-text--md-regular',
+    'xLarge': 'ds-text--lg-regular',
+    '2xLarge': 'ds-text--xl-regular',
+};
+const SPINNER_COLORS = {
+    'blue': 'var(--ds-palette-mainBlue-70)',
+    'black': 'var(--ds-palette-black-95)',
+    'white': 'var(--ds-palette-white)',
+};
+const DsSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    inheritedAttributes = {};
+    get el() { return index.getElement(this); }
+    text;
+    size = 'medium';
+    spinnerTextPosition = 'below';
+    spinnerColor = 'blue';
+    useRoleAlert = false;
+    useAriaLive = false;
+    hiddenAssistiveText;
+    componentWillLoad() {
+        this.inheritedAttributes = utils.inheritAriaAttributes(this.el);
+    }
+    render() {
+        const sizeInPixels = SPINNER_SIZES[this.size];
+        const textSizeClass = SPINNER_TEXT_SIZES[this.size];
+        const spinnerColorVariable = SPINNER_COLORS[this.spinnerColor];
+        const containerClasses = index$1.classNames('ds-spinner__container', `ds-spinner__container__size--${this.size}`, {
+            [`ds-spinner__container--${this.spinnerTextPosition}`]: !!this.text
+        });
+        const textClasses = index$1.classNames('ds-spinner__text', textSizeClass, `ds-spinner__text__color--${this.spinnerColor}`);
+        const segmentClasses = (index) => index$1.classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
+        return (index.h("div", { key: '84577c89a692d5e6757776b65908ae871e06b8fd', role: this.useRoleAlert ? 'alert' : null, "aria-live": this.useAriaLive ? 'polite' : null, class: containerClasses, style: {
+                '--spinner-size': `${sizeInPixels}px`,
+                '--spinner-color': `${spinnerColorVariable}`,
+                '--spinner-border-color': this.spinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
+            }, ...this.inheritedAttributes }, index.h("div", { key: 'ea78336e6d44772e3acf74a9ff2f1406505bcd2e', class: "ds-spinner" }, index.h("div", { key: 'a51be13c025d62fd36de80cd377dea6db97b1ae7', class: segmentClasses(1) }), index.h("div", { key: 'd519fd07f69b78f124367ecf1681a2361eed4f9f', class: segmentClasses(2) }), index.h("div", { key: '7ffd7b032f8753c0e182e37a8ca5f4db11a6701b', class: segmentClasses(3) })), this.hiddenAssistiveText && (index.h("ds-visually-hidden", { key: '162421ae07e134b0bcfb14e00719130c893cadfb' }, index.h("span", { key: '9d9d00b855542f63c9ebf34e507a65bf092dcce8' }, this.hiddenAssistiveText))), this.text && (index.h("span", { key: 'e50d5028875294acd54828e1217d03213148ee58', class: textClasses }, this.text))));
+    }
+};
+DsSpinner.style = DsSpinnerStyle0;
+
+const dsVisuallyHiddenCss = ".ds-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+const DsVisuallyHiddenStyle0 = dsVisuallyHiddenCss;
+
+const DsVisuallyHidden = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: 'a4816a680d41ece91ad716ee0cc52a8c777990a4', class: "ds-visually-hidden" }, index.h("slot", { key: 'd5444d14b4fdab28a414ab687ca24b9eb14e1ac4' })));
+    }
+};
+DsVisuallyHidden.style = DsVisuallyHiddenStyle0;
+
 exports.ds_accordion = DsAccordion;
 exports.ds_button = DsButton;
 exports.ds_icon = DsIcon;
+exports.ds_spinner = DsSpinner;
+exports.ds_visually_hidden = DsVisuallyHidden;

package/dist/cjs/ds-checkbox-group.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 utils = require('./utils-3412cbed.js');
 
-const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";
+const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";
 const DsCheckboxGroupStyle0 = dsCheckboxGroupCss;
 
 const fieldsetIdGenerator = utils.idGenerator('ds-checkbox-group');
@@ -15,7 +15,9 @@ const DsCheckboxGroup = class {
         index.registerInstance(this, hostRef);
         this.dsCheckboxGroupChange = index.createEvent(this, "dsCheckboxGroupChange", 7);
         this.dsCheckboxGroupIndeterminateChildChange = index.createEvent(this, "dsCheckboxGroupIndeterminateChildChange", 7);
+        this.dsCheckboxGroupInvalidStateChange = index.createEvent(this, "dsCheckboxGroupInvalidStateChange", 7);
     }
+    checkboxElem;
     fieldsetId = fieldsetIdGenerator.next().value;
     checkboxId = `${this.fieldsetId}-checkbox`;
     errorTextId = `${this.fieldsetId}-error`;
@@ -25,6 +27,7 @@ const DsCheckboxGroup = class {
     get el() { return index.getElement(this); }
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
+    dsCheckboxGroupInvalidStateChange;
     legend;
     assistiveText;
     direction = 'vertical';
@@ -32,7 +35,7 @@ const DsCheckboxGroup = class {
     text = '';
     checked = false;
     disabled = false;
-    childElementsCount = 0;
+    childElementsCount = 1;
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
@@ -78,55 +81,61 @@ const DsCheckboxGroup = class {
     watchIndeterminateChange(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
+    errorTextObserver(errorText) {
+        this.dsCheckboxGroupInvalidStateChange.emit(!!errorText);
+    }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
-    watchCheckedChildElementCountChange(newValue, oldValue) {
-        this.isIndeterminate =
-            this.checkedChildElementCount !== this.childElementsCount && this.checkedChildElementCount < this.childElementsCount && this.checkedChildElementCount > 0;
-        if (newValue === this.childElementsCount && newValue > oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
-        }
-        else if (oldValue === this.childElementsCount && newValue < oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
-        }
+    watchCheckedChildElementCountChange() {
+        this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
     }
-    updateCheckedChildElementCount = (event) => {
-        if (event.detail.checked) {
-            this.checkedChildElementCount = this.checkedChildElementCount === this.childElementsCount ? this.checkedChildElementCount : this.checkedChildElementCount + 1;
+    updateCheckedChildElementCount = (checked) => {
+        if (checked) {
+            this.checkedChildElementCount = Math.min(this.childElementsCount, this.checkedChildElementCount + 1);
         }
         else {
-            this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
+            this.checkedChildElementCount = Math.max(0, this.checkedChildElementCount - 1);
         }
     };
     listenCheckboxChange(event) {
-        if (event.detail.id === this.checkboxId) {
-            this.updateChildElementsChecked(event.detail.checked);
+        if (event.target === this.el) {
+            this.updateChildElementsChecked(this.checkboxElem.checked);
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: this.checkboxElem.checked });
             return;
         }
-        if (this.getChildCheckboxElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+        const target = event.target;
+        if (this.getChildCheckboxElements().includes(target)) {
+            const previousCheckedChildElementCount = this.checkedChildElementCount;
+            this.updateCheckedChildElementCount(target.checked);
+            if (this.checkedChildElementCount === this.childElementsCount && this.checkedChildElementCount > previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
+            }
+            else if (previousCheckedChildElementCount === this.childElementsCount && this.checkedChildElementCount < previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+            }
         }
     }
     listenCheckboxGroupChange(event) {
         if (this.getChildElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+            event.stopPropagation();
+            this.updateCheckedChildElementCount(event.detail.checked);
         }
     }
-    setChildElementCount = () => {
-        this.childElementsCount = this.getChildElements().length;
-    };
     componentWillLoad() {
         this.inheritedAttributes = utils.inheritAriaAttributes(this.el, ['aria-labelledby']);
     }
     componentDidLoad() {
-        this.setChildElementCount();
+        this.childElementsCount = this.getChildElements().length;
         this.updateChildCheckboxes(element => {
             element.setAttribute('data-errors-disabled', 'true');
         });
     }
     componentDidUpdate() {
-        this.setChildElementCount();
+        const childElementCount = this.getChildElements().length;
+        if (this.childElementsCount !== childElementCount) {
+            this.childElementsCount = childElementCount;
+        }
     }
     render() {
         const classes = index$1.classNames('ds-checkbox-group', {
@@ -140,12 +149,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: '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" }))));
+        return (index.h("fieldset", { key: '25b932a80cf1b2c7467ef5ea012661992cb88853', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && index.h("legend", { key: 'e96b23987622f5df0144a9499122f7afba552648', class: legendClasses }, this.legend), this.assistiveText && (index.h("small", { key: 'ae3fb6f287dd518ad911391054f6ed4de7e8ea6f', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (index.h(index.Fragment, null, index.h("ds-checkbox", { ref: checkboxElem => (this.checkboxElem = checkboxElem), id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), 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: 'd2719bdb242a526af73e628d2ce7bca234c94961', class: errorClasses }, index.h("ds-input-validity", { key: 'a31a78918c1894bd8f68207c3ea3f9df984bd52b', id: this.errorTextId, text: this.errorText, type: "error" }))));
     }
     static get watchers() { return {
         "disabled": ["watchCheckboxDisabledChange"],
         "checked": ["watchCheckedChange"],
         "isIndeterminate": ["watchIndeterminateChange"],
+        "errorText": ["errorTextObserver"],
         "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }; }
 };