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

package/dist/components/ds-card.js

@@ -0,0 +1,91 @@
+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 DsCard$1 = proxyCustomElement(class DsCard extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    dsVariant = 'filled';
+    dsHeading;
+    dsHeadingLevel = 3;
+    dsDescription;
+    dsUrl;
+    dsUrlTarget = '_blank';
+    dsImageUrl;
+    dsImageAlt = '';
+    dsEyebrow;
+    dsSubtitle;
+    dsShowArrow = true;
+    get el() { return this; }
+    handleClick(e) {
+        const clickedLink = e.composedPath().find((el) => el.tagName === 'A');
+        if (!clickedLink && this.dsUrl) {
+            const headingLink = this.el.shadowRoot?.querySelector('a.ds-card__heading__link');
+            if (headingLink) {
+                headingLink.click();
+            }
+        }
+    }
+    handleKeydown(e) {
+        if ((e.key === 'Enter') && this.dsUrl) {
+            e.preventDefault();
+            const headingLink = this.el.shadowRoot?.querySelector('a.ds-card__heading__link');
+            if (headingLink) {
+                headingLink.click();
+            }
+        }
+    }
+    render() {
+        const classes = classNames('ds-card', `ds-card--${this.dsVariant}`, {
+            [`ds-card--link`]: Boolean(this.dsUrl),
+        });
+        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 ?
+            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" }))))));
+    }
+    static get style() { return dsCardCss; }
+}, [1, "ds-card", {
+        "dsVariant": [1, "ds-variant"],
+        "dsHeading": [1, "ds-heading"],
+        "dsHeadingLevel": [2, "ds-heading-level"],
+        "dsDescription": [1, "ds-description"],
+        "dsUrl": [1, "ds-url"],
+        "dsUrlTarget": [1, "ds-url-target"],
+        "dsImageUrl": [1, "ds-image-url"],
+        "dsImageAlt": [1, "ds-image-alt"],
+        "dsEyebrow": [1, "ds-eyebrow"],
+        "dsSubtitle": [1, "ds-subtitle"],
+        "dsShowArrow": [4, "ds-show-arrow"]
+    }, [[2, "click", "handleClick"], [2, "keydown", "handleKeydown"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-card", "ds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsCard$1);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsCard = DsCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsCard, defineCustomElement };

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

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './index2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as inheritAriaAttributes } from './attributes.js';
+import { a as inheritAriaAttributes } from './attributes.js';
 import { i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
+import { g as getRequiredText, a as getOptionalText, b as atLeastOneOption, c as allOptions } from './controlUtils.js';
 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-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 = idGenerator('ds-checkbox-group');
 const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
@@ -14,9 +14,12 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange", 7);
-        this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange", 7);
+        this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange");
+        this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange");
+        this.dsCheckboxGroupInvalidStateChange = createEvent(this, "dsCheckboxGroupInvalidStateChange");
+        this.internals = this.attachInternals();
     }
+    checkboxElem;
     fieldsetId = fieldsetIdGenerator.next().value;
     checkboxId = `${this.fieldsetId}-checkbox`;
     errorTextId = `${this.fieldsetId}-error`;
@@ -24,23 +27,45 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     nestedId = `${this.fieldsetId}-nested`;
     inheritedAttributes = {};
     get el() { return 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 getRequiredText(this.dsLegend);
+        }
+        if (this.dsOptional) {
+            return 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() || []);
@@ -57,7 +82,7 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     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);
@@ -70,7 +95,7 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     }
     watchCheckboxDisabledChange(newValue) {
         this.updateChildElements((element) => {
-            element.disabled = newValue;
+            element.dsDisabled = newValue;
         });
     }
     watchCheckedChange(newValue) {
@@ -79,94 +104,129 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     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 }, 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 }, 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 = 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 }, atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+        }
+        else if (this.dsAllRequired) {
+            this.internals?.setValidity({ valueMissing: true }, 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 = classNames('ds-checkbox-group', {
-            'ds-checkbox-group--horizontal': this.direction === 'horizontal',
+            'ds-checkbox-group--horizontal': this.dsDirection === 'horizontal',
         });
         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.errorText),
+            'ds-checkbox-group__error--visible': Boolean(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: '1029763130b4d2d138679c9f84ec72c0231fcc83', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: 'a9be37aab510d5e402841c8bbda64190548bc1ea', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: '0ae42c2b46e52dad0570ad120180e662db43f2fa', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: 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))), h("div", { key: '3ea5bb7991a99c676cb50a24d1a679b6f68c96bf', class: errorClasses }, h("ds-input-validity", { key: '8d5ca5e80b2a5f985e09bf7039538a5a13278e8e', id: this.errorTextId, text: this.errorText, type: "error" }))));
+        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" })))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
-        "disabled": ["watchCheckboxDisabledChange"],
-        "checked": ["watchCheckedChange"],
+        "dsDisabled": ["watchCheckboxDisabledChange"],
+        "dsChecked": ["watchCheckedChange"],
         "isIndeterminate": ["watchIndeterminateChange"],
+        "dsErrorText": ["errorTextObserver"],
         "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }; }
-    static get style() { return DsCheckboxGroupStyle0; }
-}, [1, "ds-checkbox-group", {
-        "legend": [1],
-        "assistiveText": [1, "assistive-text"],
-        "direction": [1],
-        "errorText": [1, "error-text"],
-        "text": [1],
-        "checked": [4],
-        "disabled": [4],
+    static get style() { return dsCheckboxGroupCss; }
+}, [65, "ds-checkbox-group", {
+        "dsLegend": [1, "ds-legend"],
+        "dsAssistiveText": [1, "ds-assistive-text"],
+        "dsDirection": [1, "ds-direction"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsText": [1, "ds-text"],
+        "dsChecked": [4, "ds-checked"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsRequired": [4, "ds-required"],
+        "dsAllRequired": [4, "ds-all-required"],
+        "dsOptional": [4, "ds-optional"],
+        "dsOptionalText": [1, "ds-optional-text"],
         "childElementsCount": [32],
         "checkedChildElementCount": [32],
         "isIndeterminate": [32],
         "indeterminateChildCheckboxCount": [32],
+        "showInternalsValidationMessage": [32],
         "setChecked": [64]
-    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "dsCheckboxInput", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"]], {
-        "disabled": ["watchCheckboxDisabledChange"],
-        "checked": ["watchCheckedChange"],
+    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "input", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"]], {
+        "dsDisabled": ["watchCheckboxDisabledChange"],
+        "dsChecked": ["watchCheckedChange"],
         "isIndeterminate": ["watchIndeterminateChange"],
+        "dsErrorText": ["errorTextObserver"],
         "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }]);
 function defineCustomElement$1() {