@uh-design-system/component-library 0.6.1-rc.0 → 0.7.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CsSCWgdp.js');
+var index = require('./index-Cz4FoSKZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-BjZTECpy.js');
 
@@ -47,10 +47,10 @@ const DsCard = class {
         const HeadingTag = `h${this.dsHeadingLevel}`;
         const randomId = Math.random().toString(36).substring(2, 9);
         const headingId = `${utils.slugifyText(this.dsHeading)}-${randomId}`;
-        return (index.h("article", { key: '39fa69acafabb5201adbfe5f361bbb6a82fbad66', "aria-labelledby": headingId, class: classes, onClick: (e) => this.handleClick(e), onKeyDown: (e) => this.handleKeydown(e) }, this.dsImageUrl && (index.h("div", { key: '47207c839c55179082f3b8060a93ab4622fefa08', class: "ds-card__image-container" }, index.h("img", { key: 'df83bfd1a75845752f746235b12df453de51ee04', class: "ds-card__image", src: this.dsImageUrl, alt: this.dsImageAlt }))), index.h("div", { key: 'c2e3f31bfc20d8b97d6c7485e348b60c84d9f9ae', class: "ds-card__content" }, index.h("div", { key: '70612da3145bf79f0a1e07c7b3cddbb309247286', class: "ds-card__content--top" }, index.h("div", { key: '0813a2eee2575371b561ce260215c0fc8175e4a0', class: "ds-card__content--top__text" }, this.dsUrl ?
+        return (index.h("article", { key: '4275de582a0f175018e04fba3201895ec3a75270', "aria-labelledby": headingId, class: classes, onClick: (e) => this.handleClick(e), onKeyDown: (e) => this.handleKeydown(e) }, this.dsImageUrl && (index.h("div", { key: '3a1b3b9b4b236ade25efe88037b3c032971943d5', class: "ds-card__image-container" }, index.h("img", { key: '49503128ed1b968327f6548f4afae33a0ddec813', class: "ds-card__image", src: this.dsImageUrl, alt: this.dsImageAlt }))), index.h("div", { key: '4e5095d1eee487f72e1e5b523c33ea7f17cc6c65', class: "ds-card__content" }, index.h("div", { key: '29bcae828a5abda0f46f1e1695e5c88e4dd9eedf', class: "ds-card__content--top" }, index.h("div", { key: '791ef1f0cd45f25fbf2a518a5884cc1e830eb74a', class: "ds-card__content--top__text" }, this.dsUrl ?
             index.h(HeadingTag, { class: "ds-card__heading", id: headingId }, index.h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: "ds-card__heading__link" }, this.dsHeading))
             :
-                index.h(HeadingTag, { class: "ds-card__heading" }, this.dsHeading), this.dsEyebrow && index.h("div", { key: '7b93368c780b3df3fd8634f65af2589810ac9953', class: "ds-card__eyebrow" }, this.dsEyebrow), this.dsSubtitle && index.h("div", { key: 'edc5f5a6e05b1c901a69a2ff6ccde88b7a1f9c57', class: "ds-card__subtitle" }, this.dsSubtitle)), (this.dsUrl && this.dsShowArrow) && index.h("ds-icon", { key: '38fdc6581093d4ae820100b61c61d94b92690646', "ds-name": "arrow_forward" })), index.h("div", { key: '2b068303f4880827800ec6dad5eb86bc8365bda5', class: "ds-card__content--bottom" }, this.dsDescription && index.h("p", { key: 'e62f55d389866099320ffc28846adff926e204d2', class: "ds-card__description" }, this.dsDescription), index.h("div", { key: '202aeba23c27b074dffdddbe7e6d5b59ab8e90eb', class: "ds-card__slot--content" }, index.h("slot", { key: '76c41243b723e124d91f5ac7b33c9f6baa99ae27', name: "content" })), index.h("div", { key: 'f728bd9c984773f930972181694ebb67bdad5cf6', class: "ds-card__slot--footer" }, index.h("slot", { key: '8ea95152f2a4fe8ff45f331c371de2d93e8e45fa', name: "footer" }))))));
+                index.h(HeadingTag, { class: "ds-card__heading" }, this.dsHeading), this.dsEyebrow && index.h("div", { key: 'e084ac07556497e960dade75e0893640dc67cf9f', class: "ds-card__eyebrow" }, this.dsEyebrow), this.dsSubtitle && index.h("div", { key: '8882de57288421012851a81b2d06ee2a11127d2d', class: "ds-card__subtitle" }, this.dsSubtitle)), (this.dsUrl && this.dsShowArrow) && index.h("ds-icon", { key: '134ce4d424a4d2a235fc2cd6c2b392c053914a95', "ds-name": "arrow_forward" })), index.h("div", { key: 'fd4101fb43b3d3e2fbd92075a33e7715422ee27d', class: "ds-card__content--bottom" }, this.dsDescription && index.h("p", { key: '1ba650951ecc252a71e8787265ce2cfd3b3c7f97', class: "ds-card__description" }, this.dsDescription), index.h("div", { key: '337de8c68477b130c7f9eb1be7c7e4623748b622', class: "ds-card__slot--content" }, index.h("slot", { key: 'db10985cfbf292de7941bec168d74656f5214512', name: "content" })), index.h("div", { key: '9b425156a340cc4d318af11e0b485edcd49528f6', class: "ds-card__slot--footer" }, index.h("slot", { key: '4a54f803b3d276354d61e00277ff1367505d77ff', name: "footer" }))))));
     }
 };
 DsCard.style = dsCardCss;

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CsSCWgdp.js');
+var index = require('./index-Cz4FoSKZ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-BMbXzbwU.js');
 var utils = require('./utils-BjZTECpy.js');
-var controlUtils = require('./controlUtils-CBILjwNF.js');
-require('./index-D56lnXzC.js');
+var controlUtils = require('./controlUtils-vlo14zME.js');
+require('./index-CNUFAH0H.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 = utils.idGenerator('ds-checkbox-group');
 const DsCheckboxGroup = class {
@@ -16,6 +16,8 @@ const DsCheckboxGroup = class {
         this.dsCheckboxGroupChange = index.createEvent(this, "dsCheckboxGroupChange");
         this.dsCheckboxGroupIndeterminateChildChange = index.createEvent(this, "dsCheckboxGroupIndeterminateChildChange");
         this.dsCheckboxGroupInvalidStateChange = index.createEvent(this, "dsCheckboxGroupInvalidStateChange");
+        this.dsSubmitInvalid = index.createEvent(this, "dsSubmitInvalid");
+        this.dsValidity = index.createEvent(this, "dsValidity");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -37,6 +39,8 @@ const DsCheckboxGroup = class {
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
     dsCheckboxGroupInvalidStateChange;
+    dsSubmitInvalid;
+    dsValidity;
     dsLegend;
     dsAssistiveText;
     dsDirection = 'vertical';
@@ -48,16 +52,25 @@ const DsCheckboxGroup = class {
     dsAllRequired = false;
     dsOptional = false;
     dsOptionalText;
-    validationMessage;
     childElementsCount = 1;
     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 controlUtils.getRequiredText(this.dsLegend);
@@ -67,12 +80,6 @@ const DsCheckboxGroup = class {
         }
         return this.dsLegend;
     };
-    getAriaDescribedBy = () => [!!this.dsAssistiveText && this.assistiveTextId, (!!this.dsErrorText || (this.showInternalsValidationMessage && !!this.internals?.validationMessage)) && this.errorTextId]
-        .filter(Boolean)
-        .join(' ');
-    getValidationMessage() {
-        return this.dsErrorText || (this.showInternalsValidationMessage ? this.internals?.validationMessage : '');
-    }
     getChildElements = () => {
         const slot = this.el.shadowRoot.querySelector('slot');
         return (slot?.assignedElements() || []);
@@ -80,6 +87,9 @@ const DsCheckboxGroup = class {
     getChildCheckboxElements = () => {
         return this.getChildElements().filter(this.elementIsCheckbox);
     };
+    getEnabledChildCheckboxElements = () => {
+        return this.getChildCheckboxElements().filter((element) => !element.dsDisabled);
+    };
     updateChildElements = (updateFn) => {
         this.getChildElements().forEach(updateFn);
     };
@@ -100,62 +110,61 @@ const DsCheckboxGroup = class {
     async setChecked(newValue) {
         this.updateChildElementsChecked(newValue);
     }
-    watchCheckboxDisabledChange(newValue) {
+    dsDisabledObserver(newValue) {
         this.updateChildElements((element) => {
             element.dsDisabled = newValue;
         });
     }
-    watchCheckboxAllRequiredChange(newValue) {
+    dsAllRequiredObserver(newValue) {
         this.updateChildElements((element) => {
             element.dsRequired = newValue;
         });
     }
-    watchCheckedChange(newValue) {
+    dsCheckedObserver(newValue) {
         this.updateChildElementsChecked(newValue);
     }
-    watchIndeterminateChange(newValue) {
+    isIndeterminateObserver(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
-    errorObserver(newValue) {
-        this.dsCheckboxGroupInvalidStateChange.emit(!!newValue);
+    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 }, controlUtils.atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getChildCheckboxElements()?.[0].querySelector('input'));
         }
         else if (this.dsAllRequired && this.checkedChildElementCount !== this.childElementsCount) {
-            this.internals?.setValidity({ valueMissing: true }, controlUtils.allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.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,
+            });
         }
-        this.validationMessage = this.getValidationMessage();
     }
     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 });
             }
@@ -171,9 +180,12 @@ const DsCheckboxGroup = class {
         }
     }
     focusedChildCheckboxObserver(newValue) {
-        if (!newValue && !this.showInternalsValidationMessage) {
-            this.showInternalsValidationMessage = true;
-            this.validationMessage = this.getValidationMessage();
+        if (!newValue) {
+            this.wasInvalidOnBlur = !this.internals?.validity.valid;
+            this.dsValidity.emit({
+                flag: this.internals?.validity.valid ? 'valid' : 'customError',
+                message: this.internals?.validationMessage,
+            });
         }
     }
     listenFocus(e) {
@@ -187,25 +199,42 @@ const DsCheckboxGroup = class {
         }, 0);
     }
     formResetCallback() {
-        this.validationMessage = undefined;
+        this.dsErrorText = '';
         this.childElementsCount = 1;
         this.checkedChildElementCount = 0;
         this.isIndeterminate = false;
         this.indeterminateChildCheckboxCount = 0;
-        this.showInternalsValidationMessage = false;
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getChildCheckboxElements()?.[0].querySelector('input'));
         }
         else if (this.dsAllRequired) {
-            this.internals?.setValidity({ valueMissing: true }, controlUtils.allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.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 = attributes.inheritAriaAttributes(this.el, ['aria-labelledby']);
     }
@@ -218,12 +247,11 @@ const DsCheckboxGroup = class {
             }
         });
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getChildCheckboxElements()?.[0].querySelector('input'));
         }
         else if (this.dsAllRequired) {
-            this.internals?.setValidity({ valueMissing: true }, controlUtils.allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.allOptions(), this.getChildCheckboxElements()?.[0].querySelector('input'));
         }
