@uh-design-system/component-library 0.6.0 → 0.7.0

package/dist/components/ds-button2.js

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, h, F as Fragment } from './index2.js';
+import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as classNames } from './index3.js';
 import { i as inheritAttributes, b as inheritSpecifiedAttributes, a as inheritAriaAttributes } from './attributes.js';
 import { d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-spinner2.js';
 import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
 
-const dsButtonCss = ".sc-ds-button-h *.sc-ds-button,.ds-no-style-leak.sc-ds-button *.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}[dsFullWidth].sc-ds-button-h,[ds-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-semibold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button:not(.supplementary) .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.supplementary.sc-ds-button:has(ds-spinner) .button-value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.sc-ds-button:has(ds-spinner):not(.small) .button-value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.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) var(--ds-spacing-xSmall)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.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) var(--ds-spacing-2xSmall)}.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) var(--ds-spacing-2xSmall)}.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.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.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:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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.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);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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.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);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-overlay-white-40)}";
+const dsButtonCss = ".sc-ds-button-h *.sc-ds-button,.ds-no-style-leak.sc-ds-button *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button:root,.sc-ds-button-h{--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}[dsFullWidth].sc-ds-button-h,[ds-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-semibold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button:not(.supplementary) .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.supplementary.sc-ds-button:has(ds-spinner) .button-value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.sc-ds-button:has(ds-spinner):not(.small) .button-value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.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) var(--ds-spacing-xSmall)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.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) var(--ds-spacing-2xSmall)}.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) var(--ds-spacing-2xSmall)}.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.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.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:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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-black-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:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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.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);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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.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);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.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.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-overlay-white-40)}";
 
 const DsButton = proxyCustomElement(class DsButton extends H {
     constructor() {
@@ -29,6 +29,8 @@ const DsButton = proxyCustomElement(class DsButton extends H {
     dsSpinnerHiddenText;
     dsFullWidth = false;
     dsAriaDisabled = 'false';
+    dsHiddenAssistiveText;
+    hasContent = false;
     async dsFocus() {
         this.buttonEl.focus();
     }
@@ -36,6 +38,18 @@ const DsButton = proxyCustomElement(class DsButton extends H {
         if (this.dsUseSpinner && !this.dsSpinnerHiddenText) {
             throw new Error('dsSpinnerHiddenText is required when dsUseSpinner is true.');
         }
+        this.hasContent =
+            !!this.dsValue ||
+                Array.from(this.el.childNodes).some(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const elem = node;
+                        return !elem.hasAttribute('slot') || elem.getAttribute('slot') === '';
+                    }
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        return node.textContent?.trim().length > 0;
+                    }
+                    return false;
+                });
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-disabled']),
             ...inheritSpecifiedAttributes(this.el, [
@@ -89,19 +103,16 @@ const DsButton = proxyCustomElement(class DsButton extends H {
     };
     renderButton = () => {
         const classes = classNames(`ds-button ${this.dsVariant} ${this.dsColour} ${this.dsSize}`, {
-            'icon-start': this.dsIcon && this.dsIconPosition === 'start' && this.dsValue,
-            'icon-end': this.dsIcon && this.dsIconPosition === 'end' && this.dsValue,
-            'icon-only': this.dsIcon && !this.dsValue,
+            'icon-start': this.dsIcon && this.dsIconPosition === 'start' && this.hasContent,
+            'icon-end': this.dsIcon && this.dsIconPosition === 'end' && this.hasContent,
+            'icon-only': this.dsIcon && !this.hasContent,
         });
         const iconSize = this.dsSize === 'small' ? '1rem' : undefined;
-        return (h("button", { ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, type: this.dsType, "aria-disabled": this.dsAriaDisabled == 'true' ? 'true' : 'false', disabled: this.dsDisabled, ...this.inheritedAttributes }, this.dsIsLoading ? (h(Fragment, null, h("ds-spinner", { dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsSpinnerColor: this.getSpinnerColour(), dsSize: this.dsSize == 'small' ? 'small' : 'medium' }), this.dsValue && h("span", { class: "button-value" }, this.dsValue))) : (h(Fragment, null, h("slot", { name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize })), this.dsValue && h("span", { class: "button-value" }, this.dsValue), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize }))))));
+        return (h("button", { ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, type: this.dsType, "aria-disabled": this.dsAriaDisabled == 'true' ? 'true' : 'false', disabled: this.dsDisabled, ...this.inheritedAttributes }, h("slot", { name: "prefix" }, !this.dsIsLoading && this.dsIcon && this.dsIconPosition === 'start' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize }), this.dsIsLoading && (h("ds-spinner", { dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsSpinnerColor: this.getSpinnerColour(), dsSize: this.dsSize == 'small' ? 'small' : 'medium' }))), this.hasContent && (h("span", { class: "button-value" }, h("slot", null, this.dsValue, this.dsHiddenAssistiveText && (h("ds-visually-hidden", { "ds-tag": "span" }, this.dsHiddenAssistiveText))))), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize }))));
     };
     render() {
         const buttonElement = this.renderButton();
-        return (this.dsUseSpinner ?
-            h("div", { "aria-live": "polite" }, buttonElement)
-            :
-                buttonElement);
+        return this.dsUseSpinner ? h("div", { "aria-live": "polite" }, buttonElement) : buttonElement;
     }
     static get style() { return dsButtonCss; }
 }, [6, "ds-button", {
@@ -118,6 +129,8 @@ const DsButton = proxyCustomElement(class DsButton extends H {
         "dsSpinnerHiddenText": [1, "ds-spinner-hidden-text"],
         "dsFullWidth": [4, "ds-full-width"],
         "dsAriaDisabled": [1, "ds-aria-disabled"],
+        "dsHiddenAssistiveText": [1, "ds-hidden-assistive-text"],
+        "hasContent": [32],
         "dsFocus": [64]
     }]);
 function defineCustomElement() {

package/dist/components/ds-card.js

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as classNames } from './index3.js';
 import { s as slugifyText, d as defineCustomElement$2 } from './ds-icon2.js';
 
-const dsCardCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:block}.ds-card{background-color:var(--ds-palette-white);border:1px solid var(--ds-palette-black-20);color:var(--ds-palette-black-95);display:flex;flex-direction:column;hyphens:auto;margin-bottom:var(--ds-spacing-2xSmall)}.ds-card:focus-within{box-shadow:false 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * -1)}.ds-card:focus-within .ds-card__heading{text-decoration:underline;text-underline-offset:2px}.ds-card.ds-card--link:hover{border-color:var(--ds-palette-black-50);cursor:pointer}.ds-card.ds-card--link:hover ds-icon{color:var(--ds-palette-black-80)}.ds-card.ds-card--link:hover .ds-card__heading{text-decoration:underline;text-underline-offset:2px}.ds-card.ds-card--link:active{border-color:var(--ds-palette-black-95)}.ds-card.ds-card--link:active ds-icon{color:var(--ds-palette-black-80)}.ds-card.ds-card--link{text-decoration:none}.ds-card.ds-card--link:focus-within ds-icon{color:var(--ds-palette-black-80)}.ds-card--filled{background-color:var(--ds-palette-black-05)}.ds-card__image-container{aspect-ratio:16/9;position:relative;width:100%;overflow:hidden}.ds-card__image{width:100%;height:100%;object-fit:cover}.ds-card__content--top{align-items:center;display:flex;gap:var(--ds-spacing-small);justify-content:space-between;padding:var(--ds-spacing-xSmall) var(--ds-spacing-small)}.ds-card__content--top__text{display:flex;flex-direction:column;gap:var(--ds-spacing-3xSmall)}.ds-card__eyebrow{color:var(--ds-palette-black-70);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:1px;line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);margin-bottom:var(--ds-spacing-3xSmall);order:1}.ds-card__heading{align-items:center;color:var(--ds-palette-black-95);display:flex;font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold);margin:0;order:2;justify-content:space-between;text-wrap:balance}.ds-card__heading__link{all:unset}.ds-card__subtitle{font-size:var(--ds-fontSize-16);font-family:var(--ds-fontFamily-body);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);order:3}.ds-card__description{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);color:var(--ds-palette-black-95);padding:0 var(--ds-spacing-small);margin:0 0 var(--ds-spacing-small) 0;text-wrap:pretty}.ds-card ds-icon{color:var(--ds-palette-mainBlue-70);font-size:var(--ds-fontSize-20);font-weight:normal}";
+const dsCardCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:block}.ds-card{background-color:var(--ds-palette-white);border:1px solid var(--ds-palette-black-20);color:var(--ds-palette-black-95);font-family:var(--ds-fontFamily-body);display:flex;flex-direction:column;hyphens:auto;margin-bottom:var(--ds-spacing-2xSmall)}.ds-card:focus-within{box-shadow:false 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * -1)}.ds-card:focus-within .ds-card__heading{text-decoration:underline;text-underline-offset:2px}.ds-card.ds-card--link:hover{border-color:var(--ds-palette-black-50);cursor:pointer}.ds-card.ds-card--link:hover ds-icon{color:var(--ds-palette-black-80)}.ds-card.ds-card--link:hover .ds-card__heading{text-decoration:underline;text-underline-offset:2px}.ds-card.ds-card--link:active{border-color:var(--ds-palette-black-95)}.ds-card.ds-card--link:active ds-icon{color:var(--ds-palette-black-80)}.ds-card.ds-card--link{text-decoration:none}.ds-card.ds-card--link:focus-within ds-icon{color:var(--ds-palette-black-80)}.ds-card--filled{background-color:var(--ds-palette-black-05)}.ds-card__image-container{aspect-ratio:16/9;position:relative;width:100%;overflow:hidden}.ds-card__image{width:100%;height:100%;object-fit:cover}.ds-card__content--top{align-items:center;display:flex;gap:var(--ds-spacing-small);justify-content:space-between;padding:var(--ds-spacing-xSmall) var(--ds-spacing-small)}.ds-card__content--top__text{display:flex;flex-direction:column;gap:var(--ds-spacing-3xSmall)}.ds-card__eyebrow{color:var(--ds-palette-black-70);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:1px;line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);margin-bottom:var(--ds-spacing-3xSmall);order:1}.ds-card__heading{align-items:center;color:var(--ds-palette-black-95);display:flex;font-size:var(--ds-fontSize-20);font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);margin:0;order:2;justify-content:space-between;text-wrap:balance}.ds-card__heading__link{all:unset}.ds-card__subtitle{font-size:var(--ds-fontSize-16);font-family:var(--ds-fontFamily-body);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);order:3}.ds-card__description{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);color:var(--ds-palette-black-95);padding:0 var(--ds-spacing-small);margin:0 0 var(--ds-spacing-small) 0;text-wrap:pretty}.ds-card ds-icon{color:var(--ds-palette-mainBlue-70);font-size:var(--ds-fontSize-20);font-weight:normal}";
 
 const DsCard$1 = proxyCustomElement(class DsCard extends H {
     constructor() {
@@ -47,10 +47,10 @@ const DsCard$1 = proxyCustomElement(class DsCard extends H {
         const HeadingTag = `h${this.dsHeadingLevel}`;
         const randomId = Math.random().toString(36).substring(2, 9);
         const headingId = `${slugifyText(this.dsHeading)}-${randomId}`;
-        return (h("article", { key: '39fa69acafabb5201adbfe5f361bbb6a82fbad66', "aria-labelledby": headingId, class: classes, onClick: (e) => this.handleClick(e), onKeyDown: (e) => this.handleKeydown(e) }, this.dsImageUrl && (h("div", { key: '47207c839c55179082f3b8060a93ab4622fefa08', class: "ds-card__image-container" }, h("img", { key: 'df83bfd1a75845752f746235b12df453de51ee04', class: "ds-card__image", src: this.dsImageUrl, alt: this.dsImageAlt }))), h("div", { key: 'c2e3f31bfc20d8b97d6c7485e348b60c84d9f9ae', class: "ds-card__content" }, h("div", { key: '70612da3145bf79f0a1e07c7b3cddbb309247286', class: "ds-card__content--top" }, h("div", { key: '0813a2eee2575371b561ce260215c0fc8175e4a0', class: "ds-card__content--top__text" }, this.dsUrl ?
+        return (h("article", { key: '4275de582a0f175018e04fba3201895ec3a75270', "aria-labelledby": headingId, class: classes, onClick: (e) => this.handleClick(e), onKeyDown: (e) => this.handleKeydown(e) }, this.dsImageUrl && (h("div", { key: '3a1b3b9b4b236ade25efe88037b3c032971943d5', class: "ds-card__image-container" }, h("img", { key: '49503128ed1b968327f6548f4afae33a0ddec813', class: "ds-card__image", src: this.dsImageUrl, alt: this.dsImageAlt }))), h("div", { key: '4e5095d1eee487f72e1e5b523c33ea7f17cc6c65', class: "ds-card__content" }, h("div", { key: '29bcae828a5abda0f46f1e1695e5c88e4dd9eedf', class: "ds-card__content--top" }, h("div", { key: '791ef1f0cd45f25fbf2a518a5884cc1e830eb74a', class: "ds-card__content--top__text" }, this.dsUrl ?
             h(HeadingTag, { class: "ds-card__heading", id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: "ds-card__heading__link" }, this.dsHeading))
             :
-                h(HeadingTag, { class: "ds-card__heading" }, this.dsHeading), this.dsEyebrow && h("div", { key: '7b93368c780b3df3fd8634f65af2589810ac9953', class: "ds-card__eyebrow" }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'edc5f5a6e05b1c901a69a2ff6ccde88b7a1f9c57', class: "ds-card__subtitle" }, this.dsSubtitle)), (this.dsUrl && this.dsShowArrow) && h("ds-icon", { key: '38fdc6581093d4ae820100b61c61d94b92690646', "ds-name": "arrow_forward" })), h("div", { key: '2b068303f4880827800ec6dad5eb86bc8365bda5', class: "ds-card__content--bottom" }, this.dsDescription && h("p", { key: 'e62f55d389866099320ffc28846adff926e204d2', class: "ds-card__description" }, this.dsDescription), h("div", { key: '202aeba23c27b074dffdddbe7e6d5b59ab8e90eb', class: "ds-card__slot--content" }, h("slot", { key: '76c41243b723e124d91f5ac7b33c9f6baa99ae27', name: "content" })), h("div", { key: 'f728bd9c984773f930972181694ebb67bdad5cf6', class: "ds-card__slot--footer" }, h("slot", { key: '8ea95152f2a4fe8ff45f331c371de2d93e8e45fa', name: "footer" }))))));
+                h(HeadingTag, { class: "ds-card__heading" }, this.dsHeading), this.dsEyebrow && h("div", { key: 'e084ac07556497e960dade75e0893640dc67cf9f', class: "ds-card__eyebrow" }, this.dsEyebrow), this.dsSubtitle && h("div", { key: '8882de57288421012851a81b2d06ee2a11127d2d', class: "ds-card__subtitle" }, this.dsSubtitle)), (this.dsUrl && this.dsShowArrow) && h("ds-icon", { key: '134ce4d424a4d2a235fc2cd6c2b392c053914a95', "ds-name": "arrow_forward" })), h("div", { key: 'fd4101fb43b3d3e2fbd92075a33e7715422ee27d', class: "ds-card__content--bottom" }, this.dsDescription && h("p", { key: '1ba650951ecc252a71e8787265ce2cfd3b3c7f97', class: "ds-card__description" }, this.dsDescription), h("div", { key: '337de8c68477b130c7f9eb1be7c7e4623748b622', class: "ds-card__slot--content" }, h("slot", { key: 'db10985cfbf292de7941bec168d74656f5214512', name: "content" })), h("div", { key: '9b425156a340cc4d318af11e0b485edcd49528f6', class: "ds-card__slot--footer" }, h("slot", { key: '4a54f803b3d276354d61e00277ff1367505d77ff', name: "footer" }))))));
     }
     static get style() { return dsCardCss; }
 }, [1, "ds-card", {

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

@@ -6,7 +6,7 @@ import { g as getRequiredText, a as getOptionalText, b as atLeastOneOption, c as
 import { d as defineCustomElement$4 } from './ds-checkbox2.js';
 import { d as defineCustomElement$2 } from './ds-input-validity2.js';
 
-const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-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-flow:row wrap;gap:var(--ds-spacing-small)}";
+const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{color:var(--ds-palette-black-95);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-flow:row wrap;gap:var(--ds-spacing-small)}";
 
 const fieldsetIdGenerator = idGenerator('ds-checkbox-group');
 const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
@@ -17,6 +17,8 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange");
         this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange");
         this.dsCheckboxGroupInvalidStateChange = createEvent(this, "dsCheckboxGroupInvalidStateChange");
+        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
+        this.dsValidity = createEvent(this, "dsValidity");
         this.internals = this.attachInternals();
     }
     checkboxElem;
@@ -25,12 +27,15 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     errorTextId = `${this.fieldsetId}-error`;
     assistiveTextId = `${this.fieldsetId}-assistive-text`;
     nestedId = `${this.fieldsetId}-nested`;
+    childBlurTimeout = null;
     inheritedAttributes = {};
     get el() { return this; }
     internals;
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
     dsCheckboxGroupInvalidStateChange;
+    dsSubmitInvalid;
+    dsValidity;
     dsLegend;
     dsAssistiveText;
     dsDirection = 'vertical';
@@ -46,10 +51,21 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
-    showInternalsValidationMessage = false;
+    focusedChildCheckbox;
+    wasInvalidOnBlur = false;
     elementIs = (localName) => (element) => element.localName === localName;
     elementIsCheckbox = this.elementIs('ds-checkbox');
     elementIsCheckboxGroup = this.elementIs('ds-checkbox-group');
+    async dsFocus() {
+        if (this.checkboxElem) {
+            this.checkboxElem.dsFocus();
+            return;
+        }
+        this.getEnabledChildCheckboxElements()?.[0]?.dsFocus();
+    }
+    async dsCheckValidity() {
+        return this.internals?.checkValidity();
+    }
     getLegendText = () => {
         if (this.dsRequired || this.dsAllRequired) {
             return getRequiredText(this.dsLegend);
@@ -59,13 +75,6 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         }
         return this.dsLegend;
     };
-    getAriaDescribedBy = () => [
-        !!this.dsAssistiveText && this.assistiveTextId,
-        (!!this.dsErrorText || (this.showInternalsValidationMessage && !!this.internals?.validationMessage)) && this.errorTextId,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    getValidationMessage = () => this.dsErrorText || (this.showInternalsValidationMessage ? this.internals?.validationMessage : '');
     getChildElements = () => {
         const slot = this.el.shadowRoot.querySelector('slot');
         return (slot?.assignedElements() || []);
@@ -73,6 +82,9 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     getChildCheckboxElements = () => {
         return this.getChildElements().filter(this.elementIsCheckbox);
     };
+    getEnabledChildCheckboxElements = () => {
+        return this.getChildCheckboxElements().filter((element) => !element.dsDisabled);
+    };
     updateChildElements = (updateFn) => {
         this.getChildElements().forEach(updateFn);
     };
@@ -93,56 +105,61 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     async setChecked(newValue) {
         this.updateChildElementsChecked(newValue);
     }
-    watchCheckboxDisabledChange(newValue) {
+    dsDisabledObserver(newValue) {
         this.updateChildElements((element) => {
             element.dsDisabled = newValue;
         });
     }
-    watchCheckedChange(newValue) {
+    dsAllRequiredObserver(newValue) {
+        this.updateChildElements((element) => {
+            element.dsRequired = newValue;
+        });
+    }
+    dsCheckedObserver(newValue) {
         this.updateChildElementsChecked(newValue);
     }
-    watchIndeterminateChange(newValue) {
+    isIndeterminateObserver(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
-    errorTextObserver(errorText) {
-        this.dsCheckboxGroupInvalidStateChange.emit(!!errorText);
+    dsErrorTextObserver(newValue) {
+        this.dsCheckboxGroupInvalidStateChange.emit(newValue);
     }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
-    watchCheckedChildElementCountChange() {
+    checkedChildElementCountObserver() {
         this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
         if (this.dsRequired && this.checkedChildElementCount === 0) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0].querySelector('input'));
         }
         else if (this.dsAllRequired && this.checkedChildElementCount !== this.childElementsCount) {
-            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0].querySelector('input'));
         }
         else {
-            this.internals?.setValidity({ valueMissing: false });
+            this.internals?.setValidity({});
+        }
+        if (this.wasInvalidOnBlur) {
+            this.dsValidity.emit({
+                flag: this.internals?.validity.valid ? 'valid' : 'customError',
+                message: this.internals?.validationMessage,
+            });
         }
     }
     updateCheckedChildElementCount = (checked) => {
-        if (checked) {
-            this.checkedChildElementCount = Math.min(this.childElementsCount, this.checkedChildElementCount + 1);
-        }
-        else {
-            this.checkedChildElementCount = Math.max(0, this.checkedChildElementCount - 1);
-        }
+        this.checkedChildElementCount += checked ? 1 : -1;
     };
     listenCheckboxChange(event) {
-        if (!this.showInternalsValidationMessage) {
-            this.showInternalsValidationMessage = true;
-        }
-        if (event.target === this.el) {
+        if (event.target === this.el && this.checkboxElem) {
+            this.checkedChildElementCount = this.checkboxElem.dsChecked ? this.childElementsCount : 0;
             this.updateChildElementsChecked(this.checkboxElem.dsChecked);
             this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: this.checkboxElem.dsChecked });
             return;
         }
         const target = event.target;
-        if (this.getChildCheckboxElements().includes(target)) {
+        const checkbox = target.closest('ds-checkbox');
+        if (this.getChildCheckboxElements().includes(checkbox)) {
             const previousCheckedChildElementCount = this.checkedChildElementCount;
-            this.updateCheckedChildElementCount(target.dsChecked);
+            this.updateCheckedChildElementCount(checkbox.dsChecked);
             if (this.checkedChildElementCount === this.childElementsCount && this.checkedChildElementCount > previousCheckedChildElementCount) {
                 this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
             }
@@ -157,9 +174,62 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
             this.updateCheckedChildElementCount(event.detail.checked);
         }
     }
+    focusedChildCheckboxObserver(newValue) {
+        if (!newValue) {
+            this.wasInvalidOnBlur = !this.internals?.validity.valid;
+            this.dsValidity.emit({
+                flag: this.internals?.validity.valid ? 'valid' : 'customError',
+                message: this.internals?.validationMessage,
+            });
+        }
+    }
+    listenFocus(e) {
+        this.focusedChildCheckbox = e.detail;
+    }
+    listenBlur(e) {
+        this.childBlurTimeout = setTimeout(() => {
+            if (e.detail === this.focusedChildCheckbox) {
+                this.focusedChildCheckbox = undefined;
+            }
+        }, 0);
+    }
     formResetCallback() {
-        this.internals?.setValidity({});
+        this.dsErrorText = '';
+        this.childElementsCount = 1;
+        this.checkedChildElementCount = 0;
+        this.isIndeterminate = false;
+        this.indeterminateChildCheckboxCount = 0;
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0].querySelector('input'));
+        }
+        else if (this.dsAllRequired) {
+            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0].querySelector('input'));
+        }
+        else {
+            this.internals?.setValidity({});
+        }
     }
