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

package/dist/cjs/{constants-ydR_Rcsg.js → constants-47xuonzN.js}

@@ -2,6 +2,8 @@
 
 const FEEDBACK_RESET_TIMEOUT = 3000;
 const FEEDBACK_SET_TIMEOUT = 350;
+const SCRIM_HEIGHT = 44;
 
 exports.FEEDBACK_RESET_TIMEOUT = FEEDBACK_RESET_TIMEOUT;
 exports.FEEDBACK_SET_TIMEOUT = FEEDBACK_SET_TIMEOUT;
+exports.SCRIM_HEIGHT = SCRIM_HEIGHT;

package/dist/cjs/{controlUtils-Cqn295aw.js → controlUtils-Df6dCmrT.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var store = require('./store-CCqF9deg.js');
+var store = require('./store-B5JrXfGq.js');
 
 const valueMissing = () => {
     switch (store.getLanguage()) {
@@ -352,6 +352,26 @@ const selectAnOption = () => {
             return 'Select an option';
     }
 };
+const selections = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'valintaa';
+        case 'sv':
+            return 'val';
+        default:
+            return 'selections';
+    }
+};
+const multiselectable = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'monivalinta';
+        case 'sv':
+            return 'flerval';
+        default:
+            return 'multiselectable';
+    }
+};
 
 exports.allOptions = allOptions;
 exports.atLeastOneOption = atLeastOneOption;
@@ -364,10 +384,12 @@ exports.hidePassword = hidePassword;
 exports.itemsOverage = itemsOverage;
 exports.itemsShortage = itemsShortage;
 exports.loadingOptions = loadingOptions;
+exports.multiselectable = multiselectable;
 exports.noResultsFound = noResultsFound;
 exports.removeSelection = removeSelection;
 exports.searchOrSelectAnOption = searchOrSelectAnOption;
 exports.selectAnOption = selectAnOption;
+exports.selections = selections;
 exports.showPassword = showPassword;
 exports.thereAreOptionsToBrowse = thereAreOptionsToBrowse;
 exports.tooLong = tooLong;

package/dist/cjs/{cx-7_PEyDS7.js → cx-C3dbeP9F.js}

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

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

@@ -1,13 +1,15 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
+var index = require('./index-BLVteh3w.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-CEhBgrbV.js');
-var cx = require('./cx-7_PEyDS7.js');
+var cx = require('./cx-C3dbeP9F.js');
 var attributes = require('./attributes-CdVB4RPe.js');
+var store = require('./store-B5JrXfGq.js');
 
