@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/button/button.host.css

@@ -1 +1 @@
-:host{--_button-position: var(--button-position, var(--mod-button-position, static));--_button-top: var(--button-top, var(--mod-button-top));--_button-right: var(--button-right, var(--mod-button-right));--_button-bottom: var(--button-bottom, var(--mod-button-bottom));--_button-left: var(--button-left, var(--mod-button-left));position:var(--_button-position);top:var(--_button-top);right:var(--_button-right);bottom:var(--_button-bottom);left:var(--_button-left);--_button-m: var(--button-m, var(--mod-button-m, 0));--_button-my: var(--button-my, var(--mod-button-my));--_button-mx: var(--button-mx, var(--mod-button-mx));--_button-ml: var(--button-ml, var(--mod-button-ml));--_button-mr: var(--button-mr, var(--mod-button-mr));--_button-mt: var(--button-mt, var(--mod-button-mt));--_button-mb: var(--button-mb, var(--mod-button-mb));margin:var(--_button-m);margin-inline:var(--_button-mx);margin-block:var(--_button-my);margin-left:var(--_button-ml);margin-right:var(--_button-mr);margin-top:var(--_button-mt);margin-bottom:var(--_button-mb);--_button-font-family: var(--button-font-family, var(--mod-button-font-family, var(--ds-button-family)));--_button-font-weight: var(--button-font-weight, var(--mod-button-font-weight, var(--ds-button-weight)));--_button-font-size: var(--button-font-size, var(--mod-button-font-size, var(--ds-button-size-base)));--_button-line-height: var(--button-line-height, var(--mod-button-line-height, var(--ds-button-line-height)));--_button-radius: var(--button-radius, var(--mod-button-radius, var(--ds-button-radius-base)));--_button-color-text: var(--button-color-text, var(--mod-button-color-text, var(--ds-button-color-primary-base-text)));--_button-color-border: var(--button-color-border, var(--mod-button-color-border, var(--ds-button-color-primary-base-border)));--_button-color-background: var(--button-color-background, var(--mod-button-color-background, var(--ds-button-color-primary-base-background)));--_button-color-text-hover: var(--button-color-text-hover, var(--mod-button-color-text-hover, var(--ds-button-color-primary-hover-text)));--_button-color-border-hover: var(--button-color-border-hover, var(--mod-button-color-border-hover, var(--ds-button-color-primary-hover-border)));--_button-color-background-hover: var(--button-color-background-hover, var(--mod-button-color-background-hover, var(--ds-button-color-primary-hover-background)));--_button-color-text-active: var(--button-color-text-active, var(--mod-button-color-text-active, var(--ds-button-color-primary-active-text)));--_button-color-border-active: var(--button-color-border-active, var(--mod-button-color-border-active, var(--ds-button-color-primary-active-border)));--_button-color-background-active: var(--button-color-background-active, var(--mod-button-color-background-active, var(--ds-button-color-primary-active-background)));--_button-width: var(--button-width, var(--mod-button-width, var(--ds-button-width, fit-content)));--_button-border-style: var(--button-border-style, var(--mod-button-border-style, solid));--_button-gap: var(--button-gap, var(--mod-button-gap, 0.5rem));--_button-min-height: var(--button-min-height, var(--mod-button-min-height, 3rem));--_button-min-width: var(--button-min-width, var(--mod-button-min-width, 3rem));--_button-padding-inline: var(--button-padding-inline, var(--mod-button-padding-inline, 1.5rem));--_button-box-shadow: var(--button-box-shadow, var(--mod-button-box-shadow, none));--_button-text-shadow: var(--button-text-shadow, var(--mod-button-text-shadow, none))}#button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{#button{display:none !important}}#button{appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;box-shadow:var(--_button-box-shadow);text-shadow:var(--_button-text-shadow);touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);font-size:var(--_button-font-size);font-family:var(--_button-font-family);font-weight:var(--_button-font-weight);line-height:var(--_button-line-height);border-radius:var(--_button-radius);border-style:var(--_button-border-style);border-width:var(--ds-alias-border-width-base);width:var(--_button-width, fit-content);min-width:var(--_button-min-width);min-height:var(--_button-min-height);gap:var(--_button-gap);padding-inline:var(--_button-padding-inline);background-color:var(--_button-color-background);color:var(--_button-color-text);border-color:var(--_button-color-border)}#button::-moz-focus-inner{border:0}#button{--spinner-size: 1.5rem;--icon-color: var(--_button-color-text)}#button:focus,#button:active{outline:none}@media(hover: hover)and (pointer: fine){#button:focus-visible:not(:active),#button.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}@media(hover: hover)and (pointer: fine){#button:hover,#button.is-hovered{--icon-color: var(--_button-color-text-hover);color:var(--_button-color-text-hover);background-color:var(--_button-color-background-hover);border-color:var(--_button-color-border-hover)}}#button:active,#button.is-pressed{--icon-color: var(--_button-color-text-active);background-color:var(--_button-color-background-active);color:var(--_button-color-text-active);border-color:var(--_button-color-border-active);translate:0 .5px}:host(.is-wide){width:100%;flex:1 1 auto}:host(.is-wide) #button{width:100%;flex:1 1 auto}:host(.is-link) #button{text-decoration:underline;text-underline-offset:.25rem;text-decoration-thickness:var(--ds-link-border-width)}:host ::slotted(ds-badge),:host ::slotted(.badge){--badge-position: absolute;--badge-top: -0.5rem;--badge-right: -0.5rem}:host(.is-primary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border)}:host(.is-secondary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border)}:host(.is-tertiary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-active-border)}:host(.is-tertiary-yellow:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-yellow-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-active-border)}:host(.is-tertiary-purple:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-purple-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-active-border)}:host(.is-tertiary-green:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-green-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-active-border)}:host(.is-tertiary-red:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-red-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-active-border)}:host(.is-info:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-info-base-text);--mod-button-color-background: var(--ds-button-color-info-base-background);--mod-button-color-border: var(--ds-button-color-info-base-border);--mod-button-color-text-hover: var(--ds-button-color-info-hover-text);--mod-button-color-background-hover: var(--ds-button-color-info-hover-background);--mod-button-color-border-hover: var(--ds-button-color-info-hover-border);--mod-button-color-text-active: var(--ds-button-color-info-active-text);--mod-button-color-background-active: var(--ds-button-color-info-active-background);--mod-button-color-border-active: var(--ds-button-color-info-active-border)}:host(.is-success:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-success-base-text);--mod-button-color-background: var(--ds-button-color-success-base-background);--mod-button-color-border: var(--ds-button-color-success-base-border);--mod-button-color-text-hover: var(--ds-button-color-success-hover-text);--mod-button-color-background-hover: var(--ds-button-color-success-hover-background);--mod-button-color-border-hover: var(--ds-button-color-success-hover-border);--mod-button-color-text-active: var(--ds-button-color-success-active-text);--mod-button-color-background-active: var(--ds-button-color-success-active-background);--mod-button-color-border-active: var(--ds-button-color-success-active-border)}:host(.is-warning:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-warning-base-text);--mod-button-color-background: var(--ds-button-color-warning-base-background);--mod-button-color-border: var(--ds-button-color-warning-base-border);--mod-button-color-text-hover: var(--ds-button-color-warning-hover-text);--mod-button-color-background-hover: var(--ds-button-color-warning-hover-background);--mod-button-color-border-hover: var(--ds-button-color-warning-hover-border);--mod-button-color-text-active: var(--ds-button-color-warning-active-text);--mod-button-color-background-active: var(--ds-button-color-warning-active-background);--mod-button-color-border-active: var(--ds-button-color-warning-active-border)}:host(.is-danger:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-danger-base-text);--mod-button-color-background: var(--ds-button-color-danger-base-background);--mod-button-color-border: var(--ds-button-color-danger-base-border);--mod-button-color-text-hover: var(--ds-button-color-danger-hover-text);--mod-button-color-background-hover: var(--ds-button-color-danger-hover-background);--mod-button-color-border-hover: var(--ds-button-color-danger-hover-border);--mod-button-color-text-active: var(--ds-button-color-danger-active-text);--mod-button-color-background-active: var(--ds-button-color-danger-active-background);--mod-button-color-border-active: var(--ds-button-color-danger-active-border)}:host(.is-link:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-link-base-text);--mod-button-color-background: var(--ds-button-color-link-base-background);--mod-button-color-border: var(--ds-button-color-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-link-active-text);--mod-button-color-background-active: var(--ds-button-color-link-active-background);--mod-button-color-border-active: var(--ds-button-color-link-active-border)}:host(.is-text:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-text-base-text);--mod-button-color-background: var(--ds-button-color-text-base-background);--mod-button-color-border: var(--ds-button-color-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-text-active-text);--mod-button-color-background-active: var(--ds-button-color-text-active-background);--mod-button-color-border-active: var(--ds-button-color-text-active-border)}:host(.is-primary.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-tertiary-yellow.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-tertiary-purple.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-tertiary-green.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-tertiary-red.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-info.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-success.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-warning.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-danger.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-secondary.is-inverted:not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-secondary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-secondary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-secondary-active-border)}:host(.is-tertiary.is-inverted:not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-tertiary-active-border)}:host(.is-text.is-inverted:not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-text-base-text);--mod-button-color-background: var(--ds-button-color-inverted-text-base-background);--mod-button-color-border: var(--ds-button-color-inverted-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-text-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-text-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-text-active-border)}:host(.is-link.is-inverted:not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-link-base-text);--mod-button-color-background: var(--ds-button-color-inverted-link-base-background);--mod-button-color-border: var(--ds-button-color-inverted-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-link-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-link-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-link-active-border)}:host(.is-sm){--mod-button-font-size: var(--ds-button-size-sm);--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--mod-button-padding-inline: 0.75rem}:host(.is-lg){--mod-button-font-size: var(--ds-button-size-lg);--mod-button-min-height: 3.5rem;--mod-button-min-width: 3.5rem;--mod-button-padding-inline: 1.5rem}:host(.is-xl){--mod-button-font-size: var(--ds-button-size-xl);--mod-button-min-height: 5.5rem;--mod-button-min-width: 5.5rem;--mod-button-padding-inline: 1.5rem}:host(.is-flat){--mod-button-padding-inline: 0;--mod-button-min-height: 1.75rem}:host(.is-rounded){--mod-button-radius: var(--ds-button-radius-rounded)}:host(.is-square:not(.is-sm)){--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}:host(.is-square.is-sm){--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}:host(.is-circle:not(.is-sm)){--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}:host(.is-circle.is-sm){--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}:host(.is-tertiary-purple.is-dashed){--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-purple-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-dashed-active-border)}:host(.is-tertiary-red.is-dashed){--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-red-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-dashed-active-border)}:host(.is-tertiary-green.is-dashed){--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-green-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-dashed-active-border)}:host(.is-tertiary-yellow.is-dashed){--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-yellow-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-dashed-active-border)}:host(.has-shadow:not(.is-link):not(.is-text)){--mod-button-box-shadow: var(--ds-alias-shadow-box-base)}:host(.is-text.has-shadow),:host(.is-link.has-shadow){--mod-button-text-shadow: var(--ds-alias-shadow-text)}:host(.has-no-wrap){max-width:stretch}:host(.has-no-wrap) #button{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:stretch}:host #button[disabled],:host #button[disabled]:hover,:host #button[disabled].is-hovered,:host #button[disabled]:active,:host #button[disabled].is-pressed,:host #button[disabled]:focus,:host #button[disabled].is-focused{pointer-events:none;opacity:1;box-shadow:none;text-decoration:none;cursor:default;translate:0 0;background-color:var(--ds-button-color-disabled-base-background);border-color:var(--ds-button-color-disabled-base-border);color:var(--ds-button-color-disabled-base-text)}:host #button[disabled]>ds-icon,:host #button[disabled]:hover>ds-icon,:host #button[disabled].is-hovered>ds-icon,:host #button[disabled]:active>ds-icon,:host #button[disabled].is-pressed>ds-icon,:host #button[disabled]:focus>ds-icon,:host #button[disabled].is-focused>ds-icon{--icon-color: var(--ds-button-color-disabled-base-text)}:host #button[disabled]>ds-spinner,:host #button[disabled]:hover>ds-spinner,:host #button[disabled].is-hovered>ds-spinner,:host #button[disabled]:active>ds-spinner,:host #button[disabled].is-pressed>ds-spinner,:host #button[disabled]:focus>ds-spinner,:host #button[disabled].is-focused>ds-spinner{--spinner-color: var(--ds-button-color-disabled-base-text)}:host #button[disabled]>ds-spinner.is-circle,:host #button[disabled]:hover>ds-spinner.is-circle,:host #button[disabled].is-hovered>ds-spinner.is-circle,:host #button[disabled]:active>ds-spinner.is-circle,:host #button[disabled].is-pressed>ds-spinner.is-circle,:host #button[disabled]:focus>ds-spinner.is-circle,:host #button[disabled].is-focused>ds-spinner.is-circle{--spinner-circle-color-border-background: var(--ds-global-color-grey-4);--spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text)}:host(.is-loading) #button,:host(.is-loading) #button:hover,:host(.is-loading) #button.is-hovered,:host(.is-loading) #button:active,:host(.is-loading) #button.is-pressed,:host(.is-loading) #button:focus,:host(.is-loading) #button.is-focused{pointer-events:none;opacity:1;box-shadow:none;text-decoration:none;cursor:default;translate:0 0;background-color:var(--ds-button-color-disabled-base-background);border-color:var(--ds-button-color-disabled-base-border);color:var(--ds-button-color-disabled-base-text)}:host(.is-loading) #button>ds-icon,:host(.is-loading) #button:hover>ds-icon,:host(.is-loading) #button.is-hovered>ds-icon,:host(.is-loading) #button:active>ds-icon,:host(.is-loading) #button.is-pressed>ds-icon,:host(.is-loading) #button:focus>ds-icon,:host(.is-loading) #button.is-focused>ds-icon{--icon-color: var(--ds-button-color-disabled-base-text)}:host(.is-loading) #button>ds-spinner,:host(.is-loading) #button:hover>ds-spinner,:host(.is-loading) #button.is-hovered>ds-spinner,:host(.is-loading) #button:active>ds-spinner,:host(.is-loading) #button.is-pressed>ds-spinner,:host(.is-loading) #button:focus>ds-spinner,:host(.is-loading) #button.is-focused>ds-spinner{--spinner-color: var(--ds-button-color-disabled-base-text)}:host(.is-loading) #button>ds-spinner.is-circle,:host(.is-loading) #button:hover>ds-spinner.is-circle,:host(.is-loading) #button.is-hovered>ds-spinner.is-circle,:host(.is-loading) #button:active>ds-spinner.is-circle,:host(.is-loading) #button.is-pressed>ds-spinner.is-circle,:host(.is-loading) #button:focus>ds-spinner.is-circle,:host(.is-loading) #button.is-focused>ds-spinner.is-circle{--spinner-circle-color-border-background: var(--ds-global-color-grey-4);--spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text)}:host{display:inline-block;width:var(--ds-button-width, fit-content)}:host #button{margin:0 !important}
+:host{--_button-position: var(--button-position, var(--mod-button-position, static));--_button-top: var(--button-top, var(--mod-button-top));--_button-right: var(--button-right, var(--mod-button-right));--_button-bottom: var(--button-bottom, var(--mod-button-bottom));--_button-left: var(--button-left, var(--mod-button-left));position:var(--_button-position);top:var(--_button-top);right:var(--_button-right);bottom:var(--_button-bottom);left:var(--_button-left);--_button-m: var(--button-m, var(--mod-button-m, 0));--_button-my: var(--button-my, var(--mod-button-my));--_button-mx: var(--button-mx, var(--mod-button-mx));--_button-ml: var(--button-ml, var(--mod-button-ml));--_button-mr: var(--button-mr, var(--mod-button-mr));--_button-mt: var(--button-mt, var(--mod-button-mt));--_button-mb: var(--button-mb, var(--mod-button-mb));margin:var(--_button-m);margin-inline:var(--_button-mx);margin-block:var(--_button-my);margin-left:var(--_button-ml);margin-right:var(--_button-mr);margin-top:var(--_button-mt);margin-bottom:var(--_button-mb);--_button-font-family: var(--button-font-family, var(--mod-button-font-family, var(--ds-button-family)));--_button-font-weight: var(--button-font-weight, var(--mod-button-font-weight, var(--ds-button-weight)));--_button-font-size: var(--button-font-size, var(--mod-button-font-size, var(--ds-button-size-base)));--_button-line-height: var(--button-line-height, var(--mod-button-line-height, var(--ds-button-line-height)));--_button-radius: var(--button-radius, var(--mod-button-radius, var(--ds-button-radius-base)));--_button-color-text: var(--button-color-text, var(--mod-button-color-text, var(--ds-button-color-primary-base-text)));--_button-color-border: var(--button-color-border, var(--mod-button-color-border, var(--ds-button-color-primary-base-border)));--_button-color-background: var(--button-color-background, var(--mod-button-color-background, var(--ds-button-color-primary-base-background)));--_button-color-text-hover: var(--button-color-text-hover, var(--mod-button-color-text-hover, var(--ds-button-color-primary-hover-text)));--_button-color-border-hover: var(--button-color-border-hover, var(--mod-button-color-border-hover, var(--ds-button-color-primary-hover-border)));--_button-color-background-hover: var(--button-color-background-hover, var(--mod-button-color-background-hover, var(--ds-button-color-primary-hover-background)));--_button-color-text-active: var(--button-color-text-active, var(--mod-button-color-text-active, var(--ds-button-color-primary-active-text)));--_button-color-border-active: var(--button-color-border-active, var(--mod-button-color-border-active, var(--ds-button-color-primary-active-border)));--_button-color-background-active: var(--button-color-background-active, var(--mod-button-color-background-active, var(--ds-button-color-primary-active-background)));--_button-width: var(--button-width, var(--mod-button-width, var(--ds-button-width, fit-content)));--_button-border-style: var(--button-border-style, var(--mod-button-border-style, solid));--_button-gap: var(--button-gap, var(--mod-button-gap, 0.5rem));--_button-min-height: var(--button-min-height, var(--mod-button-min-height, 3rem));--_button-min-width: var(--button-min-width, var(--mod-button-min-width, 3rem));--_button-padding-inline: var(--button-padding-inline, var(--mod-button-padding-inline, 1.5rem));--_button-box-shadow: var(--button-box-shadow, var(--mod-button-box-shadow, none));--_button-text-shadow: var(--button-text-shadow, var(--mod-button-text-shadow, none));--_button-focus-shadow: var(--button-focus-shadow, var(--mod-button-focus-shadow, var(--ds-alias-interaction-focus-color-base)))}#button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{#button{display:none !important}}#button{appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;box-shadow:var(--_button-box-shadow);text-shadow:var(--_button-text-shadow);touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);font-size:var(--_button-font-size);font-family:var(--_button-font-family);font-weight:var(--_button-font-weight);line-height:var(--_button-line-height);border-radius:var(--_button-radius);border-style:var(--_button-border-style);border-width:var(--ds-alias-border-width-base);width:var(--_button-width, fit-content);min-width:var(--_button-min-width);min-height:var(--_button-min-height);gap:var(--_button-gap);padding-inline:var(--_button-padding-inline);background-color:var(--_button-color-background);color:var(--_button-color-text);border-color:var(--_button-color-border)}#button::-moz-focus-inner{border:0}#button{--spinner-size: 1.5rem;--icon-color: var(--_button-color-text)}#button:focus,#button:active{outline:none}@media(hover: hover)and (pointer: fine){#button:focus-visible:not(:active),#button.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_button-focus-shadow) 0 0 0 5px !important}}@media(hover: hover)and (pointer: fine){#button:hover,#button.is-hovered{--icon-color: var(--_button-color-text-hover);color:var(--_button-color-text-hover);background-color:var(--_button-color-background-hover);border-color:var(--_button-color-border-hover)}}#button:active,#button.is-pressed{--icon-color: var(--_button-color-text-active);background-color:var(--_button-color-background-active);color:var(--_button-color-text-active);border-color:var(--_button-color-border-active);translate:0 .5px}:host(.is-wide){width:100%;flex:1 1 auto}:host(.is-wide) #button{width:100%;flex:1 1 auto}:host(.is-link) #button{text-decoration:underline;text-underline-offset:.25rem;text-decoration-thickness:var(--ds-link-border-width)}:host ::slotted(ds-badge),:host ::slotted(.badge){--badge-position: absolute;--badge-top: -0.5rem;--badge-right: -0.5rem}:host(.is-primary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border)}:host(.is-secondary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border)}:host(.is-tertiary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-active-border)}:host(.is-tertiary-yellow:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-yellow-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-active-border)}:host(.is-tertiary-purple:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-purple-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-active-border)}:host(.is-tertiary-green:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-green-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-active-border)}:host(.is-tertiary-red:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-tertiary-red-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-active-border)}:host(.is-info:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-info-base-text);--mod-button-color-background: var(--ds-button-color-info-base-background);--mod-button-color-border: var(--ds-button-color-info-base-border);--mod-button-color-text-hover: var(--ds-button-color-info-hover-text);--mod-button-color-background-hover: var(--ds-button-color-info-hover-background);--mod-button-color-border-hover: var(--ds-button-color-info-hover-border);--mod-button-color-text-active: var(--ds-button-color-info-active-text);--mod-button-color-background-active: var(--ds-button-color-info-active-background);--mod-button-color-border-active: var(--ds-button-color-info-active-border)}:host(.is-success:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-success-base-text);--mod-button-color-background: var(--ds-button-color-success-base-background);--mod-button-color-border: var(--ds-button-color-success-base-border);--mod-button-color-text-hover: var(--ds-button-color-success-hover-text);--mod-button-color-background-hover: var(--ds-button-color-success-hover-background);--mod-button-color-border-hover: var(--ds-button-color-success-hover-border);--mod-button-color-text-active: var(--ds-button-color-success-active-text);--mod-button-color-background-active: var(--ds-button-color-success-active-background);--mod-button-color-border-active: var(--ds-button-color-success-active-border)}:host(.is-warning:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-warning-base-text);--mod-button-color-background: var(--ds-button-color-warning-base-background);--mod-button-color-border: var(--ds-button-color-warning-base-border);--mod-button-color-text-hover: var(--ds-button-color-warning-hover-text);--mod-button-color-background-hover: var(--ds-button-color-warning-hover-background);--mod-button-color-border-hover: var(--ds-button-color-warning-hover-border);--mod-button-color-text-active: var(--ds-button-color-warning-active-text);--mod-button-color-background-active: var(--ds-button-color-warning-active-background);--mod-button-color-border-active: var(--ds-button-color-warning-active-border)}:host(.is-danger:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-danger-base-text);--mod-button-color-background: var(--ds-button-color-danger-base-background);--mod-button-color-border: var(--ds-button-color-danger-base-border);--mod-button-color-text-hover: var(--ds-button-color-danger-hover-text);--mod-button-color-background-hover: var(--ds-button-color-danger-hover-background);--mod-button-color-border-hover: var(--ds-button-color-danger-hover-border);--mod-button-color-text-active: var(--ds-button-color-danger-active-text);--mod-button-color-background-active: var(--ds-button-color-danger-active-background);--mod-button-color-border-active: var(--ds-button-color-danger-active-border)}:host(.is-link:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-link-base-text);--mod-button-color-background: var(--ds-button-color-link-base-background);--mod-button-color-border: var(--ds-button-color-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-link-active-text);--mod-button-color-background-active: var(--ds-button-color-link-active-background);--mod-button-color-border-active: var(--ds-button-color-link-active-border)}:host(.is-text:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-text-base-text);--mod-button-color-background: var(--ds-button-color-text-base-background);--mod-button-color-border: var(--ds-button-color-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-text-active-text);--mod-button-color-background-active: var(--ds-button-color-text-active-background);--mod-button-color-border-active: var(--ds-button-color-text-active-border)}:host(.is-primary.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-tertiary-yellow.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-tertiary-purple.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-tertiary-green.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-tertiary-red.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-info.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-success.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-warning.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-danger.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}:host(.is-secondary.is-inverted:not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-secondary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-secondary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-secondary-active-border)}:host(.is-tertiary.is-inverted:not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-tertiary-active-border)}:host(.is-text.is-inverted:not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-text-base-text);--mod-button-color-background: var(--ds-button-color-inverted-text-base-background);--mod-button-color-border: var(--ds-button-color-inverted-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-text-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-text-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-text-active-border)}:host(.is-link.is-inverted:not(.is-disabled):not(.is-loading)){--mod-button-color-text: var(--ds-button-color-inverted-link-base-text);--mod-button-color-background: var(--ds-button-color-inverted-link-base-background);--mod-button-color-border: var(--ds-button-color-inverted-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-link-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-link-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-link-active-border)}:host(.is-sm){--mod-button-font-size: var(--ds-button-size-sm);--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--mod-button-padding-inline: 0.75rem}:host(.is-lg){--mod-button-font-size: var(--ds-button-size-lg);--mod-button-min-height: 3.5rem;--mod-button-min-width: 3.5rem;--mod-button-padding-inline: 1.5rem}:host(.is-xl){--mod-button-font-size: var(--ds-button-size-xl);--mod-button-min-height: 5.5rem;--mod-button-min-width: 5.5rem;--mod-button-padding-inline: 1.5rem}:host(.is-flat){--mod-button-padding-inline: 0;--mod-button-min-height: 1.75rem}:host(.is-rounded){--mod-button-radius: var(--ds-button-radius-rounded)}:host(.is-square:not(.is-sm)){--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}:host(.is-square.is-sm){--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}:host(.is-circle:not(.is-sm)){--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}:host(.is-circle.is-sm){--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}:host(.is-tertiary-purple.is-dashed){--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-purple-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-dashed-active-border)}:host(.is-tertiary-red.is-dashed){--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-red-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-dashed-active-border)}:host(.is-tertiary-green.is-dashed){--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-green-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-dashed-active-border)}:host(.is-tertiary-yellow.is-dashed){--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-yellow-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-dashed-active-border)}:host(.has-shadow:not(.is-link):not(.is-text)){--mod-button-box-shadow: var(--ds-alias-shadow-box-base)}:host(.is-text.has-shadow),:host(.is-link.has-shadow){--mod-button-text-shadow: var(--ds-alias-shadow-text)}:host(.has-no-wrap){max-width:stretch}:host(.has-no-wrap) #button{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:stretch}:host #button[disabled],:host #button[disabled]:hover,:host #button[disabled].is-hovered,:host #button[disabled]:active,:host #button[disabled].is-pressed,:host #button[disabled]:focus,:host #button[disabled].is-focused{pointer-events:none;opacity:1;box-shadow:none;text-decoration:none;cursor:default;translate:0 0;background-color:var(--ds-button-color-disabled-base-background);border-color:var(--ds-button-color-disabled-base-border);color:var(--ds-button-color-disabled-base-text)}:host #button[disabled]>ds-icon,:host #button[disabled]:hover>ds-icon,:host #button[disabled].is-hovered>ds-icon,:host #button[disabled]:active>ds-icon,:host #button[disabled].is-pressed>ds-icon,:host #button[disabled]:focus>ds-icon,:host #button[disabled].is-focused>ds-icon{--icon-color: var(--ds-button-color-disabled-base-text)}:host #button[disabled]>ds-spinner,:host #button[disabled]:hover>ds-spinner,:host #button[disabled].is-hovered>ds-spinner,:host #button[disabled]:active>ds-spinner,:host #button[disabled].is-pressed>ds-spinner,:host #button[disabled]:focus>ds-spinner,:host #button[disabled].is-focused>ds-spinner{--spinner-color: var(--ds-button-color-disabled-base-text)}:host #button[disabled]>ds-spinner.is-circle,:host #button[disabled]:hover>ds-spinner.is-circle,:host #button[disabled].is-hovered>ds-spinner.is-circle,:host #button[disabled]:active>ds-spinner.is-circle,:host #button[disabled].is-pressed>ds-spinner.is-circle,:host #button[disabled]:focus>ds-spinner.is-circle,:host #button[disabled].is-focused>ds-spinner.is-circle{--spinner-circle-color-border-background: var(--ds-global-color-grey-4);--spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text)}:host(.is-loading) #button,:host(.is-loading) #button:hover,:host(.is-loading) #button.is-hovered,:host(.is-loading) #button:active,:host(.is-loading) #button.is-pressed,:host(.is-loading) #button:focus,:host(.is-loading) #button.is-focused{pointer-events:none;opacity:1;box-shadow:none;text-decoration:none;cursor:default;translate:0 0;background-color:var(--ds-button-color-disabled-base-background);border-color:var(--ds-button-color-disabled-base-border);color:var(--ds-button-color-disabled-base-text)}:host(.is-loading) #button>ds-icon,:host(.is-loading) #button:hover>ds-icon,:host(.is-loading) #button.is-hovered>ds-icon,:host(.is-loading) #button:active>ds-icon,:host(.is-loading) #button.is-pressed>ds-icon,:host(.is-loading) #button:focus>ds-icon,:host(.is-loading) #button.is-focused>ds-icon{--icon-color: var(--ds-button-color-disabled-base-text)}:host(.is-loading) #button>ds-spinner,:host(.is-loading) #button:hover>ds-spinner,:host(.is-loading) #button.is-hovered>ds-spinner,:host(.is-loading) #button:active>ds-spinner,:host(.is-loading) #button.is-pressed>ds-spinner,:host(.is-loading) #button:focus>ds-spinner,:host(.is-loading) #button.is-focused>ds-spinner{--spinner-color: var(--ds-button-color-disabled-base-text)}:host(.is-loading) #button>ds-spinner.is-circle,:host(.is-loading) #button:hover>ds-spinner.is-circle,:host(.is-loading) #button.is-hovered>ds-spinner.is-circle,:host(.is-loading) #button:active>ds-spinner.is-circle,:host(.is-loading) #button.is-pressed>ds-spinner.is-circle,:host(.is-loading) #button:focus>ds-spinner.is-circle,:host(.is-loading) #button.is-focused>ds-spinner.is-circle{--spinner-circle-color-border-background: var(--ds-global-color-grey-4);--spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text)}:host{display:inline-block;width:var(--ds-button-width, fit-content)}:host #button{margin:0 !important}

