npm - @uh-design-system/component-library - Versions diffs - 1.4.0 → 1.5.0-rc.0 - Mend

@uh-design-system/component-library 1.4.0 → 1.5.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2349) hide show

package/dist/esm/ds-card.entry.js CHANGED Viewed

@@ -1,21 +1,22 @@
-import { h, r as registerInstance, e as getElement } from './index-WKPTmD1Z.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-2cAuFdNH.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { i as idGenerator, d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
-import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils-Bh8gSuaY.js';
-import { c as cx } from './cx-jGcD6jB5.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-BR594Mvg.js';
+import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtils-D8DtmGgl.js';
+import { c as cx } from './cx-9wezIgaS.js';
 import { i as inheritAttributes, b as inheritAriaAttributes } from './attributes-DfbgRyXR.js';
-import './store-CaI4gcSt.js';
+import { c as componentFactory } from './componentFactory-DsTGhar0.js';
+import './store-Dlg9qbvG.js';
-const dsCardCss = () => `.ds-heading-2xl.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-40);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing, -1.2px);font-stretch:var(--ds-fontWidth-condense);line-height:48px;text-transform:uppercase}@media (min-width: 60rem){.ds-heading-2xl.sc-ds-card{font-size:var(--ds-fontSize-56);letter-spacing:var(--ds-letterSpacing-tight);line-height:64px}}.ds-heading-xl--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-xl.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-32);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing-tight);line-height:36px;font-stretch:var(--ds-fontWidth-condense);text-transform:none}@media (min-width: 60rem){.ds-heading-xl.sc-ds-card{font-size:var(--ds-fontSize-48);line-height:52px}}.ds-heading-lg--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-lg.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-24);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing-normal);line-height:28px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-lg.sc-ds-card{font-size:var(--ds-fontSize-32);font-weight:var(--ds-fontWeight-semiboldPlus);letter-spacing:var(--ds-letterSpacing-tight);line-height:36px}}.ds-heading-md--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-md.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semiboldPlus);letter-spacing:var(--ds-letterSpacing-normal);line-height:28px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-md.sc-ds-card{font-size:var(--ds-fontSize-24);line-height:24px}}.ds-heading-sm--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-sm.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:20px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-sm.sc-ds-card{font-size:var(--ds-fontSize-20);line-height:24px}}.ds-heading-xs--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-xs.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:18px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-xs.sc-ds-card{font-size:var(--ds-fontSize-18);line-height:20px}}.ds-heading-2xs--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-2xs.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:16px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-2xs.sc-ds-card{font-size:var(--ds-fontSize-16);line-height:18px}}.sc-ds-card-h{display:block}.ds-card__SPFJ1E.sc-ds-card{background-color:var(--ds-bgColor-white);border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);display:flex;flex-direction:column;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);hyphens:auto;height:auto;min-height:var(--ds-spacing-layout-2xLarge, 8rem);position:relative}.ds-card__SPFJ1E--fluid-height.sc-ds-card{height:100%}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:hover{background-color:var(--ds-bgColor-neutralLight-hover);cursor:pointer}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:hover .ds-card__SPFJ1E__icon.sc-ds-card{color:var(--ds-textColor-link-standalone-hover)}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:hover .ds-card__SPFJ1E__image-container--has-image.sc-ds-card::after{content:"";position:absolute;inset:0;background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:hover .ds-card__SPFJ1E__link--heading.sc-ds-card{text-decoration:none}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:active{background-color:var(--ds-bgColor-neutralLight-active);outline:none}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:active .ds-card__SPFJ1E__icon.sc-ds-card{color:var(--ds-textColor-link-standalone-hover)}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:active .ds-card__SPFJ1E__image-container--has-image.sc-ds-card::after{content:"";position:absolute;inset:0;background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:active .ds-card__SPFJ1E__link--heading.sc-ds-card{text-decoration:none}.ds-card__SPFJ1E.ds-card__SPFJ1E--link--full.sc-ds-card:focus-within{box-shadow:false 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * -1)}.ds-card__SPFJ1E.sc-ds-card .ds-card__SPFJ1E__link--full.sc-ds-card:after{content:"";position:absolute;inset:0}.ds-card__SPFJ1E--horizontal.sc-ds-card{flex-direction:column}@media (min-width: 30rem){.ds-card__SPFJ1E--horizontal.sc-ds-card{display:grid;grid-template:"image content" auto "image contentBottom" auto/auto 1fr}.ds-card__SPFJ1E--horizontal.sc-ds-card .ds-card__SPFJ1E__image-container.sc-ds-card{grid-area:image;height:100%;order:initial}.ds-card__SPFJ1E--horizontal.sc-ds-card .ds-card__SPFJ1E__content.sc-ds-card{grid-area:content;height:100%;order:initial}.ds-card__SPFJ1E--horizontal.sc-ds-card .ds-card__SPFJ1E__content--bottom.sc-ds-card{grid-area:contentBottom;order:initial}}.ds-card__SPFJ1E--filled.sc-ds-card{background-color:var(--ds-bgColor-neutralLight)}.ds-card__SPFJ1E__image-container.sc-ds-card{display:none}.ds-card__SPFJ1E__image-container--has-image.sc-ds-card{display:block;height:auto;order:1;position:relative;width:100%}@media (min-width: 30rem){.ds-card__SPFJ1E.sc-ds-card:not(.ds-card__SPFJ1E--vertical) .ds-card__SPFJ1E__image-container--has-image.sc-ds-card{max-width:var(--vertical-image-max-width, 200px)}}@media (min-width: 30rem){.ds-card__SPFJ1E.sc-ds-card:not(.ds-card__SPFJ1E--horizontal) .ds-card__SPFJ1E__image-container--has-image.sc-ds-card{max-height:var(--horizontal-image-max-height, auto)}}.ds-card__SPFJ1E--link--full.sc-ds-card .ds-card__SPFJ1E__image-container--has-image.sc-ds-card{pointer-events:none}.ds-card__SPFJ1E__tag.sc-ds-card{background-color:var(--ds-bgColor-black);color:var(--ds-textColor-white);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);left:-10px;letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);min-height:24px;padding-block:1.5px;padding-inline:var(--ds-spacing-2xSmall);position:absolute;top:1rem;z-index:2}.ds-card__SPFJ1E__image.sc-ds-card{width:100%;height:100%;object-fit:cover}.ds-card__SPFJ1E__content.sc-ds-card{display:flex;flex-direction:column;order:2;width:100%}.ds-card__SPFJ1E__content--top.sc-ds-card{align-items:flex-start;display:flex;gap:var(--ds-spacing-small);justify-content:space-between;order:2;padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small)}.ds-card__SPFJ1E__content--top__text.sc-ds-card{display:flex;flex-direction:column}.ds-card__SPFJ1E__content--bottom.sc-ds-card{order:4}.ds-card__SPFJ1E__eyebrow.sc-ds-card{color:var(--ds-textColor-secondary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);margin-bottom:var(--ds-spacing-2xSmall);order:1}.ds-card__SPFJ1E__heading-container.sc-ds-card{display:flex;flex-direction:column}.ds-card__SPFJ1E__heading--hyphenated.sc-ds-card{hyphens:auto}.ds-card__SPFJ1E__heading.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:20px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-card__SPFJ1E__heading.sc-ds-card{font-size:var(--ds-fontSize-20);line-height:24px}}.ds-card__SPFJ1E__heading.sc-ds-card{align-items:center;display:flex;margin:0;margin-bottom:var(--ds-spacing-3xSmall);justify-content:space-between;order:2;text-wrap:balance}.ds-card__SPFJ1E__heading.sc-ds-card .ds-card__SPFJ1E__link.sc-ds-card{color:var(--ds-textColor-default);text-decoration:none;outline:none}.ds-card__SPFJ1E__heading.sc-ds-card .ds-card__SPFJ1E__link.sc-ds-card:not(.ds-card__SPFJ1E__link--full):hover,.ds-card__SPFJ1E__heading.sc-ds-card .ds-card__SPFJ1E__link.sc-ds-card:not(.ds-card__SPFJ1E__link--full):active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:13%;text-underline-offset:12%;text-underline-position:from-font}.ds-card__SPFJ1E__heading.sc-ds-card .ds-card__SPFJ1E__link--heading.sc-ds-card{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-card__SPFJ1E__heading.sc-ds-card .ds-card__SPFJ1E__link--heading.sc-ds-card:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-card__SPFJ1E__subtitle.sc-ds-card,.ds-card__SPFJ1E__slot-subtitle.sc-ds-card{font-size:var(--ds-fontSize-16);font-family:var(--ds-fontFamily-body);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);order:3}.ds-card__SPFJ1E__description.sc-ds-card{-webkit-box-orient:vertical;-webkit-line-clamp:var(--description-line-clamp, "none");color:var(--ds-textColor-default);display:-webkit-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);letter-spacing:var(--ds-letterSpacing-wide);line-clamp:var(--description-line-clamp, "none");line-height:var(--ds-lineHeight-large);margin:0 0 var(--ds-spacing-small) 0;overflow:hidden;padding:0 var(--ds-spacing-small);text-wrap:pretty;order:3;max-width:var(--ds-card-description-max-width, none)}.ds-card__SPFJ1E__icon.sc-ds-card{color:var(--ds-textColor-primary);font-size:var(--ds-fontSize-20);font-weight:normal}.ds-card__SPFJ1E__slot-subtitle--hidden.sc-ds-card{display:none}`;
+const dsCardCss = () => `.ds-heading-2xl.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-40);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing, -1.2px);font-stretch:var(--ds-fontWidth-condense);line-height:48px;text-transform:uppercase}@media (min-width: 60rem){.ds-heading-2xl.sc-ds-card{font-size:var(--ds-fontSize-56);letter-spacing:var(--ds-letterSpacing-tight);line-height:64px}}.ds-heading-xl--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-xl.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-32);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing-tight);line-height:36px;font-stretch:var(--ds-fontWidth-condense);text-transform:none}@media (min-width: 60rem){.ds-heading-xl.sc-ds-card{font-size:var(--ds-fontSize-48);line-height:52px}}.ds-heading-lg--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-lg.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-24);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing-normal);line-height:28px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-lg.sc-ds-card{font-size:var(--ds-fontSize-32);font-weight:var(--ds-fontWeight-semiboldPlus);letter-spacing:var(--ds-letterSpacing-tight);line-height:36px}}.ds-heading-md--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-md.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semiboldPlus);letter-spacing:var(--ds-letterSpacing-normal);line-height:28px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-md.sc-ds-card{font-size:var(--ds-fontSize-24);line-height:24px}}.ds-heading-sm--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-sm.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:20px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-sm.sc-ds-card{font-size:var(--ds-fontSize-20);line-height:24px}}.ds-heading-xs--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-xs.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:18px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-xs.sc-ds-card{font-size:var(--ds-fontSize-18);line-height:20px}}.ds-heading-2xs--hyphenated.sc-ds-card{hyphens:auto}.ds-heading-2xs.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:16px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-heading-2xs.sc-ds-card{font-size:var(--ds-fontSize-16);line-height:18px}}.sc-ds-card-h{display:block}.ds-card__QIDqOT.sc-ds-card{background-color:var(--ds-bgColor-white);border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);display:flex;flex-direction:column;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);hyphens:auto;height:auto;min-height:var(--ds-spacing-layout-2xLarge, 8rem);position:relative}.ds-card__QIDqOT--fluid-height.sc-ds-card{height:100%}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:hover{background-color:var(--ds-bgColor-neutralLight-hover);cursor:pointer}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:hover .ds-card__QIDqOT__icon.sc-ds-card{color:var(--ds-textColor-link-standalone-hover)}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:hover .ds-card__QIDqOT__image-container--has-image.sc-ds-card::after{content:"";position:absolute;inset:0;background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:hover .ds-card__QIDqOT__link--heading.sc-ds-card{text-decoration:none}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:active{background-color:var(--ds-bgColor-neutralLight-active);outline:none}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:active .ds-card__QIDqOT__icon.sc-ds-card{color:var(--ds-textColor-link-standalone-hover)}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:active .ds-card__QIDqOT__image-container--has-image.sc-ds-card::after{content:"";position:absolute;inset:0;background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:active .ds-card__QIDqOT__link--heading.sc-ds-card{text-decoration:none}.ds-card__QIDqOT.ds-card__QIDqOT--link--full.sc-ds-card:focus-within{box-shadow:false 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * -1)}.ds-card__QIDqOT.sc-ds-card .ds-card__QIDqOT__link--full.sc-ds-card:after{content:"";position:absolute;inset:0}.ds-card__QIDqOT--horizontal.sc-ds-card{flex-direction:column}@media (min-width: 30rem){.ds-card__QIDqOT--horizontal.sc-ds-card{display:grid;grid-template:"image content" auto "image contentBottom" auto/auto 1fr}.ds-card__QIDqOT--horizontal.sc-ds-card .ds-card__QIDqOT__image-container.sc-ds-card{grid-area:image;height:100%;order:initial}.ds-card__QIDqOT--horizontal.sc-ds-card .ds-card__QIDqOT__content.sc-ds-card{grid-area:content;height:100%;order:initial}.ds-card__QIDqOT--horizontal.sc-ds-card .ds-card__QIDqOT__content--bottom.sc-ds-card{grid-area:contentBottom;order:initial}}.ds-card__QIDqOT--filled.sc-ds-card{background-color:var(--ds-bgColor-neutralLight)}.ds-card__QIDqOT__image-container.sc-ds-card{display:none}.ds-card__QIDqOT__image-container--has-image.sc-ds-card{display:block;height:auto;order:1;position:relative;width:100%}@media (min-width: 30rem){.ds-card__QIDqOT.sc-ds-card:not(.ds-card__QIDqOT--vertical) .ds-card__QIDqOT__image-container--has-image.sc-ds-card{max-width:var(--vertical-image-max-width, 200px)}}@media (min-width: 30rem){.ds-card__QIDqOT.sc-ds-card:not(.ds-card__QIDqOT--horizontal) .ds-card__QIDqOT__image-container--has-image.sc-ds-card{max-height:var(--horizontal-image-max-height, auto)}}.ds-card__QIDqOT--link--full.sc-ds-card .ds-card__QIDqOT__image-container--has-image.sc-ds-card{pointer-events:none}.ds-card__QIDqOT__tag.sc-ds-card{background-color:var(--ds-bgColor-black);color:var(--ds-textColor-white);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);left:-10px;letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);min-height:24px;padding-block:1.5px;padding-inline:var(--ds-spacing-2xSmall);position:absolute;top:1rem;z-index:2}.ds-card__QIDqOT__image.sc-ds-card{width:100%;height:100%;object-fit:cover}.ds-card__QIDqOT__content.sc-ds-card{display:flex;flex-direction:column;order:2;width:100%}.ds-card__QIDqOT__content--top.sc-ds-card{align-items:flex-start;display:flex;gap:var(--ds-spacing-small);justify-content:space-between;order:2;padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small)}.ds-card__QIDqOT__content--top__text.sc-ds-card{display:flex;flex-direction:column}.ds-card__QIDqOT__content--bottom.sc-ds-card{order:4}.ds-card__QIDqOT__eyebrow.sc-ds-card{color:var(--ds-textColor-secondary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);margin-bottom:var(--ds-spacing-2xSmall);order:1}.ds-card__QIDqOT__heading-container.sc-ds-card{display:flex;flex-direction:column}.ds-card__QIDqOT__heading--hyphenated.sc-ds-card{hyphens:auto}.ds-card__QIDqOT__heading.sc-ds-card{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:20px;font-stretch:var(--ds-fontWidth-normal);text-transform:none}@media (min-width: 60rem){.ds-card__QIDqOT__heading.sc-ds-card{font-size:var(--ds-fontSize-20);line-height:24px}}.ds-card__QIDqOT__heading.sc-ds-card{align-items:center;display:flex;margin:0;margin-bottom:var(--ds-spacing-3xSmall);justify-content:space-between;order:2;text-wrap:balance}.ds-card__QIDqOT__heading.sc-ds-card .ds-card__QIDqOT__link.sc-ds-card{color:var(--ds-textColor-default);text-decoration:none;outline:none}.ds-card__QIDqOT__heading.sc-ds-card .ds-card__QIDqOT__link.sc-ds-card:not(.ds-card__QIDqOT__link--full):hover,.ds-card__QIDqOT__heading.sc-ds-card .ds-card__QIDqOT__link.sc-ds-card:not(.ds-card__QIDqOT__link--full):active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:13%;text-underline-offset:12%;text-underline-position:from-font}.ds-card__QIDqOT__heading.sc-ds-card .ds-card__QIDqOT__link--heading.sc-ds-card{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-card__QIDqOT__heading.sc-ds-card .ds-card__QIDqOT__link--heading.sc-ds-card:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-card__QIDqOT__subtitle.sc-ds-card,.ds-card__QIDqOT__slot-subtitle.sc-ds-card{font-size:var(--ds-fontSize-16);font-family:var(--ds-fontFamily-body);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);order:3}.ds-card__QIDqOT__description.sc-ds-card{-webkit-box-orient:vertical;-webkit-line-clamp:var(--description-line-clamp, "none");color:var(--ds-textColor-default);display:-webkit-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);letter-spacing:var(--ds-letterSpacing-wide);line-clamp:var(--description-line-clamp, "none");line-height:var(--ds-lineHeight-large);margin:0 0 var(--ds-spacing-small) 0;overflow:hidden;padding:0 var(--ds-spacing-small);text-wrap:pretty;order:3;max-width:var(--ds-card-description-max-width, none)}.ds-card__QIDqOT__icon.sc-ds-card{color:var(--ds-textColor-primary);font-size:var(--ds-fontSize-20);font-weight:normal}.ds-card__QIDqOT__slot-subtitle--hidden.sc-ds-card{display:none}`;
-const cardIdGenerator = idGenerator('ds-card');
-const DsCard = class {
+const DsCard = class extends Mixin(componentFactory('ds-card')) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
     }
     linkIcon = 'arrow_forward';
     inheritedAttributes = {};