-const dsAccordionCss = ".ds-accordion__JDwdTJ__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__JDwdTJ__open-button.sc-ds-accordion .ds-accordion__JDwdTJ.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__JDwdTJ--border-aligned.sc-ds-accordion::before,.ds-accordion__JDwdTJ__open-button.sc-ds-accordion .ds-accordion__JDwdTJ.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__JDwdTJ--border-aligned.sc-ds-accordion::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__JDwdTJ__open-button.sc-ds-accordion .ds-accordion__JDwdTJ.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__JDwdTJ--border-aligned.sc-ds-accordion::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__JDwdTJ__open-button.sc-ds-accordion .ds-accordion__JDwdTJ.sc-ds-accordion:hover:not(:focus-visible) .ds-accordion__JDwdTJ--border-aligned.sc-ds-accordion::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:hover{cursor:pointer}.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:hover,.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:hover::before,.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:hover::after{background:var(--ds-bgColor-transparent-onLight-hover)}.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:active,.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:active::before,.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:active::after{background:var(--ds-bgColor-transparent-onLight-active)}.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:focus-visible{z-index:1}.ds-accordion__JDwdTJ__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__JDwdTJ__open-button.ds-accordion__JDwdTJ--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__JDwdTJ__open-button.ds-accordion__JDwdTJ--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__JDwdTJ__open-button.ds-accordion__JDwdTJ--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__JDwdTJ__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__JDwdTJ__open-button.sc-ds-accordion:not(.ds-accordion__JDwdTJ--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.sc-ds-accordion-h:first-child .ds-accordion__JDwdTJ__open-button.sc-ds-accordion:not(.ds-accordion__JDwdTJ--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__JDwdTJ__open-button.sc-ds-accordion:not(.ds-accordion__JDwdTJ--hide-bottom-border)[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-accordion__JDwdTJ__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__JDwdTJ__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__JDwdTJ__panel--border-aligned.sc-ds-accordion{position:relative;width:calc(100% - 32px)}.ds-accordion__JDwdTJ__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__JDwdTJ__panel--expanded.sc-ds-accordion self__panel--hide-bottom-border.sc-ds-accordion{border-bottom:0}.ds-accordion__JDwdTJ.sc-ds-accordion-s>[slot=header],.ds-accordion__JDwdTJ .sc-ds-accordion-s>[slot=header]{color:var(--ds-textColor-default)}.ds-accordion__JDwdTJ__content.sc-ds-accordion{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-2xSmall) var(--ds-spacing-small)}.ds-accordion__JDwdTJ__content.sc-ds-accordion .ds-accordion__JDwdTJ--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__JDwdTJ__content.sc-ds-accordion .ds-accordion__JDwdTJ--default.sc-ds-accordion{font-size:var(--ds-fontSize-18)}}.ds-accordion__JDwdTJ__content.sc-ds-accordion .ds-accordion__JDwdTJ--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__JDwdTJ__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__nkrEji.sc-ds-accordion{box-sizing:border-box;position:relative}.ds-accordion__nkrEji--with-background.ds-accordion__nkrEji--expanded.sc-ds-accordion{background-color:var(--ds-bgColor-neutralLight)}.ds-accordion__nkrEji__title.sc-ds-accordion{position:relative;display:flex;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);border-right:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-accordion__nkrEji__title.sc-ds-accordion:not(.ds-accordion__nkrEji__title--hide-top-border) .ds-accordion__nkrEji__open-button.sc-ds-accordion{border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-accordion__nkrEji__title--hide-right-border.sc-ds-accordion{border-right:0}.ds-accordion__nkrEji__title--hide-left-border.sc-ds-accordion{border-left:0}.ds-accordion__nkrEji__title--border-aligned.ds-accordion__nkrEji__title--with-background.sc-ds-accordion::before{content:\"\";position:absolute;display:block;top:0;left:calc(-1 * var(--ds-spacing-small));bottom:0;width:var(--ds-spacing-small)}.ds-accordion__nkrEji__title--border-aligned.ds-accordion__nkrEji__title--with-background.sc-ds-accordion::after{content:\"\";position:absolute;display:block;top:0;right:calc(-1 * var(--ds-spacing-small));bottom:0;width:var(--ds-spacing-small)}.ds-accordion__nkrEji__title--border-aligned.ds-accordion__nkrEji__title--with-background.sc-ds-accordion:has(.ds-accordion__nkrEji__open-button[aria-expanded=true])::before,.ds-accordion__nkrEji__title--border-aligned.ds-accordion__nkrEji__title--with-background.sc-ds-accordion:has(.ds-accordion__nkrEji__open-button[aria-expanded=true])::after{background-color:var(--ds-bgColor-neutralLight)}.ds-accordion__nkrEji__title.sc-ds-accordion:has(.ds-accordion__nkrEji__open-button[aria-expanded=true].ds-accordion__nkrEji__open-button--icon-button){background-color:var(--ds-bgColor-neutralLight)}.ds-accordion__nkrEji__title.sc-ds-accordion:has(.ds-accordion__nkrEji__open-button:hover:not(.ds-accordion__nkrEji__open-button--icon-button)){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-accordion__nkrEji__title.sc-ds-accordion:has(.ds-accordion__nkrEji__open-button:active:not(.ds-accordion__nkrEji__open-button--icon-button)){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-accordion__nkrEji__header-slot.sc-ds-accordion{order:2;position:relative;display:block;width:100%}.ds-accordion__nkrEji__header-slot--icon-button.sc-ds-accordion{border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-accordion__nkrEji__header-slot--hide-top-border.sc-ds-accordion{border-top:0}.ds-accordion__nkrEji__header-slot--hide-bottom-border.sc-ds-accordion{border-bottom:0}.ds-accordion__nkrEji__open-button.sc-ds-accordion{all:unset;position:relative;box-sizing:border-box;display:flex;align-items:flex-start;flex-direction:row;gap:var(--ds-spacing-xSmall);width:100%;color:var(--ds-textColor-default);fill:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);padding:calc(var(--ds-spacing-xSmall) - var(--ds-borderWidth-hairline)) var(--ds-spacing-xSmall)}.ds-accordion__nkrEji__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) * 0)}.ds-accordion__nkrEji__open-button.sc-ds-accordion:hover{cursor:pointer}.ds-accordion__nkrEji__open-button.sc-ds-accordion:focus-visible{z-index:1}.ds-accordion__nkrEji__open-button--default.sc-ds-accordion{font-size:var(--ds-fontSize-16)}@media (min-width: 60rem){.ds-accordion__nkrEji__open-button--default.sc-ds-accordion{font-size:var(--ds-fontSize-18)}}.ds-accordion__nkrEji__open-button--compact.sc-ds-accordion{font-size:var(--ds-fontSize-14)}@media (min-width: 60rem){.ds-accordion__nkrEji__open-button--compact.sc-ds-accordion{font-size:var(--ds-fontSize-16)}}.ds-accordion__nkrEji__open-button--border-aligned.sc-ds-accordion:not(.ds-accordion__nkrEji__open-button--icon-button){padding-inline:0}.ds-accordion__nkrEji__open-button--border-aligned.sc-ds-accordion:not(.ds-accordion__nkrEji__open-button--icon-button)::before{content:\"\";position:absolute;display:block;top:0;left:calc(-1 * var(--ds-spacing-small));bottom:0;width:var(--ds-spacing-small)}.ds-accordion__nkrEji__open-button--border-aligned.sc-ds-accordion:not(.ds-accordion__nkrEji__open-button--icon-button)::after{content:\"\";position:absolute;display:block;top:0;right:calc(-1 * var(--ds-spacing-small));bottom:0;width:var(--ds-spacing-small)}.ds-accordion__nkrEji__open-button--border-aligned.sc-ds-accordion:not(.ds-accordion__nkrEji__open-button--icon-button):hover::before,.ds-accordion__nkrEji__open-button--border-aligned.sc-ds-accordion:not(.ds-accordion__nkrEji__open-button--icon-button):hover::after{background-color:var(--ds-bgColor-transparent-onLight-hover);z-index:1}.ds-accordion__nkrEji__open-button--border-aligned.sc-ds-accordion:not(.ds-accordion__nkrEji__open-button--icon-button):active::before,.ds-accordion__nkrEji__open-button--border-aligned.sc-ds-accordion:not(.ds-accordion__nkrEji__open-button--icon-button):active::after{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-accordion__nkrEji__open-button--hide-bottom-border.sc-ds-accordion{border-bottom:0}.ds-accordion__nkrEji__open-button--icon-button.sc-ds-accordion{display:inline-flex;width:auto;order:1}.ds-accordion__nkrEji__open-button--icon-button.sc-ds-accordion:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-accordion__nkrEji__open-button--icon-button.sc-ds-accordion:active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-accordion__nkrEji__open-button__icon--default.sc-ds-accordion{padding-block:var(--ds-spacing-3xSmall)}.ds-accordion__nkrEji__open-button__header-slot.sc-ds-accordion{display:inline-block}.ds-accordion__nkrEji__open-button__header-slot--default.sc-ds-accordion{padding-block:var(--ds-spacing-3xSmall)}@media (min-width: 60rem){.ds-accordion__nkrEji__open-button__header-slot--default.sc-ds-accordion{padding-block:var(--ds-spacing-4xSmall)}}.ds-accordion__nkrEji__open-button__header-slot--compact.sc-ds-accordion{padding-block:0.0625rem}@media (min-width: 60rem){.ds-accordion__nkrEji__open-button__header-slot--compact.sc-ds-accordion{padding-block:0}}.ds-accordion__nkrEji__panel.sc-ds-accordion{border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);border-right:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-accordion__nkrEji__panel--hide-right-border.sc-ds-accordion{border-right:0}.ds-accordion__nkrEji__panel--hide-left-border.sc-ds-accordion{border-left:0}.ds-accordion__nkrEji__panel--expanded.sc-ds-accordion{display:block}.ds-accordion__nkrEji__panel--with-background.sc-ds-accordion{background-color:var(--ds-bgColor-neutralLight)}.ds-accordion__nkrEji.sc-ds-accordion-s>[slot=header],.ds-accordion__nkrEji .sc-ds-accordion-s>[slot=header]{color:var(--ds-textColor-default)}.ds-accordion__nkrEji__content.sc-ds-accordion{position:relative;color:var(--ds-textColor-default);padding-block:var(--ds-spacing-2xSmall) var(--ds-spacing-small);padding-inline:var(--ds-spacing-xSmall);border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-accordion__nkrEji__content--hide-bottom-border.sc-ds-accordion{border-bottom:0}.ds-accordion__nkrEji__content--has-close-button.sc-ds-accordion{padding-block-end:var(--ds-spacing-2xSmall)}.ds-accordion__nkrEji__content--border-aligned.sc-ds-accordion{padding-inline:0}.ds-accordion__nkrEji__content--border-aligned.sc-ds-accordion::before{content:\"\";position:absolute;display:block;top:0;left:calc(-1 * var(--ds-spacing-small));bottom:0;width:var(--ds-spacing-small)}.ds-accordion__nkrEji__content--border-aligned.sc-ds-accordion::after{content:\"\";position:absolute;display:block;top:0;right:calc(-1 * var(--ds-spacing-small));bottom:0;width:var(--ds-spacing-small)}.ds-accordion__nkrEji__content--with-background.sc-ds-accordion::before,.ds-accordion__nkrEji__content--with-background.sc-ds-accordion::after{background-color:var(--ds-bgColor-neutralLight)}.ds-accordion__nkrEji__close-button.sc-ds-accordion{display:flex;flex-direction:row;padding-block-start:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
 