package/dist/collection/components/button/button.interfaces.js

@@ -24,4 +24,4 @@ export const BUTTON_COLORS = [
 ];
 export const BUTTON_ELEMENT_TYPES = ['button', 'reset', 'submit'];
 export const BUTTON_SIZES = ['sm', '', 'lg', 'xl', 'small'];
-export const BUTTON_TARGETS = ['_blank', '_parent', '_self', '_top'];
+export const BUTTON_TARGETS = ['_blank', '_parent', '_self', '_top', ''];

package/dist/collection/components/button/button.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { ariaBooleanToString, inheritAttributes, normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { ariaBooleanToString, inheritAttributes, normalizeDeprecatedTShirtSize, Logger, hasValue, OneOf, Required, Type, } from "../../utils/index";
 import { BUTTON_COLORS, BUTTON_ELEMENT_TYPES, BUTTON_SIZES, BUTTON_TARGETS, } from "./button.interfaces";
 /**
  * Button provides a clickable element for triggering actions, submitting forms, or navigating — supporting text, icons, or both.
@@ -165,7 +165,7 @@ export class Button {
                     (_b = this.internals.form) === null || _b === void 0 ? void 0 : _b.reset();
                 }
                 this.dsClick.emit(ev);
-                if (this.href !== undefined) {
+                if (hasValue(this.href)) {
                     this.dsNavigate.emit(ev);
                 }
             }
@@ -174,9 +174,6 @@ export class Button {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * PUBLIC LISTENERS
      * ─────────────────────────────────────────────────────
@@ -191,10 +188,6 @@ export class Button {
      * LIFECYCLE
      * ─────────────────────────────────────────────────────
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
-    }
     componentWillLoad() {
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
@@ -219,7 +212,7 @@ export class Button {
         return this.inverted;
     }
     get leftIconAttrs() {
-        if (!this.icon || this.loading) {
+        if (!hasValue(this.icon) || this.loading) {
             return {
                 style: { display: 'none' },
             };
@@ -227,7 +220,7 @@ export class Button {
         return {};
     }
     get leftRightAttrs() {
-        if (!this.iconRight || this.loading) {
+        if (!hasValue(this.iconRight) || this.loading) {
             return {
                 style: { display: 'none' },
             };
@@ -252,7 +245,8 @@ export class Button {
      */
     render() {
         const { elementType, download, href, rel, target, name, value } = this;
-        const TagType = this.href === undefined || this.href === '' ? 'button' : 'a';
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
+        const TagType = !hasValue(this.href) ? 'button' : 'a';
         const attrs = TagType === 'button'
             ? { type: elementType, name, value }
             : {
@@ -267,10 +261,10 @@ export class Button {
             'aria-controls': this.a11yControls || this.inheritAttributes['aria-controls'],
             'aria-haspopup': this.a11yHaspopup || this.inheritAttributes['aria-haspopup'],
         };
-        return (h(Host, { key: 'f8dff463b26201bde86e7569fdafb30723ff46b4', onClick: this.handleHostClick, class: {
+        return (h(Host, { key: '5c9b69ea8ea31da2ab7810998c05763d3dd7c13c', onClick: this.handleHostClick, class: {
                 'is-wide': this.wide,
-                [`is-${this.color}`]: this.color !== undefined,
-                [`is-${this.size}`]: this.size !== undefined,
+                [`is-${this.color || 'primary'}`]: true,
+                [`is-${size}`]: hasValue(size),
                 [`is-inverted`]: this.inverted,
                 [`is-disabled`]: this.disabled,
                 [`is-loading`]: this.loading,
@@ -281,7 +275,7 @@ export class Button {
                 [`is-dashed`]: this.dashed,
                 [`has-shadow`]: this.shadow,
                 [`has-no-wrap`]: this.noWrap,
-            } }, h(TagType, Object.assign({ key: 'f20adc2af68e3dc2415ebd2054f9a3de124e575e' }, attrs, this.inheritAttributes, { type: this.elementType, id: "button", part: "native", disabled: this.disabled || this.loading, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, "aria-busy": ariaBooleanToString(!!this.loading), "aria-disabled": ariaBooleanToString(this.disabled || this.loading) }, ariaAttributes), this.loading ? (h("ds-spinner", Object.assign({}, this.loadingAttrs, { part: "spinner", size: "sm", deactivated: !this.loading }))) : (''), this.icon ? (h("ds-icon", Object.assign({}, this.leftIconAttrs, { part: "icon", class: this.square ? '' : 'icon-left', name: this.icon, size: this.dashed ? 'md' : this.size, shape: this.dashed ? 'circle' : undefined, turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), h("span", { key: '72421e54ca84c3ac27ebc0597b15c7e6582da5f9', part: "label" }, h("slot", { key: 'e0c80c779787809877ebdfd5dccb85147a66cfbf' })), this.iconRight ? (h("ds-icon", Object.assign({}, this.leftRightAttrs, { part: "icon-right", class: "icon-right", name: this.iconRight, size: 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''))));
+            } }, h(TagType, Object.assign({ key: 'e20d38a699c210bf69f3b942444fc99bac91e90c' }, attrs, this.inheritAttributes, { type: this.elementType, id: "button", part: "native", disabled: this.disabled || this.loading, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, "aria-busy": ariaBooleanToString(!!this.loading), "aria-disabled": ariaBooleanToString(this.disabled || this.loading) }, ariaAttributes), this.loading ? (h("ds-spinner", Object.assign({}, this.loadingAttrs, { part: "spinner", size: "sm", deactivated: !this.loading }))) : (''), hasValue(this.icon) ? (h("ds-icon", Object.assign({}, this.leftIconAttrs, { part: "icon", class: this.square ? '' : 'icon-left', name: this.icon, size: this.dashed ? 'md' : size, shape: this.dashed ? 'circle' : undefined, turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), h("span", { key: '88fc542411b1d83c0d02764d96b68941b826039a', part: "label" }, h("slot", { key: 'cbb8ea7ae2473669fb06c6167ce52149ff6ba100' })), hasValue(this.iconRight) ? (h("ds-icon", Object.assign({}, this.leftRightAttrs, { part: "icon-right", class: "icon-right", name: this.iconRight, size: 'sm', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''))));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -374,7 +368,7 @@ export class Button {
             },
             "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "ButtonSize",
                     "resolved": "\"\" | \"lg\" | \"sm\" | \"small\" | \"xl\" | undefined",
@@ -424,7 +418,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonTarget",
-                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "resolved": "\"\" | \"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {
                         "ButtonTarget": {
                             "location": "import",
@@ -642,7 +636,7 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "inverted",
                 "defaultValue": "false"
             },
@@ -782,7 +776,7 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "''"
             },
@@ -1002,12 +996,6 @@ export class Button {
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "size",
-                "methodName": "sizeChanged"
-            }];
-    }
     static get listeners() {
         return [{
                 "name": "click",
@@ -1026,114 +1014,116 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Button.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...BUTTON_COLORS),
+    OneOf(BUTTON_COLORS),
     __metadata("design:type", String)
 ], Button.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_ELEMENT_TYPES),
+    Required(),
+    OneOf(BUTTON_ELEMENT_TYPES),
     __metadata("design:type", String)
 ], Button.prototype, "elementType", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "disabled", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_SIZES),
+    OneOf(BUTTON_SIZES),
     __metadata("design:type", Object)
 ], Button.prototype, "size", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "href", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_TARGETS),
+    Required(),
+    OneOf(BUTTON_TARGETS),
     __metadata("design:type", String)
 ], Button.prototype, "target", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "rel", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "download", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "dashed", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "shadow", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "square", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "circle", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "wide", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "flat", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "outlined", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "inverted", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "loading", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "rounded", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "icon", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "iconTurn", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "iconRight", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Button.prototype, "noWrap", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "name", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "value", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "a11yControls", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "a11yTitle", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "a11yLabel", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Button.prototype, "a11yHaspopup", void 0);

package/dist/collection/components/card/card-actions/card-actions.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, ValidateOneOf, setupValidation } from "../../../utils/index";
+import { Logger, OneOf } from "../../../utils/index";
 import { CARD_ACTIONS_ALIGNMENTS } from "../card.interfaces";
 /**
  * Card actions renders a container for action buttons or controls at the end of a card.
@@ -21,11 +21,8 @@ export class CardActions {
     createLogger(log) {
         this.log = log;
     }
-    connectedCallback() {
-        setupValidation(this);
-    }
     render() {
-        return (h(Host, { key: '75304b2e410be460cca67efb13df4552739365d2', role: "contentinfo" }, h("ds-button-group", { key: 'b1e817de2723c754c9bdf41e6c475c6265e9324e', class: "m-none", align: this.align }, h("slot", { key: '67ff203887251545b1def6dabac2f63c9599d594' }))));
+        return (h(Host, { key: 'aecfb23acdf3849da281cc55bddf122f478045c5', role: "contentinfo" }, h("ds-button-group", { key: 'a446061160145dbee8d7bfc9c3c11514211f179c', class: "m-none", align: this.align }, h("slot", { key: 'bb4b18651c81df8055a4f0fc3dd198279dd014a8' }))));
     }
     static get is() { return "ds-card-actions"; }
     static get encapsulation() { return "shadow"; }
@@ -69,6 +66,6 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], CardActions.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...CARD_ACTIONS_ALIGNMENTS),
+    OneOf(CARD_ACTIONS_ALIGNMENTS),
     __metadata("design:type", String)
 ], CardActions.prototype, "align", void 0);

package/dist/collection/components/card/card-header/card-header.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { Host, h } from "@stencil/core";
-import { Logger, ValidateOneOf } from "../../../utils/index";
+import { Logger, OneOf, Required } from "../../../utils/index";
 import { CARD_HEADER_DIRECTIONS } from "../card.interfaces";
 /**
  * Card header renders the header section of a card with optional layout direction for title and image/icon.
@@ -19,7 +19,7 @@ export class CardHeader {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: '68ac3caf2b2a7928a79929490e57b12edc0643a2', role: "banner" }, h("slot", { key: 'fccb72c5f06184d3a426f0557a1f84146412f455' })));
+        return (h(Host, { key: '6a075e6c225c33dbfab5bbc6e78751eb1a2ee474', role: "banner" }, h("slot", { key: '04fa55703201b96c3e018a5fb1c81fed450f5805' })));
     }
     static get is() { return "ds-card-header"; }
     static get encapsulation() { return "shadow"; }
@@ -73,6 +73,7 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], CardHeader.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...CARD_HEADER_DIRECTIONS),
+    Required(),
+    OneOf(CARD_HEADER_DIRECTIONS),
     __metadata("design:type", String)
 ], CardHeader.prototype, "direction", void 0);

package/dist/collection/components/card/card-subtitle/card-subtitle.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, ValidateOneOf, ValidateType, setupValidation } from "../../../utils/index";
+import { Logger, hasValue, OneOf, Type } from "../../../utils/index";
 import { HEADING_COLORS } from "../../heading/heading.interfaces";
 /**
  * Card subtitle renders a subtitle heading for cards with customizable color and styling.
@@ -29,18 +29,15 @@ export class CardSubtitle {
     createLogger(log) {
         this.log = log;
     }
-    connectedCallback() {
-        setupValidation(this);
-    }
     render() {
-        return (h(Host, { key: '5fa47e10e975876c9e7504c6802fec1ff1a64278', class: {
+        return (h(Host, { key: 'f0ebc669832a45b2a8614cfc1736e6b7b568f57a', class: {
                 'card-header': true,
-            } }, h("span", { key: '35f306867b2d826c1368e82dc55164d7f59cd7a7', class: {
+            } }, h("span", { key: '9881912fa1461c37c5ecda96b1e85f8b3cb1ea29', class: {
                 'text': true,
                 'is-bold': this.bold,
-                [`is-${this.color}`]: this.color !== '' && !this.inverted,
+                [`is-${this.color}`]: hasValue(this.color) && !this.inverted,
                 'is-inverted': this.inverted,
-            } }, h("slot", { key: 'fcd9d4bb19a8f16df26943291a5527f056a1ad57' }))));
+            } }, h("slot", { key: '479fd315099be3aacb3378e5f2f78759cf386e7d' }))));
     }
     static get is() { return "ds-card-subtitle"; }
     static get encapsulation() { return "shadow"; }
@@ -134,14 +131,14 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], CardSubtitle.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CardSubtitle.prototype, "inverted", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CardSubtitle.prototype, "bold", void 0);
 __decorate([
-    ValidateOneOf(...HEADING_COLORS),
+    OneOf(HEADING_COLORS),
     __metadata("design:type", String)
 ], CardSubtitle.prototype, "color", void 0);

package/dist/collection/components/card/card-title/card-title.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, ValidateOneOf, ValidateType } from "../../../utils/index";
+import { Logger, OneOf, Required, Type } from "../../../utils/index";
 import { HEADING_VISUAL_LEVELS, HEADING_TAGS } from "../../heading/heading.interfaces";
 /**
  * Card title renders a semantic heading for card titles with flexible visual styling independent of heading level.
@@ -32,7 +32,7 @@ export class CardTitle {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: 'aeac068e023309dd036cfea151ef2ddb92069a1d' }, h("ds-heading", { key: '0f9474d643852320d2c36148ca5f47d50eae6927', level: this.level, visualLevel: this.visualLevel, space: "none", inverted: this.inverted }, h("slot", { key: '083f738ac0e155f2522896211ba9dee2ada3bfb3' }))));
+        return (h(Host, { key: '72e817c803b8ab4a17b7900a88497bf5cc34ee77' }, h("ds-heading", { key: 'aa65474978e8ebe8ec69d7394ecf98d88c950b86', level: this.level, visualLevel: this.visualLevel, space: "none", inverted: this.inverted }, h("slot", { key: '028afa9859201893ec5fe95303ebd13c6c942176' }))));
     }
     static get is() { return "ds-card-title"; }
     static get encapsulation() { return "shadow"; }
@@ -133,14 +133,15 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], CardTitle.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CardTitle.prototype, "inverted", void 0);
 __decorate([
-    ValidateOneOf(...HEADING_TAGS),
+    Required(),
+    OneOf(HEADING_TAGS),
     __metadata("design:type", String)
 ], CardTitle.prototype, "level", void 0);
 __decorate([
-    ValidateOneOf(...HEADING_VISUAL_LEVELS),
+    OneOf(HEADING_VISUAL_LEVELS),
     __metadata("design:type", String)
 ], CardTitle.prototype, "visualLevel", void 0);