-    cardId = cardIdGenerator.next().value;
+    cardId = this.getUniqueId();
     get el() { return getElement(this); }
     dsLinkType = 'full';
     dsVariant = 'filled';
@@ -53,6 +54,7 @@ const DsCard = class {
         }
     }
     componentDidLoad() {
+        this.componentMounted();
         this.checkImageSlot();
     }
     isSlottedElement(element) {
@@ -108,17 +110,17 @@ const DsCard = class {
         const DsIcon = transformTagName('ds-icon', 'ds-card', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-card', this.el);
         const descriptionClamp = this.dsDescriptionClamp ? this.dsDescriptionClamp.toString() : 'none';
-        return (h("article", { key: 'fc9ea3131fae176552872efa2702ce3a1093fb59', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: '11a74e7d4a0dbecc6a82fd20c1c2718a9e5220d7', class: `${baseClass}__content` }, h("div", { key: '56a0eb6fd24688ff3609c0f74bd9e3c7ff63285b', class: {
+        return (h("article", { key: '2d1791ded132fe0555b0da15fd65dd80852e3b6f', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: 'e5e0c69a95b9ae7ffe13947b05281228ce621f23', class: `${baseClass}__content` }, h("div", { key: '3f852d0e6a15f3cd06851ff93735555fe62a83be', class: {
                 [`${baseClass}__content--top`]: true,
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
-            } }, h("div", { key: '9fc2f633e739ee22e01dc9efba397d8c29152c36', class: `${baseClass}__heading-container` }, this.dsUrl && this.dsLinkType !== 'none' ? (h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: linkClasses }, h("slot", { name: "heading" }, this.dsHeading), opensInNewTab(this.dsUrlTarget) && h(DsVisuallyHidden, { dsTag: "span" }, visuallyHiddenAssistiveText())))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsTag && this.hasImageSlot && h("span", { key: 'cef4fa8c42e5b8174e0870092086255353cde89c', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '61bd2b134a7321b645579236f2024221fd5b7fba', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: '136978f0b0fdb9f1de0e1827bee1a29725fa7e47', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '9e958f257dd6e1cba55536d76fedb139d3f375e0', class: classNames(`${baseClass}__slot-subtitle`, {
+            } }, h("div", { key: '82d318b9df697613d65ec7fbcb97979697539d8c', class: `${baseClass}__heading-container` }, this.dsUrl && this.dsLinkType !== 'none' ? (h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: linkClasses }, h("slot", { name: "heading" }, this.dsHeading), opensInNewTab(this.dsUrlTarget) && h(DsVisuallyHidden, { dsTag: "span" }, visuallyHiddenAssistiveText())))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsTag && this.hasImageSlot && h("span", { key: 'b3c42ce29e5bac045d61b6e5928de4e750e5b7c9', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '0953630b76867f8d1192c3bec394de66de222b52', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'e01ac46bfd6023d67a629b3f60560c4cc1f0e86c', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '10fa359e507bb3f3414fce207ab6886883190fc2', class: classNames(`${baseClass}__slot-subtitle`, {
                 [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
-            }) }, h("slot", { key: '2822a1eaaa013abbcc713512972ae9ba72845811', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: 'fc96c023ab6434c1f9556487ce2626f470a96557', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && (h("p", { key: '4ae570461ae03371141238fa340728fc4371573b', class: `${baseClass}__description`, style: { '--ds-card-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("div", { key: 'c7dadca86ac1dc379c25fc018c2f070693ab8199', class: classNames(`${baseClass}__content--bottom`, {
+            }) }, h("slot", { key: '6acc8c509822e413ac1471f6cd8d51a7231898a8', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: '843b9fab2fe7b9d216134d9405f68c941c60ad09', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && (h("p", { key: 'ea6fb67e2dfe971bcfda82406bc3d7d51026ad39', class: `${baseClass}__description`, style: { '--ds-card-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("div", { key: '4014a8121fe0a2aeab83a4ec1a7b6cc581a7b4bb', class: classNames(`${baseClass}__content--bottom`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, h("div", { key: '4c780ce7598fcc6bc115383738e46dba6834f66a', class: `${baseClass}__slot--content` }, h("slot", { key: '9650ba762386fbe0c154a8ce108eb086e6cffb33', name: "content" })), h("div", { key: '4506acbee6ac2340ece8ad9e3d7abe70563624dd', class: `${baseClass}__slot--footer` }, h("slot", { key: 'd241d23ca7fd1b5e4d18d17f78511eef72c9b57c', name: "footer" }))), h("div", { key: 'ec30879cf27196a899f25fc448f02bb44043fad9', class: {
+            }) }, h("div", { key: 'f8ec649a229fa8f9e7ff79f3bff55d4b3a927d24', class: `${baseClass}__slot--content` }, h("slot", { key: '96c2d0fe15945e3361940c876d364caf08c0a400', name: "content" })), h("div", { key: '96b5fc73d537f06f5dc26a4272adb5e7a5e4bf86', class: `${baseClass}__slot--footer` }, h("slot", { key: '58792731bfcf10898b016ac0955e5e06b0e21838', name: "footer" }))), h("div", { key: 'c94713daa390c7cd69c5043a02bea796623c2a1a', class: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, h("slot", { key: '8a1a5ee9a4f8cae2475e804a6bebccbbeaa3ea9a', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, h("slot", { key: '6c9b6abc479e96825bba2aec084c3d0edb36bd3d', name: "image", onSlotchange: () => this.checkImageSlot() }))));
     }
 };
 declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-visually-hidden", null)]);

package/dist/esm/ds-checkbox-group.entry.js CHANGED Viewed

@@ -1,20 +1,26 @@
-import { h, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, F as Fragment } from './index-WKPTmD1Z.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h, F as Fragment } from './index-2cAuFdNH.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { i as idGenerator, d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
-import { g as getRequiredText, a as getOptionalText, b as atLeastOneOption, c as allOptions } from './controlUtils-BhYl_ia_.js';
-import { c as cx } from './cx-jGcD6jB5.js';
-import './store-CaI4gcSt.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-BR594Mvg.js';
+import { g as getRequiredText, a as getOptionalText, b as atLeastOneOption, c as allOptions } from './controlUtils-ON-hha7K.js';
+import { c as cx } from './cx-9wezIgaS.js';
+import { c as componentFactory } from './componentFactory-DsTGhar0.js';
+import './store-Dlg9qbvG.js';
-const dsCheckboxGroupCss = () => `.ds-checkbox-group__SPFJ1E{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__SPFJ1E__legend{color:var(--ds-textColor-default);padding-inline:0;font-family:var(--ds-fontFamily-body);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__SPFJ1E__assistive-text{font-family:var(--ds-fontFamily-body);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__SPFJ1E__error{display:flex}.ds-checkbox-group__SPFJ1E__error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__SPFJ1E>.ds-checkbox-group__SPFJ1E__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group__SPFJ1E--inset{margin-left:var(--ds-spacing-medium)}.ds-checkbox-group__SPFJ1E--horizontal>.ds-checkbox-group__SPFJ1E__checkboxes{flex-flow:row wrap;gap:var(--ds-spacing-small)}`;
+const dsCheckboxGroupCss = () => `.ds-checkbox-group__QIDqOT.sc-ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__QIDqOT__legend.sc-ds-checkbox-group{color:var(--ds-textColor-default);padding-inline:0;font-family:var(--ds-fontFamily-body);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__QIDqOT__assistive-text.sc-ds-checkbox-group{font-family:var(--ds-fontFamily-body);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__QIDqOT__error.sc-ds-checkbox-group{display:flex}.ds-checkbox-group__QIDqOT__error--visible.sc-ds-checkbox-group{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__QIDqOT.sc-ds-checkbox-group>.ds-checkbox-group__QIDqOT__checkboxes.sc-ds-checkbox-group{display:inline-flex;flex-direction:column}.ds-checkbox-group__QIDqOT--inset.sc-ds-checkbox-group{margin-left:var(--ds-spacing-medium)}.ds-checkbox-group__QIDqOT--horizontal.sc-ds-checkbox-group>.ds-checkbox-group__QIDqOT__checkboxes.sc-ds-checkbox-group{flex-flow:row wrap;gap:var(--ds-spacing-small)}`;
-const fieldsetIdGenerator = idGenerator('ds-checkbox-group');
-const DsCheckboxGroup = class {
+const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group')) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
         this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange", 7);
         this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange", 7);
         this.dsCheckboxGroupInvalidStateChange = createEvent(this, "dsCheckboxGroupInvalidStateChange", 7);
+        this.dsCheckboxGroupDisabledChange = createEvent(this, "dsCheckboxGroupDisabledChange", 7);
+        this.dsCheckboxGroupAllRequiredChange = createEvent(this, "dsCheckboxGroupAllRequiredChange", 7);
+        this.dsCheckboxGroupFormChange = createEvent(this, "dsCheckboxGroupFormChange", 7);
+        this.dsCheckboxGroupNameChange = createEvent(this, "dsCheckboxGroupNameChange", 7);
+        this.dsCheckboxGroupCheckedChange = createEvent(this, "dsCheckboxGroupCheckedChange", 3);
         this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid", 7);
         this.dsValidity = createEvent(this, "dsValidity", 7);
         if (hostRef.$hostElement$["s-ei"]) {
@@ -26,12 +32,14 @@ const DsCheckboxGroup = class {
         }
     }
     checkboxElem;
-    fieldsetId = fieldsetIdGenerator.next().value;
-    checkboxId = `${this.fieldsetId}-checkbox`;
-    legendId = `${this.fieldsetId}-legend`;
-    errorTextId = `${this.fieldsetId}-error`;
-    assistiveTextId = `${this.fieldsetId}-assistive-text`;
-    nestedId = `${this.fieldsetId}-nested`;
+    parentCheckboxGroup = null;
+    generatedId = this.getUniqueId();
+    fieldsetId = this.generatedId;
+    checkboxId = `${this.generatedId}-checkbox`;
+    legendId = `${this.generatedId}-legend`;
+    errorTextId = `${this.generatedId}-error`;
+    assistiveTextId = `${this.generatedId}-assistive-text`;
+    nestedId = `${this.generatedId}-nested`;
     childBlurTimeout = null;
     inheritedAttributes = {};
     get el() { return getElement(this); }
@@ -39,6 +47,11 @@ const DsCheckboxGroup = class {
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
     dsCheckboxGroupInvalidStateChange;
+    dsCheckboxGroupDisabledChange;
+    dsCheckboxGroupAllRequiredChange;
+    dsCheckboxGroupFormChange;
+    dsCheckboxGroupNameChange;
+    dsCheckboxGroupCheckedChange;
     dsSubmitInvalid;
     dsValidity;
     dsForm;
@@ -65,7 +78,6 @@ const DsCheckboxGroup = class {
     wasInvalidOnBlur = false;
     elementIs = (tagName) => (element) => element.tagName.toLowerCase() === transformTagName(tagName, 'ds-checkbox-group', this.el);
     elementIsCheckbox = this.elementIs('ds-checkbox');
-    elementIsCheckboxGroup = this.elementIs('ds-checkbox-group');
     async setFocus() {
         if (this.checkboxElem) {
             this.checkboxElem.setFocus();
@@ -95,41 +107,31 @@ const DsCheckboxGroup = class {
         return this.dsLabel;
     };
     getChildElements = () => {
-        const slot = this.el.shadowRoot.querySelector('slot:not([name])');
-        return (slot?.assignedElements() || []);
+        const checkboxTag = transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
+        const groupTag = transformTagName('ds-checkbox-group', 'ds-checkbox-group', this.el);
+        return Array.from(this.el.querySelectorAll(`${checkboxTag}, ${groupTag}`)).filter(el => el !== this.checkboxElem && el.parentElement?.closest(groupTag) === this.el);
     };
     getChildCheckboxElements = () => {
-        return this.getChildElements().filter(this.elementIsCheckbox);
+        return this.getChildElements().filter(el => this.elementIsCheckbox(el));
     };
     getEnabledChildCheckboxElements = () => {
         return this.getChildCheckboxElements().filter((element) => !element.dsDisabled);
     };
-    updateChildElements = (updateFn) => {
-        this.getChildElements().forEach(updateFn);
-    };
     updateChildCheckboxes = (updateFn) => {
         this.getChildCheckboxElements().forEach(updateFn);
     };
+    handleParentCheckedChange = (e) => {
+        this.updateChildElementsChecked(e.detail);
+    };
     updateChildElementsChecked = (checked) => {
         this.checkedChildElementCount = checked ? this.childElementsCount : 0;
-        this.updateChildElements((element) => {
-            element.dsChecked = checked;
-            if (this.elementIsCheckboxGroup(element)) {
-                (async () => {
-                    await element.setChecked(checked);
-                })();
-            }
-        });
+        this.dsCheckboxGroupCheckedChange.emit(checked);
     };
     dsDisabledObserver(newValue) {
-        this.updateChildElements((element) => {
-            element.dsDisabled = newValue;
-        });
+        this.dsCheckboxGroupDisabledChange.emit(newValue);
     }
     dsAllRequiredObserver(newValue) {
-        this.updateChildElements((element) => {
-            element.dsRequired = newValue;
-        });
+        this.dsCheckboxGroupAllRequiredChange.emit(newValue);
     }
     dsCheckedObserver(newValue) {
         this.updateChildElementsChecked(newValue);
@@ -148,27 +150,19 @@ const DsCheckboxGroup = class {
         });
         this.dsCheckboxGroupInvalidStateChange.emit(newValue);
     }
-    dsFormAssociatedPropObserver(newValue, _oldValue, propName) {
-        this.getChildCheckboxElements().forEach(checkbox => {
-            checkbox[propName] = newValue;
-        });
+    dsFormObserver(newValue) {
+        this.dsCheckboxGroupFormChange.emit(newValue);
+    }
+    dsNameObserver(newValue) {
+        this.dsCheckboxGroupNameChange.emit(newValue);
     }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
     childElementsCountObserver(newValue, oldValue) {
-        this.updateChildCheckboxes((element, index) => {
-            if (index === 0 && this.dsErrorText) {
-                element.setAttribute('aria-describedby', this.errorTextId);
-            }
-            element.dsErrorsDisabled = true;
-            if (this.dsAllRequired) {
-                element.dsRequired = true;
-            }
-            if (this.dsForm) {
-                element.dsForm = this.dsForm;
-            }
-        });
+        if (this.dsErrorText) {
+            this.getChildCheckboxElements()[0]?.setAttribute('aria-describedby', this.errorTextId);
+        }
         if (oldValue === this.checkedChildElementCount && oldValue > 0) {
             this.checkedChildElementCount = newValue;
             this.updateChildElementsChecked(true);
@@ -196,7 +190,7 @@ const DsCheckboxGroup = class {
         this.checkedChildElementCount += checked ? 1 : -1;
     };
     listenCheckboxChange(event) {
-        if (event.target === this.el && this.checkboxElem) {
+        if (this.checkboxElem && event.composedPath().includes(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 });
@@ -204,7 +198,7 @@ const DsCheckboxGroup = class {
         }
         const target = event.target;
         const checkbox = target.closest(transformTagName('ds-checkbox', 'ds-checkbox-group', this.el));
-        if (this.getChildCheckboxElements().includes(checkbox)) {
+        if (checkbox && this.getChildCheckboxElements().includes(checkbox)) {
             const previousCheckedChildElementCount = this.checkedChildElementCount;
             this.updateCheckedChildElementCount(checkbox.dsChecked);
             if (this.checkedChildElementCount === this.childElementsCount && this.checkedChildElementCount > previousCheckedChildElementCount) {
@@ -257,11 +251,20 @@ const DsCheckboxGroup = class {
         }
     }
     connectedCallback() {
+        const groupTag = transformTagName('ds-checkbox-group', 'ds-checkbox-group', this.el);
+        this.parentCheckboxGroup = this.el.parentElement?.closest(groupTag) ?? null;
+        if (this.parentCheckboxGroup) {
+            this.parentCheckboxGroup.addEventListener('dsCheckboxGroupCheckedChange', this.handleParentCheckedChange);
+        }
         if (this.internals?.form) {
             this.el.addEventListener('invalid', this.handleInvalid);
         }
     }
     disconnectedCallback() {
+        if (this.parentCheckboxGroup) {
+            this.parentCheckboxGroup.removeEventListener('dsCheckboxGroupCheckedChange', this.handleParentCheckedChange);
+        }
+        this.parentCheckboxGroup = null;
         if (this.internals?.form) {
             this.el.removeEventListener('invalid', this.handleInvalid);
         }
@@ -274,7 +277,7 @@ const DsCheckboxGroup = class {
         e.preventDefault();
         this.dsSubmitInvalid.emit({
             flag: 'customError',
-            message: this.internals?.validationMessage,
+            message: this.internals?.validationMessage ?? '',
         });
     };
     componentWillLoad() {
@@ -284,6 +287,7 @@ const DsCheckboxGroup = class {
         };
     }
     componentDidLoad() {
+        this.componentMounted();
         this.childElementsCount = this.getChildElements().length;
     }
     ariaAttributeObserver(newValue, _oldValue, propName) {
@@ -307,9 +311,8 @@ const DsCheckboxGroup = class {
         const checkboxesClasses = classNames(`${baseClass}__checkboxes`);
         const DsCheckbox = transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-checkbox-group', this.el);
-        return (h("fieldset", { key: 'f4a2a1a756d5462350de2edaa9aed784a83e0d09', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: '5cbaa003cc6889bc6236ab319aa19fa78a55738e', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '7d80e58250290c5dcd5e97d883340196b3bdbda7', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '6eccb6f002e1f2fccb1c61c9c23e528f8f1b2137', class: errorClasses }, h(DsInputValidity, { key: 'db8db19062c2c52d261f3666f77946af3ce25451', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
+        return (h("fieldset", { key: '9f1362636f810e0859f32c6db67b44bb2120e58c', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: 'ea7ddbdf71331dcfbc0f2347868c2204d2293643', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '12f225cea1c9a4060dc70cdfb51ad88a531b98ae', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '36759bb74a473fad8715ee9d09b28e806e79874b', class: errorClasses }, h(DsInputValidity, { key: '4b141627fdf10a009f29cf6e3c585e7035a5a87e', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
     }
-    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "dsDisabled": [{
@@ -328,10 +331,10 @@ const DsCheckboxGroup = class {
                 "dsErrorTextObserver": 0
             }],
         "dsForm": [{
-                "dsFormAssociatedPropObserver": 0
+                "dsFormObserver": 0
             }],
         "dsName": [{
-                "dsFormAssociatedPropObserver": 0
+                "dsNameObserver": 0
             }],
         "childElementsCount": [{
                 "childElementsCountObserver": 0

package/dist/esm/ds-checkbox.entry.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h, F as Fragment } from './index-WKPTmD1Z.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h, F as Fragment } from './index-2cAuFdNH.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-BhYl_ia_.js';
-import { i as idGenerator, t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './utils-J5Ghj1_T.js';
-import { c as cx } from './cx-jGcD6jB5.js';
-import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-DwC_l-Le.js';
+import { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-ON-hha7K.js';
+import { t as transformTagName, i as ifDefined, d as declareComponentDependencies } from './utils-BR594Mvg.js';
+import { c as cx } from './cx-9wezIgaS.js';
+import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-CVcqxnS5.js';
 import { d as disableEventsFactory } from './disableEventsFactory-D5btmZkj.js';
-import './store-CaI4gcSt.js';
+import { c as componentFactory } from './componentFactory-DsTGhar0.js';
+import './store-Dlg9qbvG.js';
-const dsCheckboxCss = () => `.ds-checkbox__SPFJ1E-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox__SPFJ1E-fieldset__legend.sc-ds-checkbox{padding-inline:0;font-family:var(--ds-fontFamily-body);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__SPFJ1E-fieldset__assistive-text.sc-ds-checkbox{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox__SPFJ1E.sc-ds-checkbox{font-family:var(--ds-fontFamily-body);box-sizing:border-box;color:var(--ds-textColor-default);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;user-select:none;width:auto;padding:var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-4xSmall);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox{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)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox{border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:hover,.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger)}.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox:hover{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-hover)}.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox:active{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-active)}.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox:indeterminate{background-color:var(--ds-iconColor-danger);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox:checked:hover,.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-red-60)}.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox:checked:active,.ds-checkbox__SPFJ1E__input--invalid.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-red-70)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:not(.ds-checkbox__SPFJ1E__input--invalid):checked,.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:not(.ds-checkbox__SPFJ1E__input--invalid):indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:not(.ds-checkbox__SPFJ1E__input--invalid):checked:hover,.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:not(.ds-checkbox__SPFJ1E__input--invalid):indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:not(.ds-checkbox__SPFJ1E__input--invalid):checked:active,.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:not(.ds-checkbox__SPFJ1E__input--invalid):indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:not(.ds-checkbox__SPFJ1E__input--invalid):checked:disabled,.ds-checkbox__SPFJ1E__input.sc-ds-checkbox:not(.ds-checkbox__SPFJ1E__input--invalid):indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__SPFJ1E__input.sc-ds-checkbox::before{content:"";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__SPFJ1E__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__SPFJ1E__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__SPFJ1E__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__SPFJ1E__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__SPFJ1E--no-margin.sc-ds-checkbox .ds-checkbox__SPFJ1E__input.sc-ds-checkbox{margin-right:0}.ds-checkbox__SPFJ1E--disabled.sc-ds-checkbox{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__SPFJ1E__span--optional.sc-ds-checkbox{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox__SPFJ1E.sc-ds-checkbox:has(.ds-checkbox__SPFJ1E__input:disabled){cursor:not-allowed}.ds-checkbox__SPFJ1E-error.sc-ds-checkbox{display:flex}.ds-checkbox__SPFJ1E-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}`;
+const dsCheckboxCss = () => `.ds-checkbox__QIDqOT-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox__QIDqOT-fieldset__legend.sc-ds-checkbox{padding-inline:0;font-family:var(--ds-fontFamily-body);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__QIDqOT-fieldset__assistive-text.sc-ds-checkbox{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox__QIDqOT.sc-ds-checkbox{font-family:var(--ds-fontFamily-body);box-sizing:border-box;color:var(--ds-textColor-default);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;user-select:none;width:auto;padding:var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-4xSmall);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox{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)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox{border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:hover,.ds-checkbox__QIDqOT__input.sc-ds-checkbox:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__QIDqOT__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger)}.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox:hover{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-hover)}.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox:active{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-active)}.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox:indeterminate{background-color:var(--ds-iconColor-danger);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox:checked:hover,.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-red-60)}.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox:checked:active,.ds-checkbox__QIDqOT__input--invalid.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-red-70)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:not(.ds-checkbox__QIDqOT__input--invalid):checked,.ds-checkbox__QIDqOT__input.sc-ds-checkbox:not(.ds-checkbox__QIDqOT__input--invalid):indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:not(.ds-checkbox__QIDqOT__input--invalid):checked:hover,.ds-checkbox__QIDqOT__input.sc-ds-checkbox:not(.ds-checkbox__QIDqOT__input--invalid):indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:not(.ds-checkbox__QIDqOT__input--invalid):checked:active,.ds-checkbox__QIDqOT__input.sc-ds-checkbox:not(.ds-checkbox__QIDqOT__input--invalid):indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox:not(.ds-checkbox__QIDqOT__input--invalid):checked:disabled,.ds-checkbox__QIDqOT__input.sc-ds-checkbox:not(.ds-checkbox__QIDqOT__input--invalid):indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__QIDqOT__input.sc-ds-checkbox::before{content:"";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__QIDqOT__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__QIDqOT__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__QIDqOT__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__QIDqOT__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__QIDqOT--no-margin.sc-ds-checkbox .ds-checkbox__QIDqOT__input.sc-ds-checkbox{margin-right:0}.ds-checkbox__QIDqOT--disabled.sc-ds-checkbox{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__QIDqOT__span--optional.sc-ds-checkbox{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox__QIDqOT.sc-ds-checkbox:has(.ds-checkbox__QIDqOT__input:disabled){cursor:not-allowed}.ds-checkbox__QIDqOT-error.sc-ds-checkbox{display:flex}.ds-checkbox__QIDqOT-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}`;
-const checkboxIdGenerator = idGenerator('ds-checkbox');
-const DsCheckbox = class extends Mixin(ariaDeprecationFactory, disableEventsFactory) {
+const DsCheckbox = class extends Mixin(componentFactory('ds-checkbox'), ariaDeprecationFactory, disableEventsFactory) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
@@ -23,9 +23,6 @@ const DsCheckbox = class extends Mixin(ariaDeprecationFactory, disableEventsFact
     }
     checkboxGroup = null;
     inputElement;
-    labelId;
-    inputValidityId;
-    assistiveTextId;
     inheritedAttributes = {};
     get el() { return getElement(this); }
     dsChange;
@@ -34,9 +31,9 @@ const DsCheckbox = class extends Mixin(ariaDeprecationFactory, disableEventsFact
     dsSubmitInvalid;
     dsValidity;
     dsForm;
-    dsId = checkboxIdGenerator.next().value;
+    dsId = this.getUniqueId();
     _dsName = this.dsId;
-    async setName(newValue) {
+    setName(newValue) {
         this._dsName = this.checkboxGroup?.dsName || newValue || this._dsName;
     }
     get dsName() {
@@ -64,11 +61,15 @@ const DsCheckbox = class extends Mixin(ariaDeprecationFactory, disableEventsFact
     wasInvalidOnBlur = false;
     initialChecked = false;
     isPressingEnter = false;
-    setIds = () => {
-        this.labelId = `${this.dsId}-label`;
-        this.inputValidityId = `${this.dsId}-validity`;
-        this.assistiveTextId = `${this.dsId}-assistive-text`;
-    };
+    get labelId() {
+        return `${this.dsId}-label`;
+    }
+    get inputValidityId() {
+        return `${this.dsId}-validity`;
+    }
+    get assistiveTextId() {
+        return `${this.dsId}-assistive-text`;
+    }
     async setFocus() {
         this.inputElement.focus();
     }
@@ -113,13 +114,30 @@ const DsCheckbox = class extends Mixin(ariaDeprecationFactory, disableEventsFact
         if (this.checkboxGroup) {
             this.groupInvalid = !!this.checkboxGroup.dsErrorText;
             this.dsErrorText = this.checkboxGroup.dsErrorText;
+            this.dsErrorsDisabled = true;
+            if (this.checkboxGroup.dsDisabled)
+                this.dsDisabled = true;
+            if (this.checkboxGroup.dsAllRequired)
+                this.dsRequired = true;
+            if (this.checkboxGroup.dsForm)
+                this.dsForm = this.checkboxGroup.dsForm;
             this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateGroupInvalidState);
+            this.checkboxGroup.addEventListener('dsCheckboxGroupDisabledChange', this.updateDisabledState);
+            this.checkboxGroup.addEventListener('dsCheckboxGroupAllRequiredChange', this.updateAllRequiredState);
+            this.checkboxGroup.addEventListener('dsCheckboxGroupFormChange', this.updateFormState);
+            this.checkboxGroup.addEventListener('dsCheckboxGroupNameChange', this.updateNameState);
+            this.checkboxGroup.addEventListener('dsCheckboxGroupCheckedChange', this.updateCheckedFromGroup);
             this.checkboxGroup.childConnected();
         }
     }
     disconnectedCallback() {
         if (this.checkboxGroup) {
             this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateGroupInvalidState);
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupDisabledChange', this.updateDisabledState);
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupAllRequiredChange', this.updateAllRequiredState);
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupFormChange', this.updateFormState);
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupNameChange', this.updateNameState);
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupCheckedChange', this.updateCheckedFromGroup);
             this.checkboxGroup.childDisconnected();
         }
         this.checkboxGroup = null;
@@ -144,9 +162,24 @@ const DsCheckbox = class extends Mixin(ariaDeprecationFactory, disableEventsFact
         this.groupInvalid = !!e.detail;
         this.dsErrorText = e.detail;
     };
+    updateDisabledState = (e) => {
+        this.dsDisabled = e.detail;
+    };
+    updateAllRequiredState = (e) => {
+        this.dsRequired = e.detail;
+    };
+    updateFormState = (e) => {
+        this.dsForm = e.detail;
+    };
+    updateNameState = (e) => {
+        this.setName(e.detail);
+        forceUpdate(this);
+    };
+    updateCheckedFromGroup = (e) => {
+        this.dsChecked = e.detail;
+    };
     componentWillLoad() {
         this.getDeprecationWarningsForAriaAttributes(this.el);
-        this.setIds();
         this.setName();
         this.inheritedAttributes = {
             ...inheritAttributes(this, this.el),
@@ -155,6 +188,9 @@ const DsCheckbox = class extends Mixin(ariaDeprecationFactory, disableEventsFact
         this.initialChecked = this.dsChecked;
         this.setDisableEventEmits(true);
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     ariaAttributeObserver(newValue, _oldValue, propName) {
         this.inheritedAttributes = {
             ...this.inheritedAttributes,
@@ -232,12 +268,13 @@ const DsCheckbox = class extends Mixin(ariaDeprecationFactory, disableEventsFact
             [`${baseClass}-error--visible`]: !!this.dsErrorText,
         });
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-checkbox', this.el);
-        const { ['aria-label']: attrAriaLabel, ['aria-describedby']: attrAriaDescribedBy, ...restAttributes } = this.inheritedAttributes;
+        const { ['aria-label']: attrAriaLabel, ['aria-describedby']: attrAriaDescribedBy, ['aria-invalid']: attrAriaInvalid, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = this.dsAriaDescribedby ||
             attrAriaDescribedBy ||
             [!!this.dsAssistiveText && this.assistiveTextId, !this.dsErrorsDisabled && !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
-        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes }, h("input", { ref: inputElement => (this.inputElement = inputElement), type: "checkbox", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, 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, ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-label', ariaLabel), "aria-invalid": !!this.dsErrorText, ...restAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: errorClasses }, h(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))))));
+        const ariaInvalid = this.dsErrorText ? 'true' : attrAriaInvalid;
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes }, h("input", { ref: inputElement => (this.inputElement = inputElement), type: "checkbox", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, 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, ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-label', ariaLabel), "aria-invalid": ariaInvalid, ...restAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: errorClasses }, h(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))))));
     }
     renderFieldset(baseClass) {
         const fieldsetClasses = classNames(`${baseClass}-fieldset`);