+const dsAccordionIdGenerator = utils.idGenerator('ds-accordion');
 const DsAccordion = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -18,16 +20,41 @@ const DsAccordion = class {
     dsVariant = 'default';
     dsBorderAligned = false;
     dsOpenByDefault = false;
-    dsId = 'dsaccordion';
+    dsId = dsAccordionIdGenerator.next().value;
     dsHeadingLevel = 2;
     dsUseCloseButton = false;
-    dsCloseButtonLabel = 'Close';
+    dsCloseButtonLabel;
     dsHideTopBorder = false;
+    dsHideRightBorder = true;
     dsHideBottomBorder = false;
+    dsHideLeftBorder = true;
+    dsHeadingVariant = 'button';
+    dsAriaDescribedBy;
+    dsAriaLabelledBy;
+    dsContentHasBackground = true;
     isExpanded = false;
     dsToggle;
     headerButtonRef;
     shouldMoveFocus = false;
+    get ariaLabelledBy() {
+        return [this.dsId, this.dsAriaLabelledBy].filter(Boolean).join(' ');
+    }
+    get DsButton() {
+        return utils.transformTagName('ds-button', 'ds-accordion', this.el);
+    }
+    get DsIcon() {
+        return utils.transformTagName('ds-icon', 'ds-accordion', this.el);
+    }
+    get close() {
+        switch (store.getLanguage()) {
+            case 'fi':
+                return 'Sulje';
+            case 'sv':
+                return 'Stäng';
+            default:
+                return 'Close';
+        }
+    }
     componentWillLoad() {
         if (this.dsOpenByDefault) {
             this.isExpanded = true;
@@ -61,25 +88,51 @@ const DsAccordion = class {
             }
         }
     };
+    renderHeading(baseClass) {
+        const getOpenButtonHideBottomBorder = () => {
+            if (this.dsHeadingVariant === 'button') {
+                return this.isExpanded || this.dsHideBottomBorder;
+            }
+            return !this.isExpanded && this.dsHideBottomBorder;
+        };
+        const buttonHeadingAttributes = this.dsHeadingVariant === 'button'
+            ? {
+                'role': 'heading',
+                'aria-level': this.dsHeadingLevel,
+            }
+            : {};
+        return (index.h("div", { class: index$1.classNames(`${baseClass}__title`, {
+                [`${baseClass}__title--with-background`]: this.dsContentHasBackground,
+                [`${baseClass}__title--border-aligned`]: this.dsBorderAligned,
+                [`${baseClass}__title--hide-top-border`]: this.dsHideTopBorder,
+                [`${baseClass}__title--hide-right-border`]: this.dsHideRightBorder,
+                [`${baseClass}__title--hide-left-border`]: this.dsHideLeftBorder,
+            }), ...buttonHeadingAttributes }, this.dsHeadingVariant === 'icon-button' && (index.h("div", { class: index$1.classNames(`${baseClass}__header-slot`, `${baseClass}__header-slot--${this.dsVariant}`, `${baseClass}__header-slot--${this.dsHeadingVariant}`, {
+                [`${baseClass}__header-slot--hide-top-border`]: this.dsHideTopBorder,
+                [`${baseClass}__header-slot--hide-bottom-border`]: !this.isExpanded && this.dsHideBottomBorder,
+            }) }, index.h("slot", { name: "header" }))), index.h("button", { class: index$1.classNames(`${baseClass}__open-button`, `${baseClass}__open-button--${this.dsVariant}`, `${baseClass}__open-button--${this.dsHeadingVariant}`, {
+                [`${baseClass}__open-button--border-aligned`]: this.dsBorderAligned,
+                [`${baseClass}__open-button--hide-bottom-border`]: getOpenButtonHideBottomBorder(),
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsId}-panel`, "aria-describedby": this.dsAriaDescribedBy, "aria-labelledby": this.ariaLabelledBy, id: this.dsId, ref: el => (this.headerButtonRef = el), type: "button" }, index.h("span", { class: index$1.classNames(`${baseClass}__open-button__icon`, `${baseClass}__open-button__icon--${this.dsVariant}`), "aria-hidden": "true" }, index.h(this.DsIcon, { dsSize: "1.5rem", dsHidden: true, dsName: this.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.dsHeadingVariant === 'button' && (index.h("span", { class: index$1.classNames(`${baseClass}__open-button__header-slot`, `${baseClass}__open-button__header-slot--${this.dsVariant}`) }, index.h("slot", { name: "header" }))))));
+    }
     render() {
-        const iconSize = this.dsVariant === 'compact' ? '1.5rem' : '2rem';
-        const buttonSize = this.dsVariant === 'compact' ? 'small' : 'medium';
-        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: '7b99da8ecf18d36bfd6210f73d94d91c1d3257b2', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
-                [`${baseClass}--border-aligned`]: this.dsBorderAligned,
-            }), ...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: '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,
+        return (index.h("div", { key: '52a04479b59a988e1f2b2f7630706f7bc2140d41', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
+                [`${baseClass}--expanded`]: this.isExpanded,
+                [`${baseClass}--with-background`]: this.dsContentHasBackground,
+            }), ...this.inheritedAttributes }, index.h("div", { key: 'c197d0d374001249c03e05624391b039106390fb', class: `${baseClass}__item` }, this.renderHeading(baseClass), index.h("div", { key: '44f0a439f6ff42951ecdd41528a90971a3117aa6', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: index$1.classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
                 [`${baseClass}__panel--expanded`]: this.isExpanded,
-                [`${baseClass}__panel--hide-bottom-border`]: this.dsHideBottomBorder,
-            }), hidden: !this.isExpanded }, index.h("div", { key: '4ccc901a02799d39641145366730bf1726f95cf0', class: `${baseClass}__content` }, index.h("slot", { key: '7027a2e3dc1784ecfe8be6f18a12c7a2b414affb', name: "content" })), this.dsUseCloseButton && (index.h(DsButton, { key: 'fc4ba607169579bf4caa03736fd8d585810dd83d', 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, dsText: this.dsCloseButtonLabel, dsSize: buttonSize, dsType: "button" }))))));
+                [`${baseClass}__panel--with-background`]: this.dsContentHasBackground,
+                [`${baseClass}__panel--hide-right-border`]: this.dsHideRightBorder,
+                [`${baseClass}__panel--hide-left-border`]: this.dsHideLeftBorder,
+            }), hidden: !this.isExpanded }, index.h("div", { key: 'ddbba44c343a26cd8fef09a5aa421d4fc614c92f', class: index$1.classNames(`${baseClass}__content`, {
+                'ds-bodytext-lg': this.dsVariant === 'default',
+                'ds-bodytext-md': this.dsVariant === 'compact',
+                [`${baseClass}__content--border-aligned`]: this.dsBorderAligned,
+                [`${baseClass}__content--with-background`]: this.dsContentHasBackground,
+                [`${baseClass}__content--hide-bottom-border`]: this.dsHideBottomBorder,
+                [`${baseClass}__content--has-close-button`]: this.dsUseCloseButton,
+            }) }, index.h("slot", { key: '77d611954d9371bcb399ec264a80ba74c765b384', name: "content" }), this.dsUseCloseButton && (index.h(this.DsButton, { key: '6de9aec13d8077b610885d5bd323a737e8cb61e4', id: `${this.dsId}-close-button`, class: `${baseClass}__close-button`, dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsText: this.dsCloseButtonLabel || this.close, dsSize: this.dsVariant === 'compact' ? 'small' : 'medium', dsType: "button" })))))));
     }
     static get watchers() { return {
         "isExpanded": ["watchHandler"]

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
-var cx = require('./cx-7_PEyDS7.js');
+var index = require('./index-BLVteh3w.js');
+var cx = require('./cx-C3dbeP9F.js');
 var utils = require('./utils-CEhBgrbV.js');
 
-const dsAssistiveTextCss = ".ds-assistive-text__JDwdTJ.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 dsAssistiveTextCss = ".ds-assistive-text__nkrEji.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 {
@@ -15,7 +15,7 @@ const DsAssistiveText = class {
     dsText;
     render() {
         const baseClass = cx.cx('ds-assistive-text');
-        return (index.h("small", { key: '8d3e0bf294b377fa31186f438078af55eddc9e05', class: baseClass, id: this.dsId }, index.h("slot", { key: '94a17e2add2dca099516f8a57f723c42a8ca649e' }, this.dsText)));
+        return (index.h("small", { key: 'cd8842479b4aee4c7faf11b8f0e0d456832f1d90', class: baseClass, id: this.dsId }, index.h("slot", { key: '18b10c1bdcc6f240e7605161688e8ebeef7458f0' }, this.dsText)));
     }
 };
 DsAssistiveText.style = dsAssistiveTextCss;

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
+var index = require('./index-BLVteh3w.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-7_PEyDS7.js');
+var cx = require('./cx-C3dbeP9F.js');
 var utils = require('./utils-CEhBgrbV.js');
 
-const dsBadgeCss = ".ds-badge__JDwdTJ.sc-ds-badge{display:flex;width:fit-content;min-width:24px;min-height:24px;padding:0 var(--ds-spacing-3xSmall, 4px);justify-content:center;align-items:center;gap:var(--ds-spacing-3xSmall, 4px);border-radius:12px}.ds-badge__JDwdTJ--default.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-default)}.ds-badge__JDwdTJ--success.sc-ds-badge{background-color:var(--ds-bgColor-success);color:var(--ds-textColor-success)}.ds-badge__JDwdTJ--attention.sc-ds-badge{background-color:var(--ds-bgColor-attention);color:var(--ds-textColor-attention)}.ds-badge__JDwdTJ--danger.sc-ds-badge{background-color:var(--ds-bgColor-danger);color:var(--ds-textColor-danger)}.ds-badge__JDwdTJ--info.sc-ds-badge{background-color:var(--ds-bgColor-info);color:var(--ds-textColor-info)}.ds-badge__JDwdTJ--notification.sc-ds-badge{background-color:var(--ds-palette-red-50);color:var(--ds-textColor-white)}.ds-badge__JDwdTJ--primary.sc-ds-badge{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-badge__JDwdTJ__content.sc-ds-badge{display:flex;padding:0 var(--ds-spacing-3xSmall, 4px);flex-direction:column;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall, 8px)}";
+const dsBadgeCss = ".ds-badge__nkrEji.sc-ds-badge{display:flex;width:fit-content;min-width:24px;min-height:24px;padding:0 var(--ds-spacing-3xSmall, 4px);justify-content:center;align-items:center;gap:var(--ds-spacing-3xSmall, 4px);border-radius:12px}.ds-badge__nkrEji--default.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-default)}.ds-badge__nkrEji--success.sc-ds-badge{background-color:var(--ds-bgColor-success);color:var(--ds-textColor-success)}.ds-badge__nkrEji--attention.sc-ds-badge{background-color:var(--ds-bgColor-attention);color:var(--ds-textColor-attention)}.ds-badge__nkrEji--danger.sc-ds-badge{background-color:var(--ds-bgColor-danger);color:var(--ds-textColor-danger)}.ds-badge__nkrEji--info.sc-ds-badge{background-color:var(--ds-bgColor-info);color:var(--ds-textColor-info)}.ds-badge__nkrEji--notification.sc-ds-badge{background-color:var(--ds-palette-red-50);color:var(--ds-textColor-white)}.ds-badge__nkrEji--primary.sc-ds-badge{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-badge__nkrEji--disabled.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-disabled-onLight)}.ds-badge__nkrEji__content.sc-ds-badge{display:flex;padding:0 var(--ds-spacing-3xSmall, 4px);flex-direction:column;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall, 8px)}.ds-badge__nkrEji__content__text.sc-ds-badge{white-space:nowrap}";
 
 const dsBadgeIdGenerator = utils.idGenerator('ds-badge');
 const DsBadge = class {
@@ -23,7 +23,7 @@ const DsBadge = class {
     }
     render() {
         const baseClass = cx.cx('ds-badge');
-        return (index.h("div", { key: '6dd38424a4fcec26f23cd1cb786d157ce15b2b7b', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, index.h("div", { key: '770553990729afbc0458ccde1e1a6b42b01d25cb', class: `${baseClass}__content` }, index.h("span", { key: '0b17909fc5964f7d6dc7d8d8dd61ba9c67455dec', class: "ds-text-semibold-xs", id: this.dsId, "aria-label": this.dsAriaLabel }, index.h("slot", { key: '8eb5b5c05ea8553aa67d69ef1c1c16183fcfcb69' }, this.dsText, this.dsHiddenAssistiveText && index.h(this.DsVisuallyHidden, { key: '811fd217607129b96888df7d5d2a122131cff3e4', dsTag: "span" }, this.dsHiddenAssistiveText))))));
+        return (index.h("div", { key: 'b0bbd2f6c3ade154d98c7720b376d777f2050e0f', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, index.h("div", { key: 'fc29ce948e28ee19962d8d8b853d69bab2cca710', class: `${baseClass}__content` }, index.h("span", { key: 'd0e6b492379de19efc3a4c8a9b21de097b5f37a0', class: `ds-text-semibold-xs ${baseClass}__content__text`, id: this.dsId, "aria-label": this.dsAriaLabel }, index.h("slot", { key: '4587764e800f9392bd7d3a272bbfd0d84e10663f' }, this.dsText, this.dsHiddenAssistiveText && index.h(this.DsVisuallyHidden, { key: '13a4a5bdf5a1f8f0d4a28525a4dc48c3ccfcba2a', dsTag: "span" }, this.dsHiddenAssistiveText))))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-visually-hidden", null)]);

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

@@ -1,40 +1,18 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
+var index = require('./index-BLVteh3w.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-CEhBgrbV.js');
-var cx = require('./cx-7_PEyDS7.js');
+var linkFactory = require('./linkFactory-lqX26WHh.js');
+var cx = require('./cx-C3dbeP9F.js');
 
-const linkFactory = (Base) => {
-    const BaseLink = class extends Base {
-        constructor(hostRef) {
-            super();
-            index.registerInstance(this, hostRef);
-        }
-        dsRel;
-        dsHrefLang;
-        dsHref;
-        dsTarget;
-        dsDownload;
-        get linkProps() {
-            return {
-                dsHref: this.dsHref,
-                dsHrefLang: this.dsHrefLang,
-                dsRel: this.dsRel,
-                dsTarget: this.dsTarget,
-                dsDownload: this.dsDownload,
-            };
-        }
-    };
-    return BaseLink;
-};
-
-const dsBreadcrumbCss = ".sc-ds-breadcrumb-h{display:contents}.ds-breadcrumb__JDwdTJ.sc-ds-breadcrumb{display:contents}.ds-breadcrumb__JDwdTJ--hidden.sc-ds-breadcrumb{display:none}.ds-breadcrumb__JDwdTJ__content.sc-ds-breadcrumb{display:inline;vertical-align:middle}.ds-breadcrumb__JDwdTJ__content__link.sc-ds-breadcrumb::part(link),.ds-breadcrumb__JDwdTJ__content__link.sc-ds-breadcrumb [part~=\"link\"]{vertical-align:middle}.ds-breadcrumb__JDwdTJ__content__current-page.sc-ds-breadcrumb{color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-style:normal;font-weight:600;line-height:var(--ds-lineHeight-large);vertical-align:middle;letter-spacing:var(--ds-letterSpacing-wide)}";
+const dsBreadcrumbCss = ".sc-ds-breadcrumb-h{display:contents}.ds-breadcrumb__nkrEji.sc-ds-breadcrumb{display:contents}.ds-breadcrumb__nkrEji--hidden.sc-ds-breadcrumb{display:none}.ds-breadcrumb__nkrEji__content.sc-ds-breadcrumb{display:inline;vertical-align:middle}.ds-breadcrumb__nkrEji__content__link.sc-ds-breadcrumb::part(link),.ds-breadcrumb__nkrEji__content__link.sc-ds-breadcrumb [part~=\"link\"]{vertical-align:middle}.ds-breadcrumb__nkrEji__content__current-page.sc-ds-breadcrumb{color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-style:normal;font-weight:600;line-height:var(--ds-lineHeight-large);vertical-align:middle;letter-spacing:var(--ds-letterSpacing-wide)}";
 
-const DsBreadcrumb = class extends index.Mixin(linkFactory) {
+const DsBreadcrumb = class extends index.Mixin(linkFactory.linkFactory) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
+        this.dsClick = index.createEvent(this, "dsClick");
         this.dsIsHiddenChange = index.createEvent(this, "dsIsHiddenChange");
     }
     get el() { return index.getElement(this); }
@@ -72,9 +50,9 @@ const DsBreadcrumb = class extends index.Mixin(linkFactory) {
     render() {
         const baseClass = cx.cx('ds-breadcrumb');
         const contentClass = `${baseClass}__content`;
-        return (index.h(index.Host, { key: '908f257c3483a57aace5356a3ee664abb016a385', role: "listitem" }, index.h("div", { key: 'c57fc14d4f1df21ec84a08adbf68e460b58326c0', class: index$1.classNames(baseClass, {
+        return (index.h(index.Host, { key: 'f16856bec2d49463af6dd60b4a03242fd47f83a1', role: "listitem" }, index.h("div", { key: '63612ebf3e4e693fb16a6fc0676cd9cde4054dad', class: index$1.classNames(baseClass, {
                 [`${baseClass}--hidden`]: this.dsIsHidden,
-            }) }, index.h("div", { key: 'e7170fd4d6db6c355919f7b1a3185a522b3f584e', class: contentClass }, this.dsHasSeparator ? index.h(this.DsBreadcrumbsSeparator, { dsIcon: this.dsSeparatorIcon }) : null, this.dsIsCurrentPage ? this.renderCurrentPageCrumb(contentClass) : this.renderLinkCrumb(contentClass)))));
+            }) }, index.h("div", { key: '050324fecdb87ee70618fd9887ad2e6c4cdb4de0', class: contentClass }, this.dsHasSeparator ? index.h(this.DsBreadcrumbsSeparator, { dsIcon: this.dsSeparatorIcon }) : null, this.dsIsCurrentPage ? this.renderCurrentPageCrumb(contentClass) : this.renderLinkCrumb(contentClass)))));
     }
     static get watchers() { return {
         "dsIsHidden": ["dsIsHiddenObserver"]

package/dist/cjs/ds-breadcrumbs-collapsible.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
+var index = require('./index-BLVteh3w.js');
 var utils = require('./utils-CEhBgrbV.js');
 
 const dsBreadcrumbsCollapsibleCss = ":host{display:contents}";
@@ -35,7 +35,7 @@ const DsBreadcrumbsCollapsible = class {
         this.collapsibleTarget = this.el.querySelector(this.DsBreadcrumb);
     };
     render() {
-        return (index.h(index.Fragment, { key: '00b51db6395dda6347a68e2e0558ecc030ff0978' }, index.h(this.DsBreadcrumbsExpandButton, { key: '20010f18dda5bab38f2aed8fbe18769f318483c1', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), index.h("slot", { key: '1a2fe714ff749a07a412589ead8a3fedff012494', onSlotchange: this.handleDefaultSlotChange })));
+        return (index.h(index.Fragment, { key: '1c6df475a5aa5b6f2f0387c0fba276ee297705b2' }, index.h(this.DsBreadcrumbsExpandButton, { key: 'daeaf622292a2789fe126d5f18b5f8977e83f206', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), index.h("slot", { key: 'b443c7dec71fc5463a14a845270ac6c157cba35a', onSlotchange: this.handleDefaultSlotChange })));
     }
 };
 utils.declareComponentDependencies([index.h("ds-breadcrumbs-expand-button", null)]);

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
+var index = require('./index-BLVteh3w.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var store = require('./store-CCqF9deg.js');
-var cx = require('./cx-7_PEyDS7.js');
+var store = require('./store-B5JrXfGq.js');
+var cx = require('./cx-C3dbeP9F.js');
 var utils = require('./utils-CEhBgrbV.js');
 
-const dsBreadcrumbsExpandButtonCss = ".ds-breadcrumbs-expand-button__JDwdTJ.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__JDwdTJ--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__JDwdTJ__button.sc-ds-breadcrumbs-expand-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-breadcrumbs-expand-button__JDwdTJ__button.sc-ds-breadcrumbs-expand-button{background:none;border:none;padding:0;margin:0;overflow:visible;text-transform:none;display:inline;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:inherit;font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);vertical-align:middle;line-height:1.375;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-breadcrumbs-expand-button__JDwdTJ__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__JDwdTJ__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}";
+const dsBreadcrumbsExpandButtonCss = ".ds-breadcrumbs-expand-button__nkrEji.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__nkrEji--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__nkrEji__button.sc-ds-breadcrumbs-expand-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-breadcrumbs-expand-button__nkrEji__button.sc-ds-breadcrumbs-expand-button{background:none;border:none;padding:0;margin:0;overflow:visible;text-transform:none;display:inline;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:inherit;font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);vertical-align:middle;line-height:1.375;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-breadcrumbs-expand-button__nkrEji__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__nkrEji__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}";
 
 const DsBreadcrumbsExpandButton = class {
     constructor(hostRef) {
@@ -35,9 +35,9 @@ const DsBreadcrumbsExpandButton = class {
     };
     render() {
         const baseClass = cx.cx('ds-breadcrumbs-expand-button');
-        return (index.h("div", { key: '613c93d1ecb890375e7c7707318c1562a13ef311', role: "listitem", class: index$1.classNames(baseClass, {
+        return (index.h("div", { key: '3dd7fed1e26516297c40b4e10c8d36498f40add5', role: "listitem", class: index$1.classNames(baseClass, {
                 [`${baseClass}--hidden`]: this.dsIsHidden,
-            }) }, index.h(this.DsBreadcrumbsSeparator, { key: 'eebadf5d1d4a04a3089ac79b84174781334310e8', dsIcon: this.dsSeparatorIcon }), index.h("button", { key: '54ef6065c84a1e8319b15ae78830ffddc147e677', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
+            }) }, index.h(this.DsBreadcrumbsSeparator, { key: 'da3a24429c1b4715d353752a815b660f150bc0b3', dsIcon: this.dsSeparatorIcon }), index.h("button", { key: '1bf09bcb4c4b3b70d4a748ce1223fa6303ebf577', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
     }
 };
 utils.declareComponentDependencies([index.h("ds-breadcrumbs-separator", null)]);

package/dist/cjs/ds-breadcrumbs-separator.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
-var cx = require('./cx-7_PEyDS7.js');
+var index = require('./index-BLVteh3w.js');
+var cx = require('./cx-C3dbeP9F.js');
 var utils = require('./utils-CEhBgrbV.js');
 
-const dsBreadcrumbsSeparatorCss = ".ds-breadcrumbs-separator__JDwdTJ.sc-ds-breadcrumbs-separator{display:inline-block;line-height:var(--ds-lineHeight-large);vertical-align:middle;margin-left:var(--ds-spacing-3xSmall, 4px);margin-right:var(--ds-spacing-3xSmall, 4px)}@media (min-width: 60rem){.ds-breadcrumbs-separator__JDwdTJ.sc-ds-breadcrumbs-separator{margin-left:var(--ds-spacing-2xSmall, 8px);margin-right:var(--ds-spacing-2xSmall, 8px)}}";
+const dsBreadcrumbsSeparatorCss = ".ds-breadcrumbs-separator__nkrEji.sc-ds-breadcrumbs-separator{display:inline-block;line-height:var(--ds-lineHeight-large);vertical-align:middle;margin-left:var(--ds-spacing-3xSmall, 4px);margin-right:var(--ds-spacing-3xSmall, 4px)}@media (min-width: 60rem){.ds-breadcrumbs-separator__nkrEji.sc-ds-breadcrumbs-separator{margin-left:var(--ds-spacing-2xSmall, 8px);margin-right:var(--ds-spacing-2xSmall, 8px)}}";
 
 const DsBreadcrumbsSeparator = class {
     constructor(hostRef) {
@@ -17,7 +17,7 @@ const DsBreadcrumbsSeparator = class {
     }
     render() {
         const baseClass = cx.cx('ds-breadcrumbs-separator');
-        return index.h(this.DsIcon, { key: 'fc224417870ebe248876aab41fe654882ac00b62', class: baseClass, dsName: this.dsIcon, dsSize: "1rem" });
+        return index.h(this.DsIcon, { key: '541ae60ddd6f6ac4577147ba544fb2742a664a6f', class: baseClass, dsName: this.dsIcon, dsSize: "1rem" });
     }
 };
 DsBreadcrumbsSeparator.style = dsBreadcrumbsSeparatorCss;

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
-var cx = require('./cx-7_PEyDS7.js');
-var store = require('./store-CCqF9deg.js');
+var index = require('./index-BLVteh3w.js');
+var cx = require('./cx-C3dbeP9F.js');
+var store = require('./store-B5JrXfGq.js');
 var utils = require('./utils-Bn8hsElG.js');
 
-const dsBreadcrumbsCss = ".ds-breadcrumbs__JDwdTJ{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:24px;line-height:var(--ds-lineHeight-small)}@media (min-width: 60rem){.ds-breadcrumbs__JDwdTJ{min-height:32px}}.ds-breadcrumbs__JDwdTJ__breadcrumbs{display:inline-block;vertical-align:middle;margin:0;padding:1px 0;list-style:none;line-height:var(--ds-lineHeight-small);font-size:var(--ds-fontSize-14)}@media (min-width: 60rem){.ds-breadcrumbs__JDwdTJ__breadcrumbs{padding:var(--ds-spacing-4xSmall, 2px) 0;font-size:var(--ds-fontSize-16)}}";
+const dsBreadcrumbsCss = ".ds-breadcrumbs__nkrEji{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:24px;line-height:var(--ds-lineHeight-small)}@media (min-width: 60rem){.ds-breadcrumbs__nkrEji{min-height:32px}}.ds-breadcrumbs__nkrEji__breadcrumbs{display:inline-block;vertical-align:middle;margin:0;padding:1px 0;list-style:none;line-height:var(--ds-lineHeight-small);font-size:var(--ds-fontSize-14)}@media (min-width: 60rem){.ds-breadcrumbs__nkrEji__breadcrumbs{padding:var(--ds-spacing-4xSmall, 2px) 0;font-size:var(--ds-fontSize-16)}}";
 
 const DsBreadcrumbs = class {
     constructor(hostRef) {
@@ -40,7 +40,7 @@ const DsBreadcrumbs = class {
     }
     render() {
         const baseClass = cx.cx('ds-breadcrumbs');
-        return (index.h("nav", { key: '3346bddfcd085024dfe2157733c16f87881413a0', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, index.h("div", { key: '0e221372dd91b3030a0329c77049046639f7e25a', role: "list", class: `${baseClass}__breadcrumbs` }, index.h("slot", { key: '5603b5cb178fb3b68a4c9aedec9f684aa668df6a' }))));
+        return (index.h("nav", { key: '2816eaa07442863263428a20c3bc8842f0c66dbe', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, index.h("div", { key: '4c733a418228ae00109b9beba6c7e9873f331b1a', role: "list", class: `${baseClass}__breadcrumbs` }, index.h("slot", { key: '56245a7489d96ef9bae606d3cfa872654b47ca12' }))));
     }
     static get watchers() { return {
         "size": ["sizeObserver"]

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
+var index = require('./index-BLVteh3w.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-CdVB4RPe.js');
 var utils = require('./utils-CEhBgrbV.js');
-var cx = require('./cx-7_PEyDS7.js');
+var cx = require('./cx-C3dbeP9F.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__JDwdTJ--full-width){width:100%}.ds-button__JDwdTJ.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__JDwdTJ.sc-ds-button:not(.ds-button__JDwdTJ--supplementary) .ds-button__JDwdTJ__value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button__JDwdTJ--supplementary.sc-ds-button:has(.ds-button__JDwdTJ__spinner) .ds-button__JDwdTJ__value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button__JDwdTJ__icon.sc-ds-button{height:1.5rem}.ds-button__JDwdTJ.sc-ds-button:has(.ds-button__JDwdTJ__spinner):not(.ds-button__JDwdTJ--small) .ds-button__JDwdTJ__value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__JDwdTJ--icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button__JDwdTJ.sc-ds-button:not(.ds-button__JDwdTJ--small):not(.ds-button__JDwdTJ--secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__JDwdTJ.sc-ds-button:not(.ds-button__JDwdTJ--small).ds-button__JDwdTJ--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__JDwdTJ.sc-ds-button:not(.ds-button__JDwdTJ--small).ds-button__JDwdTJ--icon-only{padding-left:0;padding-right:0}.ds-button__JDwdTJ--small.sc-ds-button:not(.ds-button__JDwdTJ--secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__JDwdTJ--small.ds-button__JDwdTJ--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__JDwdTJ--small.ds-button__JDwdTJ--icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button__JDwdTJ--small.sc-ds-button .ds-button__JDwdTJ__icon.sc-ds-button{height:1rem}.ds-button__JDwdTJ--icon-start.sc-ds-button:not(.ds-button__JDwdTJ--small) .ds-button__JDwdTJ__icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button__JDwdTJ--icon-end.sc-ds-button:not(.ds-button__JDwdTJ--small) .ds-button__JDwdTJ__icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--blue.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--blue.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--black.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--black.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--white.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--white.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--primary.ds-button__JDwdTJ--white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--blue.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--blue.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--black.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--black.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--white.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--white.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--secondary.ds-button__JDwdTJ--white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--blue.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--blue.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--black.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--black.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--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__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--white.sc-ds-button:active,.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--white.ds-button__JDwdTJ--disabled.sc-ds-button,.ds-button__JDwdTJ.ds-button__JDwdTJ--supplementary.ds-button__JDwdTJ--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__nkrEji--full-width){width:100%}.ds-button__nkrEji.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__nkrEji.sc-ds-button:not(.ds-button__nkrEji--supplementary) .ds-button__nkrEji__value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button__nkrEji--supplementary.sc-ds-button:has(.ds-button__nkrEji__spinner) .ds-button__nkrEji__value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button__nkrEji__icon.sc-ds-button{height:1.5rem}.ds-button__nkrEji.sc-ds-button:has(.ds-button__nkrEji__spinner):not(.ds-button__nkrEji--small) .ds-button__nkrEji__value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__nkrEji--icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button__nkrEji.sc-ds-button:not(.ds-button__nkrEji--small):not(.ds-button__nkrEji--secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__nkrEji.sc-ds-button:not(.ds-button__nkrEji--small).ds-button__nkrEji--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__nkrEji.sc-ds-button:not(.ds-button__nkrEji--small).ds-button__nkrEji--icon-only{padding-left:0;padding-right:0}.ds-button__nkrEji--small.sc-ds-button:not(.ds-button__nkrEji--secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__nkrEji--small.ds-button__nkrEji--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__nkrEji--small.ds-button__nkrEji--icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button__nkrEji--small.sc-ds-button .ds-button__nkrEji__icon.sc-ds-button{height:1rem}.ds-button__nkrEji--icon-start.sc-ds-button:not(.ds-button__nkrEji--small) .ds-button__nkrEji__icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button__nkrEji--icon-end.sc-ds-button:not(.ds-button__nkrEji--small) .ds-button__nkrEji__icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--blue.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--blue.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--black.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--black.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--white.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--white.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--primary.ds-button__nkrEji--white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--blue.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--blue.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--black.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--black.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--black.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--white.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--white.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--white.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--secondary.ds-button__nkrEji--white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--blue.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--blue.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--black.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--black.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--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__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--white.sc-ds-button:active,.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--white.ds-button__nkrEji--disabled.sc-ds-button,.ds-button__nkrEji.ds-button__nkrEji--supplementary.ds-button__nkrEji--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 {