@uh-design-system/component-library 1.1.0-rc.0 → 1.1.0-rc.1

package/dist/cjs/{controlUtils-B7f37Lo0.js → controlUtils-BnBt99oA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var store = require('./store-BvQk72wz.js');
+var store = require('./store-tzSUtlue.js');
 
 const valueMissing = () => {
     switch (store.getLanguage()) {

package/dist/cjs/{cx-Dbj8LYfX.js → cx-D--6JWST.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ZMmPyiS1.js');
+var index = require('./index-2U1Nx9WX.js');
 
 const cx = (className) => `${className}__${index.Env.PACKAGE_VERSION}`;
 

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-ZMmPyiS1.js');
+var index = require('./index-2U1Nx9WX.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-BZAixND1.js');
-var cx = require('./cx-Dbj8LYfX.js');
-var attributes = require('./attributes-D1VITZWW.js');
+var utils = require('./utils-DKUG3eD2.js');
+var cx = require('./cx-D--6JWST.js');
+var attributes = require('./attributes-CdVB4RPe.js');
 
-const dsAccordionCss = ".ds-accordion__kJ67Jk__open-button.sc-ds-accordion: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-accordion__kJ67Jk__open-button.sc-ds-accordion .ds-accordion__kJ67Jk.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__kJ67Jk--border-aligned.sc-ds-accordion::before,.ds-accordion__kJ67Jk__open-button.sc-ds-accordion .ds-accordion__kJ67Jk.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__kJ67Jk--border-aligned.sc-ds-accordion::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion .ds-accordion__kJ67Jk.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__kJ67Jk--border-aligned.sc-ds-accordion::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion .ds-accordion__kJ67Jk.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__kJ67Jk--border-aligned.sc-ds-accordion::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:hover{cursor:pointer}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:hover,.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:hover::before,.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:hover::after{background:var(--ds-bgColor-transparent-onLight-hover)}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:active,.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:active::before,.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:active::after{background:var(--ds-bgColor-transparent-onLight-active)}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:focus-visible{z-index:1}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion{color:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-textColor-default);position:relative}.ds-accordion__kJ67Jk__open-button.ds-accordion__kJ67Jk--default.sc-ds-accordion{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__kJ67Jk__open-button.ds-accordion__kJ67Jk--compact.sc-ds-accordion{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__kJ67Jk__open-button.ds-accordion__kJ67Jk--border-aligned.sc-ds-accordion:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion{all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.sc-ds-accordion-h:first-child .ds-accordion__kJ67Jk__open-button.sc-ds-accordion:not(.ds-accordion__kJ67Jk--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.sc-ds-accordion-h:first-child .ds-accordion__kJ67Jk__open-button.sc-ds-accordion:not(.ds-accordion__kJ67Jk--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__kJ67Jk__open-button.sc-ds-accordion:not(.ds-accordion__kJ67Jk--hide-bottom-border)[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-accordion__kJ67Jk__panel--border-aligned.sc-ds-accordion::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0;background:var(--ds-bgColor-white);width:var(--ds-spacing-small)}.ds-accordion__kJ67Jk__panel--border-aligned.sc-ds-accordion::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0;background:var(--ds-bgColor-white);width:var(--ds-spacing-small)}.ds-accordion__kJ67Jk__panel--border-aligned.sc-ds-accordion{position:relative;width:calc(100% - 32px)}.ds-accordion__kJ67Jk__panel--expanded.sc-ds-accordion{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);padding-inline:var(--ds-spacing-small)}.ds-accordion__kJ67Jk__panel--expanded.sc-ds-accordion self__panel--hide-bottom-border.sc-ds-accordion{border-bottom:0}.ds-accordion__kJ67Jk.sc-ds-accordion-s>[slot=header],.ds-accordion__kJ67Jk .sc-ds-accordion-s>[slot=header]{color:var(--ds-textColor-default)}.ds-accordion__kJ67Jk__content.sc-ds-accordion{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__kJ67Jk__content.sc-ds-accordion .ds-accordion__kJ67Jk--default.sc-ds-accordion{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__kJ67Jk__content.sc-ds-accordion .ds-accordion__kJ67Jk--default.sc-ds-accordion{font-size:var(--ds-fontSize-18)}}.ds-accordion__kJ67Jk__content.sc-ds-accordion .ds-accordion__kJ67Jk--compact.sc-ds-accordion{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__kJ67Jk__close-button.sc-ds-accordion{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
+const dsAccordionCss = ".ds-accordion__7h4nsx__open-button.sc-ds-accordion: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-accordion__7h4nsx__open-button.sc-ds-accordion .ds-accordion__7h4nsx.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__7h4nsx--border-aligned.sc-ds-accordion::before,.ds-accordion__7h4nsx__open-button.sc-ds-accordion .ds-accordion__7h4nsx.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__7h4nsx--border-aligned.sc-ds-accordion::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__7h4nsx__open-button.sc-ds-accordion .ds-accordion__7h4nsx.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__7h4nsx--border-aligned.sc-ds-accordion::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__7h4nsx__open-button.sc-ds-accordion .ds-accordion__7h4nsx.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__7h4nsx--border-aligned.sc-ds-accordion::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__7h4nsx__open-button.sc-ds-accordion:hover{cursor:pointer}.ds-accordion__7h4nsx__open-button.sc-ds-accordion:hover,.ds-accordion__7h4nsx__open-button.sc-ds-accordion:hover::before,.ds-accordion__7h4nsx__open-button.sc-ds-accordion:hover::after{background:var(--ds-bgColor-transparent-onLight-hover)}.ds-accordion__7h4nsx__open-button.sc-ds-accordion:active,.ds-accordion__7h4nsx__open-button.sc-ds-accordion:active::before,.ds-accordion__7h4nsx__open-button.sc-ds-accordion:active::after{background:var(--ds-bgColor-transparent-onLight-active)}.ds-accordion__7h4nsx__open-button.sc-ds-accordion:focus-visible{z-index:1}.ds-accordion__7h4nsx__open-button.sc-ds-accordion{color:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-textColor-default);position:relative}.ds-accordion__7h4nsx__open-button.ds-accordion__7h4nsx--default.sc-ds-accordion{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__7h4nsx__open-button.ds-accordion__7h4nsx--compact.sc-ds-accordion{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__7h4nsx__open-button.ds-accordion__7h4nsx--border-aligned.sc-ds-accordion:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}.ds-accordion__7h4nsx__open-button.sc-ds-accordion{all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.sc-ds-accordion-h:first-child .ds-accordion__7h4nsx__open-button.sc-ds-accordion:not(.ds-accordion__7h4nsx--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.sc-ds-accordion-h:first-child .ds-accordion__7h4nsx__open-button.sc-ds-accordion:not(.ds-accordion__7h4nsx--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__7h4nsx__open-button.sc-ds-accordion:not(.ds-accordion__7h4nsx--hide-bottom-border)[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-accordion__7h4nsx__panel--border-aligned.sc-ds-accordion::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0;background:var(--ds-bgColor-white);width:var(--ds-spacing-small)}.ds-accordion__7h4nsx__panel--border-aligned.sc-ds-accordion::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0;background:var(--ds-bgColor-white);width:var(--ds-spacing-small)}.ds-accordion__7h4nsx__panel--border-aligned.sc-ds-accordion{position:relative;width:calc(100% - 32px)}.ds-accordion__7h4nsx__panel--expanded.sc-ds-accordion{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);padding-inline:var(--ds-spacing-small)}.ds-accordion__7h4nsx__panel--expanded.sc-ds-accordion self__panel--hide-bottom-border.sc-ds-accordion{border-bottom:0}.ds-accordion__7h4nsx.sc-ds-accordion-s>[slot=header],.ds-accordion__7h4nsx .sc-ds-accordion-s>[slot=header]{color:var(--ds-textColor-default)}.ds-accordion__7h4nsx__content.sc-ds-accordion{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__7h4nsx__content.sc-ds-accordion .ds-accordion__7h4nsx--default.sc-ds-accordion{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__7h4nsx__content.sc-ds-accordion .ds-accordion__7h4nsx--default.sc-ds-accordion{font-size:var(--ds-fontSize-18)}}.ds-accordion__7h4nsx__content.sc-ds-accordion .ds-accordion__7h4nsx--compact.sc-ds-accordion{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__7h4nsx__close-button.sc-ds-accordion{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
 
 const DsAccordion = class {
     constructor(hostRef) {
@@ -67,17 +67,17 @@ const DsAccordion = class {
         const DsButton = utils.transformTagName('ds-button', 'ds-accordion', this.el);
         const DsIcon = utils.transformTagName('ds-icon', 'ds-accordion', this.el);
         const baseClass = cx.cx('ds-accordion');
-        return (index.h("div", { key: '3eeca5898975d437dea8d198685f1a66c2799fc4', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
+        return (index.h("div", { key: '7b99da8ecf18d36bfd6210f73d94d91c1d3257b2', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
                 [`${baseClass}--border-aligned`]: this.dsBorderAligned,
-            }), ...this.inheritedAttributes }, index.h("div", { key: 'bd3b39fa2e743d24b738489b60ab15c3c022eaed', class: `${baseClass}__item` }, index.h("div", { key: 'ac111a9b747bd04afb6546184f99aee00f91398a', role: "heading", "aria-level": this.dsHeadingLevel, class: `${baseClass}__title` }, index.h("button", { key: 'f3513a4a7b61b9e37dde73169452bb6d41d62f53', class: index$1.classNames(`${baseClass}__open-button`, `${baseClass}--${this.dsVariant}`, {
+            }), ...this.inheritedAttributes }, index.h("div", { key: '721a08a79ab20ec81f5af744aca7f47f9c28fd19', class: `${baseClass}__item` }, index.h("div", { key: 'f5124df5cb2774e83de3e6ad6905b4de34087dea', role: "heading", "aria-level": this.dsHeadingLevel, class: `${baseClass}__title` }, index.h("button", { key: 'c3b3b4b5ec29fc5485fd69f3b0c6b67a765bc45a', class: index$1.classNames(`${baseClass}__open-button`, `${baseClass}--${this.dsVariant}`, {
                 [`${baseClass}--border-aligned`]: this.dsBorderAligned,
                 [`${baseClass}--hide-top-border`]: this.dsHideTopBorder,
                 [`${baseClass}--hide-bottom-border`]: this.dsHideBottomBorder,
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsId}-panel`, id: this.dsId, ref: el => (this.headerButtonRef = el), type: "button" }, index.h("span", { key: '4b85fcb2deb053987d7696903768d05576751e19', class: `${baseClass}__icon`, "aria-hidden": "true" }, this.isExpanded ? (index.h(DsIcon, { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_up" })) : (index.h(DsIcon, { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_down" }))), index.h("slot", { key: '606a281e2df66d3e30e2ce20d58849c4b0b609cc', name: "header" }))), index.h("div", { key: '6a620dbd13917a464a3fd707b0e304e18618bda3', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: index$1.classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsId}-panel`, id: this.dsId, ref: el => (this.headerButtonRef = el), type: "button" }, index.h("span", { key: 'b466555f9933f38ffc1c2872feaea7dabba93fa8', class: `${baseClass}__icon`, "aria-hidden": "true" }, this.isExpanded ? (index.h(DsIcon, { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_up" })) : (index.h(DsIcon, { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_down" }))), index.h("slot", { key: 'c81e29864398d7ef384f2e658d10dc9123895488', name: "header" }))), index.h("div", { key: 'b34c9d668b0a9dc41da25b2bcd24d4b4c1e28883', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: index$1.classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
                 [`${baseClass}__panel--border-aligned`]: this.dsBorderAligned,
                 [`${baseClass}__panel--expanded`]: this.isExpanded,
                 [`${baseClass}__panel--hide-bottom-border`]: this.dsHideBottomBorder,
-            }), hidden: !this.isExpanded }, index.h("div", { key: 'f7acd75a3422a4a6492a77f6c068f6c499e622d2', class: `${baseClass}__content` }, index.h("slot", { key: '2bf4ce49163be78c181a405f9fc2a5c7ff7a2012', name: "content" })), this.dsUseCloseButton && (index.h(DsButton, { key: '35a0b1c0dd8a31e182694cee6a65017691d42950', id: `${this.dsId}-close-button`, class: index$1.classNames(`${baseClass}__close-button`, `${baseClass}--${this.dsVariant}`, {
+            }), hidden: !this.isExpanded }, index.h("div", { key: '4ccc901a02799d39641145366730bf1726f95cf0', class: `${baseClass}__content` }, index.h("slot", { key: '7027a2e3dc1784ecfe8be6f18a12c7a2b414affb', name: "content" })), this.dsUseCloseButton && (index.h(DsButton, { key: 'c5230e81cdbe042a4578a4acd3c704087a2ba1b8', id: `${this.dsId}-close-button`, class: index$1.classNames(`${baseClass}__close-button`, `${baseClass}--${this.dsVariant}`, {
                 [`${baseClass}--border-aligned`]: this.dsBorderAligned,
             }), dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsValue: this.dsCloseButtonLabel, dsSize: buttonSize, dsType: "button" }))))));
     }

package/dist/cjs/ds-assistive-text.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-2U1Nx9WX.js');
+var cx = require('./cx-D--6JWST.js');
+var utils = require('./utils-DKUG3eD2.js');
+
+const dsAssistiveTextCss = ".ds-assistive-text__7h4nsx.sc-ds-assistive-text{display:inline-block;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-block-start:var(--ds-spacing-3xSmall)}";
+
+const dsAssistiveTextIdGenerator = utils.idGenerator('ds-assistive-text');
+const DsAssistiveText = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dsId = dsAssistiveTextIdGenerator.next().value;
+    dsText;
+    render() {
+        const baseClass = cx.cx('ds-assistive-text');
+        return (index.h("small", { key: '6e759ac8b189b328f7dcf358a1e6512409d4aa9c', class: baseClass, id: this.dsId }, index.h("slot", { key: 'f84a3abe6ec1f11f882cad94214dd8135f6a9cd6' }, this.dsText)));
+    }
+};
+DsAssistiveText.style = dsAssistiveTextCss;
+
+exports.ds_assistive_text = DsAssistiveText;

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

@@ -1,13 +1,14 @@
 'use strict';
 
-var index = require('./index-ZMmPyiS1.js');
+var index = require('./index-2U1Nx9WX.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var attributes = require('./attributes-D1VITZWW.js');
-var utils = require('./utils-BZAixND1.js');
-var cx = require('./cx-Dbj8LYfX.js');
+var attributes = require('./attributes-CdVB4RPe.js');
+var utils = require('./utils-DKUG3eD2.js');
+var cx = require('./cx-D--6JWST.js');
 
-const dsButtonCss = ".sc-ds-button-h *.sc-ds-button,.ds-no-style-leak.sc-ds-button *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button-h{display:inline-block}.sc-ds-button-h:has(.ds-button__kJ67Jk--full-width){width:100%}.ds-button__kJ67Jk.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);outline:4px solid transparent;justify-content:center}.ds-button__kJ67Jk.sc-ds-button:not(.ds-button__kJ67Jk--supplementary) .ds-button__kJ67Jk__value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button__kJ67Jk--supplementary.sc-ds-button:has(.ds-button__kJ67Jk__spinner) .ds-button__kJ67Jk__value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button__kJ67Jk__icon.sc-ds-button{height:1.5rem}.ds-button__kJ67Jk.sc-ds-button:has(.ds-button__kJ67Jk__spinner):not(.ds-button__kJ67Jk--small) .ds-button__kJ67Jk__value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__kJ67Jk--icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button__kJ67Jk.sc-ds-button:not(.ds-button__kJ67Jk--small):not(.ds-button__kJ67Jk--secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__kJ67Jk.sc-ds-button:not(.ds-button__kJ67Jk--small).ds-button__kJ67Jk--secondary{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__kJ67Jk.sc-ds-button:not(.ds-button__kJ67Jk--small).ds-button__kJ67Jk--icon-only{padding-left:0;padding-right:0}.ds-button__kJ67Jk--small.sc-ds-button:not(.ds-button__kJ67Jk--secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__kJ67Jk--small.ds-button__kJ67Jk--secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__kJ67Jk--small.ds-button__kJ67Jk--icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button__kJ67Jk--small.sc-ds-button .ds-button__kJ67Jk__icon.sc-ds-button{height:1rem}.ds-button__kJ67Jk--icon-start.sc-ds-button:not(.ds-button__kJ67Jk--small) .ds-button__kJ67Jk__icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button__kJ67Jk--icon-end.sc-ds-button:not(.ds-button__kJ67Jk--small) .ds-button__kJ67Jk__icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--blue.sc-ds-button: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-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--blue.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--blue.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--black.sc-ds-button: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-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--black.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--black.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--white.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--white.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--primary.ds-button__kJ67Jk--white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--blue.sc-ds-button: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-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--blue.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--blue.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--black.sc-ds-button: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-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--black.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--black.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--white.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--white.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--secondary.ds-button__kJ67Jk--white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--blue.sc-ds-button: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-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--blue.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--blue.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--black.sc-ds-button: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-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--black.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--black.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--white.sc-ds-button:active,.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--white.ds-button__kJ67Jk--disabled.sc-ds-button,.ds-button__kJ67Jk.ds-button__kJ67Jk--supplementary.ds-button__kJ67Jk--white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}";
+const dsButtonCss = ".sc-ds-button-h *.sc-ds-button,.ds-no-style-leak.sc-ds-button *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button-h{display:inline-block}.sc-ds-button-h:has(.ds-button__7h4nsx--full-width){width:100%}.ds-button__7h4nsx.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);outline:4px solid transparent;justify-content:center}.ds-button__7h4nsx.sc-ds-button:not(.ds-button__7h4nsx--supplementary) .ds-button__7h4nsx__value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button__7h4nsx--supplementary.sc-ds-button:has(.ds-button__7h4nsx__spinner) .ds-button__7h4nsx__value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button__7h4nsx__icon.sc-ds-button{height:1.5rem}.ds-button__7h4nsx.sc-ds-button:has(.ds-button__7h4nsx__spinner):not(.ds-button__7h4nsx--small) .ds-button__7h4nsx__value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__7h4nsx--icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button__7h4nsx.sc-ds-button:not(.ds-button__7h4nsx--small):not(.ds-button__7h4nsx--secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__7h4nsx.sc-ds-button:not(.ds-button__7h4nsx--small).ds-button__7h4nsx--secondary{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__7h4nsx.sc-ds-button:not(.ds-button__7h4nsx--small).ds-button__7h4nsx--icon-only{padding-left:0;padding-right:0}.ds-button__7h4nsx--small.sc-ds-button:not(.ds-button__7h4nsx--secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__7h4nsx--small.ds-button__7h4nsx--secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__7h4nsx--small.ds-button__7h4nsx--icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button__7h4nsx--small.sc-ds-button .ds-button__7h4nsx__icon.sc-ds-button{height:1rem}.ds-button__7h4nsx--icon-start.sc-ds-button:not(.ds-button__7h4nsx--small) .ds-button__7h4nsx__icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button__7h4nsx--icon-end.sc-ds-button:not(.ds-button__7h4nsx--small) .ds-button__7h4nsx__icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--blue.sc-ds-button: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-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--blue.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--blue.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--black.sc-ds-button: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-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--black.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--black.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--white.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--white.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--primary.ds-button__7h4nsx--white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--blue.sc-ds-button: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-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--blue.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--blue.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--black.sc-ds-button: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-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--black.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--black.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--white.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--white.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--secondary.ds-button__7h4nsx--white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--blue.sc-ds-button: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-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--blue.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--blue.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--black.sc-ds-button: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-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--black.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--black.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--white.sc-ds-button:active,.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--white.ds-button__7h4nsx--disabled.sc-ds-button,.ds-button__7h4nsx.ds-button__7h4nsx--supplementary.ds-button__7h4nsx--white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}";
 
+const buttonIdGenerator = utils.idGenerator('ds-button');
 const DsButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -16,7 +17,9 @@ const DsButton = class {
     buttonEl;
     pressedKeys = new Set();
     get el() { return index.getElement(this); }
-    dsId;
+    dsForm;
+    dsId = buttonIdGenerator.next().value;
+    dsName = this.dsId;
     dsValue = '';
     dsVariant = 'primary';
     dsColour = 'blue';
@@ -47,20 +50,8 @@ const DsButton = class {
         }
         this.isActive = this.dsActive;
         this.inheritedAttributes = {
-            ...attributes.inheritAriaAttributes(this.el),
-            ...attributes.inheritSpecifiedAttributes(this.el, [
-                'autofocus',
-                'form',
-                'formaction',
-                'formenctype',
-                'formmethod',
-                'formnovalidate',
-                'formtarget',
-                'name',
-                'popovertarget',
-                'popovertargetaction',
-            ]),
             ...attributes.inheritAttributes(this, this.el),
+            ...attributes.inheritAriaAttributes(this.el),
         };
     }
     componentDidLoad() {
@@ -139,10 +130,11 @@ const DsButton = class {
         });
         const DsSpinner = utils.transformTagName('ds-spinner', 'ds-button', this.el);
         const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-button', this.el);
-        const ariaLabel = this.dsAriaLabel || this.inheritedAttributes['aria-label'];
-        const ariaLabelledby = this.dsAriaLabelledby || this.inheritedAttributes['aria-labelledby'];
-        const ariaDisabled = (this.dsAriaDisabled || this.inheritedAttributes['aria-disabled']) !== 'false' ? 'true' : 'false';
-        return (index.h("button", { ref: el => (this.buttonEl = el), id: this.dsId, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, type: this.dsType, disabled: this.dsDisabled, 'aria-disabled': ariaDisabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...this.inheritedAttributes }, index.h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (index.h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize == 'small' ? 'small' : 'medium' }))), this.hasContent && (index.h("span", { class: `${baseClass}__value` }, index.h("slot", null, this.dsValue, this.dsHiddenAssistiveText && index.h(DsVisuallyHidden, { "ds-tag": "span" }, this.dsHiddenAssistiveText)))), index.h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
+        const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ['aria-disabled']: attrAriaDisabled, ...restAttributes } = this.inheritedAttributes;
+        const ariaLabel = attrAriaLabel || this.dsAriaLabel;
+        const ariaLabelledby = attrAriaLabelledby || this.dsAriaLabelledby;
+        const ariaDisabled = (attrAriaDisabled || this.dsAriaDisabled) !== 'false' ? 'true' : 'false';
+        return (index.h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, ...utils.ifDefined('aria-disabled', ariaDisabled), ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes }, index.h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (index.h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize == 'small' ? 'small' : 'medium' }))), this.hasContent && (index.h("span", { class: `${baseClass}__value` }, index.h("slot", null, this.dsValue, this.dsHiddenAssistiveText && index.h(DsVisuallyHidden, { "ds-tag": "span" }, this.dsHiddenAssistiveText)))), index.h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
     };
     render() {
         const buttonElement = this.renderButton();

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

@@ -1,21 +1,23 @@
 'use strict';
 
-var index = require('./index-ZMmPyiS1.js');
+var index = require('./index-2U1Nx9WX.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-BZAixND1.js');
-var linkUtils = require('./linkUtils-BFfNouov.js');
-var cx = require('./cx-Dbj8LYfX.js');
-var attributes = require('./attributes-D1VITZWW.js');
-require('./store-BvQk72wz.js');
+var utils = require('./utils-DKUG3eD2.js');
+var linkUtils = require('./linkUtils-B2KeM6yt.js');
+var cx = require('./cx-D--6JWST.js');
+var attributes = require('./attributes-CdVB4RPe.js');
+require('./store-tzSUtlue.js');
 
-const dsCardCss = ".sc-ds-card-h{display:block}.ds-card__kJ67Jk.sc-ds-card{background-color:var(--ds-bgColor-white);border:1px solid var(--ds-borderColor-light);color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);display:flex;flex-direction:column;hyphens:auto;margin-bottom:var(--ds-spacing-2xSmall);min-width:260px;height:auto}.ds-card__kJ67Jk--fluid-height.sc-ds-card{height:100%}.ds-card__kJ67Jk--horizontal.sc-ds-card{flex-direction:column}@media (min-width: 30rem){.ds-card__kJ67Jk--horizontal.sc-ds-card{flex-direction:row}}.ds-card__kJ67Jk.ds-card__kJ67Jk--focused.sc-ds-card{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__kJ67Jk.ds-card__kJ67Jk--link:hover:not(:has(.sc-ds-card-s>[slot=footer]:hover)){border-color:var(--ds-borderColor-default);cursor:pointer}.ds-card__kJ67Jk.ds-card__kJ67Jk--link:hover:not(:has(.sc-ds-card-s>[slot=footer]:hover)) .ds-card__kJ67Jk__icon{color:var(--ds-textColor-link-standalone-hover)}.ds-card__kJ67Jk.ds-card__kJ67Jk--link:hover:not(:has(.sc-ds-card-s>[slot=footer]:hover)) .ds-card__kJ67Jk__heading{text-decoration:underline;text-decoration-thickness:7%;text-underline-offset:12%}.ds-card__kJ67Jk.ds-card__kJ67Jk--link.sc-ds-card:active{border-color:var(--ds-borderColor-black)}.ds-card__kJ67Jk.ds-card__kJ67Jk--link.sc-ds-card:active .ds-card__kJ67Jk__icon.sc-ds-card{color:var(--ds-textColor-link-standalone-hover)}.ds-card__kJ67Jk.ds-card__kJ67Jk--link.sc-ds-card:active .ds-card__heading.sc-ds-card{text-decoration:underline;text-decoration-thickness:7%;text-underline-offset:12%}.ds-card__kJ67Jk.ds-card__kJ67Jk--link.sc-ds-card{text-decoration:none}.ds-card__kJ67Jk--filled.sc-ds-card{background-color:var(--ds-bgColor-neutral)}.ds-card__kJ67Jk__image-container.sc-ds-card{display:none}.ds-card__kJ67Jk__image-container--has-image.sc-ds-card{display:block;order:1;position:relative;width:100%}@media (min-width: 30rem){.ds-card__kJ67Jk.sc-ds-card:not(.ds-card__kJ67Jk--vertical) .ds-card__kJ67Jk__image-container--has-image.sc-ds-card{max-width:var(--vertical-image-max-width, 200px)}}.ds-card__kJ67Jk__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__kJ67Jk__image.sc-ds-card{width:100%;height:100%;object-fit:cover}.ds-card__kJ67Jk__content.sc-ds-card{display:flex;flex-direction:column;order:2;width:100%}.ds-card__kJ67Jk__content--top.sc-ds-card{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__kJ67Jk__content--top__text.sc-ds-card{display:flex;flex-direction:column}.ds-card__kJ67Jk__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__kJ67Jk__heading-container.sc-ds-card{display:flex;flex-direction:column}.ds-card__kJ67Jk__heading.sc-ds-card{align-items:center;color:var(--ds-textColor-default);display:flex;font-size:var(--ds-fontSize-20);font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);margin:0;margin-bottom:var(--ds-spacing-3xSmall);order:2;justify-content:space-between;text-wrap:balance}.ds-card__kJ67Jk__heading__link.sc-ds-card{all:unset}.ds-card__kJ67Jk__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__kJ67Jk__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}.ds-card__kJ67Jk__icon.sc-ds-card{color:var(--ds-textColor-primary);font-size:var(--ds-fontSize-20);font-weight:normal}";
+const dsCardCss = ".sc-ds-card-h{display:block}.ds-card__7h4nsx.sc-ds-card{background-color:var(--ds-bgColor-white);border:1px solid var(--ds-borderColor-light);color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);display:flex;flex-direction:column;hyphens:auto;height:auto}.ds-card__7h4nsx--fluid-height.sc-ds-card{height:100%}.ds-card__7h4nsx--horizontal.sc-ds-card{flex-direction:column}@media (min-width: 30rem){.ds-card__7h4nsx--horizontal.sc-ds-card{flex-direction:row}}.ds-card__7h4nsx.ds-card__7h4nsx--focused.sc-ds-card{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__7h4nsx.ds-card__7h4nsx--link:hover:not(:has(.sc-ds-card-s>[slot=footer]:hover)){border-color:var(--ds-borderColor-default);cursor:pointer}.ds-card__7h4nsx.ds-card__7h4nsx--link:hover:not(:has(.sc-ds-card-s>[slot=footer]:hover)) .ds-card__7h4nsx__icon{color:var(--ds-textColor-link-standalone-hover)}.ds-card__7h4nsx.ds-card__7h4nsx--link:hover:not(:has(.sc-ds-card-s>[slot=footer]:hover)) .ds-card__7h4nsx__heading{text-decoration:underline;text-decoration-thickness:7%;text-underline-offset:12%}.ds-card__7h4nsx.ds-card__7h4nsx--link.sc-ds-card:active{border-color:var(--ds-borderColor-black)}.ds-card__7h4nsx.ds-card__7h4nsx--link.sc-ds-card:active .ds-card__7h4nsx__icon.sc-ds-card{color:var(--ds-textColor-link-standalone-hover)}.ds-card__7h4nsx.ds-card__7h4nsx--link.sc-ds-card:active .ds-card__heading.sc-ds-card{text-decoration:underline;text-decoration-thickness:7%;text-underline-offset:12%}.ds-card__7h4nsx.ds-card__7h4nsx--link.sc-ds-card{text-decoration:none}.ds-card__7h4nsx--filled.sc-ds-card{background-color:var(--ds-bgColor-neutral)}.ds-card__7h4nsx__image-container.sc-ds-card{display:none}.ds-card__7h4nsx__image-container--has-image.sc-ds-card{display:block;order:1;position:relative;width:100%}@media (min-width: 30rem){.ds-card__7h4nsx.sc-ds-card:not(.ds-card__7h4nsx--vertical) .ds-card__7h4nsx__image-container--has-image.sc-ds-card{max-width:var(--vertical-image-max-width, 200px)}}.ds-card__7h4nsx__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__7h4nsx__image.sc-ds-card{width:100%;height:100%;object-fit:cover}.ds-card__7h4nsx__content.sc-ds-card{display:flex;flex-direction:column;order:2;width:100%}.ds-card__7h4nsx__content--top.sc-ds-card{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__7h4nsx__content--top__text.sc-ds-card{display:flex;flex-direction:column}.ds-card__7h4nsx__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__7h4nsx__heading-container.sc-ds-card{display:flex;flex-direction:column}.ds-card__7h4nsx__heading.sc-ds-card{align-items:center;color:var(--ds-textColor-default);display:flex;font-size:var(--ds-fontSize-20);font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);margin:0;margin-bottom:var(--ds-spacing-3xSmall);order:2;justify-content:space-between;text-wrap:balance}.ds-card__7h4nsx__heading__link.sc-ds-card{all:unset}.ds-card__7h4nsx__subtitle.sc-ds-card,.ds-card__7h4nsx__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__7h4nsx__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}.ds-card__7h4nsx__icon.sc-ds-card{color:var(--ds-textColor-primary);font-size:var(--ds-fontSize-20);font-weight:normal}.ds-card__7h4nsx__slot-subtitle--hidden.sc-ds-card{display:none}";
 
+const cardIdGenerator = utils.idGenerator('ds-card');
 const DsCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     linkIcon = 'arrow_forward';
     inheritedAttributes = {};
+    cardId = cardIdGenerator.next().value;
     get el() { return index.getElement(this); }
     dsVariant = 'filled';
     dsHorizontal = false;
@@ -31,6 +33,7 @@ const DsCard = class {
     dsShowArrow = true;
     dsFluidHeight = false;
     hasImageSlot = false;
+    hasSubtitleSlot = false;
     hasSlotContent = true;
     isCardFocused = false;
     componentWillLoad() {
@@ -38,7 +41,7 @@ const DsCard = class {
             this.linkIcon = 'arrow_outward';
         }
         this.inheritedAttributes = {
-            ...attributes.inheritAriaAttributes(this.el),
+            ...attributes.inheritAriaAttributes(this.el, ['aria-labelledby']),
             ...attributes.inheritAttributes(this, this.el),
         };
     }
@@ -60,11 +63,18 @@ const DsCard = class {
             return false;
         }
         const interactiveSelectors = [
-            'a', 'button', 'input', 'select', 'textarea',
-            '[role="button"]', '[role="link"]', '[role="tab"]',
+            'a',
+            'button',
+            'input',
+            'select',
+            'textarea',
+            '[role="button"]',
+            '[role="link"]',
+            '[role="tab"]',
             '[tabindex]:not([tabindex="-1"])',
             '[role="button"][aria-expanded]',
-            'ds-accordion', '[data-accordion]'
+            'ds-accordion',
+            '[data-accordion]',
         ];
         for (const selector of interactiveSelectors) {
             try {
@@ -77,9 +87,7 @@ const DsCard = class {
                 continue;
             }
         }
-        if (element.hasAttribute('onclick') ||
-            element.hasAttribute('data-clickable') ||
-            element.classList.contains('clickable')) {
+        if (element.hasAttribute('onclick') || element.hasAttribute('data-clickable') || element.classList.contains('clickable')) {
             return true;
         }
         return false;
@@ -102,9 +110,7 @@ const DsCard = class {
     }
     handleFocusOut(e) {
         const relatedTarget = e.relatedTarget;
-        if (!relatedTarget ||
-            !this.el.contains(relatedTarget) ||
-            this.isSlottedElement(relatedTarget)) {
+        if (!relatedTarget || !this.el.contains(relatedTarget) || this.isSlottedElement(relatedTarget)) {
             this.isCardFocused = false;
         }
     }
@@ -142,6 +148,10 @@ const DsCard = class {
         const imageSlotElements = this.el.querySelectorAll('[slot="image"]');
         this.hasImageSlot = imageSlotElements.length > 0;
     }
+    checkSubtitleSlot() {
+        const subtitleSlotElements = this.el.querySelectorAll('[slot="subtitle"]');
+        this.hasSubtitleSlot = subtitleSlotElements.length > 0;
+    }
     render() {
         const baseClass = cx.cx('ds-card');
         const classes = index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
@@ -150,22 +160,20 @@ const DsCard = class {
             [`${baseClass}--focused`]: this.isCardFocused,
         }, this.dsHorizontal ? `${baseClass}--horizontal` : `${baseClass}--vertical`);
         const HeadingTag = `h${this.dsHeadingLevel}`;
-        const randomId = Math.random().toString(36).substring(2, 9);
-        const headingId = `${utils.slugifyText(this.dsHeading)}-${randomId}`;
+        const headingId = `${this.cardId}-heading`;
         const DsIcon = utils.transformTagName('ds-icon', 'ds-card', this.el);
         const descriptionClamp = this.dsDescriptionClamp ? this.dsDescriptionClamp.toString() : 'none';
-        return (index.h("article", { key: 'd8b9ee047e82f6882c771118d5d8f39257258a2d', "aria-labelledby": headingId, class: classes, onClick: this.handleClick, onKeyDown: this.handleKeydown, style: { '--description-line-clamp': descriptionClamp }, ...this.inheritedAttributes }, index.h("div", { key: '6252df662fde0095f1428deb1c948fb62f2e874f', class: `${baseClass}__content` }, index.h("div", { key: '964f41d4b89731fb7ed8d5e1030b16ddafbfa88a', class: {
+        return (index.h("article", { key: '1e4d8af2824d7b37201c16a00804d9bd9dbe3c08', class: classes, onClick: this.handleClick, onKeyDown: this.handleKeydown, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, index.h("div", { key: 'bb2ecb11ed462ab365b33db9befd8cb1c1a23846', class: `${baseClass}__content` }, index.h("div", { key: 'c47d2587ba2c02e68e46376a9f50757e910c21aa', class: {
                 [`${baseClass}__content--top`]: true,
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
-            } }, index.h("div", { key: '3a4f1e17d82271e016387ae52d3073cdd27ede44', class: `${baseClass}__heading-container` }, this.dsUrl ?
-            index.h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, index.h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: `${baseClass}__heading__link` }, this.dsHeading))
-            :
-                index.h(HeadingTag, { class: `${baseClass}__heading` }, this.dsHeading), this.dsEyebrow && index.h("div", { key: 'ca35f59cc22c3055b023523a7c2c8336ce63b76a', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && index.h("div", { key: 'd2e55ed16e61bca5fc1ef7f1a8c241ea9db2ba62', class: `${baseClass}__subtitle` }, this.dsSubtitle)), (this.dsUrl && this.dsShowArrow) && index.h(DsIcon, { key: 'b23857394b430879de9390cd0e088496223b894b', class: `${baseClass}__icon`, "ds-name": this.linkIcon })), index.h("div", { key: '122b06489fe3ffd698ec171d66d877efa0c36c4e', class: index$1.classNames(`${baseClass}__content--bottom`, {
+            } }, index.h("div", { key: 'cb225c8ce9997b9d95e329a5aacb09ce11b5b808', class: `${baseClass}__heading-container` }, this.dsUrl ? (index.h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, index.h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: `${baseClass}__heading__link` }, index.h("slot", { name: "heading" }, this.dsHeading)))) : (index.h(HeadingTag, { class: `${baseClass}__heading` }, index.h("slot", { name: "heading" }, this.dsHeading))), this.dsEyebrow && index.h("div", { key: '098bbea6b972c5e7d7a44c7d97ffd5b092bacba1', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && index.h("div", { key: '73b9e1fcb42d9862f6620a3295ae9e89a5ad9c5a', class: `${baseClass}__subtitle` }, this.dsSubtitle), index.h("div", { key: 'a4697536ff1a02a38fecd0d56093d9ad6658f7ae', class: index$1.classNames(`${baseClass}__slot-subtitle`, {
+                [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
+            }) }, index.h("slot", { key: '0c2debf396a0906c63cc7b2f89d3b55898c3d957', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && index.h(DsIcon, { key: 'fbb87354e95ce333d62dfe2ad117559ba5319202', class: `${baseClass}__icon`, "ds-name": this.linkIcon })), index.h("div", { key: 'affd6f5a0564d2c1a78508485adf6f03b3216fd5', class: index$1.classNames(`${baseClass}__content--bottom`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, this.dsDescription && index.h("p", { key: '44bb8e0c67849c6a20a8463bf43a6b325cef6902', class: `${baseClass}__description` }, this.dsDescription), index.h("div", { key: '186230cd081d715297d650ac2a75ef01f9ddf90b', class: `${baseClass}__slot--content` }, index.h("slot", { key: '2c3e878b0fdc9772f743514ca21d65f518d62abb', name: "content" })), index.h("div", { key: '079f495238b9086ee2de2b5c36cb81b72203c5bc', class: `${baseClass}__slot--footer` }, index.h("slot", { key: '54932cc9e10695df2dd20c69c2102a8d04ecdc9d', name: "footer" })))), index.h("div", { key: '384b9fe9b57dc422f9db4ed40d95ff5cd545c7a0', class: {
+            }) }, this.dsDescription && index.h("p", { key: 'b060a30688ec71936296779ddd7f66b60db883fa', class: `${baseClass}__description` }, this.dsDescription), index.h("div", { key: 'f1bedc57ba2ce553828ba9f5245d4d6d578d55d6', class: `${baseClass}__slot--content` }, index.h("slot", { key: '99b6ce2b14ab1574e98d3106be86f4808c066e62', name: "content" })), index.h("div", { key: '070e5487f1a11576ffca408e6afb04cdc46adcdf', class: `${baseClass}__slot--footer` }, index.h("slot", { key: 'c2d9c42938c5e1bcc5f7bf4b537718745e9fa7d6', name: "footer" })))), index.h("div", { key: '44c30c25e8c89f7037977d3ed1d79f4171580520', class: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, (this.dsTag && this.hasImageSlot) && index.h("span", { key: '7ebeefbb57b5333fdd606cd223e6e0a1d77e7995', class: `${baseClass}__tag` }, this.dsTag), index.h("slot", { key: '001fc9498b0cdbebf36230c9770dd838e33902b2', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, this.dsTag && this.hasImageSlot && index.h("span", { key: '45debacd778a822adccbe6009438fdaffe52db3e', class: `${baseClass}__tag` }, this.dsTag), index.h("slot", { key: '099d389e20ed8233f02a84afac3ec4f826886515', name: "image", onSlotchange: () => this.checkImageSlot() }))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-icon", null)]);

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-ZMmPyiS1.js');
+var index = require('./index-2U1Nx9WX.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var attributes = require('./attributes-D1VITZWW.js');
-var utils = require('./utils-BZAixND1.js');
-var controlUtils = require('./controlUtils-B7f37Lo0.js');
-var cx = require('./cx-Dbj8LYfX.js');
-require('./store-BvQk72wz.js');
+var attributes = require('./attributes-CdVB4RPe.js');
+var utils = require('./utils-DKUG3eD2.js');
+var controlUtils = require('./controlUtils-BnBt99oA.js');
+var cx = require('./cx-D--6JWST.js');
+require('./store-tzSUtlue.js');
 
-const dsCheckboxGroupCss = ".ds-checkbox-group__kJ67Jk{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__kJ67Jk__legend{color:var(--ds-textColor-default);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__kJ67Jk__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__kJ67Jk__error{display:flex}.ds-checkbox-group__kJ67Jk__error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__kJ67Jk>.ds-checkbox-group__kJ67Jk__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group__kJ67Jk--inset{margin-left:var(--ds-spacing-medium)}.ds-checkbox-group__kJ67Jk--horizontal>.ds-checkbox-group__kJ67Jk__checkboxes{flex-flow:row wrap;gap:var(--ds-spacing-small)}";
+const dsCheckboxGroupCss = ".ds-checkbox-group__7h4nsx{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__7h4nsx__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__7h4nsx__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__7h4nsx__error{display:flex}.ds-checkbox-group__7h4nsx__error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__7h4nsx>.ds-checkbox-group__7h4nsx__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group__7h4nsx--inset{margin-left:var(--ds-spacing-medium)}.ds-checkbox-group__7h4nsx--horizontal>.ds-checkbox-group__7h4nsx__checkboxes{flex-flow:row wrap;gap:var(--ds-spacing-small)}";
 
 const fieldsetIdGenerator = utils.idGenerator('ds-checkbox-group');
 const DsCheckboxGroup = class {
@@ -43,6 +43,7 @@ const DsCheckboxGroup = class {
     dsCheckboxGroupInvalidStateChange;
     dsSubmitInvalid;
     dsValidity;
+    dsForm;
     dsLabel;
     dsAssistiveText;
     dsDirection = 'vertical';
@@ -58,7 +59,7 @@ const DsCheckboxGroup = class {
     get dsId() {
         return this.checkboxId;
     }
-    childElementsCount = 1;
+    childElementsCount = 0;
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
@@ -139,24 +140,38 @@ const DsCheckboxGroup = class {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
     dsErrorTextObserver(newValue) {
+        this.updateChildCheckboxes((element, index) => {
+            if (index === 0 && newValue) {
+                element.setAttribute('aria-describedby', this.errorTextId);
+            }
+            else if (index === 0 && !newValue) {
+                element.removeAttribute('aria-describedby');
+            }
+        });
         this.dsCheckboxGroupInvalidStateChange.emit(newValue);
     }
-    dsNameObserver(newValue) {
+    dsFormAssociatedPropObserver(newValue, _oldValue, propName) {
         this.getChildCheckboxElements().forEach(checkbox => {
-            checkbox.dsName = newValue;
+            checkbox[propName] = newValue;
         });
     }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
     childElementsCountObserver(newValue, oldValue) {
-        this.updateChildCheckboxes(element => {
+        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 (oldValue === this.checkedChildElementCount) {
+        if (oldValue === this.checkedChildElementCount && oldValue > 0) {
             this.checkedChildElementCount = newValue;
             this.updateChildElementsChecked(true);
         }
@@ -229,7 +244,7 @@ const DsCheckboxGroup = class {
     }
     formResetCallback() {
         this.dsErrorText = '';
-        this.childElementsCount = 1;
+        this.childElementsCount = 0;
         this.checkedChildElementCount = 0;
         this.isIndeterminate = false;
         this.indeterminateChildCheckboxCount = 0;
@@ -265,11 +280,21 @@ const DsCheckboxGroup = class {
         });
     };
     componentWillLoad() {
-        this.inheritedAttributes = attributes.inheritAriaAttributes(this.el, ['aria-labelledby']);
+        this.inheritedAttributes = {
+            ...attributes.inheritAttributes(this, this.el),
+            ...attributes.inheritAriaAttributes(this.el, ['aria-labelledby']),
+        };
     }
     componentDidLoad() {
         this.childElementsCount = this.getChildElements().length;
     }
+    ariaAttributeObserver(newValue, _oldValue, propName) {
+        this.inheritedAttributes = {
+            ...this.inheritedAttributes,
+            [propName]: newValue,
+        };
+        index.forceUpdate(this);
+    }
     render() {
         const baseClass = cx.cx('ds-checkbox-group');
         const classes = index$1.classNames(baseClass, {
@@ -284,7 +309,7 @@ const DsCheckboxGroup = class {
         const checkboxesClasses = index$1.classNames(`${baseClass}__checkboxes`);
         const DsCheckbox = utils.transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
         const DsInputValidity = utils.transformTagName('ds-input-validity', 'ds-checkbox-group', this.el);
-        return (index.h("fieldset", { key: 'c3d2f710a1d0db0d2489c3d798f89160e641f781', id: this.fieldsetId, class: classes, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (index.h("legend", { key: '5892cbfe085003ad238d2bcb40ee1b2287f7ce71', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (index.h("small", { key: '1f6b380a00c2c0627fa0e8430073be3ef155d5b5', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (index.h(index.Fragment, null, index.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 }), index.h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, index.h("slot", null)))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), !!this.dsErrorText && (index.h("div", { key: '2ffc0f42fe750d3d88136cc55f6efc00f64ebef6', class: errorClasses }, index.h(DsInputValidity, { key: '409165757270a65ea731f0370e162c747a8db471', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        return (index.h("fieldset", { key: 'b64380214102bebb0d789d6018886ebfdac43fa7', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (index.h("legend", { key: 'b87e70138eb56171591c462caa5680682508e9a7', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (index.h("small", { key: '79e979270d9eaedbb7ad48b39b47f0a5d4317d2f', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (index.h(index.Fragment, null, index.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 }), index.h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, index.h("slot", null)))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), !!this.dsErrorText && (index.h("div", { key: '2b499ffdde772785b2350413a8a59c0920e3f1e5', class: errorClasses }, index.h(DsInputValidity, { key: '2863135ff88780448f28ac9f57a8b78e5b47d1f9', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -294,10 +319,13 @@ const DsCheckboxGroup = class {
         "dsChecked": ["dsCheckedObserver"],
         "isIndeterminate": ["isIndeterminateObserver"],
         "dsErrorText": ["dsErrorTextObserver"],
-        "dsName": ["dsNameObserver"],
+        "dsForm": ["dsFormAssociatedPropObserver"],
+        "dsName": ["dsFormAssociatedPropObserver"],
         "childElementsCount": ["childElementsCountObserver", "checkedChildElementCountObserver"],
         "checkedChildElementCount": ["checkedChildElementCountObserver"],
-        "focusedChildCheckbox": ["focusedChildCheckboxObserver"]
+        "focusedChildCheckbox": ["focusedChildCheckboxObserver"],
+        "aria-required": ["ariaAttributeObserver"],
+        "aria-invalid": ["ariaAttributeObserver"]
     }; }
 };
 utils.declareComponentDependencies([index.h("ds-checkbox", null), index.h("ds-checkbox-group", null), index.h("ds-input-validity", null)]);