dap-design-system 0.61.5 → 0.61.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/_styles/button.scss.js +1 -1
- package/dist/components/button/button.component.d.ts +64 -9
- package/dist/components/button/button.component.js.map +1 -1
- package/dist/components/datepicker/datepicker.component.d.ts +3 -3
- package/dist/components/datepicker/datepicker.component.js +59 -56
- package/dist/components/datepicker/datepicker.component.js.map +1 -1
- package/dist/components/tooltip/tooltip.scss.js +1 -1
- package/dist/components.native.css +143 -61
- package/dist/components.native.css.map +1 -1
- package/dist/manifest/types/vue/index.d.ts +431 -431
- package/dist/manifest/vscode.html-custom-data.json +322 -322
- package/dist/manifest/web-types.json +940 -940
- package/dist/react/dap-ds-button/index.d.ts +64 -9
- package/dist/react/dap-ds-button/index.js.map +1 -1
- package/dist/react/dap-ds-datepicker/index.d.ts +1 -1
- package/dist/react/dap-ds-datepicker/index.js.map +1 -1
- package/dist/react/index.d.ts +12 -12
- package/dist/react-types.ts +12 -12
- package/dist/react.js +52 -52
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const t = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:inline-block;position:relative;width:auto;vertical-align:middle;--dds-button-padding-x: var(--dds-spacing-300);--dds-button-padding-y: var(--dds-spacing-300);--dds-button-border-radius: var(--dds-radius-rounded);--dds-button-font-weight: 700;--dds-button-line-height: var(--dds-font-line-height-large);--dds-button-transition: all .2s ease-in-out;--dds-button-disabled-opacity: .5;--dds-button-size-lg: var(--dds-spacing-1200);--dds-button-size-md: var(--dds-spacing-1000);--dds-button-size-sm: var(--dds-spacing-800);--dds-button-size-xs: var(--dds-spacing-600);--dds-button-circle-lg: var(--dds-spacing-1200);--dds-button-circle-md: var(--dds-spacing-1000);--dds-button-circle-sm: var(--dds-spacing-800);--dds-button-circle-xs: var(--dds-spacing-600);--dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);--dds-button-primary-color-bg-hover: var( --dds-button-primary-background-hover );--dds-button-primary-color-bg-active: var( --dds-button-primary-background-pressed );--dds-button-primary-color-bg-disabled: var( --dds-button-primary-background-disabled );--dds-button-primary-color-text: var(--dds-button-primary-text-enabled);--dds-button-primary-color-text-disabled: var( --dds-button-primary-text-disabled );--dds-button-primary-inverted-color-bg: var( --dds-button-primary-background-inverted-enabled );--dds-button-primary-inverted-color-bg-hover: var( --dds-button-primary-background-inverted-hover );--dds-button-primary-inverted-color-bg-active: var( --dds-button-primary-background-inverted-pressed );--dds-button-primary-inverted-color-bg-disabled: var( --dds-button-primary-background-inverted-disabled );--dds-button-primary-inverted-color-text: var( --dds-button-primary-text-inverted );--dds-button-primary-inverted-color-text-disabled: var( --dds-button-primary-text-inverted-disabled );--dds-button-outline-color-border: var(--dds-button-outline-border-enabled);--dds-button-outline-color-border-hover: var( --dds-button-outline-border-hover );--dds-button-outline-color-border-active: var( --dds-button-outline-border-pressed );--dds-button-outline-color-border-disabled: var( --dds-button-outline-border-disabled );--dds-button-outline-color-text: var(--dds-button-outline-text-enabled);--dds-button-outline-color-text-hover: var(--dds-button-outline-text-hover);--dds-button-outline-color-text-active: var( --dds-button-outline-text-pressed );--dds-button-outline-color-text-disabled: var( --dds-button-outline-text-disabled );--dds-button-outline-inverted-color-border: var( --dds-button-outline-border-inverted-enabled );--dds-button-outline-inverted-color-border-hover: var( --dds-button-outline-border-inverted-hover );--dds-button-outline-inverted-color-border-active: var( --dds-button-outline-border-inverted-pressed );--dds-button-outline-inverted-color-border-disabled: var( --dds-button-outline-border-inverted-disabled );--dds-button-outline-inverted-color-text: var( --dds-button-outline-text-inverted-enabled );--dds-button-outline-inverted-color-text-hover: var( --dds-button-outline-text-inverted-hover );--dds-button-outline-inverted-color-text-active: var( --dds-button-outline-text-inverted-pressed );--dds-button-outline-inverted-color-text-disabled: var( --dds-button-outline-text-inverted-disabled );--dds-button-subtle-color-bg: var(--dds-button-subtle-background-enabled);--dds-button-subtle-color-bg-hover: var(--dds-button-subtle-background-hover);--dds-button-subtle-color-bg-active: var( --dds-button-subtle-background-pressed );--dds-button-subtle-color-bg-disabled: var( --dds-button-subtle-background-disabled );--dds-button-subtle-color-border: var(--dds-button-subtle-border-enabled);--dds-button-subtle-color-border-hover: var(--dds-button-subtle-border-hover);--dds-button-subtle-color-border-active: var( --dds-button-subtle-border-pressed );--dds-button-subtle-color-border-disabled: var( --dds-button-subtle-border-disabled );--dds-button-subtle-color-text: var(--dds-button-subtle-text-enabled);--dds-button-subtle-color-text-hover: var(--dds-button-subtle-text-hover);--dds-button-subtle-color-text-active: var(--dds-button-subtle-text-pressed);--dds-button-subtle-color-text-disabled: var( --dds-button-subtle-text-disabled );--dds-button-subtle-destructive-color-text: var( --dds-button-subtle-text-destructive-enabled );--dds-button-subtle-destructive-color-text-hover: var( --dds-button-subtle-text-destructive-hover );--dds-button-subtle-destructive-color-text-active: var( --dds-button-subtle-text-destructive-pressed );--dds-button-subtle-destructive-color-border: var( --dds-button-subtle-border-destructive-enabled );--dds-button-subtle-destructive-color-border-hover: var( --dds-button-subtle-border-destructive-hover );--dds-button-subtle-destructive-color-border-active: var( --dds-button-subtle-border-destructive-pressed );--dds-button-subtle-destructive-color-bg: var( --dds-button-subtle-background-destructive-enabled );--dds-button-subtle-destructive-color-bg-hover: var( --dds-button-subtle-background-destructive-hover );--dds-button-subtle-destructive-color-bg-active: var( --dds-button-subtle-background-destructive-pressed );--dds-button-clean-color-text: var(--dds-text-link-base);--dds-button-clean-color-text-hover: var(--dds-text-link-hover);--dds-button-clean-color-text-active: var(--dds-text-link-pressed);--dds-button-clean-color-text-disabled: var(--dds-text-neutral-disabled);--dds-button-clean-inverted-color-text: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-hover: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-active: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-disabled: var( --dds-text-neutral-disabled );--dds-button-danger-color-bg: var( --dds-button-primary-background-destructive-enabled );--dds-button-danger-color-bg-hover: var( --dds-button-primary-background-destructive-hover );--dds-button-danger-color-bg-active: var( --dds-button-primary-background-destructive-pressed );--dds-button-danger-color-text: var(--dds-button-primary-text-enabled);--dds-button-danger-outline-color-border: var( --dds-button-outline-border-destructive-enabled );--dds-button-danger-outline-color-border-hover: var( --dds-button-outline-border-destructive-hover );--dds-button-danger-outline-color-border-active: var( --dds-button-outline-border-destructive-pressed );--dds-button-danger-outline-color-text: var( --dds-button-outline-text-destructive-enabled );--dds-button-danger-outline-color-text-hover: var( --dds-button-outline-text-destructive-hover );--dds-button-danger-outline-color-text-active: var( --dds-button-outline-text-destructive-pressed );--dds-button-subtle-menu-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-opened-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-opened-border: transparent;--dds-button-subtle-menu-opened-background: var( --dds-button-subtle-background-neutral-pressed );--dds-button-subtle-menu-opened-color: var( --dds-button-subtle-text-neutral-hover );--dds-button-subtle-menu-item-color-bg: transparent;--dds-button-subtle-menu-item-color-bg-hover: var( --dds-transparent-black-subtle );--dds-button-subtle-menu-item-color-bg-active: var( --dds-transparent-black-subtle );--dds-button-subtle-menu-item-color-text: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-hover: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-active: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-disabled: var( --dds-text-primary-base );--dds-button-subtle-menu-item-padding: var(--dds-spacing-100) var(--dds-spacing-200);--dds-button-subtle-menu-item-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-item-font-weight: var(--dds-font-weight-medium);--dds-button-subtle-menu-item-font-size: var(--dds-font-size-base);--dds-button-subtle-menu-item-line-height: var(--dds-font-line-height-xlarge)}:host([variant=subtle-menu][aria-expanded=true]) .button{border-radius:var(--dds-button-subtle-menu-opened-border-radius);border-color:var(--dds-button-subtle-menu-opened-border);background-color:var(--dds-button-subtle-menu-opened-background);color:var(--dds-button-subtle-menu-opened-color)}:host([data-oklch-poc]){--dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);--dds-button-primary-color-bg-hover: var( --dds-button-primary-background-hover );--dds-button-primary-color-bg-active: var( --dds-button-primary-background-pressed );--dds-button-primary-color-bg-disabled: var( --dds-button-primary-background-disabled );--dds-button-primary-color-text: var(--dds-button-primary-text-enabled);--dds-button-primary-color-text-disabled: var( --dds-button-primary-text-disabled )}a{text-decoration:none}.button__highcontrast{position:absolute;width:100%;height:100%;border:var(--dds-border-width-base) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-radius-rounded)}.button__highcontrast:hover{border-width:var(--dds-border-width-large);border-color:var(--dds-border-neutral-transparent-interactive, #fff500)}.button__highcontrast:active{border-width:var(--dds-border-width-xlarge)}.button{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;position:relative;flex-direction:row;align-items:center;justify-content:center;width:auto;height:auto;column-gap:var(--dds-spacing-100);transition:var(--dds-button-transition);border:var(--dds-border-width-large) solid transparent;border-radius:var(--dds-button-border-radius);font-weight:var(--dds-button-font-weight);line-height:var(--dds-button-line-height);vertical-align:top;cursor:pointer}.button:focus-visible{outline-style:solid}.button .button__text{padding:0 var(--dds-spacing-100)}.button .button__text span{line-height:var(--dds-button-line-height)}.button[disabled],.button.button--disabled{opacity:var(--dds-button-disabled-opacity);cursor:not-allowed}.button[disabled]:focus-visible,.button.button--disabled:focus-visible{outline-style:solid}.button[disabled]>*,.button.button--disabled>*{pointer-events:none}.button.dds-button--loading .button__spinner{display:flex;position:absolute;align-items:center;justify-content:center;animation:dds-spin 1s linear infinite}.button.dds-button--loading .button__text{opacity:0}.button--lg{min-width:var(--dds-spacing-2400);min-height:var(--dds-button-size-lg);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:1.125rem}.button--lg.dds-button--circle{width:var(--dds-button-circle-lg);min-width:0;min-height:var(--dds-button-circle-lg);padding:0}.button--md{min-width:var(--dds-spacing-2000);min-height:var(--dds-button-size-md);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:1rem}.button--md.dds-button--circle{width:var(--dds-button-circle-md);min-width:0;max-width:var(--dds-button-circle-md);min-height:var(--dds-button-circle-md);padding:0}.button--sm{min-width:var(--dds-spacing-1200);min-height:var(--dds-button-size-sm);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:.875rem}.button--sm.dds-button--circle{width:var(--dds-button-circle-sm);min-width:0;max-width:var(--dds-button-circle-sm);min-height:var(--dds-button-circle-sm);padding:0}.button--xs{min-width:var(--dds-spacing-1200);min-height:var(--dds-button-size-xs);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:var(--dds-font-xs)}.button--xs.dds-button--circle{width:var(--dds-button-circle-xs);min-width:0;max-width:var(--dds-button-circle-xs);min-height:var(--dds-button-circle-xs);padding:0}.button--icon{border-width:0;background-color:var(--dds-black-5);color:var(--dds-icon-neutral-base)}.button--icon:hover{background-color:var(--dds-black-10)}.button--icon:active{background-color:var(--dds-black-20)}.button--icon.disabled{border-width:0;background-color:transparent;cursor:not-allowed}.button--icon.disabled:hover{background-color:transparent}.button--primary{background-color:var(--dds-button-primary-color-bg);color:var(--dds-button-primary-color-text)}.button--primary:hover{background-color:var(--dds-button-primary-color-bg-hover)}.button--primary:active{background-color:var(--dds-button-primary-color-bg-active)}.button--primary[disabled],.button--primary.button--disabled{background-color:var(--dds-button-primary-color-bg-disabled);color:var(--dds-button-primary-color-text-disabled)}.button--primary.dds-link{color:var(--dds-button-primary-color-text);text-decoration:none}.button--primary.dds-link:hover,.button--primary.dds-link:active{color:var(--dds-button-primary-color-text)}.button--primary.dds-button--active{background-color:var(--dds-button-primary-color-bg-hover)}.button--primary-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);background-color:var(--dds-button-primary-inverted-color-bg);color:var(--dds-button-primary-inverted-color-text)}.button--primary-inverted:hover{background-color:var(--dds-button-primary-inverted-color-bg-hover)}.button--primary-inverted:active{background-color:var(--dds-button-primary-inverted-color-bg-active)}.button--primary-inverted[disabled],.button--primary-inverted.button--disabled{background-color:var(--dds-button-primary-inverted-color-bg-disabled);color:var(--dds-button-primary-inverted-color-text-disabled)}.button--primary-inverted.dds-link{color:var(--dds-button-primary-inverted-color-text);text-decoration:none}.button--primary-inverted.dds-link:hover,.button--primary-inverted.dds-link:active{color:var(--dds-button-primary-inverted-color-text)}.button--primary-inverted.dds-button--active{background-color:var(--dds-button-primary-inverted-color-bg-hover)}.button--primary.dds-button--danger,.button--primary-inverted.dds-button--danger{background-color:var(--dds-button-danger-color-bg);color:var(--dds-button-danger-color-text)}.button--primary.dds-button--danger:hover,.button--primary-inverted.dds-button--danger:hover{background-color:var(--dds-button-danger-color-bg-hover)}.button--primary.dds-button--danger:active,.button--primary-inverted.dds-button--danger:active{background-color:var(--dds-button-danger-color-bg-active)}.button--primary[disabled],.button--primary.button--disabled,.button--primary-inverted[disabled],.button--primary-inverted.button--disabled,.button--primary[disabled]:hover,.button--primary.button--disabled:hover,.button--primary-inverted[disabled]:hover,.button--primary-inverted.button--disabled:hover,.button--primary[disabled]:active,.button--primary.button--disabled:active,.button--primary-inverted[disabled]:active,.button--primary-inverted.button--disabled:active{background-color:var(--dds-button-primary-color-bg-disabled);color:var(--dds-button-primary-color-text-disabled)}.button--outline{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-color-border);background-color:transparent;color:var(--dds-button-outline-color-text)}.button--outline:hover{border-color:var(--dds-button-outline-color-border-hover);color:var(--dds-button-outline-color-text-hover)}.button--outline:active{border-color:var(--dds-button-outline-color-border-active);color:var(--dds-button-outline-color-text-active)}.button--outline[disabled],.button--outline.button--disabled{border-color:var(--dds-button-outline-color-border-disabled);color:var(--dds-button-outline-color-text-disabled)}.button--outline.dds-link{color:var(--dds-button-outline-color-text);text-decoration:none}.button--outline.dds-link:hover{color:var(--dds-button-outline-color-text-hover)}.button--outline.dds-link:active{color:var(--dds-button-outline-color-text-active)}.button--outline.dds-button--active{border-color:var(--dds-button-outline-color-border-hover);color:var(--dds-button-outline-color-text-hover)}.button--outline-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-inverted-color-border);background-color:transparent;color:var(--dds-button-outline-inverted-color-text)}.button--outline-inverted:hover{border-color:var(--dds-button-outline-inverted-color-border-hover);color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline-inverted:active{border-color:var(--dds-button-outline-inverted-color-border-active);color:var(--dds-button-outline-inverted-color-text-active)}.button--outline-inverted[disabled],.button--outline-inverted.button--disabled{border-color:var(--dds-button-outline-inverted-color-border-disabled);color:var(--dds-button-outline-inverted-color-text-disabled)}.button--outline-inverted.dds-link{color:var(--dds-button-outline-inverted-color-text);text-decoration:none}.button--outline-inverted.dds-link:hover{color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline-inverted.dds-link:active{color:var(--dds-button-outline-inverted-color-text-active)}.button--outline-inverted.dds-button--active{border-color:var(--dds-button-outline-inverted-color-border-hover);color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline.dds-button--danger,.button--outline-inverted.dds-button--danger{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-danger-outline-color-border);background-color:transparent;color:var(--dds-button-danger-outline-color-text)}.button--outline.dds-button--danger:hover,.button--outline-inverted.dds-button--danger:hover{border-color:var(--dds-button-danger-outline-color-border-hover);color:var(--dds-button-danger-outline-color-text-hover)}.button--outline.dds-button--danger:active,.button--outline-inverted.dds-button--danger:active{border-color:var(--dds-button-danger-outline-color-border-active);color:var(--dds-button-danger-outline-color-text-active)}.button--outline[disabled],.button--outline.button--disabled,.button--outline-inverted[disabled],.button--outline-inverted.button--disabled{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-color-border-disabled);background-color:transparent;color:var(--dds-button-outline-color-text-disabled)}.button--subtle{border:var(--dds-border-width-base) solid var(--dds-button-subtle-color-border);background-color:var(--dds-button-subtle-color-bg);color:var(--dds-button-subtle-color-text)}.button--subtle:hover{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle:active{border-color:var(--dds-button-subtle-color-border-active);background-color:var(--dds-button-subtle-color-bg-active);color:var(--dds-button-subtle-color-text-active)}.button--subtle[disabled],.button--subtle.button--disabled{border-color:var(--dds-button-subtle-color-border-disabled);background-color:var(--dds-button-subtle-color-bg-disabled);color:var(--dds-button-subtle-color-text-disabled)}.button--subtle.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle.dds-button--danger{border:var(--dds-border-width-base) solid var(--dds-button-subtle-destructive-color-border);background-color:var(--dds-button-subtle-destructive-color-bg);color:var(--dds-button-subtle-destructive-color-text)}.button--subtle.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle.dds-button--active{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-neutral{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-neutral-enabled);background-color:var(--dds-button-subtle-background-neutral-enabled);color:var(--dds-button-subtle-text-neutral-enabled)}.button--subtle-neutral:hover{border-color:var(--dds-button-subtle-border-neutral-hover);background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral:active{border-color:var(--dds-button-subtle-border-neutral-pressed);background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral.dds-link{color:var(--dds-button-subtle-text-neutral-enabled);text-decoration:none}.button--subtle-neutral.dds-link:hover,.button--subtle-neutral.dds-link:active{color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-neutral.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-neutral.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-neutral.dds-button--active{border-color:var(--dds-button-subtle-border-neutral-hover);background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu{border:var(--dds-border-width-base) solid transparent;border-radius:var(--dds-button-subtle-menu-border-radius);background-color:transparent;color:var(--dds-button-subtle-text-neutral-enabled)}.button--subtle-menu:hover{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu:active{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu.dds-link{color:var(--dds-button-subtle-text-neutral-enabled);text-decoration:none}.button--subtle-menu.dds-link:hover,.button--subtle-menu.dds-link:active{color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-menu.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-menu.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-menu.dds-button--active{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu-item{display:flex;align-items:center;width:100%;min-width:auto;height:auto;padding:var(--dds-button-subtle-menu-item-padding);border:0;border-radius:var(--dds-button-subtle-menu-item-border-radius);background-color:var(--dds-button-subtle-menu-item-color-bg);color:var(--dds-button-subtle-menu-item-color-text);font-family:var(--dds-font-type);font-size:var(--dds-button-subtle-menu-item-font-size);font-weight:var(--dds-button-subtle-menu-item-font-weight);line-height:var(--dds-button-subtle-menu-item-line-height);text-align:left;text-decoration:none}.button--subtle-menu-item .button__text{display:flex;flex:1;align-items:center;padding:0;gap:var(--dds-spacing-100)}.button--subtle-menu-item:hover:not([disabled],.button--disabled){background-color:var(--dds-button-subtle-menu-item-color-bg-hover);color:var(--dds-button-subtle-menu-item-color-text-hover)}.button--subtle-menu-item:active:not([disabled],.button--disabled){background-color:var(--dds-button-subtle-menu-item-color-bg-active);color:var(--dds-button-subtle-menu-item-color-text-active)}.button--subtle-menu-item:focus-visible:not([disabled],.button--disabled){outline-style:solid}.button--subtle-menu-item.dds-button--active{background-color:var(--dds-button-subtle-menu-item-color-bg-hover);color:var(--dds-button-subtle-menu-item-color-text)}.button--subtle-menu-item[disabled],.button--subtle-menu-item.button--disabled{opacity:.5;color:var(--dds-button-subtle-menu-item-color-text-disabled);cursor:not-allowed}.button--subtle-menu-item.dds-link{color:var(--dds-button-subtle-menu-item-color-text);text-decoration:none}.button--subtle-menu-item.dds-link:hover{color:var(--dds-button-subtle-menu-item-color-text-hover)}.button--subtle-menu-item.dds-link:active{color:var(--dds-button-subtle-menu-item-color-text-active)}.button--subtle-quiet{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-color-text)}.button--subtle-quiet:hover{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet:active{border-color:var(--dds-button-subtle-color-border-active);background-color:var(--dds-button-subtle-color-bg-active);color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet[disabled],.button--subtle-quiet.button--disabled{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-color-text-disabled)}.button--subtle-quiet.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle-quiet.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-quiet.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-quiet.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-quiet.dds-button--active{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-enabled);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:hover{background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:active{background-color:var(--dds-button-subtle-background-inverted-pressed);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:focus-visible{border-color:var(--dds-focus-inner-ring)}.button--subtle-inverted.dds-link{color:var(--dds-button-subtle-text-enabled);text-decoration:none}.button--subtle-inverted.dds-link:hover{color:var(--dds-button-subtle-text-hover)}.button--subtle-inverted.dds-link:active{color:var(--dds-button-subtle-text-pressed)}.button--subtle-inverted.dds-button--active{background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:hover{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:active{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-pressed);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:focus-visible{border-color:var(--dds-focus-inner-ring)}.button--subtle-quiet-inverted.dds-link{color:var(--dds-button-subtle-text-enabled);text-decoration:none}.button--subtle-quiet-inverted.dds-link:hover{color:var(--dds-button-subtle-text-hover)}.button--subtle-quiet-inverted.dds-link:active{color:var(--dds-button-subtle-text-pressed)}.button--subtle-quiet-inverted.dds-button--active{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--clean{width:auto;min-width:auto;height:auto;padding:0;border-width:0;background-color:transparent;color:var(--dds-button-clean-text)}.button--clean .button__text{padding:0}.button--clean:hover{color:var(--dds-button-clean-text-hover)}.button--clean:active{color:var(--dds-button-clean-text-active)}.button--clean[disabled],.button--clean.button--disabled{color:var(--dds-button-clean-text-disabled)}.button--clean-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);width:auto;min-width:auto;height:auto;padding:0;border-width:0;background-color:transparent;color:var(--dds-button-clean-inverted-text)}.button--clean-inverted .button__text{padding:0}.button--clean-inverted:hover{color:var(--dds-button-clean-inverted-text-hover)}.button--clean-inverted:active{color:var(--dds-button-clean-inverted-text-active)}.button--clean-inverted[disabled],.button--clean-inverted.button--disabled{color:var(--dds-button-clean-inverted-text-disabled)}.button--clean.dds-button--danger,.button--clean-inverted.dds-button--danger{border-width:0;background-color:transparent;color:var(--dds-button-danger-clean-text)}.button--clean.dds-button--danger:hover,.button--clean-inverted.dds-button--danger:hover{color:var(--dds-button-danger-clean-text-hover)}.button--clean.dds-button--danger:active,.button--clean-inverted.dds-button--danger:active{color:var(--dds-button-danger-clean-text-active)}.button--clean[disabled],.button--clean.button--disabled,.button--clean-inverted[disabled],.button--clean-inverted.button--disabled{border-width:0;background-color:transparent;color:var(--dds-text-neutral-disabled)}.button--clean[disabled]:hover,.button--clean.button--disabled:hover,.button--clean-inverted[disabled]:hover,.button--clean-inverted.button--disabled:hover{background-color:transparent;color:var(--dds-text-neutral-disabled)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}";
|
|
1
|
+
const t = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:inline-block;position:relative;width:auto;vertical-align:middle;--dds-button-padding-x: var(--dds-spacing-300);--dds-button-padding-y: var(--dds-spacing-300);--dds-button-border-radius: var(--dds-radius-rounded);--dds-button-font-weight: 700;--dds-button-line-height: var(--dds-font-line-height-large);--dds-button-transition: all .2s ease-in-out;--dds-button-disabled-opacity: .5;--dds-button-size-lg: var(--dds-spacing-1200);--dds-button-size-md: var(--dds-spacing-1000);--dds-button-size-sm: var(--dds-spacing-800);--dds-button-size-xs: var(--dds-spacing-600);--dds-button-circle-lg: var(--dds-spacing-1200);--dds-button-circle-md: var(--dds-spacing-1000);--dds-button-circle-sm: var(--dds-spacing-800);--dds-button-circle-xs: var(--dds-spacing-600);--dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);--dds-button-primary-color-bg-hover: var( --dds-button-primary-background-hover );--dds-button-primary-color-bg-active: var( --dds-button-primary-background-pressed );--dds-button-primary-color-bg-disabled: var( --dds-button-primary-background-disabled );--dds-button-primary-color-text: var(--dds-button-primary-text-enabled);--dds-button-primary-color-text-disabled: var( --dds-button-primary-text-disabled );--dds-button-primary-inverted-color-bg: var( --dds-button-primary-background-inverted-enabled );--dds-button-primary-inverted-color-bg-hover: var( --dds-button-primary-background-inverted-hover );--dds-button-primary-inverted-color-bg-active: var( --dds-button-primary-background-inverted-pressed );--dds-button-primary-inverted-color-bg-disabled: var( --dds-button-primary-background-inverted-disabled );--dds-button-primary-inverted-color-text: var( --dds-button-primary-text-inverted );--dds-button-primary-inverted-color-text-disabled: var( --dds-button-primary-text-inverted-disabled );--dds-button-outline-color-border: var(--dds-button-outline-border-enabled);--dds-button-outline-color-border-hover: var( --dds-button-outline-border-hover );--dds-button-outline-color-border-active: var( --dds-button-outline-border-pressed );--dds-button-outline-color-border-disabled: var( --dds-button-outline-border-disabled );--dds-button-outline-color-text: var(--dds-button-outline-text-enabled);--dds-button-outline-color-text-hover: var(--dds-button-outline-text-hover);--dds-button-outline-color-text-active: var( --dds-button-outline-text-pressed );--dds-button-outline-color-text-disabled: var( --dds-button-outline-text-disabled );--dds-button-outline-inverted-color-border: var( --dds-button-outline-border-inverted-enabled );--dds-button-outline-inverted-color-border-hover: var( --dds-button-outline-border-inverted-hover );--dds-button-outline-inverted-color-border-active: var( --dds-button-outline-border-inverted-pressed );--dds-button-outline-inverted-color-border-disabled: var( --dds-button-outline-border-inverted-disabled );--dds-button-outline-inverted-color-text: var( --dds-button-outline-text-inverted-enabled );--dds-button-outline-inverted-color-text-hover: var( --dds-button-outline-text-inverted-hover );--dds-button-outline-inverted-color-text-active: var( --dds-button-outline-text-inverted-pressed );--dds-button-outline-inverted-color-text-disabled: var( --dds-button-outline-text-inverted-disabled );--dds-button-subtle-color-bg: var(--dds-button-subtle-background-enabled);--dds-button-subtle-color-bg-hover: var(--dds-button-subtle-background-hover);--dds-button-subtle-color-bg-active: var( --dds-button-subtle-background-pressed );--dds-button-subtle-color-bg-disabled: var( --dds-button-subtle-background-disabled );--dds-button-subtle-color-border: var(--dds-button-subtle-border-enabled);--dds-button-subtle-color-border-hover: var(--dds-button-subtle-border-hover);--dds-button-subtle-color-border-active: var( --dds-button-subtle-border-pressed );--dds-button-subtle-color-border-disabled: var( --dds-button-subtle-border-disabled );--dds-button-subtle-color-text: var(--dds-button-subtle-text-enabled);--dds-button-subtle-color-text-hover: var(--dds-button-subtle-text-hover);--dds-button-subtle-color-text-active: var(--dds-button-subtle-text-pressed);--dds-button-subtle-color-text-disabled: var( --dds-button-subtle-text-disabled );--dds-button-subtle-neutral-color-bg: var( --dds-button-subtle-background-neutral-enabled );--dds-button-subtle-neutral-color-bg-hover: var( --dds-button-subtle-background-neutral-hover );--dds-button-subtle-neutral-color-bg-active: var( --dds-button-subtle-background-neutral-pressed );--dds-button-subtle-neutral-color-border: var( --dds-button-subtle-border-neutral-enabled );--dds-button-subtle-neutral-color-border-hover: var( --dds-button-subtle-border-neutral-hover );--dds-button-subtle-neutral-color-border-active: var( --dds-button-subtle-border-neutral-pressed );--dds-button-subtle-neutral-color-text: var( --dds-button-subtle-text-neutral-enabled );--dds-button-subtle-neutral-color-text-hover: var( --dds-button-subtle-text-neutral-hover );--dds-button-subtle-neutral-color-text-active: var( --dds-button-subtle-text-neutral-hover );--dds-button-subtle-destructive-color-text: var( --dds-button-subtle-text-destructive-enabled );--dds-button-subtle-destructive-color-text-hover: var( --dds-button-subtle-text-destructive-hover );--dds-button-subtle-destructive-color-text-active: var( --dds-button-subtle-text-destructive-pressed );--dds-button-subtle-destructive-color-border: var( --dds-button-subtle-border-destructive-enabled );--dds-button-subtle-destructive-color-border-hover: var( --dds-button-subtle-border-destructive-hover );--dds-button-subtle-destructive-color-border-active: var( --dds-button-subtle-border-destructive-pressed );--dds-button-subtle-destructive-color-bg: var( --dds-button-subtle-background-destructive-enabled );--dds-button-subtle-destructive-color-bg-hover: var( --dds-button-subtle-background-destructive-hover );--dds-button-subtle-destructive-color-bg-active: var( --dds-button-subtle-background-destructive-pressed );--dds-button-clean-color-text: var(--dds-text-link-base);--dds-button-clean-color-text-hover: var(--dds-text-link-hover);--dds-button-clean-color-text-active: var(--dds-text-link-pressed);--dds-button-clean-color-text-disabled: var(--dds-text-neutral-disabled);--dds-button-clean-inverted-color-text: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-hover: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-active: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-disabled: var( --dds-text-neutral-disabled );--dds-button-danger-color-bg: var( --dds-button-primary-background-destructive-enabled );--dds-button-danger-color-bg-hover: var( --dds-button-primary-background-destructive-hover );--dds-button-danger-color-bg-active: var( --dds-button-primary-background-destructive-pressed );--dds-button-danger-color-text: var(--dds-button-primary-text-enabled);--dds-button-danger-outline-color-border: var( --dds-button-outline-border-destructive-enabled );--dds-button-danger-outline-color-border-hover: var( --dds-button-outline-border-destructive-hover );--dds-button-danger-outline-color-border-active: var( --dds-button-outline-border-destructive-pressed );--dds-button-danger-outline-color-text: var( --dds-button-outline-text-destructive-enabled );--dds-button-danger-outline-color-text-hover: var( --dds-button-outline-text-destructive-hover );--dds-button-danger-outline-color-text-active: var( --dds-button-outline-text-destructive-pressed );--dds-button-subtle-inverted-color-bg: var( --dds-button-subtle-background-inverted-enabled );--dds-button-subtle-inverted-color-bg-hover: var( --dds-button-subtle-background-inverted-hover );--dds-button-subtle-inverted-color-bg-active: var( --dds-button-subtle-background-inverted-pressed );--dds-button-subtle-inverted-color-border: var( --dds-button-subtle-border-inverted-enabled );--dds-button-subtle-inverted-color-border-hover: var( --dds-button-subtle-border-inverted-enabled );--dds-button-subtle-inverted-color-border-active: var( --dds-button-subtle-border-inverted-enabled );--dds-button-subtle-inverted-color-text: var( --dds-button-subtle-text-inverted );--dds-button-subtle-inverted-color-text-hover: var( --dds-button-subtle-text-inverted );--dds-button-subtle-inverted-color-text-active: var( --dds-button-subtle-text-inverted );--dds-button-danger-clean-color-text: var( --dds-button-subtle-text-destructive-enabled );--dds-button-danger-clean-color-text-hover: var( --dds-button-subtle-text-destructive-hover );--dds-button-danger-clean-color-text-active: var( --dds-button-subtle-text-destructive-pressed );--dds-button-subtle-menu-color-bg: transparent;--dds-button-subtle-menu-color-bg-hover: var( --dds-button-subtle-background-neutral-hover );--dds-button-subtle-menu-color-bg-active: var( --dds-button-subtle-background-neutral-pressed );--dds-button-subtle-menu-color-border: transparent;--dds-button-subtle-menu-color-border-hover: transparent;--dds-button-subtle-menu-color-border-active: transparent;--dds-button-subtle-menu-color-text: var( --dds-button-subtle-text-neutral-enabled );--dds-button-subtle-menu-color-text-hover: var( --dds-button-subtle-text-neutral-hover );--dds-button-subtle-menu-color-text-active: var( --dds-button-subtle-text-neutral-hover );--dds-button-subtle-menu-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-opened-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-opened-border: transparent;--dds-button-subtle-menu-opened-background: var( --dds-button-subtle-background-neutral-pressed );--dds-button-subtle-menu-opened-color: var( --dds-button-subtle-text-neutral-hover );--dds-button-subtle-menu-item-color-bg: transparent;--dds-button-subtle-menu-item-color-bg-hover: var( --dds-transparent-black-subtle );--dds-button-subtle-menu-item-color-bg-active: var( --dds-transparent-black-subtle );--dds-button-subtle-menu-item-color-text: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-hover: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-active: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-disabled: var( --dds-text-primary-base );--dds-button-subtle-menu-item-padding: var(--dds-spacing-100) var(--dds-spacing-200);--dds-button-subtle-menu-item-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-item-font-weight: var(--dds-font-weight-medium);--dds-button-subtle-menu-item-font-size: var(--dds-font-size-base);--dds-button-subtle-menu-item-line-height: var(--dds-font-line-height-xlarge)}:host([variant=subtle-menu][aria-expanded=true]) .button{border-radius:var(--dds-button-subtle-menu-opened-border-radius);border-color:var(--dds-button-subtle-menu-opened-border);background-color:var(--dds-button-subtle-menu-opened-background);color:var(--dds-button-subtle-menu-opened-color)}:host([data-oklch-poc]){--dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);--dds-button-primary-color-bg-hover: var( --dds-button-primary-background-hover );--dds-button-primary-color-bg-active: var( --dds-button-primary-background-pressed );--dds-button-primary-color-bg-disabled: var( --dds-button-primary-background-disabled );--dds-button-primary-color-text: var(--dds-button-primary-text-enabled);--dds-button-primary-color-text-disabled: var( --dds-button-primary-text-disabled )}a{text-decoration:none}.button__highcontrast{position:absolute;width:100%;height:100%;border:var(--dds-border-width-base) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-radius-rounded)}.button__highcontrast:hover{border-width:var(--dds-border-width-large);border-color:var(--dds-border-neutral-transparent-interactive, #fff500)}.button__highcontrast:active{border-width:var(--dds-border-width-xlarge)}.button{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;position:relative;flex-direction:row;align-items:center;justify-content:center;width:auto;height:auto;column-gap:var(--dds-spacing-100);transition:var(--dds-button-transition);border:var(--dds-border-width-large) solid transparent;border-radius:var(--dds-button-border-radius);font-weight:var(--dds-button-font-weight);line-height:var(--dds-button-line-height);vertical-align:top;cursor:pointer}.button:focus-visible{outline-style:solid}.button .button__text{padding:0 var(--dds-spacing-100)}.button .button__text span{line-height:var(--dds-button-line-height)}.button[disabled],.button.button--disabled{opacity:var(--dds-button-disabled-opacity);cursor:not-allowed}.button[disabled]:focus-visible,.button.button--disabled:focus-visible{outline-style:solid}.button[disabled]>*,.button.button--disabled>*{pointer-events:none}.button.dds-button--loading .button__spinner{display:flex;position:absolute;align-items:center;justify-content:center;animation:dds-spin 1s linear infinite}.button.dds-button--loading .button__text{opacity:0}.button--lg{min-width:var(--dds-spacing-2400);min-height:var(--dds-button-size-lg);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:1.125rem}.button--lg.dds-button--circle{width:var(--dds-button-circle-lg);min-width:0;min-height:var(--dds-button-circle-lg);padding:0}.button--md{min-width:var(--dds-spacing-2000);min-height:var(--dds-button-size-md);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:1rem}.button--md.dds-button--circle{width:var(--dds-button-circle-md);min-width:0;max-width:var(--dds-button-circle-md);min-height:var(--dds-button-circle-md);padding:0}.button--sm{min-width:var(--dds-spacing-1200);min-height:var(--dds-button-size-sm);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:.875rem}.button--sm.dds-button--circle{width:var(--dds-button-circle-sm);min-width:0;max-width:var(--dds-button-circle-sm);min-height:var(--dds-button-circle-sm);padding:0}.button--xs{min-width:var(--dds-spacing-1200);min-height:var(--dds-button-size-xs);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:var(--dds-font-xs)}.button--xs.dds-button--circle{width:var(--dds-button-circle-xs);min-width:0;max-width:var(--dds-button-circle-xs);min-height:var(--dds-button-circle-xs);padding:0}.button--icon{border-width:0;background-color:var(--dds-black-5);color:var(--dds-icon-neutral-base)}.button--icon:hover{background-color:var(--dds-black-10)}.button--icon:active{background-color:var(--dds-black-20)}.button--icon.disabled{border-width:0;background-color:transparent;cursor:not-allowed}.button--icon.disabled:hover{background-color:transparent}.button--primary{background-color:var(--dds-button-primary-color-bg);color:var(--dds-button-primary-color-text)}.button--primary:hover{background-color:var(--dds-button-primary-color-bg-hover)}.button--primary:active{background-color:var(--dds-button-primary-color-bg-active)}.button--primary[disabled],.button--primary.button--disabled{background-color:var(--dds-button-primary-color-bg-disabled);color:var(--dds-button-primary-color-text-disabled)}.button--primary.dds-link{color:var(--dds-button-primary-color-text);text-decoration:none}.button--primary.dds-link:hover,.button--primary.dds-link:active{color:var(--dds-button-primary-color-text)}.button--primary.dds-button--active{background-color:var(--dds-button-primary-color-bg-hover)}.button--primary-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);background-color:var(--dds-button-primary-inverted-color-bg);color:var(--dds-button-primary-inverted-color-text)}.button--primary-inverted:hover{background-color:var(--dds-button-primary-inverted-color-bg-hover)}.button--primary-inverted:active{background-color:var(--dds-button-primary-inverted-color-bg-active)}.button--primary-inverted[disabled],.button--primary-inverted.button--disabled{background-color:var(--dds-button-primary-inverted-color-bg-disabled);color:var(--dds-button-primary-inverted-color-text-disabled)}.button--primary-inverted.dds-link{color:var(--dds-button-primary-inverted-color-text);text-decoration:none}.button--primary-inverted.dds-link:hover,.button--primary-inverted.dds-link:active{color:var(--dds-button-primary-inverted-color-text)}.button--primary-inverted.dds-button--active{background-color:var(--dds-button-primary-inverted-color-bg-hover)}.button--primary.dds-button--danger,.button--primary-inverted.dds-button--danger{background-color:var(--dds-button-danger-color-bg);color:var(--dds-button-danger-color-text)}.button--primary.dds-button--danger:hover,.button--primary-inverted.dds-button--danger:hover{background-color:var(--dds-button-danger-color-bg-hover)}.button--primary.dds-button--danger:active,.button--primary-inverted.dds-button--danger:active{background-color:var(--dds-button-danger-color-bg-active)}.button--primary[disabled],.button--primary.button--disabled,.button--primary-inverted[disabled],.button--primary-inverted.button--disabled,.button--primary[disabled]:hover,.button--primary.button--disabled:hover,.button--primary-inverted[disabled]:hover,.button--primary-inverted.button--disabled:hover,.button--primary[disabled]:active,.button--primary.button--disabled:active,.button--primary-inverted[disabled]:active,.button--primary-inverted.button--disabled:active{background-color:var(--dds-button-primary-color-bg-disabled);color:var(--dds-button-primary-color-text-disabled)}.button--outline{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-color-border);background-color:transparent;color:var(--dds-button-outline-color-text)}.button--outline:hover{border-color:var(--dds-button-outline-color-border-hover);color:var(--dds-button-outline-color-text-hover)}.button--outline:active{border-color:var(--dds-button-outline-color-border-active);color:var(--dds-button-outline-color-text-active)}.button--outline[disabled],.button--outline.button--disabled{border-color:var(--dds-button-outline-color-border-disabled);color:var(--dds-button-outline-color-text-disabled)}.button--outline.dds-link{color:var(--dds-button-outline-color-text);text-decoration:none}.button--outline.dds-link:hover{color:var(--dds-button-outline-color-text-hover)}.button--outline.dds-link:active{color:var(--dds-button-outline-color-text-active)}.button--outline.dds-button--active{border-color:var(--dds-button-outline-color-border-hover);color:var(--dds-button-outline-color-text-hover)}.button--outline-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-inverted-color-border);background-color:transparent;color:var(--dds-button-outline-inverted-color-text)}.button--outline-inverted:hover{border-color:var(--dds-button-outline-inverted-color-border-hover);color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline-inverted:active{border-color:var(--dds-button-outline-inverted-color-border-active);color:var(--dds-button-outline-inverted-color-text-active)}.button--outline-inverted[disabled],.button--outline-inverted.button--disabled{border-color:var(--dds-button-outline-inverted-color-border-disabled);color:var(--dds-button-outline-inverted-color-text-disabled)}.button--outline-inverted.dds-link{color:var(--dds-button-outline-inverted-color-text);text-decoration:none}.button--outline-inverted.dds-link:hover{color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline-inverted.dds-link:active{color:var(--dds-button-outline-inverted-color-text-active)}.button--outline-inverted.dds-button--active{border-color:var(--dds-button-outline-inverted-color-border-hover);color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline.dds-button--danger,.button--outline-inverted.dds-button--danger{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-danger-outline-color-border);background-color:transparent;color:var(--dds-button-danger-outline-color-text)}.button--outline.dds-button--danger:hover,.button--outline-inverted.dds-button--danger:hover{border-color:var(--dds-button-danger-outline-color-border-hover);color:var(--dds-button-danger-outline-color-text-hover)}.button--outline.dds-button--danger:active,.button--outline-inverted.dds-button--danger:active{border-color:var(--dds-button-danger-outline-color-border-active);color:var(--dds-button-danger-outline-color-text-active)}.button--outline[disabled],.button--outline.button--disabled,.button--outline-inverted[disabled],.button--outline-inverted.button--disabled{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-color-border-disabled);background-color:transparent;color:var(--dds-button-outline-color-text-disabled)}.button--subtle{border:var(--dds-border-width-base) solid var(--dds-button-subtle-color-border);background-color:var(--dds-button-subtle-color-bg);color:var(--dds-button-subtle-color-text)}.button--subtle:hover{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle:active{border-color:var(--dds-button-subtle-color-border-active);background-color:var(--dds-button-subtle-color-bg-active);color:var(--dds-button-subtle-color-text-active)}.button--subtle[disabled],.button--subtle.button--disabled{border-color:var(--dds-button-subtle-color-border-disabled);background-color:var(--dds-button-subtle-color-bg-disabled);color:var(--dds-button-subtle-color-text-disabled)}.button--subtle.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle.dds-button--danger{border:var(--dds-border-width-base) solid var(--dds-button-subtle-destructive-color-border);background-color:var(--dds-button-subtle-destructive-color-bg);color:var(--dds-button-subtle-destructive-color-text)}.button--subtle.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle.dds-button--active{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-neutral{border:var(--dds-border-width-base) solid var(--dds-button-subtle-neutral-color-border);background-color:var(--dds-button-subtle-neutral-color-bg);color:var(--dds-button-subtle-neutral-color-text)}.button--subtle-neutral:hover{border-color:var(--dds-button-subtle-neutral-color-border-hover);background-color:var(--dds-button-subtle-neutral-color-bg-hover);color:var(--dds-button-subtle-neutral-color-text-hover)}.button--subtle-neutral:active{border-color:var(--dds-button-subtle-neutral-color-border-active);background-color:var(--dds-button-subtle-neutral-color-bg-active);color:var(--dds-button-subtle-neutral-color-text-active)}.button--subtle-neutral.dds-link{color:var(--dds-button-subtle-neutral-color-text);text-decoration:none}.button--subtle-neutral.dds-link:hover{color:var(--dds-button-subtle-neutral-color-text-hover)}.button--subtle-neutral.dds-link:active{color:var(--dds-button-subtle-neutral-color-text-active)}.button--subtle-neutral.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-neutral.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-neutral.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-neutral.dds-button--active{border-color:var(--dds-button-subtle-neutral-color-border-hover);background-color:var(--dds-button-subtle-neutral-color-bg-hover);color:var(--dds-button-subtle-neutral-color-text-hover)}.button--subtle-menu{border:var(--dds-border-width-base) solid transparent;border-radius:var(--dds-button-subtle-menu-border-radius);background-color:transparent;color:var(--dds-button-subtle-menu-color-text)}.button--subtle-menu:hover{border-color:transparent;background-color:var(--dds-button-subtle-menu-color-bg-hover);color:var(--dds-button-subtle-menu-color-text-hover)}.button--subtle-menu:active{border-color:transparent;background-color:var(--dds-button-subtle-menu-color-bg-active);color:var(--dds-button-subtle-menu-color-text-hover)}.button--subtle-menu.dds-link{color:var(--dds-button-subtle-menu-color-text);text-decoration:none}.button--subtle-menu.dds-link:hover,.button--subtle-menu.dds-link:active{color:var(--dds-button-subtle-menu-color-text-hover)}.button--subtle-menu.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-menu.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-menu.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-menu.dds-button--active{border-color:transparent;background-color:var(--dds-button-subtle-menu-color-bg-active);color:var(--dds-button-subtle-menu-color-text-hover)}.button--subtle-menu-item{display:flex;align-items:center;width:100%;min-width:auto;height:auto;padding:var(--dds-button-subtle-menu-item-padding);border:0;border-radius:var(--dds-button-subtle-menu-item-border-radius);background-color:var(--dds-button-subtle-menu-item-color-bg);color:var(--dds-button-subtle-menu-item-color-text);font-family:var(--dds-font-type);font-size:var(--dds-button-subtle-menu-item-font-size);font-weight:var(--dds-button-subtle-menu-item-font-weight);line-height:var(--dds-button-subtle-menu-item-line-height);text-align:left;text-decoration:none}.button--subtle-menu-item .button__text{display:flex;flex:1;align-items:center;padding:0;gap:var(--dds-spacing-100)}.button--subtle-menu-item:hover:not([disabled],.button--disabled){background-color:var(--dds-button-subtle-menu-item-color-bg-hover);color:var(--dds-button-subtle-menu-item-color-text-hover)}.button--subtle-menu-item:active:not([disabled],.button--disabled){background-color:var(--dds-button-subtle-menu-item-color-bg-active);color:var(--dds-button-subtle-menu-item-color-text-active)}.button--subtle-menu-item:focus-visible:not([disabled],.button--disabled){outline-style:solid}.button--subtle-menu-item.dds-button--active{background-color:var(--dds-button-subtle-menu-item-color-bg-hover);color:var(--dds-button-subtle-menu-item-color-text)}.button--subtle-menu-item[disabled],.button--subtle-menu-item.button--disabled{opacity:.5;color:var(--dds-button-subtle-menu-item-color-text-disabled);cursor:not-allowed}.button--subtle-menu-item.dds-link{color:var(--dds-button-subtle-menu-item-color-text);text-decoration:none}.button--subtle-menu-item.dds-link:hover{color:var(--dds-button-subtle-menu-item-color-text-hover)}.button--subtle-menu-item.dds-link:active{color:var(--dds-button-subtle-menu-item-color-text-active)}.button--subtle-quiet{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-color-text)}.button--subtle-quiet:hover{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet:active{border-color:var(--dds-button-subtle-color-border-active);background-color:var(--dds-button-subtle-color-bg-active);color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet[disabled],.button--subtle-quiet.button--disabled{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-color-text-disabled)}.button--subtle-quiet.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle-quiet.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-quiet.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-quiet.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-quiet.dds-button--active{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border:var(--dds-border-width-base) solid var(--dds-button-subtle-inverted-color-border);background-color:var(--dds-button-subtle-inverted-color-bg);color:var(--dds-button-subtle-inverted-color-text)}.button--subtle-inverted:hover{background-color:var(--dds-button-subtle-inverted-color-bg-hover);color:var(--dds-button-subtle-inverted-color-text)}.button--subtle-inverted:active{background-color:var(--dds-button-subtle-inverted-color-bg-active);color:var(--dds-button-subtle-inverted-color-text)}.button--subtle-inverted:focus-visible{border-color:var(--dds-focus-inner-ring)}.button--subtle-inverted.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle-inverted.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle-inverted.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle-inverted.dds-button--active{background-color:var(--dds-button-subtle-inverted-color-bg-hover);color:var(--dds-button-subtle-inverted-color-text)}.button--subtle-quiet-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-inverted-color-text)}.button--subtle-quiet-inverted:hover{border:var(--dds-border-width-base) solid var(--dds-button-subtle-inverted-color-border);background-color:var(--dds-button-subtle-inverted-color-bg-hover);color:var(--dds-button-subtle-inverted-color-text)}.button--subtle-quiet-inverted:active{border:var(--dds-border-width-base) solid var(--dds-button-subtle-inverted-color-border);background-color:var(--dds-button-subtle-inverted-color-bg-active);color:var(--dds-button-subtle-inverted-color-text)}.button--subtle-quiet-inverted:focus-visible{border-color:var(--dds-focus-inner-ring)}.button--subtle-quiet-inverted.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle-quiet-inverted.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet-inverted.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet-inverted.dds-button--active{border:var(--dds-border-width-base) solid var(--dds-button-subtle-inverted-color-border);background-color:var(--dds-button-subtle-inverted-color-bg-hover);color:var(--dds-button-subtle-inverted-color-text)}.button--clean{width:auto;min-width:auto;height:auto;padding:0;border-width:0;background-color:transparent;color:var(--dds-button-clean-color-text)}.button--clean .button__text{padding:0}.button--clean:hover{color:var(--dds-button-clean-color-text-hover)}.button--clean:active{color:var(--dds-button-clean-color-text-active)}.button--clean[disabled],.button--clean.button--disabled{color:var(--dds-button-clean-color-text-disabled)}.button--clean-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);width:auto;min-width:auto;height:auto;padding:0;border-width:0;background-color:transparent;color:var(--dds-button-clean-inverted-color-text)}.button--clean-inverted .button__text{padding:0}.button--clean-inverted:hover{color:var(--dds-button-clean-inverted-color-text-hover)}.button--clean-inverted:active{color:var(--dds-button-clean-inverted-color-text-active)}.button--clean-inverted[disabled],.button--clean-inverted.button--disabled{color:var(--dds-button-clean-inverted-color-text-disabled)}.button--clean.dds-button--danger,.button--clean-inverted.dds-button--danger{border-width:0;background-color:transparent;color:var(--dds-button-danger-clean-color-text)}.button--clean.dds-button--danger:hover,.button--clean-inverted.dds-button--danger:hover{color:var(--dds-button-danger-clean-color-text-hover)}.button--clean.dds-button--danger:active,.button--clean-inverted.dds-button--danger:active{color:var(--dds-button-danger-clean-color-text-active)}.button--clean[disabled],.button--clean.button--disabled,.button--clean-inverted[disabled],.button--clean-inverted.button--disabled{border-width:0;background-color:transparent;color:var(--dds-text-neutral-disabled)}.button--clean[disabled]:hover,.button--clean.button--disabled:hover,.button--clean-inverted[disabled]:hover,.button--clean-inverted.button--disabled:hover{background-color:transparent;color:var(--dds-text-neutral-disabled)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}";
|
|
2
2
|
export {
|
|
3
3
|
t as default
|
|
4
4
|
};
|
|
@@ -115,6 +115,58 @@ import { default as SystemLoadingSpinner } from '../icons/system/system-loading-
|
|
|
115
115
|
* @cssproperty --dds-button-subtle-color-text-active - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed))
|
|
116
116
|
* @cssproperty --dds-button-subtle-color-text-disabled - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled))
|
|
117
117
|
*
|
|
118
|
+
* Subtle neutral button properties:
|
|
119
|
+
* @cssproperty --dds-button-subtle-neutral-color-bg - Background color of subtle neutral button (default: var(--dds-button-subtle-background-neutral-enabled))
|
|
120
|
+
* @cssproperty --dds-button-subtle-neutral-color-bg-hover - Background color of subtle neutral button on hover (default: var(--dds-button-subtle-background-neutral-hover))
|
|
121
|
+
* @cssproperty --dds-button-subtle-neutral-color-bg-active - Background color of subtle neutral button when active (default: var(--dds-button-subtle-background-neutral-pressed))
|
|
122
|
+
* @cssproperty --dds-button-subtle-neutral-color-border - Border color of subtle neutral button (default: var(--dds-button-subtle-border-neutral-enabled))
|
|
123
|
+
* @cssproperty --dds-button-subtle-neutral-color-border-hover - Border color of subtle neutral button on hover (default: var(--dds-button-subtle-border-neutral-hover))
|
|
124
|
+
* @cssproperty --dds-button-subtle-neutral-color-border-active - Border color of subtle neutral button when active (default: var(--dds-button-subtle-border-neutral-pressed))
|
|
125
|
+
* @cssproperty --dds-button-subtle-neutral-color-text - Text color of subtle neutral button (default: var(--dds-button-subtle-text-neutral-enabled))
|
|
126
|
+
* @cssproperty --dds-button-subtle-neutral-color-text-hover - Text color of subtle neutral button on hover (default: var(--dds-button-subtle-text-neutral-hover))
|
|
127
|
+
* @cssproperty --dds-button-subtle-neutral-color-text-active - Text color of subtle neutral button when active (default: var(--dds-button-subtle-text-neutral-hover))
|
|
128
|
+
*
|
|
129
|
+
* Subtle inverted button properties:
|
|
130
|
+
* @cssproperty --dds-button-subtle-inverted-color-bg - Background color of subtle inverted button (default: var(--dds-button-subtle-background-inverted-enabled))
|
|
131
|
+
* @cssproperty --dds-button-subtle-inverted-color-bg-hover - Background color of subtle inverted button on hover (default: var(--dds-button-subtle-background-inverted-hover))
|
|
132
|
+
* @cssproperty --dds-button-subtle-inverted-color-bg-active - Background color of subtle inverted button when active (default: var(--dds-button-subtle-background-inverted-pressed))
|
|
133
|
+
* @cssproperty --dds-button-subtle-inverted-color-border - Border color of subtle inverted button (default: var(--dds-button-subtle-border-inverted-enabled))
|
|
134
|
+
* @cssproperty --dds-button-subtle-inverted-color-border-hover - Border color of subtle inverted button on hover (default: var(--dds-button-subtle-border-inverted-enabled))
|
|
135
|
+
* @cssproperty --dds-button-subtle-inverted-color-border-active - Border color of subtle inverted button when active (default: var(--dds-button-subtle-border-inverted-enabled))
|
|
136
|
+
* @cssproperty --dds-button-subtle-inverted-color-text - Text color of subtle inverted button (default: var(--dds-button-subtle-text-inverted))
|
|
137
|
+
* @cssproperty --dds-button-subtle-inverted-color-text-hover - Text color of subtle inverted button on hover (default: var(--dds-button-subtle-text-inverted))
|
|
138
|
+
* @cssproperty --dds-button-subtle-inverted-color-text-active - Text color of subtle inverted button when active (default: var(--dds-button-subtle-text-inverted))
|
|
139
|
+
*
|
|
140
|
+
* Subtle menu button properties:
|
|
141
|
+
* @cssproperty --dds-button-subtle-menu-color-bg - Background color of subtle menu button (default: transparent)
|
|
142
|
+
* @cssproperty --dds-button-subtle-menu-color-bg-hover - Background color of subtle menu button on hover (default: var(--dds-button-subtle-background-neutral-hover))
|
|
143
|
+
* @cssproperty --dds-button-subtle-menu-color-bg-active - Background color of subtle menu button when active (default: var(--dds-button-subtle-background-neutral-pressed))
|
|
144
|
+
* @cssproperty --dds-button-subtle-menu-color-border - Border color of subtle menu button (default: transparent)
|
|
145
|
+
* @cssproperty --dds-button-subtle-menu-color-border-hover - Border color of subtle menu button on hover (default: transparent)
|
|
146
|
+
* @cssproperty --dds-button-subtle-menu-color-border-active - Border color of subtle menu button when active (default: transparent)
|
|
147
|
+
* @cssproperty --dds-button-subtle-menu-color-text - Text color of subtle menu button (default: var(--dds-button-subtle-text-neutral-enabled))
|
|
148
|
+
* @cssproperty --dds-button-subtle-menu-color-text-hover - Text color of subtle menu button on hover (default: var(--dds-button-subtle-text-neutral-hover))
|
|
149
|
+
* @cssproperty --dds-button-subtle-menu-color-text-active - Text color of subtle menu button when active (default: var(--dds-button-subtle-text-neutral-hover))
|
|
150
|
+
* @cssproperty --dds-button-subtle-menu-border-radius - Border radius of subtle menu button (default: var(--dds-radius-small))
|
|
151
|
+
* @cssproperty --dds-button-subtle-menu-opened-border-radius - Border radius of subtle menu button while the menu is open (default: var(--dds-radius-small))
|
|
152
|
+
* @cssproperty --dds-button-subtle-menu-opened-border - Border color of subtle menu button while the menu is open (default: transparent)
|
|
153
|
+
* @cssproperty --dds-button-subtle-menu-opened-background - Background color of subtle menu button while the menu is open (default: var(--dds-button-subtle-background-neutral-pressed))
|
|
154
|
+
* @cssproperty --dds-button-subtle-menu-opened-color - Text color of subtle menu button while the menu is open (default: var(--dds-button-subtle-text-neutral-hover))
|
|
155
|
+
*
|
|
156
|
+
* Subtle menu item button properties:
|
|
157
|
+
* @cssproperty --dds-button-subtle-menu-item-color-bg - Background color of subtle menu item button (default: transparent)
|
|
158
|
+
* @cssproperty --dds-button-subtle-menu-item-color-bg-hover - Background color of subtle menu item button on hover (default: var(--dds-transparent-black-subtle))
|
|
159
|
+
* @cssproperty --dds-button-subtle-menu-item-color-bg-active - Background color of subtle menu item button when active (default: var(--dds-transparent-black-subtle))
|
|
160
|
+
* @cssproperty --dds-button-subtle-menu-item-color-text - Text color of subtle menu item button (default: var(--dds-text-primary-base))
|
|
161
|
+
* @cssproperty --dds-button-subtle-menu-item-color-text-hover - Text color of subtle menu item button on hover (default: var(--dds-text-primary-base))
|
|
162
|
+
* @cssproperty --dds-button-subtle-menu-item-color-text-active - Text color of subtle menu item button when active (default: var(--dds-text-primary-base))
|
|
163
|
+
* @cssproperty --dds-button-subtle-menu-item-color-text-disabled - Text color of disabled subtle menu item button (default: var(--dds-text-primary-base))
|
|
164
|
+
* @cssproperty --dds-button-subtle-menu-item-padding - Padding of subtle menu item button (default: var(--dds-spacing-100) var(--dds-spacing-200))
|
|
165
|
+
* @cssproperty --dds-button-subtle-menu-item-border-radius - Border radius of subtle menu item button (default: var(--dds-radius-small))
|
|
166
|
+
* @cssproperty --dds-button-subtle-menu-item-font-weight - Font weight of subtle menu item button (default: var(--dds-font-weight-medium))
|
|
167
|
+
* @cssproperty --dds-button-subtle-menu-item-font-size - Font size of subtle menu item button (default: var(--dds-font-size-base))
|
|
168
|
+
* @cssproperty --dds-button-subtle-menu-item-line-height - Line height of subtle menu item button (default: var(--dds-font-line-height-xlarge))
|
|
169
|
+
*
|
|
118
170
|
* Clean button properties:
|
|
119
171
|
* @cssproperty --dds-button-clean-color-text - Text color of clean button (default: var(--dds-text-link-base))
|
|
120
172
|
* @cssproperty --dds-button-clean-color-text-hover - Text color of clean button on hover (default: var(--dds-text-link-hover))
|
|
@@ -138,15 +190,18 @@ import { default as SystemLoadingSpinner } from '../icons/system/system-loading-
|
|
|
138
190
|
* @cssproperty --dds-button-danger-outline-color-text - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled))
|
|
139
191
|
* @cssproperty --dds-button-danger-outline-color-text-hover - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover))
|
|
140
192
|
* @cssproperty --dds-button-danger-outline-color-text-active - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed))
|
|
141
|
-
* @cssproperty --dds-button-
|
|
142
|
-
* @cssproperty --dds-button-
|
|
143
|
-
* @cssproperty --dds-button-
|
|
144
|
-
* @cssproperty --dds-button-
|
|
145
|
-
* @cssproperty --dds-button-
|
|
146
|
-
* @cssproperty --dds-button-
|
|
147
|
-
* @cssproperty --dds-button-
|
|
148
|
-
* @cssproperty --dds-button-
|
|
149
|
-
* @cssproperty --dds-button-
|
|
193
|
+
* @cssproperty --dds-button-subtle-destructive-color-bg - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled))
|
|
194
|
+
* @cssproperty --dds-button-subtle-destructive-color-bg-hover - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover))
|
|
195
|
+
* @cssproperty --dds-button-subtle-destructive-color-bg-active - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed))
|
|
196
|
+
* @cssproperty --dds-button-subtle-destructive-color-border - Border color of danger subtle button (default: var(--dds-button-subtle-border-destructive-enabled))
|
|
197
|
+
* @cssproperty --dds-button-subtle-destructive-color-border-hover - Border color of danger subtle button on hover (default: var(--dds-button-subtle-border-destructive-hover))
|
|
198
|
+
* @cssproperty --dds-button-subtle-destructive-color-border-active - Border color of danger subtle button when active (default: var(--dds-button-subtle-border-destructive-pressed))
|
|
199
|
+
* @cssproperty --dds-button-subtle-destructive-color-text - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled))
|
|
200
|
+
* @cssproperty --dds-button-subtle-destructive-color-text-hover - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover))
|
|
201
|
+
* @cssproperty --dds-button-subtle-destructive-color-text-active - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed))
|
|
202
|
+
* @cssproperty --dds-button-danger-clean-color-text - Text color of danger clean button (default: var(--dds-button-subtle-text-destructive-enabled))
|
|
203
|
+
* @cssproperty --dds-button-danger-clean-color-text-hover - Text color of danger clean button on hover (default: var(--dds-button-subtle-text-destructive-hover))
|
|
204
|
+
* @cssproperty --dds-button-danger-clean-color-text-active - Text color of danger clean button when active (default: var(--dds-button-subtle-text-destructive-pressed))
|
|
150
205
|
*/
|
|
151
206
|
export default class DapDSButton extends GenericFormElement {
|
|
152
207
|
static tagName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.component.js","sources":["../../../src/components/button/button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { t } from '@/localization/localization'\n\nimport {\n ButtonShape,\n ButtonVariant,\n HtmlButtonType,\n LinkTarget,\n} from '../../common/types'\nimport DapDSIcon from '../icon/icon.component'\nimport { ButtonSize } from '../icon-button/icon-button.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport styles from './_styles/button.scss?inline'\nimport { buttonVariants } from './button.variants'\n\nconst LOADING_ICON_SIZES = {\n lg: 24,\n md: 20,\n sm: 16,\n xs: 16,\n} as const\n\n/**\n * `dap-ds-button` is a versatile button component for triggering actions and navigation.\n * @element dap-ds-button\n * @summary A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n * @title - Button\n *\n * @example Basic Usage\n * ```html\n * <dap-ds-button>Click me</dap-ds-button>\n * <dap-ds-button variant=\"outline\">Secondary action</dap-ds-button>\n * <dap-ds-button href=\"/dashboard\">Navigate</dap-ds-button>\n * ```\n *\n * @example Form Integration\n * ```html\n * <form>\n * <dap-ds-button htmlType=\"submit\">Submit Form</dap-ds-button>\n * <dap-ds-button htmlType=\"reset\" variant=\"outline\">Reset</dap-ds-button>\n * </form>\n * ```\n *\n * @example Accessibility\n * ```html\n * <!-- Icon-only buttons require aria-label -->\n * <dap-ds-button aria-label=\"Close dialog\" shape=\"circle\">\n * <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n * </dap-ds-button>\n * ```\n *\n * @property {string} sizeMap - The size map of the button.\n * @example\n * ```html\n * <dap-ds-button sizeMap=\"sm:lg,xs:xs\">Small</dap-ds-button>\n * ```\n *\n * @event dds-loading-timeout - Emitted when the loading timeout is reached\n *\n * @slot - The content of the button. Can contain text, icons, or other elements.\n *\n * @csspart base - The main button container.\n * @csspart high-contrast - The high contrast part of the button.\n * @csspart content - The content wrapper inside the button.\n *\n * @cssproperty --dds-button-padding-x - Horizontal padding of the button (default: var(--dds-spacing-300))\n * @cssproperty --dds-button-padding-y - Vertical padding of the button (default: var(--dds-spacing-300))\n * @cssproperty --dds-button-border-radius - Border radius of the button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-button-font-weight - Font weight of the button (default: 700)\n * @cssproperty --dds-button-line-height - Line height of the button (default: var(--dds-font-line-height-large))\n * @cssproperty --dds-button-transition - Transition property of the button (default: all 0.2s ease-in-out)\n * @cssproperty --dds-button-disabled-opacity - Opacity of disabled button (default: 0.5)\n *\n * @cssproperty --dds-button-size-lg - Size of large button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-button-size-md - Size of medium button (default: var(--dds-spacing-1000))\n * @cssproperty --dds-button-size-sm - Size of small button (default: var(--dds-spacing-800))\n * @cssproperty --dds-button-size-xs - Size of extra small button (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-button-circle-lg - Size of large circle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-button-circle-md - Size of medium circle button (default: var(--dds-spacing-1000))\n * @cssproperty --dds-button-circle-sm - Size of small circle button (default: var(--dds-spacing-800))\n * @cssproperty --dds-button-circle-xs - Size of extra small circle button (default: var(--dds-spacing-600))\n *\n * Primary button properties:\n * @cssproperty --dds-button-primary-color-bg - Background color of primary button (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-button-primary-color-bg-hover - Background color of primary button on hover (default: var(--dds-button-primary-background-hover))\n * @cssproperty --dds-button-primary-color-bg-active - Background color of primary button when active (default: var(--dds-button-primary-background-pressed))\n * @cssproperty --dds-button-primary-color-bg-disabled - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-button-primary-color-text - Text color of primary button (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-button-primary-color-text-disabled - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled))\n *\n * Primary inverted button properties:\n * @cssproperty --dds-button-primary-inverted-color-bg - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled))\n * @cssproperty --dds-button-primary-inverted-color-bg-hover - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover))\n * @cssproperty --dds-button-primary-inverted-color-bg-active - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed))\n * @cssproperty --dds-button-primary-inverted-color-bg-disabled - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled))\n * @cssproperty --dds-button-primary-inverted-color-text - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-primary-inverted-color-text-disabled - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled))\n *\n * Outline button properties:\n * @cssproperty --dds-button-outline-color-border - Border color of outline button (default: var(--dds-button-outline-border-enabled))\n * @cssproperty --dds-button-outline-color-border-hover - Border color of outline button on hover (default: var(--dds-button-outline-border-hover))\n * @cssproperty --dds-button-outline-color-border-active - Border color of outline button when active (default: var(--dds-button-outline-border-pressed))\n * @cssproperty --dds-button-outline-color-border-disabled - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled))\n * @cssproperty --dds-button-outline-color-text - Text color of outline button (default: var(--dds-button-outline-text-enabled))\n * @cssproperty --dds-button-outline-color-text-hover - Text color of outline button on hover (default: var(--dds-button-outline-text-hover))\n * @cssproperty --dds-button-outline-color-text-active - Text color of outline button when active (default: var(--dds-button-outline-text-pressed))\n * @cssproperty --dds-button-outline-color-text-disabled - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled))\n *\n * Outline inverted button properties:\n * @cssproperty --dds-button-outline-inverted-color-border - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled))\n * @cssproperty --dds-button-outline-inverted-color-border-hover - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover))\n * @cssproperty --dds-button-outline-inverted-color-border-active - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed))\n * @cssproperty --dds-button-outline-inverted-color-border-disabled - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled))\n * @cssproperty --dds-button-outline-inverted-color-text - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled))\n * @cssproperty --dds-button-outline-inverted-color-text-hover - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover))\n * @cssproperty --dds-button-outline-inverted-color-text-active - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed))\n * @cssproperty --dds-button-outline-inverted-color-text-disabled - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled))\n *\n * Subtle button properties:\n * @cssproperty --dds-button-subtle-color-bg - Background color of subtle button (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-button-subtle-color-bg-hover - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-button-subtle-color-bg-active - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-button-subtle-color-bg-disabled - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled))\n * @cssproperty --dds-button-subtle-color-border - Border color of subtle button (default: var(--dds-button-subtle-border-enabled))\n * @cssproperty --dds-button-subtle-color-border-hover - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover))\n * @cssproperty --dds-button-subtle-color-border-active - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed))\n * @cssproperty --dds-button-subtle-color-border-disabled - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled))\n * @cssproperty --dds-button-subtle-color-text - Text color of subtle button (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-button-subtle-color-text-hover - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover))\n * @cssproperty --dds-button-subtle-color-text-active - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed))\n * @cssproperty --dds-button-subtle-color-text-disabled - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled))\n *\n * Clean button properties:\n * @cssproperty --dds-button-clean-color-text - Text color of clean button (default: var(--dds-text-link-base))\n * @cssproperty --dds-button-clean-color-text-hover - Text color of clean button on hover (default: var(--dds-text-link-hover))\n * @cssproperty --dds-button-clean-color-text-active - Text color of clean button when active (default: var(--dds-text-link-pressed))\n * @cssproperty --dds-button-clean-color-text-disabled - Text color of disabled clean button (default: var(--dds-text-neutral-disabled))\n *\n * Clean inverted button properties:\n * @cssproperty --dds-button-clean-inverted-color-text - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-hover - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-active - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-disabled - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled))\n *\n * Danger button properties:\n * @cssproperty --dds-button-danger-color-bg - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled))\n * @cssproperty --dds-button-danger-color-bg-hover - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover))\n * @cssproperty --dds-button-danger-color-bg-active - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed))\n * @cssproperty --dds-button-danger-color-text - Text color of danger button (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-button-danger-outline-color-border - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled))\n * @cssproperty --dds-button-danger-outline-color-border-hover - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover))\n * @cssproperty --dds-button-danger-outline-color-border-active - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed))\n * @cssproperty --dds-button-danger-outline-color-text - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled))\n * @cssproperty --dds-button-danger-outline-color-text-hover - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover))\n * @cssproperty --dds-button-danger-outline-color-text-active - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed))\n * @cssproperty --dds-button-danger-subtle-color-bg - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled))\n * @cssproperty --dds-button-danger-subtle-color-bg-hover - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover))\n * @cssproperty --dds-button-danger-subtle-color-bg-active - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed))\n * @cssproperty --dds-button-danger-subtle-color-text - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled))\n * @cssproperty --dds-button-danger-subtle-color-text-hover - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover))\n * @cssproperty --dds-button-danger-subtle-color-text-active - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed))\n * @cssproperty --dds-button-danger-clean-color-text - Text color of danger clean button (default: var(--dds-text-negative-subtle))\n * @cssproperty --dds-button-danger-clean-color-text-hover - Text color of danger clean button on hover (default: var(--dds-text-negative-base))\n * @cssproperty --dds-button-danger-clean-color-text-active - Text color of danger clean button when active (default: var(--dds-text-negative-strong))\n */\nexport default class DapDSButton extends GenericFormElement {\n static override tagName = 'dap-ds-button'\n\n /** Components rendered inside the button, auto-registered on first use. */\n static override dependencies = {\n 'dap-ds-icon': DapDSIcon,\n 'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n }\n\n /**\n * @ignore\n */\n @query('.button') readonly button!: HTMLButtonElement | HTMLLinkElement\n\n /** The visual style variant of the button\n * @type { 'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item' }\n * @default 'primary'\n * @example\n * ```html\n * <dap-ds-button variant=\"primary\">Primary action</dap-ds-button>\n * <dap-ds-button variant=\"outline\">Secondary action</dap-ds-button>\n * <dap-ds-button variant=\"subtle\">Tertiary action</dap-ds-button>\n * ```\n * @group Visual\n */\n @property({ reflect: true }) variant: ButtonVariant = 'primary'\n\n /** The size of the button affecting padding and font size\n * @type { 'lg' | 'md' | 'sm' | 'xs' }\n * @default 'md'\n * @example\n * ```html\n * <dap-ds-button size=\"xs\">Extra small</dap-ds-button>\n * <dap-ds-button size=\"sm\">Small</dap-ds-button>\n * <dap-ds-button>Medium (default)</dap-ds-button>\n * <dap-ds-button size=\"lg\">Large</dap-ds-button>\n * ```\n * @group Visual\n */\n @property({ reflect: true }) size: ButtonSize = 'md'\n\n /** Whether the button is in loading state, showing a spinner and disabling interaction\n * @default false\n * @example\n * ```html\n * <dap-ds-button loading>Submitting...</dap-ds-button>\n * ```\n * @group State\n */\n @property({ type: Boolean, reflect: true }) loading = false\n\n /** Whether the button represents a destructive action (applies danger styling)\n * @default false\n * @example\n * ```html\n * <dap-ds-button danger>Delete Account</dap-ds-button>\n * <dap-ds-button variant=\"outline\" danger>Remove Item</dap-ds-button>\n * ```\n * @group State\n */\n @property({ type: Boolean }) danger = false\n\n /** The shape of the button - use 'circle' for icon-only buttons\n * @type { 'button' | 'circle' }\n * @default 'button'\n * @example\n * ```html\n * <dap-ds-button shape=\"circle\" aria-label=\"Close\">\n * <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n * </dap-ds-button>\n * ```\n * @group Visual\n */\n @property({ reflect: true }) shape: ButtonShape = 'button'\n\n /** The HTML type attribute for form interaction\n * @type { 'button' | 'submit' | 'reset' }\n * @default 'button'\n * @example\n * ```html\n * <form>\n * <dap-ds-button htmlType=\"submit\">Submit</dap-ds-button>\n * <dap-ds-button htmlType=\"reset\">Reset</dap-ds-button>\n * </form>\n * ```\n * @group Form\n */\n @property() htmlType: HtmlButtonType = 'button'\n\n /** The URL to navigate to. When present, the button renders as an anchor element\n * @example\n * ```html\n * <dap-ds-button href=\"/dashboard\">Go to Dashboard</dap-ds-button>\n * <dap-ds-button href=\"https://example.com\" target=\"_blank\">External Link</dap-ds-button>\n * ```\n * @group Navigation\n */\n @property() href?: string\n\n /** The target attribute for link navigation\n * @type { '_blank' | '_self' | '_parent' | '_top' }\n * @default '_self'\n * @example\n * ```html\n * <dap-ds-button href=\"https://example.com\" target=\"_blank\">Open in new tab</dap-ds-button>\n * ```\n * @group Navigation\n */\n @property() target: LinkTarget = '_self'\n\n /** The rel attribute for link security and behavior\n * @default 'noreferrer noopener'\n * @example\n * ```html\n * <dap-ds-button href=\"https://example.com\" rel=\"noopener\">Safe external link</dap-ds-button>\n * ```\n * @group Navigation\n */\n @property() rel?: string\n\n /** Controls loading timeout in milliseconds\n * @default 0\n * @group State\n */\n @property({ type: Number }) loadingTimeout = 0\n\n /** Enables high contrast theme toggle functionality (internal use)\n * @default false\n * @ignore\n */\n @property({ type: Boolean }) hc: boolean = false\n\n /** Whether the button is active\n * @default false\n * @example\n * ```html\n * <dap-ds-button active>Active</dap-ds-button>\n * ```\n */\n @property({ type: Boolean }) active: boolean = false\n\n /**\n * Enable OKLCH proof-of-concept theming (experimental)\n * @default false\n * @internal\n * @ignore\n */\n @property({ type: Boolean, attribute: 'data-oklch-poc', reflect: true })\n oklchPoc: boolean = false\n\n /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n @property({ type: String }) targetBlankText: string\n\n /** Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger). */\n @property({ type: String }) forceRole?: string\n\n static readonly styles = unsafeCSS(styles)\n\n private loadingTimer?: number\n\n /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n private _ariaLabelForButton: string | null = null\n\n /** Internal flag to ignore the aria-label change triggered by our own attribute cleanup */\n private _ignoreNextAriaLabelChange = false\n\n private getSecureRel(): string {\n if (this.target === '_blank') {\n return this.rel ?? 'noreferrer noopener'\n }\n return this.rel ?? ''\n }\n\n private validateAriaPressed(): string | undefined | null {\n if (\n this.ariaPressed &&\n !['true', 'false', 'mixed'].includes(this.ariaPressed)\n ) {\n console.warn('aria-pressed must be \"true\", \"false\", or \"mixed\"')\n return undefined\n }\n\n return this.ariaPressed\n }\n\n private getAriaExpanded(): string | null | undefined {\n if (this.ariaExpanded && !['true', 'false'].includes(this.ariaExpanded)) {\n console.warn('aria-expanded must be \"true\" or \"false\"')\n return undefined\n }\n return this.ariaExpanded\n }\n\n private validateProperties(): void {\n if (\n this.shape === 'circle' &&\n !this.effectiveAriaLabel &&\n !this.textContent?.trim() &&\n !this.ariaHidden\n ) {\n console.warn(\n 'Circle buttons require aria-label or visible text for accessibility',\n )\n }\n\n if (this.href && this.htmlType !== 'button') {\n console.warn(\n 'htmlType is ignored when href is provided - button will render as anchor',\n )\n }\n\n if (this.href && !this.isValidUrl(this.href)) {\n console.warn('Invalid URL provided for href attribute')\n }\n }\n\n private isValidUrl(url: string): boolean {\n try {\n if (\n url.startsWith('/') ||\n url.startsWith('./') ||\n url.startsWith('../')\n ) {\n return true\n }\n new URL(url)\n return true\n } catch {\n return false\n }\n }\n\n private handleClick(event: Event): boolean {\n if (this.disabled || this.loading) {\n // Returning false does not cancel a Lit listener, and an anchor has no\n // native disabled state, so without this a disabled href button navigates.\n event.preventDefault()\n event.stopPropagation()\n return false\n }\n\n let handled = false\n if (this.htmlType !== 'button') {\n const proxy = document.createElement('button')\n proxy.type = this.htmlType\n this.insertAdjacentElement('afterend', proxy)\n\n proxy.click()\n proxy.remove()\n handled = true\n }\n\n if (this.hc) {\n this.toggleHighContrast()\n }\n\n return handled\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n // Only handle keyboard events for anchor elements that act as buttons\n if (!this.href) {\n return\n }\n\n // WAI-ARIA: Elements acting as buttons must respond to Enter and Space keys\n if (event.key === ' ' || event.key === 'Enter') {\n if (this.disabled || this.loading) {\n event.preventDefault()\n event.stopPropagation()\n return\n }\n\n // For Space key: prevent default scrolling behavior and trigger click\n if (event.key === ' ') {\n event.preventDefault()\n event.stopPropagation()\n this.button.click()\n }\n }\n }\n\n private toggleHighContrast(): void {\n document.body.classList.toggle('high-contrast-theme')\n }\n\n private startLoadingTimeout(): void {\n if (this.loadingTimeout > 0) {\n this.loadingTimer = window.setTimeout(() => {\n this.loading = false\n this.emit(\n 'dds-loading-timeout',\n {\n timeout: this.loadingTimeout,\n },\n {\n bubbles: true,\n },\n )\n }, this.loadingTimeout)\n }\n }\n\n private clearLoadingTimeout(): void {\n if (this.loadingTimer) {\n clearTimeout(this.loadingTimer)\n this.loadingTimer = undefined\n }\n }\n\n /**\n * `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.\n * A caller focusing a button the same tick it mounts -- a \"Save\" button that appears\n * only after the form it belongs to opens, say -- would otherwise get a TypeError,\n * not a no-op. Throwing out of a focus() call breaks whatever effect made it.\n */\n focus(options?: FocusOptions) {\n this.button?.focus(options)\n }\n\n blur() {\n this.button?.blur()\n }\n\n /**\n * @ignore\n */\n public get focusElement() {\n return this.button\n }\n\n /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n private get effectiveAriaLabel(): string | null {\n return this.ariaLabel ?? this._ariaLabelForButton\n }\n\n protected updated(\n changedProperties: Map<string | number | symbol, unknown>,\n ): void {\n super.updated(changedProperties)\n\n if (changedProperties.has('ariaLabel')) {\n const newValue = this.ariaLabel\n\n if (newValue != null && newValue !== '') {\n // Persist value before removing host attribute so the inner button keeps it\n this._ariaLabelForButton = newValue\n } else if (!this._ignoreNextAriaLabelChange) {\n // Only clear when the consumer explicitly removes/clears aria-label\n this._ariaLabelForButton = null\n }\n\n // Reset the guard after handling the change\n this._ignoreNextAriaLabelChange = false\n }\n\n if (this.ariaLabel != null && this.ariaLabel !== '') {\n // Removing the host attribute will trigger another ariaLabel change,\n // which we intentionally ignore so the inner button keeps its label.\n this._ignoreNextAriaLabelChange = true\n this.removeAttribute('aria-label')\n }\n\n if (changedProperties.has('loading')) {\n if (this.loading) {\n this.startLoadingTimeout()\n } else {\n this.clearLoadingTimeout()\n }\n }\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties)\n this.validateProperties()\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n this.clearLoadingTimeout()\n }\n\n render() {\n return html`\n <${unsafeStatic(this.href ? 'a' : 'button')}\n part=\"base\"\n .disabled=${this.disabled}\n aria-disabled=${this.disabled}\n aria-hidden=${ifDefined(this.ariaHidden)}\n aria-expanded=${ifDefined(this.getAriaExpanded())}\n aria-controls=${ifDefined(this.ariaControls)}\n aria-label=${ifDefined(this.effectiveAriaLabel)}\n aria-haspopup=${ifDefined(this.ariaHasPopup)}\n aria-describedby=${ifDefined(this.ariaDescribedBy)}\n aria-pressed=${ifDefined(this.validateAriaPressed())}\n role=${ifDefined(this.forceRole)}\n .autofocus=${this.autofocus}\n tabindex=${ifDefined(this.href && this.disabled ? '-1' : undefined)}\n type=${ifDefined(this.href ? null : this.htmlType)}\n name=${ifDefined(this.name)}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${ifDefined(this.getSecureRel())}\n class=${clsx(\n buttonVariants({\n intent: this.variant,\n size: this.effectiveSize as ButtonSize,\n shape: this.shape,\n }),\n {\n 'dds-button--danger': this.danger,\n 'dds-button--loading': this.loading,\n 'dds-button--active': this.active,\n // An anchor never reflects a disabled attribute, so the [disabled]\n // styling cannot reach it. Style off the class, as link--disabled does.\n 'button--disabled': this.disabled,\n },\n )}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}>\n <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n ${\n this.loading\n ? this._getLoadingSpinner()\n : html` <span part=\"content\" class=\"button__text\">\n <slot></slot>\n </span>`\n }\n ${\n this.target === '_blank'\n ? html`<span class=\"sr-only\">\n ${this.targetBlankText ?? t('opensInNewTab')}</span\n >`\n : nothing\n }\n </${unsafeStatic(this.href ? 'a' : 'button')}>\n `\n }\n\n private getLoadingIconSize(size: ButtonSize): number {\n return LOADING_ICON_SIZES[size] || LOADING_ICON_SIZES.md\n }\n\n private _getLoadingSpinner() {\n return html`\n <span class=\"button__spinner\" aria-live=\"polite\">\n <dap-ds-icon-loading-spinner\n size=${this.getLoadingIconSize(this.effectiveSize as ButtonSize)}\n aria-label=${t('loading')}></dap-ds-icon-loading-spinner>\n </span>\n `\n }\n}\n"],"names":["LOADING_ICON_SIZES","_DapDSButton","GenericFormElement","_a","_b","url","e","event","handled","proxy","options","changedProperties","newValue","_changedProperties","html","unsafeStatic","ifDefined","clsx","buttonVariants","t","nothing","size","DapDSIcon","SystemLoadingSpinner","unsafeCSS","styles","DapDSButton","__decorateClass","query","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAkJqBC,IAArB,MAAqBA,UAAoBC,EAAmB;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAyBwD,KAAA,UAAA,WAcN,KAAA,OAAA,MAUM,KAAA,UAAA,IAWhB,KAAA,SAAA,IAaY,KAAA,QAAA,UAcX,KAAA,WAAA,UAqBN,KAAA,SAAA,SAgBY,KAAA,iBAAA,GAMF,KAAA,KAAA,IASI,KAAA,SAAA,IAS3B,KAAA,WAAA,IAapB,KAAQ,sBAAqC,MAG7C,KAAQ,6BAA6B;AAAA,EAAA;AAAA,EAE7B,eAAuB;;AACzB,WAAA,KAAK,WAAW,YACXC,IAAA,KAAK,QAAL,OAAAA,IAAY,yBAEdC,IAAA,KAAK,QAAL,OAAAA,IAAY;AAAA,EAAA;AAAA,EAGb,sBAAiD;AAErD,QAAA,KAAK,eACL,CAAC,CAAC,QAAQ,SAAS,OAAO,EAAE,SAAS,KAAK,WAAW,GACrD;AACA,cAAQ,KAAK,kDAAkD;AACxD;AAAA,IAAA;AAGT,WAAO,KAAK;AAAA,EAAA;AAAA,EAGN,kBAA6C;AAC/C,QAAA,KAAK,gBAAgB,CAAC,CAAC,QAAQ,OAAO,EAAE,SAAS,KAAK,YAAY,GAAG;AACvE,cAAQ,KAAK,yCAAyC;AAC/C;AAAA,IAAA;AAET,WAAO,KAAK;AAAA,EAAA;AAAA,EAGN,qBAA2B;;AACjC,IACE,KAAK,UAAU,YACf,CAAC,KAAK,sBACN,GAACD,IAAA,KAAK,gBAAL,QAAAA,EAAkB,WACnB,CAAC,KAAK,cAEE,QAAA;AAAA,MACN;AAAA,IACF,GAGE,KAAK,QAAQ,KAAK,aAAa,YACzB,QAAA;AAAA,MACN;AAAA,IACF,GAGE,KAAK,QAAQ,CAAC,KAAK,WAAW,KAAK,IAAI,KACzC,QAAQ,KAAK,yCAAyC;AAAA,EACxD;AAAA,EAGM,WAAWE,GAAsB;AACnC,QAAA;AAEA,aAAAA,EAAI,WAAW,GAAG,KAClBA,EAAI,WAAW,IAAI,KACnBA,EAAI,WAAW,KAAK,KAItB,IAAI,IAAIA,CAAG,GACJ;AAAA,IAAA,SACDC,GAAA;AACC,aAAA;AAAA,IAAA;AAAA,EACT;AAAA,EAGM,YAAYC,GAAuB;AACrC,QAAA,KAAK,YAAY,KAAK;AAGxB,aAAAA,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACf;AAGT,QAAIC,IAAU;AACV,QAAA,KAAK,aAAa,UAAU;AACxB,YAAAC,IAAQ,SAAS,cAAc,QAAQ;AAC7C,MAAAA,EAAM,OAAO,KAAK,UACb,KAAA,sBAAsB,YAAYA,CAAK,GAE5CA,EAAM,MAAM,GACZA,EAAM,OAAO,GACHD,IAAA;AAAA,IAAA;AAGZ,WAAI,KAAK,MACP,KAAK,mBAAmB,GAGnBA;AAAA,EAAA;AAAA,EAGD,cAAcD,GAA4B;AAE5C,QAAC,KAAK,SAKNA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,UAAS;AAC1C,UAAA,KAAK,YAAY,KAAK,SAAS;AACjC,QAAAA,EAAM,eAAe,GACrBA,EAAM,gBAAgB;AACtB;AAAA,MAAA;AAIE,MAAAA,EAAM,QAAQ,QAChBA,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACtB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,EACF;AAAA,EAGM,qBAA2B;AACxB,aAAA,KAAK,UAAU,OAAO,qBAAqB;AAAA,EAAA;AAAA,EAG9C,sBAA4B;AAC9B,IAAA,KAAK,iBAAiB,MACnB,KAAA,eAAe,OAAO,WAAW,MAAM;AAC1C,WAAK,UAAU,IACV,KAAA;AAAA,QACH;AAAA,QACA;AAAA,UACE,SAAS,KAAK;AAAA,QAChB;AAAA,QACA;AAAA,UACE,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,IAAA,GACC,KAAK,cAAc;AAAA,EACxB;AAAA,EAGM,sBAA4B;AAClC,IAAI,KAAK,iBACP,aAAa,KAAK,YAAY,GAC9B,KAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASF,MAAMG,GAAwB;;AACvB,KAAAP,IAAA,KAAA,WAAA,QAAAA,EAAQ,MAAMO;AAAA,EAAO;AAAA,EAG5B,OAAO;;AACL,KAAAP,IAAA,KAAK,WAAL,QAAAA,EAAa;AAAA,EAAK;AAAA;AAAA;AAAA;AAAA,EAMpB,IAAW,eAAe;AACxB,WAAO,KAAK;AAAA,EAAA;AAAA;AAAA,EAId,IAAY,qBAAoC;;AACvC,YAAAA,IAAA,KAAK,cAAL,OAAAA,IAAkB,KAAK;AAAA,EAAA;AAAA,EAGtB,QACRQ,GACM;AAGF,QAFJ,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,WAAW,GAAG;AACtC,YAAMC,IAAW,KAAK;AAElB,MAAAA,KAAY,QAAQA,MAAa,KAEnC,KAAK,sBAAsBA,IACjB,KAAK,+BAEf,KAAK,sBAAsB,OAI7B,KAAK,6BAA6B;AAAA,IAAA;AAGpC,IAAI,KAAK,aAAa,QAAQ,KAAK,cAAc,OAG/C,KAAK,6BAA6B,IAClC,KAAK,gBAAgB,YAAY,IAG/BD,EAAkB,IAAI,SAAS,MAC7B,KAAK,UACP,KAAK,oBAAoB,IAEzB,KAAK,oBAAoB;AAAA,EAE7B;AAAA,EAGQ,aACRE,GACM;AACN,UAAM,aAAaA,CAAkB,GACrC,KAAK,mBAAmB;AAAA,EAAA;AAAA,EAG1B,uBAA6B;AAC3B,UAAM,qBAAqB,GAC3B,KAAK,oBAAoB;AAAA,EAAA;AAAA,EAG3B,SAAS;;AACA,WAAAC;AAAAA,SACFC,EAAa,KAAK,OAAO,MAAM,QAAQ,CAAC;AAAA;AAAA,oBAE7B,KAAK,QAAQ;AAAA,wBACT,KAAK,QAAQ;AAAA,sBACfC,EAAU,KAAK,UAAU,CAAC;AAAA,wBACxBA,EAAU,KAAK,iBAAiB,CAAC;AAAA,wBACjCA,EAAU,KAAK,YAAY,CAAC;AAAA,qBAC/BA,EAAU,KAAK,kBAAkB,CAAC;AAAA,wBAC/BA,EAAU,KAAK,YAAY,CAAC;AAAA,2BACzBA,EAAU,KAAK,eAAe,CAAC;AAAA,uBACnCA,EAAU,KAAK,qBAAqB,CAAC;AAAA,eAC7CA,EAAU,KAAK,SAAS,CAAC;AAAA,qBACnB,KAAK,SAAS;AAAA,mBAChBA,EAAU,KAAK,QAAQ,KAAK,WAAW,OAAO,MAAS,CAAC;AAAA,eAC5DA,EAAU,KAAK,OAAO,OAAO,KAAK,QAAQ,CAAC;AAAA,eAC3CA,EAAU,KAAK,IAAI,CAAC;AAAA,eACpBA,EAAU,KAAK,IAAI,CAAC;AAAA,iBAClBA,EAAU,KAAK,MAAM,CAAC;AAAA,cACzBA,EAAU,KAAK,cAAc,CAAC;AAAA,gBAC5BC;AAAA,MACNC,EAAe;AAAA,QACb,QAAQ,KAAK;AAAA,QACb,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,MAAA,CACb;AAAA,MACD;AAAA,QACE,sBAAsB,KAAK;AAAA,QAC3B,uBAAuB,KAAK;AAAA,QAC5B,sBAAsB,KAAK;AAAA;AAAA;AAAA,QAG3B,oBAAoB,KAAK;AAAA,MAAA;AAAA,IAE5B,CAAA;AAAA,iBACQ,KAAK,WAAW;AAAA,mBACd,KAAK,aAAa;AAAA;AAAA,UAG3B,KAAK,UACD,KAAK,mBAAA,IACLJ;AAAAA;AAAAA,sBAGN;AAAA,UAEE,KAAK,WAAW,WACZA;AAAAA,mBACIX,IAAA,KAAK,oBAAL,OAAAA,IAAwBgB,EAAE,eAAe,CAAC;AAAA,mBAE9CC,CACN;AAAA,UACEL,EAAa,KAAK,OAAO,MAAM,QAAQ,CAAC;AAAA;AAAA,EAAA;AAAA,EAIxC,mBAAmBM,GAA0B;AAC5C,WAAArB,EAAmBqB,CAAI,KAAKrB,EAAmB;AAAA,EAAA;AAAA,EAGhD,qBAAqB;AACpB,WAAAc;AAAAA;AAAAA;AAAAA,iBAGM,KAAK,mBAAmB,KAAK,aAA2B,CAAC;AAAA,uBACnDK,EAAE,SAAS,CAAC;AAAA;AAAA;AAAA,EAAA;AAInC;AArcElB,EAAgB,UAAU,iBAG1BA,EAAgB,eAAe;AAAA,EAC7B,eAAeqB;AAAA,EACf,+BAA+BC;AACjC,GAqJgBtB,EAAA,SAASuB,EAAUC,CAAM;AA5J3C,IAAqBC,IAArBzB;AAY6B0B,EAAA;AAAA,EAA1BC,EAAM,SAAS;AAAA,GAZGF,EAYQ,WAAA,QAAA;AAaEC,EAAA;AAAA,EAA5BE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAzBRH,EAyBU,WAAA,SAAA;AAcAC,EAAA;AAAA,EAA5BE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAvCRH,EAuCU,WAAA,MAAA;AAUeC,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAjDvBH,EAiDyB,WAAA,SAAA;AAWfC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA5DRH,EA4DU,WAAA,QAAA;AAaAC,EAAA;AAAA,EAA5BE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAzERH,EAyEU,WAAA,OAAA;AAcjBC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAvFSH,EAuFP,WAAA,UAAA;AAUAC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAjGSH,EAiGP,WAAA,MAAA;AAWAC,EAAA;AAAA,EAAXE,EAAS;AAAA,GA5GSH,EA4GP,WAAA,QAAA;AAUAC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAtHSH,EAsHP,WAAA,KAAA;AAMgBC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA5HPH,EA4HS,WAAA,gBAAA;AAMCC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAlIRH,EAkIU,WAAA,IAAA;AASAC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA3IRH,EA2IU,WAAA,QAAA;AAS7BC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,WAAW,kBAAkB,SAAS,GAAM,CAAA;AAAA,GAnJpDH,EAoJnB,WAAA,UAAA;AAG4BC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAvJPH,EAuJS,WAAA,iBAAA;AAGAC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA1JPH,EA0JS,WAAA,WAAA;"}
|
|
1
|
+
{"version":3,"file":"button.component.js","sources":["../../../src/components/button/button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { t } from '@/localization/localization'\n\nimport {\n ButtonShape,\n ButtonVariant,\n HtmlButtonType,\n LinkTarget,\n} from '../../common/types'\nimport DapDSIcon from '../icon/icon.component'\nimport { ButtonSize } from '../icon-button/icon-button.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport styles from './_styles/button.scss?inline'\nimport { buttonVariants } from './button.variants'\n\nconst LOADING_ICON_SIZES = {\n lg: 24,\n md: 20,\n sm: 16,\n xs: 16,\n} as const\n\n/**\n * `dap-ds-button` is a versatile button component for triggering actions and navigation.\n * @element dap-ds-button\n * @summary A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n * @title - Button\n *\n * @example Basic Usage\n * ```html\n * <dap-ds-button>Click me</dap-ds-button>\n * <dap-ds-button variant=\"outline\">Secondary action</dap-ds-button>\n * <dap-ds-button href=\"/dashboard\">Navigate</dap-ds-button>\n * ```\n *\n * @example Form Integration\n * ```html\n * <form>\n * <dap-ds-button htmlType=\"submit\">Submit Form</dap-ds-button>\n * <dap-ds-button htmlType=\"reset\" variant=\"outline\">Reset</dap-ds-button>\n * </form>\n * ```\n *\n * @example Accessibility\n * ```html\n * <!-- Icon-only buttons require aria-label -->\n * <dap-ds-button aria-label=\"Close dialog\" shape=\"circle\">\n * <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n * </dap-ds-button>\n * ```\n *\n * @property {string} sizeMap - The size map of the button.\n * @example\n * ```html\n * <dap-ds-button sizeMap=\"sm:lg,xs:xs\">Small</dap-ds-button>\n * ```\n *\n * @event dds-loading-timeout - Emitted when the loading timeout is reached\n *\n * @slot - The content of the button. Can contain text, icons, or other elements.\n *\n * @csspart base - The main button container.\n * @csspart high-contrast - The high contrast part of the button.\n * @csspart content - The content wrapper inside the button.\n *\n * @cssproperty --dds-button-padding-x - Horizontal padding of the button (default: var(--dds-spacing-300))\n * @cssproperty --dds-button-padding-y - Vertical padding of the button (default: var(--dds-spacing-300))\n * @cssproperty --dds-button-border-radius - Border radius of the button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-button-font-weight - Font weight of the button (default: 700)\n * @cssproperty --dds-button-line-height - Line height of the button (default: var(--dds-font-line-height-large))\n * @cssproperty --dds-button-transition - Transition property of the button (default: all 0.2s ease-in-out)\n * @cssproperty --dds-button-disabled-opacity - Opacity of disabled button (default: 0.5)\n *\n * @cssproperty --dds-button-size-lg - Size of large button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-button-size-md - Size of medium button (default: var(--dds-spacing-1000))\n * @cssproperty --dds-button-size-sm - Size of small button (default: var(--dds-spacing-800))\n * @cssproperty --dds-button-size-xs - Size of extra small button (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-button-circle-lg - Size of large circle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-button-circle-md - Size of medium circle button (default: var(--dds-spacing-1000))\n * @cssproperty --dds-button-circle-sm - Size of small circle button (default: var(--dds-spacing-800))\n * @cssproperty --dds-button-circle-xs - Size of extra small circle button (default: var(--dds-spacing-600))\n *\n * Primary button properties:\n * @cssproperty --dds-button-primary-color-bg - Background color of primary button (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-button-primary-color-bg-hover - Background color of primary button on hover (default: var(--dds-button-primary-background-hover))\n * @cssproperty --dds-button-primary-color-bg-active - Background color of primary button when active (default: var(--dds-button-primary-background-pressed))\n * @cssproperty --dds-button-primary-color-bg-disabled - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-button-primary-color-text - Text color of primary button (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-button-primary-color-text-disabled - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled))\n *\n * Primary inverted button properties:\n * @cssproperty --dds-button-primary-inverted-color-bg - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled))\n * @cssproperty --dds-button-primary-inverted-color-bg-hover - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover))\n * @cssproperty --dds-button-primary-inverted-color-bg-active - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed))\n * @cssproperty --dds-button-primary-inverted-color-bg-disabled - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled))\n * @cssproperty --dds-button-primary-inverted-color-text - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-primary-inverted-color-text-disabled - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled))\n *\n * Outline button properties:\n * @cssproperty --dds-button-outline-color-border - Border color of outline button (default: var(--dds-button-outline-border-enabled))\n * @cssproperty --dds-button-outline-color-border-hover - Border color of outline button on hover (default: var(--dds-button-outline-border-hover))\n * @cssproperty --dds-button-outline-color-border-active - Border color of outline button when active (default: var(--dds-button-outline-border-pressed))\n * @cssproperty --dds-button-outline-color-border-disabled - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled))\n * @cssproperty --dds-button-outline-color-text - Text color of outline button (default: var(--dds-button-outline-text-enabled))\n * @cssproperty --dds-button-outline-color-text-hover - Text color of outline button on hover (default: var(--dds-button-outline-text-hover))\n * @cssproperty --dds-button-outline-color-text-active - Text color of outline button when active (default: var(--dds-button-outline-text-pressed))\n * @cssproperty --dds-button-outline-color-text-disabled - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled))\n *\n * Outline inverted button properties:\n * @cssproperty --dds-button-outline-inverted-color-border - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled))\n * @cssproperty --dds-button-outline-inverted-color-border-hover - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover))\n * @cssproperty --dds-button-outline-inverted-color-border-active - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed))\n * @cssproperty --dds-button-outline-inverted-color-border-disabled - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled))\n * @cssproperty --dds-button-outline-inverted-color-text - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled))\n * @cssproperty --dds-button-outline-inverted-color-text-hover - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover))\n * @cssproperty --dds-button-outline-inverted-color-text-active - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed))\n * @cssproperty --dds-button-outline-inverted-color-text-disabled - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled))\n *\n * Subtle button properties:\n * @cssproperty --dds-button-subtle-color-bg - Background color of subtle button (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-button-subtle-color-bg-hover - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-button-subtle-color-bg-active - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-button-subtle-color-bg-disabled - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled))\n * @cssproperty --dds-button-subtle-color-border - Border color of subtle button (default: var(--dds-button-subtle-border-enabled))\n * @cssproperty --dds-button-subtle-color-border-hover - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover))\n * @cssproperty --dds-button-subtle-color-border-active - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed))\n * @cssproperty --dds-button-subtle-color-border-disabled - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled))\n * @cssproperty --dds-button-subtle-color-text - Text color of subtle button (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-button-subtle-color-text-hover - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover))\n * @cssproperty --dds-button-subtle-color-text-active - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed))\n * @cssproperty --dds-button-subtle-color-text-disabled - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled))\n *\n * Subtle neutral button properties:\n * @cssproperty --dds-button-subtle-neutral-color-bg - Background color of subtle neutral button (default: var(--dds-button-subtle-background-neutral-enabled))\n * @cssproperty --dds-button-subtle-neutral-color-bg-hover - Background color of subtle neutral button on hover (default: var(--dds-button-subtle-background-neutral-hover))\n * @cssproperty --dds-button-subtle-neutral-color-bg-active - Background color of subtle neutral button when active (default: var(--dds-button-subtle-background-neutral-pressed))\n * @cssproperty --dds-button-subtle-neutral-color-border - Border color of subtle neutral button (default: var(--dds-button-subtle-border-neutral-enabled))\n * @cssproperty --dds-button-subtle-neutral-color-border-hover - Border color of subtle neutral button on hover (default: var(--dds-button-subtle-border-neutral-hover))\n * @cssproperty --dds-button-subtle-neutral-color-border-active - Border color of subtle neutral button when active (default: var(--dds-button-subtle-border-neutral-pressed))\n * @cssproperty --dds-button-subtle-neutral-color-text - Text color of subtle neutral button (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-button-subtle-neutral-color-text-hover - Text color of subtle neutral button on hover (default: var(--dds-button-subtle-text-neutral-hover))\n * @cssproperty --dds-button-subtle-neutral-color-text-active - Text color of subtle neutral button when active (default: var(--dds-button-subtle-text-neutral-hover))\n *\n * Subtle inverted button properties:\n * @cssproperty --dds-button-subtle-inverted-color-bg - Background color of subtle inverted button (default: var(--dds-button-subtle-background-inverted-enabled))\n * @cssproperty --dds-button-subtle-inverted-color-bg-hover - Background color of subtle inverted button on hover (default: var(--dds-button-subtle-background-inverted-hover))\n * @cssproperty --dds-button-subtle-inverted-color-bg-active - Background color of subtle inverted button when active (default: var(--dds-button-subtle-background-inverted-pressed))\n * @cssproperty --dds-button-subtle-inverted-color-border - Border color of subtle inverted button (default: var(--dds-button-subtle-border-inverted-enabled))\n * @cssproperty --dds-button-subtle-inverted-color-border-hover - Border color of subtle inverted button on hover (default: var(--dds-button-subtle-border-inverted-enabled))\n * @cssproperty --dds-button-subtle-inverted-color-border-active - Border color of subtle inverted button when active (default: var(--dds-button-subtle-border-inverted-enabled))\n * @cssproperty --dds-button-subtle-inverted-color-text - Text color of subtle inverted button (default: var(--dds-button-subtle-text-inverted))\n * @cssproperty --dds-button-subtle-inverted-color-text-hover - Text color of subtle inverted button on hover (default: var(--dds-button-subtle-text-inverted))\n * @cssproperty --dds-button-subtle-inverted-color-text-active - Text color of subtle inverted button when active (default: var(--dds-button-subtle-text-inverted))\n *\n * Subtle menu button properties:\n * @cssproperty --dds-button-subtle-menu-color-bg - Background color of subtle menu button (default: transparent)\n * @cssproperty --dds-button-subtle-menu-color-bg-hover - Background color of subtle menu button on hover (default: var(--dds-button-subtle-background-neutral-hover))\n * @cssproperty --dds-button-subtle-menu-color-bg-active - Background color of subtle menu button when active (default: var(--dds-button-subtle-background-neutral-pressed))\n * @cssproperty --dds-button-subtle-menu-color-border - Border color of subtle menu button (default: transparent)\n * @cssproperty --dds-button-subtle-menu-color-border-hover - Border color of subtle menu button on hover (default: transparent)\n * @cssproperty --dds-button-subtle-menu-color-border-active - Border color of subtle menu button when active (default: transparent)\n * @cssproperty --dds-button-subtle-menu-color-text - Text color of subtle menu button (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-button-subtle-menu-color-text-hover - Text color of subtle menu button on hover (default: var(--dds-button-subtle-text-neutral-hover))\n * @cssproperty --dds-button-subtle-menu-color-text-active - Text color of subtle menu button when active (default: var(--dds-button-subtle-text-neutral-hover))\n * @cssproperty --dds-button-subtle-menu-border-radius - Border radius of subtle menu button (default: var(--dds-radius-small))\n * @cssproperty --dds-button-subtle-menu-opened-border-radius - Border radius of subtle menu button while the menu is open (default: var(--dds-radius-small))\n * @cssproperty --dds-button-subtle-menu-opened-border - Border color of subtle menu button while the menu is open (default: transparent)\n * @cssproperty --dds-button-subtle-menu-opened-background - Background color of subtle menu button while the menu is open (default: var(--dds-button-subtle-background-neutral-pressed))\n * @cssproperty --dds-button-subtle-menu-opened-color - Text color of subtle menu button while the menu is open (default: var(--dds-button-subtle-text-neutral-hover))\n *\n * Subtle menu item button properties:\n * @cssproperty --dds-button-subtle-menu-item-color-bg - Background color of subtle menu item button (default: transparent)\n * @cssproperty --dds-button-subtle-menu-item-color-bg-hover - Background color of subtle menu item button on hover (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-button-subtle-menu-item-color-bg-active - Background color of subtle menu item button when active (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-button-subtle-menu-item-color-text - Text color of subtle menu item button (default: var(--dds-text-primary-base))\n * @cssproperty --dds-button-subtle-menu-item-color-text-hover - Text color of subtle menu item button on hover (default: var(--dds-text-primary-base))\n * @cssproperty --dds-button-subtle-menu-item-color-text-active - Text color of subtle menu item button when active (default: var(--dds-text-primary-base))\n * @cssproperty --dds-button-subtle-menu-item-color-text-disabled - Text color of disabled subtle menu item button (default: var(--dds-text-primary-base))\n * @cssproperty --dds-button-subtle-menu-item-padding - Padding of subtle menu item button (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-button-subtle-menu-item-border-radius - Border radius of subtle menu item button (default: var(--dds-radius-small))\n * @cssproperty --dds-button-subtle-menu-item-font-weight - Font weight of subtle menu item button (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-button-subtle-menu-item-font-size - Font size of subtle menu item button (default: var(--dds-font-size-base))\n * @cssproperty --dds-button-subtle-menu-item-line-height - Line height of subtle menu item button (default: var(--dds-font-line-height-xlarge))\n *\n * Clean button properties:\n * @cssproperty --dds-button-clean-color-text - Text color of clean button (default: var(--dds-text-link-base))\n * @cssproperty --dds-button-clean-color-text-hover - Text color of clean button on hover (default: var(--dds-text-link-hover))\n * @cssproperty --dds-button-clean-color-text-active - Text color of clean button when active (default: var(--dds-text-link-pressed))\n * @cssproperty --dds-button-clean-color-text-disabled - Text color of disabled clean button (default: var(--dds-text-neutral-disabled))\n *\n * Clean inverted button properties:\n * @cssproperty --dds-button-clean-inverted-color-text - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-hover - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-active - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-disabled - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled))\n *\n * Danger button properties:\n * @cssproperty --dds-button-danger-color-bg - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled))\n * @cssproperty --dds-button-danger-color-bg-hover - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover))\n * @cssproperty --dds-button-danger-color-bg-active - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed))\n * @cssproperty --dds-button-danger-color-text - Text color of danger button (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-button-danger-outline-color-border - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled))\n * @cssproperty --dds-button-danger-outline-color-border-hover - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover))\n * @cssproperty --dds-button-danger-outline-color-border-active - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed))\n * @cssproperty --dds-button-danger-outline-color-text - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled))\n * @cssproperty --dds-button-danger-outline-color-text-hover - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover))\n * @cssproperty --dds-button-danger-outline-color-text-active - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed))\n * @cssproperty --dds-button-subtle-destructive-color-bg - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled))\n * @cssproperty --dds-button-subtle-destructive-color-bg-hover - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover))\n * @cssproperty --dds-button-subtle-destructive-color-bg-active - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed))\n * @cssproperty --dds-button-subtle-destructive-color-border - Border color of danger subtle button (default: var(--dds-button-subtle-border-destructive-enabled))\n * @cssproperty --dds-button-subtle-destructive-color-border-hover - Border color of danger subtle button on hover (default: var(--dds-button-subtle-border-destructive-hover))\n * @cssproperty --dds-button-subtle-destructive-color-border-active - Border color of danger subtle button when active (default: var(--dds-button-subtle-border-destructive-pressed))\n * @cssproperty --dds-button-subtle-destructive-color-text - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled))\n * @cssproperty --dds-button-subtle-destructive-color-text-hover - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover))\n * @cssproperty --dds-button-subtle-destructive-color-text-active - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed))\n * @cssproperty --dds-button-danger-clean-color-text - Text color of danger clean button (default: var(--dds-button-subtle-text-destructive-enabled))\n * @cssproperty --dds-button-danger-clean-color-text-hover - Text color of danger clean button on hover (default: var(--dds-button-subtle-text-destructive-hover))\n * @cssproperty --dds-button-danger-clean-color-text-active - Text color of danger clean button when active (default: var(--dds-button-subtle-text-destructive-pressed))\n */\nexport default class DapDSButton extends GenericFormElement {\n static override tagName = 'dap-ds-button'\n\n /** Components rendered inside the button, auto-registered on first use. */\n static override dependencies = {\n 'dap-ds-icon': DapDSIcon,\n 'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n }\n\n /**\n * @ignore\n */\n @query('.button') readonly button!: HTMLButtonElement | HTMLLinkElement\n\n /** The visual style variant of the button\n * @type { 'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item' }\n * @default 'primary'\n * @example\n * ```html\n * <dap-ds-button variant=\"primary\">Primary action</dap-ds-button>\n * <dap-ds-button variant=\"outline\">Secondary action</dap-ds-button>\n * <dap-ds-button variant=\"subtle\">Tertiary action</dap-ds-button>\n * ```\n * @group Visual\n */\n @property({ reflect: true }) variant: ButtonVariant = 'primary'\n\n /** The size of the button affecting padding and font size\n * @type { 'lg' | 'md' | 'sm' | 'xs' }\n * @default 'md'\n * @example\n * ```html\n * <dap-ds-button size=\"xs\">Extra small</dap-ds-button>\n * <dap-ds-button size=\"sm\">Small</dap-ds-button>\n * <dap-ds-button>Medium (default)</dap-ds-button>\n * <dap-ds-button size=\"lg\">Large</dap-ds-button>\n * ```\n * @group Visual\n */\n @property({ reflect: true }) size: ButtonSize = 'md'\n\n /** Whether the button is in loading state, showing a spinner and disabling interaction\n * @default false\n * @example\n * ```html\n * <dap-ds-button loading>Submitting...</dap-ds-button>\n * ```\n * @group State\n */\n @property({ type: Boolean, reflect: true }) loading = false\n\n /** Whether the button represents a destructive action (applies danger styling)\n * @default false\n * @example\n * ```html\n * <dap-ds-button danger>Delete Account</dap-ds-button>\n * <dap-ds-button variant=\"outline\" danger>Remove Item</dap-ds-button>\n * ```\n * @group State\n */\n @property({ type: Boolean }) danger = false\n\n /** The shape of the button - use 'circle' for icon-only buttons\n * @type { 'button' | 'circle' }\n * @default 'button'\n * @example\n * ```html\n * <dap-ds-button shape=\"circle\" aria-label=\"Close\">\n * <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n * </dap-ds-button>\n * ```\n * @group Visual\n */\n @property({ reflect: true }) shape: ButtonShape = 'button'\n\n /** The HTML type attribute for form interaction\n * @type { 'button' | 'submit' | 'reset' }\n * @default 'button'\n * @example\n * ```html\n * <form>\n * <dap-ds-button htmlType=\"submit\">Submit</dap-ds-button>\n * <dap-ds-button htmlType=\"reset\">Reset</dap-ds-button>\n * </form>\n * ```\n * @group Form\n */\n @property() htmlType: HtmlButtonType = 'button'\n\n /** The URL to navigate to. When present, the button renders as an anchor element\n * @example\n * ```html\n * <dap-ds-button href=\"/dashboard\">Go to Dashboard</dap-ds-button>\n * <dap-ds-button href=\"https://example.com\" target=\"_blank\">External Link</dap-ds-button>\n * ```\n * @group Navigation\n */\n @property() href?: string\n\n /** The target attribute for link navigation\n * @type { '_blank' | '_self' | '_parent' | '_top' }\n * @default '_self'\n * @example\n * ```html\n * <dap-ds-button href=\"https://example.com\" target=\"_blank\">Open in new tab</dap-ds-button>\n * ```\n * @group Navigation\n */\n @property() target: LinkTarget = '_self'\n\n /** The rel attribute for link security and behavior\n * @default 'noreferrer noopener'\n * @example\n * ```html\n * <dap-ds-button href=\"https://example.com\" rel=\"noopener\">Safe external link</dap-ds-button>\n * ```\n * @group Navigation\n */\n @property() rel?: string\n\n /** Controls loading timeout in milliseconds\n * @default 0\n * @group State\n */\n @property({ type: Number }) loadingTimeout = 0\n\n /** Enables high contrast theme toggle functionality (internal use)\n * @default false\n * @ignore\n */\n @property({ type: Boolean }) hc: boolean = false\n\n /** Whether the button is active\n * @default false\n * @example\n * ```html\n * <dap-ds-button active>Active</dap-ds-button>\n * ```\n */\n @property({ type: Boolean }) active: boolean = false\n\n /**\n * Enable OKLCH proof-of-concept theming (experimental)\n * @default false\n * @internal\n * @ignore\n */\n @property({ type: Boolean, attribute: 'data-oklch-poc', reflect: true })\n oklchPoc: boolean = false\n\n /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n @property({ type: String }) targetBlankText: string\n\n /** Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger). */\n @property({ type: String }) forceRole?: string\n\n static readonly styles = unsafeCSS(styles)\n\n private loadingTimer?: number\n\n /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n private _ariaLabelForButton: string | null = null\n\n /** Internal flag to ignore the aria-label change triggered by our own attribute cleanup */\n private _ignoreNextAriaLabelChange = false\n\n private getSecureRel(): string {\n if (this.target === '_blank') {\n return this.rel ?? 'noreferrer noopener'\n }\n return this.rel ?? ''\n }\n\n private validateAriaPressed(): string | undefined | null {\n if (\n this.ariaPressed &&\n !['true', 'false', 'mixed'].includes(this.ariaPressed)\n ) {\n console.warn('aria-pressed must be \"true\", \"false\", or \"mixed\"')\n return undefined\n }\n\n return this.ariaPressed\n }\n\n private getAriaExpanded(): string | null | undefined {\n if (this.ariaExpanded && !['true', 'false'].includes(this.ariaExpanded)) {\n console.warn('aria-expanded must be \"true\" or \"false\"')\n return undefined\n }\n return this.ariaExpanded\n }\n\n private validateProperties(): void {\n if (\n this.shape === 'circle' &&\n !this.effectiveAriaLabel &&\n !this.textContent?.trim() &&\n !this.ariaHidden\n ) {\n console.warn(\n 'Circle buttons require aria-label or visible text for accessibility',\n )\n }\n\n if (this.href && this.htmlType !== 'button') {\n console.warn(\n 'htmlType is ignored when href is provided - button will render as anchor',\n )\n }\n\n if (this.href && !this.isValidUrl(this.href)) {\n console.warn('Invalid URL provided for href attribute')\n }\n }\n\n private isValidUrl(url: string): boolean {\n try {\n if (\n url.startsWith('/') ||\n url.startsWith('./') ||\n url.startsWith('../')\n ) {\n return true\n }\n new URL(url)\n return true\n } catch {\n return false\n }\n }\n\n private handleClick(event: Event): boolean {\n if (this.disabled || this.loading) {\n // Returning false does not cancel a Lit listener, and an anchor has no\n // native disabled state, so without this a disabled href button navigates.\n event.preventDefault()\n event.stopPropagation()\n return false\n }\n\n let handled = false\n if (this.htmlType !== 'button') {\n const proxy = document.createElement('button')\n proxy.type = this.htmlType\n this.insertAdjacentElement('afterend', proxy)\n\n proxy.click()\n proxy.remove()\n handled = true\n }\n\n if (this.hc) {\n this.toggleHighContrast()\n }\n\n return handled\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n // Only handle keyboard events for anchor elements that act as buttons\n if (!this.href) {\n return\n }\n\n // WAI-ARIA: Elements acting as buttons must respond to Enter and Space keys\n if (event.key === ' ' || event.key === 'Enter') {\n if (this.disabled || this.loading) {\n event.preventDefault()\n event.stopPropagation()\n return\n }\n\n // For Space key: prevent default scrolling behavior and trigger click\n if (event.key === ' ') {\n event.preventDefault()\n event.stopPropagation()\n this.button.click()\n }\n }\n }\n\n private toggleHighContrast(): void {\n document.body.classList.toggle('high-contrast-theme')\n }\n\n private startLoadingTimeout(): void {\n if (this.loadingTimeout > 0) {\n this.loadingTimer = window.setTimeout(() => {\n this.loading = false\n this.emit(\n 'dds-loading-timeout',\n {\n timeout: this.loadingTimeout,\n },\n {\n bubbles: true,\n },\n )\n }, this.loadingTimeout)\n }\n }\n\n private clearLoadingTimeout(): void {\n if (this.loadingTimer) {\n clearTimeout(this.loadingTimer)\n this.loadingTimer = undefined\n }\n }\n\n /**\n * `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.\n * A caller focusing a button the same tick it mounts -- a \"Save\" button that appears\n * only after the form it belongs to opens, say -- would otherwise get a TypeError,\n * not a no-op. Throwing out of a focus() call breaks whatever effect made it.\n */\n focus(options?: FocusOptions) {\n this.button?.focus(options)\n }\n\n blur() {\n this.button?.blur()\n }\n\n /**\n * @ignore\n */\n public get focusElement() {\n return this.button\n }\n\n /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n private get effectiveAriaLabel(): string | null {\n return this.ariaLabel ?? this._ariaLabelForButton\n }\n\n protected updated(\n changedProperties: Map<string | number | symbol, unknown>,\n ): void {\n super.updated(changedProperties)\n\n if (changedProperties.has('ariaLabel')) {\n const newValue = this.ariaLabel\n\n if (newValue != null && newValue !== '') {\n // Persist value before removing host attribute so the inner button keeps it\n this._ariaLabelForButton = newValue\n } else if (!this._ignoreNextAriaLabelChange) {\n // Only clear when the consumer explicitly removes/clears aria-label\n this._ariaLabelForButton = null\n }\n\n // Reset the guard after handling the change\n this._ignoreNextAriaLabelChange = false\n }\n\n if (this.ariaLabel != null && this.ariaLabel !== '') {\n // Removing the host attribute will trigger another ariaLabel change,\n // which we intentionally ignore so the inner button keeps its label.\n this._ignoreNextAriaLabelChange = true\n this.removeAttribute('aria-label')\n }\n\n if (changedProperties.has('loading')) {\n if (this.loading) {\n this.startLoadingTimeout()\n } else {\n this.clearLoadingTimeout()\n }\n }\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties)\n this.validateProperties()\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n this.clearLoadingTimeout()\n }\n\n render() {\n return html`\n <${unsafeStatic(this.href ? 'a' : 'button')}\n part=\"base\"\n .disabled=${this.disabled}\n aria-disabled=${this.disabled}\n aria-hidden=${ifDefined(this.ariaHidden)}\n aria-expanded=${ifDefined(this.getAriaExpanded())}\n aria-controls=${ifDefined(this.ariaControls)}\n aria-label=${ifDefined(this.effectiveAriaLabel)}\n aria-haspopup=${ifDefined(this.ariaHasPopup)}\n aria-describedby=${ifDefined(this.ariaDescribedBy)}\n aria-pressed=${ifDefined(this.validateAriaPressed())}\n role=${ifDefined(this.forceRole)}\n .autofocus=${this.autofocus}\n tabindex=${ifDefined(this.href && this.disabled ? '-1' : undefined)}\n type=${ifDefined(this.href ? null : this.htmlType)}\n name=${ifDefined(this.name)}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${ifDefined(this.getSecureRel())}\n class=${clsx(\n buttonVariants({\n intent: this.variant,\n size: this.effectiveSize as ButtonSize,\n shape: this.shape,\n }),\n {\n 'dds-button--danger': this.danger,\n 'dds-button--loading': this.loading,\n 'dds-button--active': this.active,\n // An anchor never reflects a disabled attribute, so the [disabled]\n // styling cannot reach it. Style off the class, as link--disabled does.\n 'button--disabled': this.disabled,\n },\n )}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}>\n <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n ${\n this.loading\n ? this._getLoadingSpinner()\n : html` <span part=\"content\" class=\"button__text\">\n <slot></slot>\n </span>`\n }\n ${\n this.target === '_blank'\n ? html`<span class=\"sr-only\">\n ${this.targetBlankText ?? t('opensInNewTab')}</span\n >`\n : nothing\n }\n </${unsafeStatic(this.href ? 'a' : 'button')}>\n `\n }\n\n private getLoadingIconSize(size: ButtonSize): number {\n return LOADING_ICON_SIZES[size] || LOADING_ICON_SIZES.md\n }\n\n private _getLoadingSpinner() {\n return html`\n <span class=\"button__spinner\" aria-live=\"polite\">\n <dap-ds-icon-loading-spinner\n size=${this.getLoadingIconSize(this.effectiveSize as ButtonSize)}\n aria-label=${t('loading')}></dap-ds-icon-loading-spinner>\n </span>\n `\n }\n}\n"],"names":["LOADING_ICON_SIZES","_DapDSButton","GenericFormElement","_a","_b","url","e","event","handled","proxy","options","changedProperties","newValue","_changedProperties","html","unsafeStatic","ifDefined","clsx","buttonVariants","t","nothing","size","DapDSIcon","SystemLoadingSpinner","unsafeCSS","styles","DapDSButton","__decorateClass","query","property"],"mappings":"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"}
|
|
@@ -41,7 +41,7 @@ import { default as DapDSTypography } from '../typography/typography.component';
|
|
|
41
41
|
* @event {{ value: string }} dds-change - Fired when the datepicker value changes.
|
|
42
42
|
* @event {{ value: string }} dds-input - Fired when the datepicker input value changes.
|
|
43
43
|
* @event {{ value: string }} dds-valid-date - Fired when the datepicker input value is valid. Happens on manual input typing.
|
|
44
|
-
* @event {{ value: string, type: 'invalid' | 'out-of-range' }} dds-invalid-date - Fired when the datepicker input value is invalid. Happens on manual input typing.
|
|
44
|
+
* @event {{ value: string, type: 'invalid' | 'out-of-range', date?: string }} dds-invalid-date - Fired when the datepicker input value is invalid. Happens on manual input typing. For `out-of-range` the typed text was a well-formed date, so `date` carries it as an ISO (`YYYY-MM-DD`) string and the consumer can phrase its own range message; for `invalid` the text could not be parsed and `date` is omitted.
|
|
45
45
|
* @event {{ void }} dds-clear - Fired when the datepicker is cleared.
|
|
46
46
|
* @event {{ void }} dds-focus - Emitted when the datepicker gains focus.
|
|
47
47
|
* @event {{ void }} dds-blur - Emitted when the datepicker loses focus.
|
|
@@ -132,12 +132,12 @@ export default class DapDSDatePicker extends GenericFormElement {
|
|
|
132
132
|
* @default dayjs()
|
|
133
133
|
*/
|
|
134
134
|
currentDate?: Dayjs | string | Date;
|
|
135
|
-
/** The
|
|
135
|
+
/** The earliest date the datepicker accepts. Compared with day granularity.
|
|
136
136
|
* @type {Dayjs | string | Date}
|
|
137
137
|
* @default dayjs('1901-01-01')
|
|
138
138
|
*/
|
|
139
139
|
minDate?: Dayjs | string | Date;
|
|
140
|
-
/** The
|
|
140
|
+
/** The latest date the datepicker accepts. Compared with day granularity.
|
|
141
141
|
* @type {Dayjs | string | Date}
|
|
142
142
|
* @default dayjs('2099-12-31')
|
|
143
143
|
*/
|