@uh-design-system/component-library 0.5.1 → 0.5.3

package/dist/components/ds-button2.js

@@ -1,9 +1,11 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
+import { p as proxyCustomElement, H, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes.js';
-import { d as defineCustomElement$1 } from './ds-icon2.js';
+import { i as inheritAriaAttributes, a as inheritSpecifiedAttributes, b as inheritAttributes } from './attributes.js';
+import { d as defineCustomElement$3 } from './ds-icon2.js';
+import { d as defineCustomElement$2 } from './ds-spinner2.js';
+import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
 
-const dsButtonCss = ".no-style-leak.sc-ds-button *.sc-ds-button,.sc-ds-button-h *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.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-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button.primary.blue[aria-disabled=true].sc-ds-button,.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button.primary.black[aria-disabled=true].sc-ds-button,.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button.primary.white[aria-disabled=true].sc-ds-button,.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.secondary.blue[aria-disabled=true].sc-ds-button,.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.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.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.secondary.black[aria-disabled=true].sc-ds-button,.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.secondary.white[aria-disabled=true].sc-ds-button,.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue[aria-disabled=true].sc-ds-button,.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black[aria-disabled=true].sc-ds-button,.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white[aria-disabled=true].sc-ds-button,.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
+const dsButtonCss = ".dsNoStyleLeak.sc-ds-button *.sc-ds-button,.sc-ds-button-h *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.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-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:has(ds-spinner) .button-value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-palette-mainBlue-70);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-90)}.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-palette-black-95);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-palette-black-80)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-palette-white-70)}.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-palette-white);border-color:transparent;color:var(--ds-palette-black-95)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-palette-black-10)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-palette-black-20)}.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-overlay-white-10);border-color:transparent;color:var(--ds-overlay-white-40)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-palette-white);border-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-mainBlue-70)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-palette-white);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-black-95);color:var(--ds-palette-black-95)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-white);color:var(--ds-palette-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-white-15);color:var(--ds-overlay-white-40)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-mainBlue-70)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-95)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-overlay-white-40)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
 const DsButtonStyle0 = dsButtonCss;
 
 const DsButton = proxyCustomElement(class DsButton extends H {
@@ -24,12 +26,18 @@ const DsButton = proxyCustomElement(class DsButton extends H {
     iconPosition = 'start';
     type = 'button';
     disabled = false;
+    isLoading = false;
+    useSpinner = false;
+    spinnerHiddenText;
     fullWidth = false;
     ariaDisabled = 'false';
     componentWillLoad() {
+        if (this.useSpinner && !this.spinnerHiddenText) {
+            throw new Error('spinnerHiddenText is required when useSpinner is true.');
+        }
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-disabled']),
-            ...inheritAttributes(this.el, [
+            ...inheritSpecifiedAttributes(this.el, [
                 'autofocus',
                 'form',
                 'formaction',
@@ -41,6 +49,7 @@ const DsButton = proxyCustomElement(class DsButton extends H {
                 'popovertarget',
                 'popovertargetaction',
             ]),
+            ...inheritAttributes(this, this.el),
         };
     }
     handleKeyDown = (event) => {
@@ -66,15 +75,35 @@ const DsButton = proxyCustomElement(class DsButton extends H {
                 break;
         }
     };
-    render() {
+    getSpinnerColour = () => {
+        if (this.variant === 'primary') {
+            if (this.colour === 'blue')
+                return 'white';
+            if (this.colour === 'white')
+                return 'black';
+            if (this.colour === 'black')
+                return 'white';
+        }
+        return this.colour;
+    };
+    renderButton = () => {
         const classes = classNames(`ds-button ${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
             'icon-end': this.icon && this.iconPosition === 'end' && this.value,
             'icon-only': this.icon && !this.value,
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
-        const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", { key: '50633fbf3df7aeb84c2631dd7b8eb7a1f83cbc29', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: 'aea86ce3195d3fa5344dfbf2048bc4db7882286b', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '38b833cbc1585a7cf0918dec9b2b2a0f62cc6fe2', name: this.icon, size: iconSize })), this.value && h("span", { key: '430bd3e7e54558706bcd8b2cc9fda5d0cc04667c', class: "button-value" }, this.value), h("slot", { key: '9c3d1b19e8c96afb9a6bc380fcd0dd04d9ed411e', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'dcb2076975dd8648db795c3629cc12c79d4e7d70', name: this.icon, size: iconSize }))));
+        return (h("button", { ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": this.ariaDisabled == 'true' ? 'true' : 'false', disabled: this.disabled, ...this.inheritedAttributes }, this.isLoading ?
+            h(Fragment, null, h("ds-spinner", { hiddenAssistiveText: this.spinnerHiddenText, spinnerColor: this.getSpinnerColour(), size: this.size == 'small' ? 'small' : 'medium' }), this.value && h("span", { class: "button-value" }, this.value))
+            :
+                h(Fragment, null, h("slot", { name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { name: this.icon, size: iconSize })), this.value && h("span", { class: "button-value" }, this.value), h("slot", { name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { name: this.icon, size: iconSize })))));
+    };
+    render() {
+        const buttonElement = this.renderButton();
+        return (this.useSpinner ?
+            h("div", { "aria-live": "polite" }, buttonElement)
+            :
+                buttonElement);
     }
     static get style() { return DsButtonStyle0; }
 }, [6, "ds-button", {
@@ -87,6 +116,9 @@ const DsButton = proxyCustomElement(class DsButton extends H {
         "iconPosition": [1, "icon-position"],
         "type": [1],
         "disabled": [4],
+        "isLoading": [4, "is-loading"],
+        "useSpinner": [4, "use-spinner"],
+        "spinnerHiddenText": [1, "spinner-hidden-text"],
         "fullWidth": [4, "full-width"],
         "ariaDisabled": [1, "aria-disabled"]
     }]);
@@ -94,7 +126,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ds-button", "ds-icon"];
+    const components = ["ds-button", "ds-icon", "ds-spinner", "ds-visually-hidden"];
     components.forEach(tagName => { switch (tagName) {
         case "ds-button":
             if (!customElements.get(tagName)) {
@@ -102,6 +134,16 @@ function defineCustomElement() {
             }
             break;
         case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ds-visually-hidden":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

@@ -5,7 +5,7 @@ import { i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$4 } from './ds-checkbox2.js';
 import { d as defineCustomElement$2 } from './ds-input-validity2.js';
 
-const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";
+const dsCheckboxGroupCss = ".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";
 const DsCheckboxGroupStyle0 = dsCheckboxGroupCss;
 
 const fieldsetIdGenerator = idGenerator('ds-checkbox-group');
@@ -16,7 +16,9 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         this.__attachShadow();
         this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange", 7);
         this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange", 7);
+        this.dsCheckboxGroupInvalidStateChange = createEvent(this, "dsCheckboxGroupInvalidStateChange", 7);
     }
+    checkboxElem;
     fieldsetId = fieldsetIdGenerator.next().value;
     checkboxId = `${this.fieldsetId}-checkbox`;
     errorTextId = `${this.fieldsetId}-error`;
@@ -26,6 +28,7 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     get el() { return this; }
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
+    dsCheckboxGroupInvalidStateChange;
     legend;
     assistiveText;
     direction = 'vertical';
@@ -33,7 +36,7 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     text = '';
     checked = false;
     disabled = false;
-    childElementsCount = 0;
+    childElementsCount = 1;
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
@@ -79,55 +82,61 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
     watchIndeterminateChange(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
+    errorTextObserver(errorText) {
+        this.dsCheckboxGroupInvalidStateChange.emit(!!errorText);
+    }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
-    watchCheckedChildElementCountChange(newValue, oldValue) {
-        this.isIndeterminate =
-            this.checkedChildElementCount !== this.childElementsCount && this.checkedChildElementCount < this.childElementsCount && this.checkedChildElementCount > 0;
-        if (newValue === this.childElementsCount && newValue > oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
-        }
-        else if (oldValue === this.childElementsCount && newValue < oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
-        }
+    watchCheckedChildElementCountChange() {
+        this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
     }
-    updateCheckedChildElementCount = (event) => {
-        if (event.detail.checked) {
-            this.checkedChildElementCount = this.checkedChildElementCount === this.childElementsCount ? this.checkedChildElementCount : this.checkedChildElementCount + 1;
+    updateCheckedChildElementCount = (checked) => {
+        if (checked) {
+            this.checkedChildElementCount = Math.min(this.childElementsCount, this.checkedChildElementCount + 1);
         }
         else {
-            this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
+            this.checkedChildElementCount = Math.max(0, this.checkedChildElementCount - 1);
         }
     };
     listenCheckboxChange(event) {
-        if (event.detail.id === this.checkboxId) {
-            this.updateChildElementsChecked(event.detail.checked);
+        if (event.target === this.el) {
+            this.updateChildElementsChecked(this.checkboxElem.checked);
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: this.checkboxElem.checked });
             return;
         }
-        if (this.getChildCheckboxElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+        const target = event.target;
+        if (this.getChildCheckboxElements().includes(target)) {
+            const previousCheckedChildElementCount = this.checkedChildElementCount;
+            this.updateCheckedChildElementCount(target.checked);
+            if (this.checkedChildElementCount === this.childElementsCount && this.checkedChildElementCount > previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
+            }
+            else if (previousCheckedChildElementCount === this.childElementsCount && this.checkedChildElementCount < previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+            }
         }
     }
     listenCheckboxGroupChange(event) {
         if (this.getChildElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+            event.stopPropagation();
+            this.updateCheckedChildElementCount(event.detail.checked);
         }
     }
-    setChildElementCount = () => {
-        this.childElementsCount = this.getChildElements().length;
-    };
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
     }
     componentDidLoad() {
-        this.setChildElementCount();
+        this.childElementsCount = this.getChildElements().length;
         this.updateChildCheckboxes(element => {
             element.setAttribute('data-errors-disabled', 'true');
         });
     }
     componentDidUpdate() {
-        this.setChildElementCount();
+        const childElementCount = this.getChildElements().length;
+        if (this.childElementsCount !== childElementCount) {
+            this.childElementsCount = childElementCount;
+        }
     }
     render() {
         const classes = classNames('ds-checkbox-group', {
@@ -141,12 +150,13 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         const nestedClasses = classNames('ds-checkbox-group', 'ds-checkbox-group--inset');
         const checkboxesClasses = classNames('ds-checkbox-group__checkboxes');
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h("fieldset", { key: '1029763130b4d2d138679c9f84ec72c0231fcc83', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: 'a9be37aab510d5e402841c8bbda64190548bc1ea', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: '0ae42c2b46e52dad0570ad120180e662db43f2fa', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '3ea5bb7991a99c676cb50a24d1a679b6f68c96bf', class: errorClasses }, h("ds-input-validity", { key: '8d5ca5e80b2a5f985e09bf7039538a5a13278e8e', id: this.errorTextId, text: this.errorText, type: "error" }))));
+        return (h("fieldset", { key: '25b932a80cf1b2c7467ef5ea012661992cb88853', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: 'e96b23987622f5df0144a9499122f7afba552648', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: 'ae3fb6f287dd518ad911391054f6ed4de7e8ea6f', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { ref: checkboxElem => (this.checkboxElem = checkboxElem), id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: 'd2719bdb242a526af73e628d2ce7bca234c94961', class: errorClasses }, h("ds-input-validity", { key: 'a31a78918c1894bd8f68207c3ea3f9df984bd52b', id: this.errorTextId, text: this.errorText, type: "error" }))));
     }
     static get watchers() { return {
         "disabled": ["watchCheckboxDisabledChange"],
         "checked": ["watchCheckedChange"],
         "isIndeterminate": ["watchIndeterminateChange"],
+        "errorText": ["errorTextObserver"],
         "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }; }
     static get style() { return DsCheckboxGroupStyle0; }
@@ -163,10 +173,11 @@ const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
         "isIndeterminate": [32],
         "indeterminateChildCheckboxCount": [32],
         "setChecked": [64]
-    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "dsCheckboxInput", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"]], {
+    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "input", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"]], {
         "disabled": ["watchCheckboxDisabledChange"],
         "checked": ["watchCheckedChange"],
         "isIndeterminate": ["watchIndeterminateChange"],
+        "errorText": ["errorTextObserver"],
         "checkedChildElementCount": ["watchCheckedChildElementCountChange"]
     }]);
 function defineCustomElement$1() {

package/dist/components/ds-checkbox2.js

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './index2.js';
+import { p as proxyCustomElement, H, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as inheritAriaAttributes } from './attributes.js';
+import { i as inheritAriaAttributes, b as inheritAttributes } from './attributes.js';
 import { g as getRequiredText, a as getOptionalText } from './controlUtils.js';
 import { i as isValidation } from './store.js';
 import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$2 } from './ds-icon2.js';
 import { d as defineCustomElement$1 } from './ds-input-validity2.js';
 
-const dsCheckboxCss = ".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
+const dsCheckboxCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:flex-start;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-palette-black-40)}.ds-checkbox__span--optional{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-palette-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-palette-black-50)}.ds-checkbox__input:hover{background-color:var(--ds-palette-black-10)}.ds-checkbox__input:active{background-color:var(--ds-palette-black-20)}.ds-checkbox__input:disabled{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-palette-mainBlue-70);border-color:var(--ds-overlay-black-00)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-palette-mainBlue-90)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-overlay-black-10)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-palette-black-40)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
 const DsCheckboxStyle0 = dsCheckboxCss;
 
 const checkboxIdGenerator = idGenerator('ds-checkbox');
@@ -15,19 +15,17 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.dsCheckboxInput = createEvent(this, "dsCheckboxInput", 7);
         this.internals = this.attachInternals();
     }
+    checkboxGroup = null;
     inputElem;
     labelId;
     inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
-    initialChecked;
     labelClicked = false;
     get el() { return this; }
     internals;
-    dsCheckboxInput;
     identifier = checkboxIdGenerator.next().value;
     checked = false;
     legend;
@@ -41,7 +39,8 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     optional = false;
     optionalText;
     ariaLabel;
-    value = this.checked.toString();
+    invalid = !!this.errorText;
+    initialChecked = this.checked;
     validationMessage;
     setIds = () => {
         this.labelId = `${this.identifier}-label`;
@@ -71,24 +70,33 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         return this.text;
     };
     getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
-    restoreInitialState = () => {
+    formResetCallback() {
         this.checked = this.initialChecked;
-        this.value = this.checked.toString();
         this.internals?.setValidity({});
-        this.internals?.setFormValue(this.value);
-    };
-    setInitialState = () => {
-        this.initialChecked = this.checked;
-        this.value = this.checked.toString();
-        this.internals?.setFormValue(this.value);
-    };
-    formResetCallback() {
-        this.restoreInitialState();
+        this.internals?.setFormValue(this.checked.toString());
     }
+    connectedCallback() {
+        this.checkboxGroup = this.el.closest('ds-checkbox-group');
+        if (this.checkboxGroup) {
+            this.invalid = !!this.checkboxGroup.errorText;
+            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.checkboxGroup) {
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.checkboxGroup = null;
+    }
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
     componentWillLoad() {
-        this.setInitialState();
         this.setIds();
-        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']);
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
+            ...inheritAttributes(this, this.el),
+        };
         if (isValidation('server') || this.errorText) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -96,9 +104,7 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     handleInput = (e) => {
         const target = e.target;
         this.checked = target.checked;
-        this.value = target.checked.toString();
-        this.internals?.setFormValue(this.value);
-        this.dsCheckboxInput.emit({ id: this.identifier, checked: target.checked });
+        this.internals?.setFormValue(target.checked.toString());
         if (isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -126,13 +132,13 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
             'ds-checkbox--no-margin': Boolean(!this.text),
         });
         const inputClasses = classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': Boolean(this.errorText),
+            'ds-checkbox__input--invalid': Boolean(this.errorText) || this.invalid,
         });
         const errorClasses = classNames('ds-checkbox-error', {
             'ds-checkbox-error--visible': Boolean(this.validationMessage),
         });
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.value, disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.checked.toString(), disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-checkbox-fieldset');
@@ -162,7 +168,8 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         "optional": [4],
         "optionalText": [1, "optional-text"],
         "ariaLabel": [1, "aria-label"],
-        "value": [32],
+        "invalid": [32],
+        "initialChecked": [32],
         "validationMessage": [32]
     }]);
 function defineCustomElement() {

package/dist/components/ds-icon2.js

@@ -84,6 +84,8 @@ const ZoomOutIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="
 
 const SearchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406Z"/></svg>`;
 
+const FilterList = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M382-190v-94h196v94H382ZM218-434v-93h524v93H218ZM95-677v-94h771v94H95Z"/></svg>`;
+
 const SettingsIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m366-55-21-134q-13-4-29.5-13.5T288-221l-125 58L47-368l114-83q-1-6-1.5-14.5T159-480q0-6 .5-14.5T161-509L47-593l116-203 127 57q10-8 26-17t29-13l21-137h228l21 136q13 5 29.5 13.5T672-739l126-57 115 203-115 82q1 7 2 15.5t1 15.5q0 7-1 15t-2 15l115 82-116 205-126-58q-11 9-26.5 18.5T615-189L594-55H366Zm78-94h71l15-111q34-8 65-25t55-44l106 46 31-59-92-67q4-18 7-35.5t3-35.5q0-18-2.5-35.5T695-551l93-67-32-59-105 46q-23-28-54-47t-67-23l-14-110h-72l-13 110q-36 6-67.5 24.5T308-631l-104-46-32 59 91 66q-4 18-7 36t-3 36q0 18 3 36.5t7 35.5l-91 66 32 59 104-46q25 26 56.5 44t66.5 26l13 110Zm34-201q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Zm2-130Z"/></svg>`;
 
 const SettingsFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m366-55-21-134q-13-4-29.5-13.5T288-221l-125 58L47-368l114-83q-1-6-1.5-14.5T159-480q0-6 .5-14.5T161-509L47-593l116-203 127 57q10-8 26-17t29-13l21-137h228l21 136q13 5 29.5 13.5T672-739l126-57 115 203-115 82q1 7 2 15.5t1 15.5q0 7-1 15t-2 15l115 82-116 205-126-58q-11 9-26.5 18.5T615-189L594-55H366Zm112-295q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Z"/></svg>`;
@@ -158,6 +160,7 @@ const icons$9 = [
     { name: 'zoom_in', component: ZoomInIcon, category: category$8 },
     { name: 'zoom_out', component: ZoomOutIcon, category: category$8 },
     { name: 'search', component: SearchIcon, category: category$8 },
+    { name: 'filter_list', component: FilterList, category: category$8 },
     { name: 'settings', component: SettingsIcon, category: category$8 },
     { name: 'settings_fill', component: SettingsFillIcon, category: category$8 },
     { name: 'login', component: LoginIcon, category: category$8 },
@@ -955,7 +958,7 @@ const DsIcon = proxyCustomElement(class DsIcon extends H {
         }
     }
     render() {
-        return (h(Fragment, { key: '58309a22dafbad09a1f9e884657aad264261174e' }, h("span", { key: '3295d61af901e74ea7c39d1e7a4b7e083f44794f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '71d2466d7ab9bdac086b7e4723bdbcae85f46179' }, h("span", { key: 'b19955f6f321b89dfce0d7843dcc41d3db92b29f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get style() { return DsIconStyle0; }
 }, [1, "ds-icon", {

package/dist/components/ds-input-validity2.js

@@ -3,7 +3,7 @@ import { c as classNames } from './index3.js';
 import { i as isValidation } from './store.js';
 import { d as defineCustomElement$1 } from './ds-icon2.js';
 
-const dsInputValidityCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-textColor-danger)}.ds-input-validity--success{color:var(--ds-textColor-success)}.ds-input-validity ds-icon{display:block;height:1.5rem}.ds-input-validity small{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}";
+const dsInputValidityCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-palette-red-70)}.ds-input-validity--success{color:var(--ds-palette-green-70)}.ds-input-validity ds-icon{display:block;height:1.5rem}.ds-input-validity small{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}";
 const DsInputValidityStyle0 = dsInputValidityCss;
 
 const DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
@@ -26,7 +26,7 @@ const DsInputValidity = proxyCustomElement(class DsInputValidity extends H {
             'ds-input-validity--success': this.type === 'success',
         });
         const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        return (h("div", { key: '2eca152eca6e7b4d7e894ff8aaf50a6d03c3e44f', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '73e4cd1b3af6a84b9c7cbca813c166bc10e9dd26', class: classes }, h("ds-icon", { key: '4eaad4001e758837f9e8b1aae48292a1c5a1a08f', name: icon }), h("small", { key: '3ee5d39785454b9aab9ae6012f3ad940c1f18df0', id: this.identifier }, this.text)))));
+        return (h("div", { key: 'b76f90369546a44b88ff02ec08182ebf2299c0e9', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '575d68fff500bac58612514a3c4efebdb62dffdb', class: classes }, h("ds-icon", { key: '707c95678fdf517f83bc5126a1fcea0d9f8eb5cb', name: icon }), h("small", { key: '39e098386b1ed37c9d797513d626bb50e2e50034', id: this.identifier }, this.text)))));
     }
     static get style() { return DsInputValidityStyle0; }
 }, [0, "ds-input-validity", {

package/dist/components/ds-link-with-arrow.js

@@ -5,7 +5,7 @@ import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtil
 import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-textColor-link);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-bgColor-primary-hover)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-bgColor-primary-active)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{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-link-with-arrow:hover{color:var(--ds-textColor-link-hover)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}";
+const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-palette-white);background-color:var(--ds-palette-mainBlue-70)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-palette-mainBlue-80)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-palette-mainBlue-90)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{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-link-with-arrow:hover{color:var(--ds-palette-mainBlue-80)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-palette-mainBlue-90)}";
 const DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
 
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
@@ -39,7 +39,7 @@ const DsLinkWithArrow$1 = proxyCustomElement(class DsLinkWithArrow extends H {
             'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
         });
-        return (h("a", { key: 'bce4a90f9cc5113ab3d5b300d791d2299e22b7ad', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '96ba4a33114443aab36d1301cf65c56437b9a85b', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: '86d8029de69c1ecb3002a97f5bc0cdbf899b7f91', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '7c2dafaee60253b1f5c22819b1afec83d106234b', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: 'a9fb3e2ddee16cce7c6b8fc0fba0b11970567276', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'f93f37d0d10d7a2d51980ff8feb76915cc4823b2', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: '07c30d407ab9399a29f3949bc4f9ea1139f9fa97', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: 'bebb1091f27d49871da79235aed5772bd1059f3d', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'c7bfbfdc9953138b510b5e37830cdd1f7837bae6', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: 'f4a8369cf54fb4d9f8aeea193c7aa52c14a59e2b', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '430e7a77fe1bfa7af5f49873f1aff7371437d345', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '3e0b84c6648fa683320e602df7f83776f9698d74', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get style() { return DsLinkWithArrowStyle0; }
 }, [1, "ds-link-with-arrow", {

package/dist/components/ds-link.js

@@ -5,7 +5,7 @@ import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './linkUtil
 import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-textColor-link);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);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-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link:active{color:var(--ds-textColor-link-active)}.ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link--standalone{color:var(--ds-textColor-link);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-textColor-link-hover)}.ds-link--standalone:active{color:var(--ds-textColor-link-active)}.ds-link--standalone:focus-visible{color:var(--ds-textColor-link)}.ds-link--standalone:visited{color:var(--ds-textColor-link)}";
+const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);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-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-palette-mainBlue-80)}.ds-link:active{color:var(--ds-palette-mainBlue-90)}.ds-link:visited{color:#551a8b}.ds-link--standalone{color:var(--ds-palette-mainBlue-70);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-palette-mainBlue-80)}.ds-link--standalone:active{color:var(--ds-palette-mainBlue-90)}.ds-link--standalone:focus-visible{color:var(--ds-palette-mainBlue-70)}.ds-link--standalone:visited{color:var(--ds-palette-mainBlue-70)}";
 const DsLinkStyle0 = dsLinkCss;
 
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
@@ -48,7 +48,7 @@ const DsLink$1 = proxyCustomElement(class DsLink extends H {
             [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
             [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
         });
-        return (h("a", { key: 'f8e36a029709033379e53cc1c409bc9c0069820e', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '88f90209b6557942dd956585b5f77632aa647c8e', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '87169acfb32913d10d27b35a9c6f714385979aa7', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: 'b38677240eb8bd7c1200c8dc08876ba75e7b3e81', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'c3088e302a43b4cbc5601a9adff54a3dc27a59dc', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '25ac189fd216148a05fddfc6e384cfbde59e0e22', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: 'e8db9e6a903263d717a386e2fd61a2f279c4de1d', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '9def43becc24ab8f836ced9eb1f33de903fcfa40', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '301bbcf7464dca9e0e44cd9b74ccc77e67cbfac9', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: 'f6f3b7824f5bb028375f40e2e5743989a56f187d', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '3af94f1f8e4f1199e260929001b99ee56f780dff', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'f91801450c834793bf05a40f011b86f500422eee', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get style() { return DsLinkStyle0; }
 }, [1, "ds-link", {

package/dist/components/ds-radio-button-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsRadioButtonGroup extends Components.DsRadioButtonGroup, HTMLElement {}
+export const DsRadioButtonGroup: {
+    prototype: DsRadioButtonGroup;
+    new (): DsRadioButtonGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;