+    connectedCallback() {
+        if (this.internals?.form) {
+            this.el.addEventListener('invalid', this.handleInvalid);
+        }
+    }
+    disconnectedCallback() {
+        if (this.internals?.form) {
+            this.el.removeEventListener('invalid', this.handleInvalid);
+        }
+        if (this.childBlurTimeout) {
+            clearTimeout(this.childBlurTimeout);
+        }
+        this.childBlurTimeout = null;
+    }
+    handleInvalid = (e) => {
+        e.preventDefault();
+        this.dsSubmitInvalid.emit({
+            flag: 'customError',
+            message: this.internals?.validationMessage,
+        });
+    };
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
     }
@@ -167,12 +237,15 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         this.childElementsCount = this.getChildElements().length;
         this.updateChildCheckboxes(element => {
             element.setAttribute('ds-errors-disabled', 'true');
+            if (this.dsAllRequired) {
+                element.setAttribute('ds-required', 'true');
+            }
         });
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0].querySelector('input'));
         }
         else if (this.dsAllRequired) {
-            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0].querySelector('input'));
         }
     }
     componentDidUpdate() {
@@ -188,23 +261,26 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         const legendClasses = classNames('ds-checkbox-group__legend');
         const assistiveTextClasses = classNames('ds-checkbox-group__assistive-text');
         const errorClasses = classNames('ds-checkbox-group__error', {
-            'ds-checkbox-group__error--visible': Boolean(this.dsErrorText),
+            'ds-checkbox-group__error--visible': !!this.dsErrorText,
         });
         const nestedClasses = classNames('ds-checkbox-group', 'ds-checkbox-group--inset');
         const checkboxesClasses = classNames('ds-checkbox-group__checkboxes');
-        const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h("fieldset", { key: '98ff7c5dd5c36c163ed1dfb177d5c0b28b93971a', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.dsLegend && h("legend", { key: '22274e3c85262fd08f69a9aa548d2910eaf30ce2', class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: '4566b9d66b0be262548ddecd11f6eda5acc6d399', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h("ds-checkbox", { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), (!!this.dsErrorText || this.dsRequired || this.dsAllRequired) && (h("div", { key: 'd0a2dbc9d46967de609096d9a398b040f5228807', class: errorClasses }, h("ds-input-validity", { key: '409b5d8fbd59b26245cb828146f28eec3d010aaa', id: this.errorTextId, dsText: this.getValidationMessage(), dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
+        return (h("fieldset", { key: '69466f304617e130865adf41dbb53efe0d4cd219', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.dsLegend && h("legend", { key: 'f03567e3964df4662b29e5a53e90f186d5cdb93b', class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: '8c2673e0e5cf9c3b55cdaae4342a67d94eb610ce', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h("ds-checkbox", { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), !!this.dsErrorText && (h("div", { key: '43a9e5d4d300f02f97e53be9bf1292b85e7d58fb', class: errorClasses }, h("ds-input-validity", { key: 'cb25890fca3d58d95e54cf4d208334c646e1cf55', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
+    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
     static get watchers() { return {
-        "dsDisabled": ["watchCheckboxDisabledChange"],
-        "dsChecked": ["watchCheckedChange"],
-        "isIndeterminate": ["watchIndeterminateChange"],
-        "dsErrorText": ["errorTextObserver"],
-        "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
+        "dsDisabled": ["dsDisabledObserver"],
+        "dsAllRequired": ["dsAllRequiredObserver"],
+        "dsChecked": ["dsCheckedObserver"],
+        "isIndeterminate": ["isIndeterminateObserver"],
+        "dsErrorText": ["dsErrorTextObserver"],
+        "checkedChildElementCount": ["checkedChildElementCountObserver"],
+        "focusedChildCheckbox": ["focusedChildCheckboxObserver"]
     }; }
     static get style() { return dsCheckboxGroupCss; }
-}, [65, "ds-checkbox-group", {
+}, [81, "ds-checkbox-group", {
         "dsLegend": [1, "ds-legend"],
         "dsAssistiveText": [1, "ds-assistive-text"],
         "dsDirection": [1, "ds-direction"],
@@ -220,14 +296,19 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         "checkedChildElementCount": [32],
         "isIndeterminate": [32],
         "indeterminateChildCheckboxCount": [32],
-        "showInternalsValidationMessage": [32],
+        "focusedChildCheckbox": [32],
+        "wasInvalidOnBlur": [32],
+        "dsFocus": [64],
+        "dsCheckValidity": [64],
         "setChecked": [64]
-    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "input", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"]], {
-        "dsDisabled": ["watchCheckboxDisabledChange"],
-        "dsChecked": ["watchCheckedChange"],
-        "isIndeterminate": ["watchIndeterminateChange"],
-        "dsErrorText": ["errorTextObserver"],
-        "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
+    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "input", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"], [0, "dsCheckboxFocused", "listenFocus"], [0, "dsCheckboxBlurred", "listenBlur"]], {
+        "dsDisabled": ["dsDisabledObserver"],
+        "dsAllRequired": ["dsAllRequiredObserver"],
+        "dsChecked": ["dsCheckedObserver"],
+        "isIndeterminate": ["isIndeterminateObserver"],
+        "dsErrorText": ["dsErrorTextObserver"],
+        "checkedChildElementCount": ["checkedChildElementCountObserver"],
+        "focusedChildCheckbox": ["focusedChildCheckboxObserver"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {