@uh-design-system/component-library 1.2.0 → 1.3.0-rc.1

package/dist/components/{ds-options2.js → p-BwdzvIVO.js}

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
-import { c as classNames } from './index3.js';
-import { i as idGenerator, t as transformTagName } from './utils.js';
-import { c as cx } from './cx.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes.js';
-import { S as SCRIM_HEIGHT } from './constants.js';
-import { m as multiselectable } from './controlUtils.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-Dsb9Wh3N.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { i as idGenerator, t as transformTagName } from './p-C8DF05Gj.js';
+import { c as cx } from './p-CWC4HOYQ.js';
+import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
+import { S as SCRIM_HEIGHT } from './p-C6xow8e6.js';
+import { m as multiselectable } from './p-DYZnzxkN.js';
 
-const dsOptionsCss = ".ds-options__DFAX9n__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__DFAX9n.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__DFAX9n.sc-ds-options:focus{outline:none}.ds-options__DFAX9n__inner.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.ds-options__DFAX9n__top-scrim.sc-ds-options,.ds-options__DFAX9n__bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-options__DFAX9n__top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__DFAX9n__bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__DFAX9n.has-top-scrim.sc-ds-options .ds-options__DFAX9n__top-scrim.sc-ds-options{display:block}.ds-options__DFAX9n.has-bottom-scrim.sc-ds-options .ds-options__DFAX9n__bottom-scrim.sc-ds-options{display:block}.ds-options__DFAX9n.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__DFAX9n.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";
+const dsOptionsCss = ".ds-options__rbEY9j__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__rbEY9j.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__rbEY9j.sc-ds-options:focus{outline:none}.ds-options__rbEY9j__inner.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.ds-options__rbEY9j__top-scrim.sc-ds-options,.ds-options__rbEY9j__bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-options__rbEY9j__top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__rbEY9j__bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__rbEY9j.has-top-scrim.sc-ds-options .ds-options__rbEY9j__top-scrim.sc-ds-options{display:block}.ds-options__rbEY9j.has-bottom-scrim.sc-ds-options .ds-options__rbEY9j__bottom-scrim.sc-ds-options{display:block}.ds-options__rbEY9j.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__rbEY9j.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";
 
 const optionsIdGenerator = idGenerator('ds-options');
 const DsOptions = proxyCustomElement(class DsOptions extends H {

package/dist/components/{ds-icon2.js → p-ByMQciSE.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, M as Mixin, f as forceUpdate, h, F as Fragment } from './index2.js';
-import { c as classNames } from './index3.js';
-import { t as transformTagName, o as omit, r as remToPx } from './utils.js';
-import { c as cx } from './cx.js';
-import { c as ariaAttributes, a as inheritAttributes, i as inheritAriaAttributes } from './attributes.js';
+import { p as proxyCustomElement, M as Mixin, f as forceUpdate, h, F as Fragment } from './p-Dsb9Wh3N.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { t as transformTagName, o as omit, r as remToPx } from './p-C8DF05Gj.js';
+import { c as cx } from './p-CWC4HOYQ.js';
+import { c as ariaAttributes, a as inheritAttributes, i as inheritAriaAttributes } from './p-BecId8t2.js';
 
 const ariaDeprecationFactory = (Base) => {
     const AriaDeprecation = class extends Base {
@@ -26,7 +26,7 @@ const ariaDeprecationFactory = (Base) => {
     return AriaDeprecation;
 };
 
-const dsIconCss = ":host{display:flex}.ds-icon__DFAX9n--container{display:flex}.ds-icon__DFAX9n--hidden{display:none}";
+const dsIconCss = ":host{display:flex}.ds-icon__rbEY9j--container{display:flex}.ds-icon__rbEY9j--hidden{display:none}";
 
 const isValidSize = (value) => {
     return /^(\d+(\.\d+)?|\.\d+)rem$/.test(value);

package/dist/components/{ds-chip2.js → p-C04HATVa.js}

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, f as forceUpdate, h, F as Fragment } from './index2.js';
-import { r as removeSelection } from './controlUtils.js';
-import { i as idGenerator, t as transformTagName, o as omit, d as declareComponentDependencies } from './utils.js';
-import { c as cx } from './cx.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes.js';
-import { a as ariaDeprecationFactory, d as defineCustomElement$2 } from './ds-icon2.js';
-import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
+import { p as proxyCustomElement, M as Mixin, c as createEvent, f as forceUpdate, h, F as Fragment } from './p-Dsb9Wh3N.js';
+import { r as removeSelection } from './p-DYZnzxkN.js';
+import { i as idGenerator, t as transformTagName, o as omit, d as declareComponentDependencies } from './p-C8DF05Gj.js';
+import { c as cx } from './p-CWC4HOYQ.js';
+import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
+import { a as ariaDeprecationFactory, d as defineCustomElement$2 } from './p-ByMQciSE.js';
+import { d as defineCustomElement$1 } from './p-_aK1HAhE.js';
 
-const dsChipCss = ".ds-chip__DFAX9n: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-chip__DFAX9n{box-sizing:border-box;display:inline-flex;align-items:center;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-primary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);padding:calc(var(--ds-spacing-3xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);border-radius:1rem}.ds-chip__DFAX9n:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-chip__DFAX9n:active{background-color:var(--ds-bgColor-secondary-active)}.ds-chip__DFAX9n__text{padding:0 var(--ds-spacing-3xSmall)}";
+const dsChipCss = ".ds-chip__rbEY9j: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-chip__rbEY9j{box-sizing:border-box;display:inline-flex;align-items:center;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-primary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);padding:calc(var(--ds-spacing-3xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);border-radius:1rem}.ds-chip__rbEY9j:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-chip__rbEY9j:active{background-color:var(--ds-bgColor-secondary-active)}.ds-chip__rbEY9j__text{padding:0 var(--ds-spacing-3xSmall)}";
 
 const chipIdGenerator = idGenerator('ds-chip');
 const DsChip = proxyCustomElement(class DsChip extends Mixin(ariaDeprecationFactory) {

package/dist/{esm/utils-C1bsmWWB.js → components/p-C8DF05Gj.js}

@@ -55,5 +55,13 @@ const ifDefined = (key, value) => {
     }
     return { [key]: value };
 };
+const componentOnReady = (el) => {
+    if (el?.componentOnReady) {
+        return el.componentOnReady();
+    }
+    return new Promise(resolve => {
+        requestAnimationFrame(() => resolve(el));
+    });
+};
 
-export { ifDefined as a, debounce as b, declareComponentDependencies as d, idGenerator as i, omit as o, remToPx as r, transformTagName as t };
+export { ifDefined as a, debounce as b, componentOnReady as c, declareComponentDependencies as d, idGenerator as i, omit as o, remToPx as r, transformTagName as t };

package/dist/components/{ds-group-label2.js → p-C8hTJGro.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import { c as cx } from './cx.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils.js';
-import { d as defineCustomElement$1 } from './ds-assistive-text2.js';
+import { p as proxyCustomElement, H, h } from './p-Dsb9Wh3N.js';
+import { c as cx } from './p-CWC4HOYQ.js';
+import { t as transformTagName, d as declareComponentDependencies } from './p-C8DF05Gj.js';
+import { d as defineCustomElement$1 } from './p-lksCbAZx.js';
 
-const dsGroupLabelCss = ".ds-group-label__DFAX9n__label{padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-group-label__DFAX9n{display:flex;flex-direction:column}.ds-group-label__DFAX9n:empty{display:none}";
+const dsGroupLabelCss = ".ds-group-label__rbEY9j__label{padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-group-label__rbEY9j{display:flex;flex-direction:column}.ds-group-label__rbEY9j:empty{display:none}";
 
 const DsGroupLabel = proxyCustomElement(class DsGroupLabel extends H {
     constructor(registerHost) {

package/dist/components/{ds-breadcrumbs-expand-button2.js → p-CL0hROJy.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
-import { c as classNames } from './index3.js';
-import { g as getLanguage } from './store.js';
-import { c as cx } from './cx.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils.js';
-import { d as defineCustomElement$1 } from './ds-breadcrumbs-separator2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-Dsb9Wh3N.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { g as getLanguage } from './p-CMz3i_J7.js';
+import { c as cx } from './p-CWC4HOYQ.js';
+import { t as transformTagName, d as declareComponentDependencies } from './p-C8DF05Gj.js';
+import { d as defineCustomElement$1 } from './p-sSFLZVkO.js';
 
-const dsBreadcrumbsExpandButtonCss = ".ds-breadcrumbs-expand-button__DFAX9n.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__DFAX9n--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__DFAX9n__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__DFAX9n__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__DFAX9n__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__DFAX9n__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}";
+const dsBreadcrumbsExpandButtonCss = ".ds-breadcrumbs-expand-button__rbEY9j.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__rbEY9j--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__rbEY9j__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__rbEY9j__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__rbEY9j__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__rbEY9j__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}";
 
 const DsBreadcrumbsExpandButton = proxyCustomElement(class DsBreadcrumbsExpandButton extends H {
     constructor(registerHost) {

package/dist/components/{store.js → p-CMz3i_J7.js}

@@ -1,4 +1,4 @@
-import { g as getRenderingRef, f as forceUpdate } from './index2.js';
+import { g as getRenderingRef, f as forceUpdate } from './p-Dsb9Wh3N.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/components/{cx.js → p-CWC4HOYQ.js}

@@ -1,4 +1,4 @@
-import { E as Env } from './index2.js';
+import { E as Env } from './p-Dsb9Wh3N.js';
 
 const cx = (className) => `${className}__${Env.PACKAGE_VERSION}`;
 

package/dist/components/p-CXMryt83.js

@@ -0,0 +1,265 @@
+import { p as proxyCustomElement, M as Mixin, f as forceUpdate, h } from './p-Dsb9Wh3N.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
+import { i as idGenerator, t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './p-C8DF05Gj.js';
+import { c as cx } from './p-CWC4HOYQ.js';
+import { a as ariaDeprecationFactory, d as defineCustomElement$3 } from './p-ByMQciSE.js';
+import { d as defineCustomElement$2 } from './p-D2LIVCeo.js';
+import { d as defineCustomElement$1 } from './p-_aK1HAhE.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__rbEY9j--full-width){width:100%}.ds-button__rbEY9j.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__rbEY9j.sc-ds-button:not(.ds-button__rbEY9j--supplementary) .ds-button__rbEY9j__value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button__rbEY9j--supplementary.sc-ds-button:has(.ds-button__rbEY9j__spinner) .ds-button__rbEY9j__value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button__rbEY9j__icon.sc-ds-button{height:1.5rem}.ds-button__rbEY9j.sc-ds-button:has(.ds-button__rbEY9j__spinner):not(.ds-button__rbEY9j--small) .ds-button__rbEY9j__value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__rbEY9j__spinner.sc-ds-button{display:flex}.ds-button__rbEY9j--icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button__rbEY9j.sc-ds-button:not(.ds-button__rbEY9j--small):not(.ds-button__rbEY9j--secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__rbEY9j.sc-ds-button:not(.ds-button__rbEY9j--small).ds-button__rbEY9j--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__rbEY9j.sc-ds-button:not(.ds-button__rbEY9j--small).ds-button__rbEY9j--icon-only{padding-left:0;padding-right:0}.ds-button__rbEY9j--small.ds-button__rbEY9j--icon-start.sc-ds-button,.ds-button__rbEY9j--small.ds-button__rbEY9j--icon-end.sc-ds-button{gap:var(--ds-spacing-3xSmall)}.ds-button__rbEY9j--small.sc-ds-button:not(.ds-button__rbEY9j--secondary){border-width:0px;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);line-height:150%;letter-spacing:var(--ds-letterSpacing-wide, 0);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__rbEY9j--small.ds-button__rbEY9j--secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);line-height:150%;letter-spacing:var(--ds-letterSpacing-wide, 0);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__rbEY9j--small.ds-button__rbEY9j--icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button__rbEY9j--small.sc-ds-button .ds-button__rbEY9j__icon.sc-ds-button{height:auto}.ds-button__rbEY9j--icon-start.sc-ds-button:not(.ds-button__rbEY9j--small) .ds-button__rbEY9j__icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button__rbEY9j--icon-end.sc-ds-button:not(.ds-button__rbEY9j--small) .ds-button__rbEY9j__icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--blue.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--blue.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--black.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--black.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--white.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--white.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--danger.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__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--danger.sc-ds-button{background-color:var(--ds-bgColor-danger-bold);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger-bold-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--danger.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-bold-active)}.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--danger.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--primary.ds-button__rbEY9j--danger.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--blue.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--blue.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--black.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--black.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--black.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--white.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--white.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--white.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--danger.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__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--danger.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-danger);color:var(--ds-textColor-danger)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--danger.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--danger.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--secondary.ds-button__rbEY9j--danger.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--blue.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--blue.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--black.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--black.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--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__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--white.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--white.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--danger.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__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--danger.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-danger);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--danger.sc-ds-button:active,.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-hover)}.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--danger.ds-button__rbEY9j--disabled.sc-ds-button,.ds-button__rbEY9j.ds-button__rbEY9j--supplementary.ds-button__rbEY9j--danger.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}";
+
+const buttonIdGenerator = idGenerator('ds-button');
+const DsButton = proxyCustomElement(class DsButton extends Mixin(ariaDeprecationFactory) {
+    constructor(registerHost) {
+        super(false);
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    inheritedAttributes = {};
+    buttonEl;
+    pressedKeys = new Set();
+    get el() { return this; }
+    dsForm;
+    dsId = buttonIdGenerator.next().value;
+    dsName = this.dsId;
+    dsText = '';
+    dsValue = '';
+    dsVariant = 'primary';
+    dsColour = 'blue';
+    dsSize = 'medium';
+    dsIcon = '';
+    dsIconPosition = 'start';
+    dsIconTitle;
+    dsIconAriaLabel;
+    dsType = 'button';
+    dsDisabled = false;
+    dsLoading = false;
+    dsUseSpinner = false;
+    dsSpinnerHiddenText;
+    dsFullWidth = false;
+    dsRole;
+    dsAriaDisabled;
+    dsAriaLabel;
+    dsAriaLabelledby;
+    dsAriaDescribedby;
+    dsAriaExpanded;
+    dsAriaPressed;
+    dsHiddenAssistiveText;
+    dsActive = false;
+    hasContent = false;
+    isActive = this.dsActive;
+    text = '';
+    async setFocus() {
+        this.buttonEl.focus();
+    }
+    componentWillLoad() {
+        this.getDeprecationWarningsForAriaAttributes(this.el);
+        if (this.dsUseSpinner && !this.dsSpinnerHiddenText) {
+            throw new Error('dsSpinnerHiddenText is required when dsUseSpinner is true.');
+        }
+        this.isActive = this.dsActive;
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+            ...inheritAriaAttributes(this.el),
+        };
+        this.text = this.dsText || this.dsValue;
+    }
+    componentDidLoad() {
+        this.hasContent =
+            !!this.text ||
+                Array.from(this.el.childNodes).some(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const elem = node;
+                        return !elem.hasAttribute('slot') || elem.getAttribute('slot') === '';
+                    }
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        return node.textContent?.trim().length > 0;
+                    }
+                    return false;
+                });
+    }
+    dsTextObserver(newValue) {
+        this.text = newValue || this.dsValue;
+    }
+    dsValueObserver(newValue) {
+        if (!this.dsText) {
+            this.text = newValue;
+        }
+    }
+    dsActiveObserver(newValue) {
+        this.isActive = newValue;
+    }
+    ariaAttributeObserver(newValue, _oldValue, propName) {
+        this.inheritedAttributes = {
+            ...this.inheritedAttributes,
+            [propName]: newValue,
+        };
+        forceUpdate(this);
+    }
+    handleKeyDown = (event) => {
+        if (event.repeat) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.pressedKeys.add(event.key);
+                this.isActive = true;
+                break;
+        }
+    };
+    handleKeyUp = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.pressedKeys.delete(event.key);
+                if (this.pressedKeys.size === 0) {
+                    this.isActive = this.dsActive;
+                }
+                break;
+        }
+    };
+    getSpinnerColour = () => {
+        if (this.dsVariant === 'primary') {
+            if (this.dsColour === 'blue')
+                return 'white';
+            if (this.dsColour === 'white')
+                return 'black';
+            if (this.dsColour === 'black')
+                return 'white';
+            if (this.dsColour === 'danger')
+                return 'white';
+        }
+        return this.dsColour;
+    };
+    renderIcon = (baseClass) => {
+        const iconClasses = classNames(`${baseClass}__icon`);
+        const iconSize = this.dsSize === 'small' ? '1.25rem' : undefined;
+        const DsIcon = transformTagName('ds-icon', 'ds-button', this.el);
+        return h(DsIcon, { class: iconClasses, dsName: this.dsIcon, dsCustomSize: iconSize, dsTitle: this.dsIconTitle, dsAriaLabel: this.dsIconAriaLabel });
+    };
+    renderButton = () => {
+        const baseClass = cx('ds-button');
+        const classes = classNames(`${baseClass} ${baseClass}--${this.dsVariant} ${baseClass}--${this.dsColour} ${baseClass}--${this.dsSize}`, {
+            [`${baseClass}--icon-start`]: this.dsIcon && this.dsIconPosition === 'start' && this.hasContent,
+            [`${baseClass}--icon-end`]: this.dsIcon && this.dsIconPosition === 'end' && this.hasContent,
+            [`${baseClass}--icon-only`]: this.dsIcon && !this.hasContent,
+            [`${baseClass}--full-width`]: this.dsFullWidth,
+            [`${baseClass}--disabled`]: this.dsDisabled,
+            [`${baseClass}--${this.dsColour}--active`]: this.isActive,
+        });
+        const DsSpinner = transformTagName('ds-spinner', 'ds-button', this.el);
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-button', this.el);
+        const { role: inheritedRole, ['aria-label']: inheritedAriaLabel, ['aria-labelledby']: inheritedAriaLabelledby, ['aria-describedby']: inheritedAriaDescribedby, ['aria-disabled']: inheritedAriaDisabled, ['aria-expanded']: inheritedAriaExpanded, ['aria-pressed']: inheritedAriaPressed, ...restAttributes } = this.inheritedAttributes;
+        const role = this.dsRole ?? inheritedRole;
+        const ariaLabel = this.dsAriaLabel || inheritedAriaLabel;
+        const ariaLabelledby = this.dsAriaLabelledby || inheritedAriaLabelledby;
+        const ariaDescribedby = this.dsAriaDescribedby || inheritedAriaDescribedby;
+        let ariaDisabled;
+        if (this.dsAriaDisabled !== undefined) {
+            if (typeof this.dsAriaDisabled === 'string') {
+                console.warn('dsAriaDisabled should be a boolean, not a string. String support will be deprecated.');
+                ariaDisabled = this.dsAriaDisabled;
+            }
+            else {
+                ariaDisabled = this.dsAriaDisabled ? 'true' : 'false';
+            }
+        }
+        else if (inheritedAriaDisabled) {
+            ariaDisabled = inheritedAriaDisabled;
+        }
+        const ariaExpanded = this.dsAriaExpanded !== undefined ? (this.dsAriaExpanded ? 'true' : 'false') : inheritedAriaExpanded;
+        const ariaPressed = this.dsAriaPressed !== undefined ? (this.dsAriaPressed ? 'true' : 'false') : inheritedAriaPressed;
+        return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, value: this.dsValue, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, ...ifDefined('role', role), ...ifDefined('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby), ...ifDefined('aria-expanded', ariaExpanded), ...ifDefined('aria-pressed', ariaPressed), ...restAttributes }, h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize === 'medium' ? 'medium' : null, dsCustomSize: this.dsSize === 'small' ? '1.25rem' : null }))), this.hasContent && (h("span", { class: `${baseClass}__value` }, h("slot", null, this.text, this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText)))), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
+    };
+    render() {
+        const buttonElement = this.renderButton();
+        return this.dsUseSpinner ? h("div", { "aria-live": "polite" }, buttonElement) : buttonElement;
+    }
+    static get watchers() { return {
+        "dsText": ["dsTextObserver"],
+        "dsValue": ["dsValueObserver"],
+        "dsActive": ["dsActiveObserver"],
+        "aria-disabled": ["ariaAttributeObserver"],
+        "aria-label": ["ariaAttributeObserver"],
+        "aria-labelledby": ["ariaAttributeObserver"],
+        "aria-pressed": ["ariaAttributeObserver"],
+        "aria-expanded": ["ariaAttributeObserver"]
+    }; }
+    static get style() { return dsButtonCss; }
+}, [262, "ds-button", {
+        "dsMuteAriaDeprecationWarning": [4, "ds-mute-aria-deprecation-warning"],
+        "dsForm": [1, "ds-form"],
+        "dsId": [1, "ds-id"],
+        "dsName": [1, "ds-name"],
+        "dsText": [1, "ds-text"],
+        "dsValue": [1, "ds-value"],
+        "dsVariant": [1, "ds-variant"],
+        "dsColour": [1, "ds-colour"],
+        "dsSize": [1, "ds-size"],
+        "dsIcon": [1, "ds-icon"],
+        "dsIconPosition": [1, "ds-icon-position"],
+        "dsIconTitle": [1, "ds-icon-title"],
+        "dsIconAriaLabel": [1, "ds-icon-aria-label"],
+        "dsType": [1, "ds-type"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsLoading": [4, "ds-loading"],
+        "dsUseSpinner": [4, "ds-use-spinner"],
+        "dsSpinnerHiddenText": [1, "ds-spinner-hidden-text"],
+        "dsFullWidth": [4, "ds-full-width"],
+        "dsRole": [1, "ds-role"],
+        "dsAriaDisabled": [4, "ds-aria-disabled"],
+        "dsAriaLabel": [1, "ds-aria-label"],
+        "dsAriaLabelledby": [1, "ds-aria-labelledby"],
+        "dsAriaDescribedby": [1, "ds-aria-describedby"],
+        "dsAriaExpanded": [4, "ds-aria-expanded"],
+        "dsAriaPressed": [4, "ds-aria-pressed"],
+        "dsHiddenAssistiveText": [1, "ds-hidden-assistive-text"],
+        "dsActive": [4, "ds-active"],
+        "hasContent": [32],
+        "isActive": [32],
+        "text": [32],
+        "setFocus": [64]
+    }, undefined, {
+        "dsText": ["dsTextObserver"],
+        "dsValue": ["dsValueObserver"],
+        "dsActive": ["dsActiveObserver"],
+        "aria-disabled": ["ariaAttributeObserver"],
+        "aria-label": ["ariaAttributeObserver"],
+        "aria-labelledby": ["ariaAttributeObserver"],
+        "aria-pressed": ["ariaAttributeObserver"],
+        "aria-expanded": ["ariaAttributeObserver"]
+    }]);
+declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-spinner", null), h("ds-visually-hidden", null)]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-button", "ds-icon", "ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsButton);
+            }
+            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();
+            }
+            break;
+    } });
+}
+
+export { DsButton as D, defineCustomElement as d };

package/dist/components/{linkFactory.js → p-Chy4_q5I.js}

@@ -1,4 +1,4 @@
-import './index2.js';
+import './p-Dsb9Wh3N.js';
 
 const linkFactory = (Base) => {
     const BaseLink = class extends Base {

package/dist/components/{ds-spinner2.js → p-D2LIVCeo.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes.js';
-import { c as classNames } from './index3.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils.js';
-import { c as cx } from './cx.js';
-import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
+import { p as proxyCustomElement, H, h } from './p-Dsb9Wh3N.js';
+import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { t as transformTagName, d as declareComponentDependencies } from './p-C8DF05Gj.js';
+import { c as cx } from './p-CWC4HOYQ.js';
+import { d as defineCustomElement$1 } from './p-_aK1HAhE.js';
 
-const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__DFAX9n{display:inline-block}.ds-spinner__DFAX9n:has(.ds-spinner__DFAX9n__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__DFAX9n{}.ds-spinner__DFAX9n--small{padding:1.5px}.ds-spinner__DFAX9n--medium{padding:3px}.ds-spinner__DFAX9n--large{padding:3px}.ds-spinner__DFAX9n--xLarge{padding:5.5px}.ds-spinner__DFAX9n--2xLarge{padding:5.5px}.ds-spinner__DFAX9n--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__DFAX9n{}.ds-spinner__DFAX9n--below{flex-direction:column;align-items:center}.ds-spinner__DFAX9n--right{flex-direction:row;align-items:center}.ds-spinner__DFAX9n__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__DFAX9n__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__DFAX9n__text--white{color:var(--ds-textColor-white)}.ds-spinner__DFAX9n__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__DFAX9n__segment--1{animation-delay:-0.3s}.ds-spinner__DFAX9n__segment--2{animation-delay:-0.2s}.ds-spinner__DFAX9n__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__DFAX9n__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__DFAX9n__segment--1{animation-delay:-0.6s}.ds-spinner__DFAX9n__segment--2{animation-delay:-0.4s}.ds-spinner__DFAX9n__segment--3{animation-delay:-0.2s}}";
+const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__rbEY9j{display:inline-block}.ds-spinner__rbEY9j:has(.ds-spinner__rbEY9j__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__rbEY9j{}.ds-spinner__rbEY9j--small{padding:1.5px}.ds-spinner__rbEY9j--medium{padding:3px}.ds-spinner__rbEY9j--large{padding:3px}.ds-spinner__rbEY9j--xLarge{padding:5.5px}.ds-spinner__rbEY9j--2xLarge{padding:5.5px}.ds-spinner__rbEY9j--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__rbEY9j{}.ds-spinner__rbEY9j--below{flex-direction:column;align-items:center}.ds-spinner__rbEY9j--right{flex-direction:row;align-items:center}.ds-spinner__rbEY9j__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__rbEY9j__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__rbEY9j__text--white{color:var(--ds-textColor-white)}.ds-spinner__rbEY9j__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__rbEY9j__segment--1{animation-delay:-0.3s}.ds-spinner__rbEY9j__segment--2{animation-delay:-0.2s}.ds-spinner__rbEY9j__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__rbEY9j__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__rbEY9j__segment--1{animation-delay:-0.6s}.ds-spinner__rbEY9j__segment--2{animation-delay:-0.4s}.ds-spinner__rbEY9j__segment--3{animation-delay:-0.2s}}";
 
 const SPINNER_SIZES = {
     'small': 10,
@@ -25,6 +25,7 @@ const SPINNER_COLORS = {
     blue: 'var(--ds-palette-mainBlue-70)',
     black: 'var(--ds-palette-black-95)',
     white: 'var(--ds-palette-white)',
+    danger: 'var(--ds-palette-red-70)',
 };
 const DsSpinner = proxyCustomElement(class DsSpinner extends H {
     constructor(registerHost) {
@@ -65,11 +66,11 @@ const DsSpinner = proxyCustomElement(class DsSpinner extends H {
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (h("div", { key: '8913c8c5401dffba3bb7abe43db3c1afd6775ee3', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: 'd78da25f71202bd5f5c5dc2d92e13c581e834d7f', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': spinnerSizeValue,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: 'e707f822461892f6ccc1bb6b417875ac306ae547', class: `${baseClass}__spinner` }, h("div", { key: '35db86067a9438c5f39798a8acbfa222dcddcfc7', class: segmentClasses(1) }), h("div", { key: '92be670780d43cee87ef8893dca076d9cf0959f2', class: segmentClasses(2) }), h("div", { key: 'dc6b5b27c285f28c0c20a18740b9e879c7226694', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'f92b2cc2f0e096119a36b92b91da4b15bc688866' }, h("span", { key: '5ca590701eb04d3beab6dd416510ff586bfff2b6' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: 'bac1e20291e903aa0c723118d14f307982bea009', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, h("div", { key: 'b2e3d79566f25b904d01ab91d593c78eaf8025d7', class: `${baseClass}__spinner` }, h("div", { key: 'a7b7fd1c0e9360eeb14f65cce4518603af7d6852', class: segmentClasses(1) }), h("div", { key: '8d674f11ab642a2e106933f9e7e77cb24c128d4a', class: segmentClasses(2) }), h("div", { key: '49590fb7f9072695c5a7f49abda7510fd78e7f5c', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '6f93eb6b3c9516f41fee693ae65012164db26ee9' }, h("span", { key: '0fbc33095e1e691abc4d9230ef2804ff2f14c94b' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '95f3a5de9dfe908d52f1dc7b6840d6a3d5667433', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
     static get style() { return dsSpinnerCss; }
 }, [257, "ds-spinner", {