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

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

@@ -1,21 +1,30 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Mjp9Y-Sw.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var attributes = require('./attributes-BMbXzbwU.js');
+var utils = require('./utils-BjZTECpy.js');
+var controlUtils = require('./controlUtils-ofqiQxRF.js');
+require('./index-DwLFyR5p.js');
 
-const index = require('./index-bf84b124.js');
-const index$1 = require('./index-5b0b9d4c.js');
-const utils = require('./utils-3412cbed.js');
-
-const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";
-const DsCheckboxGroupStyle0 = dsCheckboxGroupCss;
+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 fieldsetIdGenerator = utils.idGenerator('ds-checkbox-group');
 const DsCheckboxGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsCheckboxGroupChange = index.createEvent(this, "dsCheckboxGroupChange", 7);
-        this.dsCheckboxGroupIndeterminateChildChange = index.createEvent(this, "dsCheckboxGroupIndeterminateChildChange", 7);
+        this.dsCheckboxGroupChange = index.createEvent(this, "dsCheckboxGroupChange");
+        this.dsCheckboxGroupIndeterminateChildChange = index.createEvent(this, "dsCheckboxGroupIndeterminateChildChange");
+        this.dsCheckboxGroupInvalidStateChange = index.createEvent(this, "dsCheckboxGroupInvalidStateChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    checkboxElem;
     fieldsetId = fieldsetIdGenerator.next().value;
     checkboxId = `${this.fieldsetId}-checkbox`;
     errorTextId = `${this.fieldsetId}-error`;
@@ -23,23 +32,45 @@ const DsCheckboxGroup = class {
     nestedId = `${this.fieldsetId}-nested`;
     inheritedAttributes = {};
     get el() { return index.getElement(this); }
+    internals;
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
-    legend;
-    assistiveText;
-    direction = 'vertical';
-    errorText = '';
-    text = '';
-    checked = false;
-    disabled = false;
-    childElementsCount = 0;
+    dsCheckboxGroupInvalidStateChange;
+    dsLegend;
+    dsAssistiveText;
+    dsDirection = 'vertical';
+    dsErrorText = '';
+    dsText = '';
+    dsChecked = false;
+    dsDisabled = false;
+    dsRequired = false;
+    dsAllRequired = false;
+    dsOptional = false;
+    dsOptionalText;
+    childElementsCount = 1;
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
+    showInternalsValidationMessage = false;
     elementIs = (localName) => (element) => element.localName === localName;
     elementIsCheckbox = this.elementIs('ds-checkbox');
     elementIsCheckboxGroup = this.elementIs('ds-checkbox-group');
-    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.errorText) && this.errorTextId].filter(Boolean).join(' ');
+    getLegendText = () => {
+        if (this.dsRequired || this.dsAllRequired) {
+            return controlUtils.getRequiredText(this.dsLegend);
+        }
+        if (this.dsOptional) {
+            return controlUtils.getOptionalText(this.dsLegend, this.dsOptionalText);
+        }
+        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() || []);
@@ -56,7 +87,7 @@ const DsCheckboxGroup = class {
     updateChildElementsChecked = (checked) => {
         this.checkedChildElementCount = checked ? this.childElementsCount : 0;
         this.updateChildElements((element) => {
-            element.checked = checked;
+            element.dsChecked = checked;
             if (this.elementIsCheckboxGroup(element)) {
                 (async () => {
                     await element.setChecked(checked);
@@ -69,7 +100,7 @@ const DsCheckboxGroup = class {
     }
     watchCheckboxDisabledChange(newValue) {
         this.updateChildElements((element) => {
-            element.disabled = newValue;
+            element.dsDisabled = newValue;
         });
     }
     watchCheckedChange(newValue) {
@@ -78,77 +109,106 @@ const DsCheckboxGroup = class {
     watchIndeterminateChange(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
+    errorTextObserver(errorText) {
+        this.dsCheckboxGroupInvalidStateChange.emit(!!errorText);
+    }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
-    watchCheckedChildElementCountChange(newValue, oldValue) {
-        this.isIndeterminate =
-            this.checkedChildElementCount !== this.childElementsCount && this.checkedChildElementCount < this.childElementsCount && this.checkedChildElementCount > 0;
-        if (newValue === this.childElementsCount && newValue > oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
+    watchCheckedChildElementCountChange() {
+        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'));
         }
-        else if (oldValue === this.childElementsCount && newValue < oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+        else if (this.dsAllRequired && this.checkedChildElementCount !== this.childElementsCount) {
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+        }
+        else {
+            this.internals?.setValidity({ valueMissing: false });
         }
     }
-    updateCheckedChildElementCount = (event) => {
-        if (event.detail.checked) {
-            this.checkedChildElementCount = this.checkedChildElementCount === this.childElementsCount ? this.checkedChildElementCount : this.checkedChildElementCount + 1;
+    updateCheckedChildElementCount = (checked) => {
+        if (checked) {
+            this.checkedChildElementCount = Math.min(this.childElementsCount, this.checkedChildElementCount + 1);
         }
         else {
-            this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
+            this.checkedChildElementCount = Math.max(0, this.checkedChildElementCount - 1);
         }
     };
     listenCheckboxChange(event) {
-        if (event.detail.id === this.checkboxId) {
-            this.updateChildElementsChecked(event.detail.checked);
+        if (!this.showInternalsValidationMessage) {
+            this.showInternalsValidationMessage = true;
+        }
+        if (event.target === this.el) {
+            this.updateChildElementsChecked(this.checkboxElem.dsChecked);
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: this.checkboxElem.dsChecked });
             return;
         }
-        if (this.getChildCheckboxElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+        const target = event.target;
+        if (this.getChildCheckboxElements().includes(target)) {
+            const previousCheckedChildElementCount = this.checkedChildElementCount;
+            this.updateCheckedChildElementCount(target.dsChecked);
+            if (this.checkedChildElementCount === this.childElementsCount && this.checkedChildElementCount > previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
+            }
+            else if (previousCheckedChildElementCount === this.childElementsCount && this.checkedChildElementCount < previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+            }
         }
     }
     listenCheckboxGroupChange(event) {
         if (this.getChildElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+            event.stopPropagation();
+            this.updateCheckedChildElementCount(event.detail.checked);
         }
     }
-    setChildElementCount = () => {
-        this.childElementsCount = this.getChildElements().length;
-    };
+    formResetCallback() {
+        this.internals?.setValidity({});
+    }
     componentWillLoad() {
-        this.inheritedAttributes = utils.inheritAriaAttributes(this.el, ['aria-labelledby']);
+        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-labelledby']);
     }
     componentDidLoad() {
-        this.setChildElementCount();
+        this.childElementsCount = this.getChildElements().length;
         this.updateChildCheckboxes(element => {
-            element.setAttribute('data-errors-disabled', 'true');
+            element.setAttribute('ds-errors-disabled', 'true');
         });
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+        }
+        else if (this.dsAllRequired) {
+            this.internals?.setValidity({ valueMissing: true }, controlUtils.allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+        }
     }
     componentDidUpdate() {
-        this.setChildElementCount();
+        const childElementCount = this.getChildElements().length;
+        if (this.childElementsCount !== childElementCount) {
+            this.childElementsCount = childElementCount;
+        }
     }
     render() {
         const classes = index$1.classNames('ds-checkbox-group', {
-            'ds-checkbox-group--horizontal': this.direction === 'horizontal',
+            'ds-checkbox-group--horizontal': this.dsDirection === 'horizontal',
         });
         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': Boolean(this.errorText),
+            'ds-checkbox-group__error--visible': Boolean(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: '1029763130b4d2d138679c9f84ec72c0231fcc83', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && index.h("legend", { key: 'a9be37aab510d5e402841c8bbda64190548bc1ea', class: legendClasses }, this.legend), this.assistiveText && (index.h("small", { key: '0ae42c2b46e52dad0570ad120180e662db43f2fa', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (index.h(index.Fragment, null, index.h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), index.h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, index.h("slot", null)))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), index.h("div", { key: '3ea5bb7991a99c676cb50a24d1a679b6f68c96bf', class: errorClasses }, index.h("ds-input-validity", { key: '8d5ca5e80b2a5f985e09bf7039538a5a13278e8e', id: this.errorTextId, text: this.errorText, type: "error" }))));
+        return (index.h("fieldset", { key: '98ff7c5dd5c36c163ed1dfb177d5c0b28b93971a', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.dsLegend && index.h("legend", { key: '22274e3c85262fd08f69a9aa548d2910eaf30ce2', class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (index.h("small", { key: '4566b9d66b0be262548ddecd11f6eda5acc6d399', 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-labelledby": this.checkboxId, class: nestedClasses }, index.h("slot", null)))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), (!!this.dsErrorText || this.dsRequired || this.dsAllRequired) && (index.h("div", { key: 'd0a2dbc9d46967de609096d9a398b040f5228807', class: errorClasses }, index.h("ds-input-validity", { key: '409b5d8fbd59b26245cb828146f28eec3d010aaa', id: this.errorTextId, dsText: this.getValidationMessage(), dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
-        "disabled": ["watchCheckboxDisabledChange"],
-        "checked": ["watchCheckedChange"],
+        "dsDisabled": ["watchCheckboxDisabledChange"],
+        "dsChecked": ["watchCheckedChange"],
         "isIndeterminate": ["watchIndeterminateChange"],
+        "dsErrorText": ["errorTextObserver"],
         "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }; }
 };
-DsCheckboxGroup.style = DsCheckboxGroupStyle0;
+DsCheckboxGroup.style = dsCheckboxGroupCss;
 
 exports.ds_checkbox_group = DsCheckboxGroup;

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

@@ -1,21 +1,19 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Mjp9Y-Sw.js');
+var index$2 = require('./index-Bp6Dd2i1.js');
+var attributes = require('./attributes-BMbXzbwU.js');
+var controlUtils = require('./controlUtils-ofqiQxRF.js');
+var index$1 = require('./index-DwLFyR5p.js');
+var utils = require('./utils-BjZTECpy.js');
 
-const index = require('./index-bf84b124.js');
-const index$1 = require('./index-5b0b9d4c.js');
-const utils = require('./utils-3412cbed.js');
-const controlUtils = require('./controlUtils-041de0fd.js');
-const store = require('./store-9bd20f3c.js');
-
-const dsCheckboxCss = ".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;word-wrap:break-word;word-break:break-all;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;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-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
-const DsCheckboxStyle0 = dsCheckboxCss;
+const dsCheckboxCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:flex-start;flex-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:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input: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 checkboxIdGenerator = utils.idGenerator('ds-checkbox');
 const DsCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsCheckboxInput = index.createEvent(this, "dsCheckboxInput", 7);
+        this.dsChange = index.createEvent(this, "dsChange");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -24,101 +22,109 @@ const DsCheckbox = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
     }
+    checkboxGroup = null;
     inputElem;
     labelId;
     inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
-    initialChecked;
     labelClicked = false;
     get el() { return index.getElement(this); }
     internals;
-    dsCheckboxInput;
-    identifier = checkboxIdGenerator.next().value;
-    checked = false;
-    legend;
-    assistiveText;
-    text;
-    indeterminate = false;
-    disabled = false;
-    errorText = '';
-    errorsDisabled = false;
-    required = false;
-    optional = false;
-    optionalText;
-    ariaLabel;
-    value = this.checked.toString();
+    dsId = checkboxIdGenerator.next().value;
+    dsChecked = false;
+    dsLegend;
+    dsAssistiveText;
+    dsText;
+    dsIndeterminate = false;
+    dsDisabled = false;
+    dsErrorText = '';
+    dsErrorsDisabled = false;
+    dsRequired = false;
+    dsOptional = false;
+    dsOptionalText;
+    dsAriaLabel;
+    dsChange;
+    invalid = !!this.dsErrorText;
+    initialChecked = this.dsChecked;
     validationMessage;
     setIds = () => {
-        this.labelId = `${this.identifier}-label`;
-        this.inputValidityId = `${this.identifier}-validity`;
-        this.assistiveTextId = `${this.identifier}-assistive-text`;
+        this.labelId = `${this.dsId}-label`;
+        this.inputValidityId = `${this.dsId}-validity`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
     };
-    getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     getLegendText = () => {
-        if (this.required) {
-            return controlUtils.getRequiredText(this.legend);
+        if (this.dsRequired) {
+            return controlUtils.getRequiredText(this.dsLegend);
         }
-        if (this.optional) {
-            return controlUtils.getOptionalText(this.legend, this.optionalText);
+        if (this.dsOptional) {
+            return controlUtils.getOptionalText(this.dsLegend, this.dsOptionalText);
         }
-        return this.legend;
+        return this.dsLegend;
     };
     getCheckboxText = () => {
-        if (this.legend) {
-            return this.text;
+        if (this.dsLegend) {
+            return this.dsText;
         }
-        if (this.required) {
-            return controlUtils.getRequiredText(this.text);
+        if (this.dsRequired) {
+            return controlUtils.getRequiredText(this.dsText);
         }
-        if (this.optional) {
-            return controlUtils.getOptionalText(this.text, this.optionalText);
+        if (this.dsOptional) {
+            return controlUtils.getOptionalText(this.dsText, this.dsOptionalText);
         }
-        return this.text;
-    };
-    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
-    restoreInitialState = () => {
-        this.checked = this.initialChecked;
-        this.value = this.checked.toString();
-        this.internals?.setValidity({});
-        this.internals?.setFormValue(this.value);
-    };
-    setInitialState = () => {
-        this.initialChecked = this.checked;
-        this.value = this.checked.toString();
-        this.internals?.setFormValue(this.value);
+        return this.dsText;
     };
+    getAriaDescribedBy = () => [Boolean(this.dsAssistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
     formResetCallback() {
-        this.restoreInitialState();
+        this.dsChecked = this.initialChecked;
+        this.internals?.setValidity({});
+        this.internals?.setFormValue(this.dsChecked.toString());
     }
+    connectedCallback() {
+        this.checkboxGroup = this.el.closest('ds-checkbox-group');
+        if (this.checkboxGroup) {
+            this.invalid = !!this.checkboxGroup.dsErrorText;
+            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.checkboxGroup) {
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.checkboxGroup = null;
+    }
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
     componentWillLoad() {
-        this.setInitialState();
         this.setIds();
         this.inheritedAttributes = {
-            ...utils.inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
-            ...utils.inheritAttributes(this, this.el),
+            ...attributes.inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
+            ...attributes.inheritAttributes(this, this.el),
         };
-        if (store.isValidation('server') || this.errorText) {
+        if (index$1.isValidation('server') || this.dsErrorText) {
             this.validationMessage = this.getValidationMessage();
         }
     }
+    dsCheckedObserver(isChecked) {
+        this.dsChange.emit(isChecked);
+    }
     handleInput = (e) => {
         const target = e.target;
-        this.checked = target.checked;
-        this.value = target.checked.toString();
-        this.internals?.setFormValue(this.value);
-        this.dsCheckboxInput.emit({ id: this.identifier, checked: target.checked });
-        if (store.isValidation('client') && this.validationMessage) {
+        this.dsChecked = target.checked;
+        this.internals?.setFormValue(target.checked.toString());
+        if (index$1.isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter') {
-            this.inputElem.dispatchEvent(new Event('input'));
+            this.inputElem.click();
         }
     };
     handleBlur = () => {
-        if (store.isValidation('client') && !this.labelClicked) {
+        if (index$1.isValidation('client') && !this.labelClicked) {
             this.validationMessage = this.getValidationMessage();
         }
         this.labelClicked = false;
@@ -130,33 +136,36 @@ const DsCheckbox = class {
         this.labelClicked = false;
     };
     renderCheckbox() {
-        const classes = index$1.classNames('ds-checkbox', {
-            'ds-checkbox--disabled': this.disabled,
-            'ds-checkbox--no-margin': Boolean(!this.text),
+        const classes = index$2.classNames('ds-checkbox', {
+            'ds-checkbox--disabled': this.dsDisabled,
+            'ds-checkbox--no-margin': Boolean(!this.dsText),
         });
-        const inputClasses = index$1.classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': Boolean(this.errorText),
+        const inputClasses = index$2.classNames('ds-checkbox__input', {
+            'ds-checkbox__input--invalid': Boolean(this.dsErrorText) || this.invalid,
         });
-        const errorClasses = index$1.classNames('ds-checkbox-error', {
+        const errorClasses = index$2.classNames('ds-checkbox-error', {
             'ds-checkbox-error--visible': Boolean(this.validationMessage),
         });
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, index.h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.value, disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": utils.getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (index.h("div", { class: errorClasses }, index.h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
+        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, index.h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.dsChecked.toString(), disabled: this.dsDisabled, required: this.dsRequired, id: this.dsId, "aria-describedby": ariaDescribedBy, "aria-label": this.dsAriaLabel, "aria-invalid": this.dsErrorText ? true : undefined, ...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" })))));
     }
     renderFieldset() {
-        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.assistiveText && (index.h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.renderCheckbox()));
+        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');
+        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() {
-        if (this.legend) {
+        if (this.dsLegend) {
             return this.renderFieldset();
         }
         return this.renderCheckbox();
     }
     static get formAssociated() { return true; }
+    static get watchers() { return {
+        "dsChecked": ["dsCheckedObserver"]
+    }; }
 };
-DsCheckbox.style = DsCheckboxStyle0;
+DsCheckbox.style = dsCheckboxCss;
 
 exports.ds_checkbox = DsCheckbox;