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

package/dist/components/p-nvcs8guN.js

@@ -0,0 +1,284 @@
+import { p as proxyCustomElement, M as Mixin, f as forceUpdate, h } from './p-DRfywe7m.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-J5Ghj1_T.js';
+import { c as cx } from './p-D-tgiyw8.js';
+import { a as ariaDeprecationFactory, d as defineCustomElement$3 } from './p-DKxAYKs-.js';
+import { d as defineCustomElement$2 } from './p-DMCi_s0B.js';
+import { d as defineCustomElement$1 } from './p-BpG_wmwr.js';
+
+const dsButtonCss = ".ds-no-style-leak.sc-ds-button *.sc-ds-button,.ds-button__1Vp5mb.sc-ds-button,.ds-button__1Vp5mb.sc-ds-button .sc-ds-button:where([class*=__1Vp5mb]){all:unset;box-sizing:border-box}.ds-no-style-leak.sc-ds-button *.sc-ds-button{display:block}.sc-ds-button-h{display:inline-block}.sc-ds-button-h:has(.ds-button__1Vp5mb--full-width){width:100%}.ds-button__1Vp5mb.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;cursor:default}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--supplementary) .ds-button__1Vp5mb__value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button__1Vp5mb--supplementary.sc-ds-button:has(.ds-button__1Vp5mb__spinner) .ds-button__1Vp5mb__value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button__1Vp5mb__icon.sc-ds-button{height:1.5rem}.ds-button__1Vp5mb.sc-ds-button:has(.ds-button__1Vp5mb__spinner):not(.ds-button__1Vp5mb--small) .ds-button__1Vp5mb__value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__1Vp5mb__spinner.sc-ds-button{display:flex}.ds-button__1Vp5mb--icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--small):not(.ds-button__1Vp5mb--secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--small).ds-button__1Vp5mb--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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--small).ds-button__1Vp5mb--icon-only{padding-left:0;padding-right:0}.ds-button__1Vp5mb--small.ds-button__1Vp5mb--icon-start.sc-ds-button,.ds-button__1Vp5mb--small.ds-button__1Vp5mb--icon-end.sc-ds-button{gap:var(--ds-spacing-3xSmall)}.ds-button__1Vp5mb--small.sc-ds-button:not(.ds-button__1Vp5mb--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__1Vp5mb--small.ds-button__1Vp5mb--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__1Vp5mb--small.ds-button__1Vp5mb--icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button__1Vp5mb--small.sc-ds-button .ds-button__1Vp5mb__icon.sc-ds-button{height:auto}.ds-button__1Vp5mb--icon-start.sc-ds-button:not(.ds-button__1Vp5mb--small) .ds-button__1Vp5mb__icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button__1Vp5mb--icon-end.sc-ds-button:not(.ds-button__1Vp5mb--small) .ds-button__1Vp5mb__icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue--active{background-color:var(--ds-bgColor-primary-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black--active{background-color:var(--ds-bgColor-black-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white--active{background-color:var(--ds-bgColor-white-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger{background-color:var(--ds-bgColor-danger-bold);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger:hover{background-color:var(--ds-bgColor-danger-bold-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger--active{background-color:var(--ds-bgColor-danger-bold-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue--active{background-color:var(--ds-bgColor-secondary-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black--active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white--active{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-danger);color:var(--ds-textColor-danger)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger:hover{background-color:var(--ds-bgColor-danger)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger--active{background-color:var(--ds-bgColor-danger-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue{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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue--active{background-color:var(--ds-bgColor-secondary-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black{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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black--active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white{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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white--active{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger: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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger{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__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger:hover{background-color:var(--ds-bgColor-danger)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger:active,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger--active{background-color:var(--ds-bgColor-danger-hover)}.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger.ds-button__1Vp5mb--disabled,.ds-button__1Vp5mb.sc-ds-button:not(.ds-button__1Vp5mb--in-input).ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger.sc-ds-button{background-color:var(--ds-bgColor-danger-bold);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger-bold-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-bold-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--primary.ds-button__1Vp5mb--danger.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--blue.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--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__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-danger);color:var(--ds-textColor-danger)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--secondary.ds-button__1Vp5mb--danger.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--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__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--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__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--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__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--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__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger.sc-ds-button:active,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-hover)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger.ds-button__1Vp5mb--disabled.sc-ds-button,.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.ds-button__1Vp5mb--supplementary.ds-button__1Vp5mb--danger.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__1Vp5mb.ds-button__1Vp5mb--in-input.sc-ds-button{width:auto;height:100%;aspect-ratio:1/1}";
+
+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;
+    dsAutoFocus = false;
+    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;
+    dsAriaControls;
+    dsAriaHaspopup;
+    dsHiddenAssistiveText;
+    dsActive = false;
+    dsInInput = 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;
+    }
+    hasDefaultSlotContent = () => {
+        return 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;
+        });
+    };
+    componentDidLoad() {
+        this.hasContent = !!this.text || this.hasDefaultSlotContent();
+    }
+    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;
+        }
+    };
+    handleBlur = () => {
+        this.isActive = false;
+    };
+    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,
+            [`${baseClass}--in-input`]: this.dsInInput,
+        });
+        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, ['aria-controls']: inheritedAriaControls, ['aria-haspopup']: inheritedAriaHaspopup, ...restAttributes } = this.inheritedAttributes;
+        const role = this.dsRole ?? inheritedRole;
+        const ariaLabel = this.dsAriaLabel || inheritedAriaLabel;
+        const ariaLabelledby = this.dsAriaLabelledby || inheritedAriaLabelledby;
+        const ariaDescribedby = this.dsAriaDescribedby || inheritedAriaDescribedby;
+        const ariaControls = this.dsAriaControls || inheritedAriaControls;
+        const ariaHaspopup = this.dsAriaHaspopup !== undefined ? this.dsAriaHaspopup : inheritedAriaHaspopup;
+        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, onBlur: this.handleBlur, ...ifDefined('autofocus', this.dsAutoFocus), ...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), ...ifDefined('aria-controls', ariaControls), ...ifDefined('aria-haspopup', ariaHaspopup), ...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"],
+        "aria-controls": ["ariaAttributeObserver"],
+        "aria-haspopup": ["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"],
+        "dsAutoFocus": [4, "ds-auto-focus"],
+        "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"],
+        "dsAriaControls": [1, "ds-aria-controls"],
+        "dsAriaHaspopup": [8, "ds-aria-haspopup"],
+        "dsHiddenAssistiveText": [1, "ds-hidden-assistive-text"],
+        "dsActive": [4, "ds-active"],
+        "dsInInput": [4, "ds-in-input"],
+        "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"],
+        "aria-controls": ["ariaAttributeObserver"],
+        "aria-haspopup": ["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/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-03-09T12:25:14",
+  "timestamp": "2026-03-20T08:39:51",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.2",
@@ -151,6 +151,44 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "dsHeaderHasBackground",
+          "type": "\"always\" | \"expanded\" | \"never\"",
+          "complexType": {
+            "original": "'expanded' | 'always' | 'never'",
+            "resolved": "\"always\" | \"expanded\" | \"never\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "ds-header-has-background",
+          "reflectToAttr": false,
+          "docs": "Adds a background color to the accordion header area:\n\n- `expanded` (default): Background is visible only when the accordion is expanded.\n- `always`: Background is always visible.\n- `never`: Background is never visible.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'expanded'"
+            }
+          ],
+          "default": "'expanded'",
+          "values": [
+            {
+              "value": "always",
+              "type": "string"
+            },
+            {
+              "value": "expanded",
+              "type": "string"
+            },
+            {
+              "value": "never",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "dsHeadingLevel",
           "type": "number",

package/dist/esm/{ariaDeprecationFactory-BCS5NfQZ.js → ariaDeprecationFactory-CS3vs3iM.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance } from './index-CxKb5d85.js';
+import { r as registerInstance } from './index-CFKBuHGF.js';
 import { a as ariaAttributes } from './attributes-DfbgRyXR.js';
 
 const ariaDeprecationFactory = (Base) => {