-        this.validationMessage = this.dsErrorText;
     }
     componentDidUpdate() {
         const childElementCount = this.getChildElements().length;
@@ -238,23 +266,22 @@ const DsCheckboxGroup = class {
         const legendClasses = index$1.classNames('ds-checkbox-group__legend');
         const assistiveTextClasses = index$1.classNames('ds-checkbox-group__assistive-text');
         const errorClasses = index$1.classNames('ds-checkbox-group__error', {
-            'ds-checkbox-group__error--visible': !!this.validationMessage,
+            'ds-checkbox-group__error--visible': !!this.dsErrorText,
         });
         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: 'ae18bc3a8f997f54a9c35205536ac52b8a2261c7', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.dsLegend && index.h("legend", { key: 'ee7c5a8e0c794e38e9af0d73217282d0543e75c0', class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (index.h("small", { key: '23da317a5729f9e63843765f8ae871a646d8b2f5', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (index.h(index.Fragment, null, index.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 }), index.h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, index.h("slot", null)))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), (!!this.validationMessage || this.dsRequired || this.dsAllRequired) && (index.h("div", { key: '847594c18944fc186ad74e433bd103632e10b8d8', class: errorClasses }, index.h("ds-input-validity", { key: '1c61490c57eef1534085663e6d76fa701cb34dfa', id: this.errorTextId, dsText: this.validationMessage, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
+        return (index.h("fieldset", { key: '69466f304617e130865adf41dbb53efe0d4cd219', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.dsLegend && index.h("legend", { key: 'f03567e3964df4662b29e5a53e90f186d5cdb93b', class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (index.h("small", { key: '8c2673e0e5cf9c3b55cdaae4342a67d94eb610ce', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (index.h(index.Fragment, null, index.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 }), index.h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, index.h("slot", null)))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), !!this.dsErrorText && (index.h("div", { key: '43a9e5d4d300f02f97e53be9bf1292b85e7d58fb', class: errorClasses }, index.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"],
-        "dsAllRequired": ["watchCheckboxAllRequiredChange"],
-        "dsChecked": ["watchCheckedChange"],
-        "isIndeterminate": ["watchIndeterminateChange"],
-        "validationMessage": ["errorObserver"],
-        "dsErrorText": ["errorObserver"],
-        "checkedChildElementCount": ["watchCheckedChildElementCountChange"],
+        "dsDisabled": ["dsDisabledObserver"],
+        "dsAllRequired": ["dsAllRequiredObserver"],
+        "dsChecked": ["dsCheckedObserver"],
+        "isIndeterminate": ["isIndeterminateObserver"],
+        "dsErrorText": ["dsErrorTextObserver"],
+        "checkedChildElementCount": ["checkedChildElementCountObserver"],
         "focusedChildCheckbox": ["focusedChildCheckboxObserver"]
     }; }
 };

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CsSCWgdp.js');
-var index$2 = require('./index-Bp6Dd2i1.js');
+var index = require('./index-Cz4FoSKZ.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-BMbXzbwU.js');
-var controlUtils = require('./controlUtils-CBILjwNF.js');
-var index$1 = require('./index-D56lnXzC.js');
+var controlUtils = require('./controlUtils-vlo14zME.js');
 var utils = require('./utils-BjZTECpy.js');
+require('./index-CNUFAH0H.js');
 
-const dsCheckboxCss = ":root,:host{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox__input{cursor:pointer;appearance:none;background-color:var(--ds-palette-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-palette-black-50)}.ds-checkbox__input:hover{background-color:var(--ds-palette-black-10)}.ds-checkbox__input:active{background-color:var(--ds-palette-black-20)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-palette-black-40);background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-palette-mainBlue-70);border-color:var(--ds-overlay-black-00)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-palette-mainBlue-90)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-overlay-black-10)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-palette-black-40)}.ds-checkbox__span--optional{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
+const dsCheckboxCss = ".sc-ds-checkbox:root,.sc-ds-checkbox-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-checkbox-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend.sc-ds-checkbox{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text.sc-ds-checkbox{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-checkbox.sc-ds-checkbox{box-sizing:border-box;color:var(--ds-palette-black-95);display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox__input.sc-ds-checkbox{cursor:pointer;appearance:none;background-color:var(--ds-palette-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50)}.ds-checkbox__input.sc-ds-checkbox: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-checkbox__input.sc-ds-checkbox:hover,.ds-checkbox__input.sc-ds-checkbox:active{border-color:var(--ds-palette-black-50)}.ds-checkbox__input.sc-ds-checkbox:hover{background-color:var(--ds-palette-black-10)}.ds-checkbox__input.sc-ds-checkbox:active{background-color:var(--ds-palette-black-20)}.ds-checkbox__input.sc-ds-checkbox:disabled{cursor:not-allowed;color:var(--ds-palette-black-40);background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}@media (forced-colors: active){.ds-checkbox__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__input--invalid.sc-ds-checkbox,.ds-checkbox__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__input--invalid.sc-ds-checkbox:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input.sc-ds-checkbox:checked,.ds-checkbox__input.sc-ds-checkbox:indeterminate{background-color:var(--ds-palette-mainBlue-70);border-color:var(--ds-overlay-black-00)}.ds-checkbox__input.sc-ds-checkbox:checked:hover,.ds-checkbox__input.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-checkbox__input.sc-ds-checkbox:checked:active,.ds-checkbox__input.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-mainBlue-90)}.ds-checkbox__input.sc-ds-checkbox:checked:disabled,.ds-checkbox__input.sc-ds-checkbox:indeterminate:disabled{background-color:var(--ds-overlay-black-10)}.ds-checkbox__input.sc-ds-checkbox::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input.sc-ds-checkbox:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input.sc-ds-checkbox:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input.sc-ds-checkbox:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input.sc-ds-checkbox:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox--no-margin.sc-ds-checkbox .ds-checkbox__input.sc-ds-checkbox{margin-right:0}.ds-checkbox--disabled.sc-ds-checkbox{color:var(--ds-palette-black-40)}.ds-checkbox__span--optional.sc-ds-checkbox{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14)}.ds-checkbox.sc-ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox-error.sc-ds-checkbox{display:flex}.ds-checkbox-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
 
 const checkboxIdGenerator = utils.idGenerator('ds-checkbox');
 const DsCheckbox = class {
@@ -16,24 +16,23 @@ const DsCheckbox = class {
         this.dsChange = index.createEvent(this, "dsChange");
         this.dsCheckboxFocused = index.createEvent(this, "dsCheckboxFocused");
         this.dsCheckboxBlurred = index.createEvent(this, "dsCheckboxBlurred");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
+        this.dsSubmitInvalid = index.createEvent(this, "dsSubmitInvalid");
+        this.dsValidity = index.createEvent(this, "dsValidity");
     }
     checkboxGroup = null;
-    inputElem;
+    inputElement;
     labelId;
     inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
-    labelClicked = false;
     get el() { return index.getElement(this); }
-    internals;
+    dsChange;
+    dsCheckboxFocused;
+    dsCheckboxBlurred;
+    dsSubmitInvalid;
+    dsValidity;
     dsId = checkboxIdGenerator.next().value;
+    dsName = this.dsId;
     dsValue = this.dsId;
     dsChecked = false;
     dsLegend;
@@ -47,12 +46,9 @@ const DsCheckbox = class {
     dsOptional = false;
     dsOptionalText;
     dsAriaLabel;
-    dsChange;
-    dsCheckboxFocused;
-    dsCheckboxBlurred;
     groupInvalid = false;
-    validationMessage;
-    showInvalidState = false;
+    hasFocus = false;
+    wasInvalidOnBlur = false;
     initialChecked = false;
     isPressingEnter = false;
     setIds = () => {
@@ -60,21 +56,12 @@ const DsCheckbox = class {
         this.inputValidityId = `${this.dsId}-validity`;
         this.assistiveTextId = `${this.dsId}-assistive-text`;
     };
-    getValidationMessage = () => !this.dsErrorsDisabled
-        ? this.dsErrorText || (this.showInvalidState ? this.internals?.validationMessage : '') || (this.showInvalidState ? this.inputElem?.validationMessage : '')
-        : '';
-    getInvalid = () => {
-        if (this.checkboxGroup && this.groupInvalid) {
-            return true;
-        }
-        if (!this.dsErrorsDisabled && !!this.dsErrorText) {
-            return true;
-        }
-        if (this.showInvalidState && !!this.internals?.validationMessage) {
-            return true;
-        }
-        return this.showInvalidState && this.inputElem ? !this.inputElem.validity.valid : false;
-    };
+    async dsFocus() {
+        this.inputElement.focus();
+    }
+    async dsCheckValidity() {
+        return this.inputElement?.checkValidity();
+    }
     getLegendText = () => {
         if (this.dsRequired) {
             return controlUtils.getRequiredText(this.dsLegend);
@@ -96,63 +83,76 @@ const DsCheckbox = class {
         }
         return this.dsText;
     };
-    getAriaDescribedBy = () => [!!this.dsAssistiveText && this.assistiveTextId, !!this.getValidationMessage() && this.inputValidityId].filter(Boolean).join(' ');
     formResetCallback() {
+        this.dsErrorText = '';
         this.dsChecked = this.initialChecked;
-        this.showInvalidState = false;
         this.checkboxGroup = this.el.closest('ds-checkbox-group');
         if (this.checkboxGroup) {
             this.groupInvalid = !!this.checkboxGroup.dsErrorText;
+            this.dsErrorText = this.checkboxGroup.dsErrorText;
         }
     }
     connectedCallback() {
         this.checkboxGroup = this.el.closest('ds-checkbox-group');
         if (this.checkboxGroup) {
             this.groupInvalid = !!this.checkboxGroup.dsErrorText;
-            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+            this.dsErrorText = this.checkboxGroup.dsErrorText;
+            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateGroupInvalidState);
         }
     }
     disconnectedCallback() {
         if (this.checkboxGroup) {
-            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateGroupInvalidState);
         }
         this.checkboxGroup = null;
     }
-    updateInvalidState = (e) => {
-        this.groupInvalid = e.detail;
+    handleInvalid = (e) => {
+        e.preventDefault();
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsSubmitInvalid.emit({
+                    flag: key,
+                    message: controlUtils.validityMessage(key),
+                });
+                break;
+            }
+        }
+    };
+    updateGroupInvalidState = (e) => {
+        this.groupInvalid = !!e.detail;
+        this.dsErrorText = e.detail;
     };
     componentWillLoad() {
         this.setIds();
         this.inheritedAttributes = {
             ...attributes.inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
-            ...attributes.inheritAttributes(this, this.el, ['value']),
+            ...attributes.inheritAttributes(this, this.el, ['value', 'name', 'id']),
         };
         this.initialChecked = this.dsChecked;
-        if (index$1.isValidation('server') || this.dsErrorText) {
-            this.validationMessage = this.getValidationMessage();
-        }
-    }
-    componentDidLoad() {
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !this.dsChecked }, controlUtils.required(), this.el.shadowRoot?.querySelector('input'));
-        }
     }
     dsCheckedObserver(isChecked) {
-        this.dsChange.emit(isChecked);
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !isChecked }, controlUtils.required(), this.el.shadowRoot?.querySelector('input'));
+        this.dsChange.emit({ checked: isChecked, value: this.dsValue });
+        if (!this.wasInvalidOnBlur || this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsValidity.emit({
+                    flag: key,
+                    message: controlUtils.validityMessage(key),
+                });
+                break;
+            }
         }
-        this.internals?.setFormValue(isChecked ? this.dsValue : null);
     }
     handleInput = (e) => {
-        if (!this.showInvalidState) {
-            this.showInvalidState = true;
-        }
         const target = e.target;
         this.dsChecked = target.checked;
-        if (index$1.isValidation('client')) {
-            this.validationMessage = this.getValidationMessage();
-        }
     };
     handleKeyDown = (event) => {
         if (event.key === 'Enter' && !this.isPressingEnter) {
@@ -161,48 +161,50 @@ const DsCheckbox = class {
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter' && this.isPressingEnter) {
-            this.inputElem.click();
+            this.inputElement.click();
             this.isPressingEnter = false;
         }
     };
     handleFocus = () => {
+        this.hasFocus = true;
         this.dsCheckboxFocused.emit(this.dsId);
     };
     handleBlur = () => {
-        if (!this.showInvalidState) {
-            this.showInvalidState = true;
-        }
-        if (index$1.isValidation('client') && !this.labelClicked) {
-            this.validationMessage = this.getValidationMessage();
-        }
-        this.labelClicked = false;
+        this.hasFocus = false;
         this.dsCheckboxBlurred.emit(this.dsId);
-    };
-    handleMouseDown = () => {
-        this.labelClicked = true;
-    };
-    handleMouseUp = () => {
-        this.labelClicked = false;
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.wasInvalidOnBlur = key !== 'valid';
+                this.dsValidity.emit({
+                    flag: key,
+                    message: controlUtils.validityMessage(key),
+                });
+                break;
+            }
+        }
     };
     renderCheckbox() {
-        const isInvalid = this.getInvalid();
-        const classes = index$2.classNames('ds-checkbox', {
+        const classes = index$1.classNames('ds-checkbox', {
             'ds-checkbox--disabled': this.dsDisabled,
             'ds-checkbox--no-margin': !this.dsText,
         });
-        const inputClasses = index$2.classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': isInvalid,
+        const inputClasses = index$1.classNames('ds-checkbox__input', {
+            'ds-checkbox__input--invalid': !!this.dsErrorText,
         });
-        const errorClasses = index$2.classNames('ds-checkbox-error', {
-            'ds-checkbox-error--visible': !!this.validationMessage,
+        const errorClasses = index$1.classNames('ds-checkbox-error', {
+            'ds-checkbox-error--visible': !!this.dsErrorText,
         });
-        const ariaDescribedBy = this.getAriaDescribedBy();
-        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, index.h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, onFocus: this.handleFocus, value: this.dsValue, disabled: this.dsDisabled, required: this.dsRequired, id: this.dsId, "aria-describedby": ariaDescribedBy, "aria-label": this.dsAriaLabel, "aria-invalid": isInvalid, ...this.inheritedAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (index.h("div", { class: errorClasses }, index.h("ds-input-validity", { id: this.inputValidityId, dsText: this.validationMessage, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !this.dsErrorsDisabled && !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
+        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { id: this.labelId, class: classes }, index.h("input", { ref: inputElement => (this.inputElement = inputElement), type: "checkbox", class: inputClasses, checked: this.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, value: this.dsValue, disabled: this.dsDisabled, required: this.dsRequired, id: this.dsId, name: this.dsName, "aria-describedby": ariaDescribedBy, "aria-label": this.dsAriaLabel, "aria-invalid": !!this.dsErrorText, ...this.inheritedAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (index.h("div", { class: errorClasses }, index.h("ds-input-validity", { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     renderFieldset() {
-        const fieldsetClasses = index$2.classNames('ds-checkbox-fieldset');
-        const legendClasses = index$2.classNames('ds-checkbox-fieldset__legend');
-        const assistiveTextClasses = index$2.classNames('ds-checkbox-fieldset__assistive-text');
+        const fieldsetClasses = index$1.classNames('ds-checkbox-fieldset');
+        const legendClasses = index$1.classNames('ds-checkbox-fieldset__legend');
+        const assistiveTextClasses = index$1.classNames('ds-checkbox-fieldset__assistive-text');
         return (index.h("fieldset", { class: fieldsetClasses }, index.h("legend", { class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (index.h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.renderCheckbox()));
     }
     render() {
@@ -211,7 +213,6 @@ const DsCheckbox = class {
         }
         return this.renderCheckbox();
     }
-    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "dsChecked": ["dsCheckedObserver"]