@ds-autonomie/web-components 2.14.0 → 2.14.1

package/cdn/chunks/chunk.WR237MHU.js

@@ -1,1098 +0,0 @@
-import {
-  component_styles_default
-} from "./chunk.MQAAYEM3.js";
-import {
-  i
-} from "./chunk.UKK3NS3L.js";
-
-// src/components/button/button.styles.ts
-var button_styles_default = i`
-  ${component_styles_default}
-
-  :host {
-    display: inline-block;
-    position: relative;
-    width: auto;
-  }
-
-  .button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    border-style: solid;
-    border-width: var(--dsa-wc-button-border-width);
-    border-radius: var(--dsa-wc-button-border-radius);
-    text-decoration: none;
-    user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
-    padding: 0 var(--dsa-wc-button-padding-horizontal);
-    transition:
-      var(--dsa-wc-transition-x-fast) background-color,
-      var(--dsa-wc-transition-x-fast) color,
-      var(--dsa-wc-transition-x-fast) border,
-      var(--dsa-wc-transition-x-fast) box-shadow;
-    cursor: pointer;
-  }
-
-  .button::-moz-focus-inner {
-    border: 0;
-  }
-
-  .button:focus {
-    outline: none;
-  }
-
-  .button:focus-visible {
-    outline: var(--dsa-wc-focus-ring);
-    outline-offset: var(--dsa-wc-focus-ring-offset);
-  }
-
-  /* When disabled, prevent mouse events from bubbling up from children */
-  .button--disabled * {
-    pointer-events: none;
-  }
-  .button--disabled {
-    cursor: not-allowed;
-  }
-
-  /* When loading, prevent mouse events from bubbling up from children */
-  .button--loading * {
-    pointer-events: none;
-  }
-
-  .button__prefix,
-  .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-
-  .button__prefix {
-    margin-inline-end: var(--dsa-wc-button-icon-spacing);
-  }
-  .button__suffix {
-    margin-inline-start: var(--dsa-wc-button-icon-spacing);
-  }
-
-  .button__label {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .button__label::slotted(dsa-icon) {
-    vertical-align: -2px;
-  }
-
-  .button--on-floating-menu {
-    background: none;
-    border: solid 1px;
-  }
-
-  .button__description {
-    display: none;
-  }
-
-  /*
-   * Primary
-   */
-  /* Primary/On Base */
-  .button--on-base.button--primary {
-    background-color: var(--dsa-wc-button-primary-on-base-color);
-    border-color: var(--dsa-wc-button-primary-on-base-color);
-    color: var(--dsa-wc-button-primary-on-base-font-color);
-  }
-  .button--on-base.button--primary:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-primary-on-base-hover-color);
-    border-color: var(--dsa-wc-button-primary-on-base-hover-color);
-    color: var(--dsa-wc-button-primary-on-base-hover-font-color);
-  }
-  .button--on-base.button--primary:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-primary-on-base-active-color);
-    border-color: var(--dsa-wc-button-primary-on-base-active-color);
-    color: var(--dsa-wc-button-primary-on-base-active-font-color);
-  }
-  .button--on-base.button--primary.button--disabled {
-    background-color: var(--dsa-wc-button-primary-on-base-disabled-color);
-    border-color: var(--dsa-wc-button-primary-on-base-disabled-color);
-    color: var(--dsa-wc-button-primary-on-base-disabled-font-color);
-  }
-  .button--on-base.button--primary.button--loading {
-    background-color: var(--dsa-wc-button-primary-on-base-loading-color);
-    border-color: var(--dsa-wc-button-primary-on-base-loading-color);
-    color: var(--dsa-wc-button-primary-on-base-loading-font-color);
-  }
-  .button--on-base.button--primary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-base-track-color: var(
-      --dsa-wc-button-primary-on-base-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-base-indicator-color: var(
-      --dsa-wc-button-primary-on-base-loading-spinner-indicator-color
-    );
-  }
-  /* Primary/On Floating Menu */
-  .button--on-floating-menu.button--primary {
-    background-color: var(--dsa-wc-button-primary-on-floating-menu-color);
-    border-color: var(--dsa-wc-button-primary-on-floating-menu-color);
-    color: var(--dsa-wc-button-primary-on-floating-menu-font-color);
-  }
-  .button--on-floating-menu.button--primary:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-primary-on-floating-menu-hover-color);
-    border-color: var(--dsa-wc-button-primary-on-floating-menu-hover-color);
-    color: var(--dsa-wc-button-primary-on-floating-menu-hover-font-color);
-  }
-  .button--on-floating-menu.button--primary:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-primary-on-floating-menu-active-color
-    );
-    border-color: var(--dsa-wc-button-primary-on-floating-menu-active-color);
-    color: var(--dsa-wc-button-primary-on-floating-menu-active-font-color);
-  }
-  .button--on-floating-menu.button--primary.button--disabled {
-    background-color: var(
-      --dsa-wc-button-primary-on-floating-menu-disabled-color
-    );
-    border-color: var(--dsa-wc-button-primary-on-floating-menu-disabled-color);
-    color: var(--dsa-wc-button-primary-on-floating-menu-disabled-font-color);
-  }
-  .button--on-floating-menu.button--primary.button--loading {
-    background-color: var(
-      --dsa-wc-button-primary-on-floating-menu-loading-color
-    );
-    border-color: var(--dsa-wc-button-primary-on-floating-menu-loading-color);
-    color: var(--dsa-wc-button-primary-on-floating-menu-loading-font-color);
-  }
-  .button--on-floating-menu.button--primary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-floating-track-color: var(
-      --dsa-wc-button-primary-on-floating-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-floating-indicator-color: var(
-      --dsa-wc-button-primary-on-floating-menu-loading-spinner-indicator-color
-    );
-  }
-  /* Primary/On Contrasted Menu */
-  .button--on-contrasted-menu.button--primary {
-    background-color: var(--dsa-wc-button-primary-on-contrasted-menu-color);
-    border-color: var(--dsa-wc-button-primary-on-contrasted-menu-color);
-    color: var(--dsa-wc-button-primary-on-contrasted-menu-font-color);
-  }
-  .button--on-contrasted-menu.button--primary:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-primary-on-contrasted-menu-hover-color
-    );
-    border-color: var(--dsa-wc-button-primary-on-contrasted-menu-hover-color);
-    color: var(--dsa-wc-button-primary-on-contrasted-menu-hover-font-color);
-  }
-  .button--on-contrasted-menu.button--primary:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-primary-on-contrasted-menu-active-color
-    );
-    border-color: var(--dsa-wc-button-primary-on-contrasted-menu-active-color);
-    color: var(--dsa-wc-button-primary-on-contrasted-menu-active-font-color);
-  }
-  .button--on-contrasted-menu.button--primary.button--disabled {
-    background-color: var(
-      --dsa-wc-button-primary-on-contrasted-menu-disabled-color
-    );
-    border-color: var(
-      --dsa-wc-button-primary-on-contrasted-menu-disabled-color
-    );
-    color: var(--dsa-wc-button-primary-on-contrasted-menu-disabled-font-color);
-  }
-  .button--on-contrasted-menu.button--primary.button--loading {
-    background-color: var(
-      --dsa-wc-button-primary-on-contrasted-menu-loading-color
-    );
-    border-color: var(--dsa-wc-button-primary-on-contrasted-menu-loading-color);
-    color: var(--dsa-wc-button-primary-on-contrasted-menu-loading-font-color);
-  }
-  .button--on-contrasted-menu.button--primary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-contrasted-track-color: var(
-      --dsa-wc-button-primary-on-contrasted-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-contrasted-indicator-color: var(
-      --dsa-wc-button-primary-on-contrasted-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Secondary */
-  /* Secondary/On Base */
-  .button--on-base.button--secondary {
-    background-color: var(--dsa-wc-button-secondary-on-base-color);
-    border-color: var(--dsa-wc-button-secondary-on-base-color);
-    color: var(--dsa-wc-button-secondary-on-base-font-color);
-  }
-  .button--on-base.button--secondary:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-secondary-on-base-hover-color);
-    border-color: var(--dsa-wc-button-secondary-on-base-hover-color);
-    color: var(--dsa-wc-button-secondary-on-base-hover-font-color);
-  }
-  .button--on-base.button--secondary:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-secondary-on-base-active-color);
-    border-color: var(--dsa-wc-button-secondary-on-base-active-color);
-    color: var(--dsa-wc-button-secondary-on-base-active-font-color);
-  }
-  .button--on-base.button--secondary.button--disabled {
-    background-color: var(--dsa-wc-button-secondary-on-base-disabled-color);
-    border-color: var(--dsa-wc-button-secondary-on-base-disabled-color);
-    color: var(--dsa-wc-button-secondary-on-base-disabled-font-color);
-  }
-  .button--on-base.button--secondary.button--loading {
-    background-color: var(--dsa-wc-button-secondary-on-base-loading-color);
-    border-color: var(--dsa-wc-button-secondary-on-base-loading-color);
-    color: var(--dsa-wc-button-secondary-on-base-loading-font-color);
-  }
-  .button--on-base.button--secondary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-base-track-color: var(
-      --dsa-wc-button-secondary-on-base-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-base-indicator-color: var(
-      --dsa-wc-button-secondary-on-base-loading-spinner-indicator-color
-    );
-  }
-  /* Secondary/On Floating Menu */
-  .button--on-floating-menu.button--secondary {
-    background-color: var(--dsa-wc-button-secondary-on-floating-menu-color);
-    border-color: var(--dsa-wc-button-secondary-on-floating-menu-color);
-    color: var(--dsa-wc-button-secondary-on-floating-menu-font-color);
-  }
-  .button--on-floating-menu.button--secondary:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-secondary-on-floating-menu-hover-color
-    );
-    border-color: var(--dsa-wc-button-secondary-on-floating-menu-hover-color);
-    color: var(--dsa-wc-button-secondary-on-floating-menu-hover-font-color);
-  }
-  .button--on-floating-menu.button--secondary:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-secondary-on-floating-menu-active-color
-    );
-    border-color: var(--dsa-wc-button-secondary-on-floating-menu-active-color);
-    color: var(--dsa-wc-button-secondary-on-floating-menu-active-font-color);
-  }
-  .button--on-floating-menu.button--secondary.button--disabled {
-    background-color: var(
-      --dsa-wc-button-secondary-on-floating-menu-disabled-color
-    );
-    border-color: var(
-      --dsa-wc-button-secondary-on-floating-menu-disabled-color
-    );
-    color: var(--dsa-wc-button-secondary-on-floating-menu-disabled-font-color);
-  }
-  .button--on-floating-menu.button--secondary.button--loading {
-    background-color: var(
-      --dsa-wc-button-secondary-on-floating-menu-loading-color
-    );
-    border-color: var(--dsa-wc-button-secondary-on-floating-menu-loading-color);
-    color: var(--dsa-wc-button-secondary-on-floating-menu-loading-font-color);
-  }
-  .button--on-floating-menu.button--secondary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-floating-track-color: var(
-      --dsa-wc-button-secondary-on-floating-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-floating-indicator-color: var(
-      --dsa-wc-button-secondary-on-floating-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Secondary/On Contrasted Menu */
-  .button--on-contrasted-menu.button--secondary {
-    background-color: var(--dsa-wc-button-secondary-on-contrasted-menu-color);
-    border-color: var(--dsa-wc-button-secondary-on-contrasted-menu-color);
-    color: var(--dsa-wc-button-secondary-on-contrasted-menu-font-color);
-  }
-  .button--on-contrasted-menu.button--secondary:hover:not(
-      .button--disabled
-    ):not(.button--loading) {
-    background-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-hover-color
-    );
-    border-color: var(--dsa-wc-button-secondary-on-contrasted-menu-hover-color);
-    color: var(--dsa-wc-button-secondary-on-contrasted-menu-hover-font-color);
-  }
-  .button--on-contrasted-menu.button--secondary:active:not(
-      .button--disabled
-    ):not(.button--loading) {
-    background-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-active-color
-    );
-    border-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-active-color
-    );
-    color: var(--dsa-wc-button-secondary-on-contrasted-menu-active-font-color);
-  }
-  .button--on-contrasted-menu.button--secondary.button--disabled {
-    background-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-disabled-color
-    );
-    border-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-disabled-color
-    );
-    color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-disabled-font-color
-    );
-  }
-  .button--on-contrasted-menu.button--secondary.button--loading {
-    background-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-loading-color
-    );
-    border-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-loading-color
-    );
-    color: var(--dsa-wc-button-secondary-on-contrasted-menu-loading-font-color);
-  }
-  .button--on-contrasted-menu.button--secondary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-contrasted-track-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-contrasted-indicator-color: var(
-      --dsa-wc-button-secondary-on-contrasted-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Tertiary */
-  .button--tertiary:not(.button--tertiary-with-outline) {
-    padding: 0;
-    border: none;
-  }
-  /* Tertiary/On Base */
-  .button--on-base.button--tertiary {
-    background-color: var(--dsa-wc-button-tertiary-on-base-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-border-color);
-    color: var(--dsa-wc-button-tertiary-on-base-font-color);
-  }
-  .button--on-base.button--tertiary:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-tertiary-on-base-hover-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-hover-border-color);
-    color: var(--dsa-wc-button-tertiary-on-base-hover-font-color);
-  }
-  .button--on-base.button--tertiary:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-tertiary-on-base-active-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-active-border-color);
-    color: var(--dsa-wc-button-tertiary-on-base-active-font-color);
-  }
-  .button--on-base.button--tertiary.button--disabled {
-    background-color: var(--dsa-wc-button-tertiary-on-base-disabled-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-disabled-border-color);
-    color: var(--dsa-wc-button-tertiary-on-base-disabled-font-color);
-  }
-  .button--on-base.button--tertiary.button--loading {
-    background-color: var(--dsa-wc-button-tertiary-on-base-loading-color);
-    color: var(--dsa-wc-button-tertiary-on-base-loading-font-color);
-  }
-  .button--on-base.button--tertiary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-base-track-color: var(
-      --dsa-wc-button-tertiary-on-base-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-base-indicator-color: var(
-      --dsa-wc-button-tertiary-on-base-loading-spinner-indicator-color
-    );
-  }
-  /* Tertiary/On Floating Menu */
-  .button--on-floating-menu.button--tertiary {
-    background-color: var(--dsa-wc-button-tertiary-on-floating-menu-color);
-    border-color: var(--dsa-wc-button-tertiary-on-floating-menu-border-color);
-    color: var(--dsa-wc-button-tertiary-on-floating-menu-font-color);
-  }
-  .button--on-floating-menu.button--tertiary:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-hover-color
-    );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-hover-border-color
-    );
-    color: var(--dsa-wc-button-tertiary-on-floating-menu-hover-font-color);
-  }
-  .button--on-floating-menu.button--tertiary:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-active-color
-    );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-active-border-color
-    );
-    color: var(--dsa-wc-button-tertiary-on-floating-menu-active-font-color);
-  }
-  .button--on-floating-menu.button--tertiary.button--disabled {
-    background-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-disabled-color
-    );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-disabled-border-color
-    );
-    color: var(--dsa-wc-button-tertiary-on-floating-menu-disabled-font-color);
-  }
-  .button--on-floating-menu.button--tertiary.button--loading {
-    background-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-loading-color
-    );
-    color: var(--dsa-wc-button-tertiary-on-floating-menu-loading-font-color);
-  }
-  .button--on-floating-menu.button--tertiary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-floating-track-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-floating-indicator-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Tertiary/On Contrasted Menu */
-  .button--on-contrasted-menu.button--tertiary {
-    background-color: var(--dsa-wc-button-tertiary-on-contrasted-menu-color);
-    border-color: var(--dsa-wc-button-tertiary-on-contrasted-menu-border-color);
-    color: var(--dsa-wc-button-tertiary-on-contrasted-menu-font-color);
-  }
-  .button--on-contrasted-menu.button--tertiary:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-hover-color
-    );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-hover-border-color
-    );
-    color: var(--dsa-wc-button-tertiary-on-contrasted-menu-hover-font-color);
-  }
-  .button--on-contrasted-menu.button--tertiary:active:not(
-      .button--disabled
-    ):not(.button--loading) {
-    background-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-active-color
-    );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-active-border-color
-    );
-    color: var(--dsa-wc-button-tertiary-on-contrasted-menu-active-font-color);
-  }
-  .button--on-contrasted-menu.button--tertiary.button--disabled {
-    background-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-disabled-color
-    );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-disabled-border-color
-    );
-    color: var(--dsa-wc-button-tertiary-on-contrasted-menu-disabled-font-color);
-  }
-  .button--on-contrasted-menu.button--tertiary.button--loading {
-    background-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-loading-color
-    );
-    color: var(--dsa-wc-button-tertiary-on-contrasted-menu-loading-font-color);
-  }
-  .button--on-contrasted-menu.button--tertiary.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-contrasted-track-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-contrasted-indicator-color: var(
-      --dsa-wc-button-tertiary-on-contrasted-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Navigation */
-  .button--navigation {
-    padding: 0;
-  }
-  /* Navigation/On Base */
-  .button--on-base.button--navigation {
-    background-color: var(--dsa-wc-button-navigation-on-base-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-base-font-color);
-  }
-  .button--on-base.button--navigation:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-navigation-on-base-hover-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-base-hover-font-color);
-  }
-  .button--on-base.button--navigation:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-navigation-on-base-active-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-base-active-font-color);
-  }
-  .button--on-base.button--navigation.button--disabled {
-    background-color: var(--dsa-wc-button-navigation-on-base-disabled-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-base-disabled-font-color);
-  }
-  .button--on-base.button--navigation.button--loading {
-    background-color: var(--dsa-wc-button-navigation-on-base-loading-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-base-loading-font-color);
-  }
-  .button--on-base.button--navigation.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-base-track-color: var(
-      --dsa-wc-button-navigation-on-base-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-base-indicator-color: var(
-      --dsa-wc-button-navigation-on-base-loading-spinner-indicator-color
-    );
-  }
-  /* Navigation/On Floating Menu */
-  .button--on-floating-menu.button--navigation {
-    background-color: var(--dsa-wc-button-navigation-on-floating-menu-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-floating-menu-font-color);
-  }
-  .button--on-floating-menu.button--navigation:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-navigation-on-floating-menu-hover-color
-    );
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-floating-menu-hover-font-color);
-  }
-  .button--on-floating-menu.button--navigation:active:not(
-      .button--disabled
-    ):not(.button--loading) {
-    background-color: var(
-      --dsa-wc-button-navigation-on-floating-menu-active-color
-    );
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-floating-menu-active-font-color);
-  }
-  .button--on-floating-menu.button--navigation.button--disabled {
-    background-color: var(
-      --dsa-wc-button-navigation-on-floating-menu-disabled-color
-    );
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-floating-menu-disabled-font-color);
-  }
-  .button--on-floating-menu.button--navigation.button--loading {
-    background-color: var(
-      --dsa-wc-button-navigation-on-floating-menu-loading-color
-    );
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-floating-menu-loading-font-color);
-  }
-  .button--on-floating-menu.button--navigation.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-floating-track-color: var(
-      --dsa-wc-button-navigation-on-floating-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-floating-indicator-color: var(
-      --dsa-wc-button-navigation-on-floating-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Navigation/On Contrasted Menu */
-  .button--on-contrasted-menu.button--navigation {
-    background-color: var(--dsa-wc-button-navigation-on-contrasted-menu-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-contrasted-menu-font-color);
-  }
-  .button--on-contrasted-menu.button--navigation:hover:not(
-      .button--disabled
-    ):not(.button--loading) {
-    background-color: var(
-      --dsa-wc-button-navigation-on-contrasted-menu-hover-color
-    );
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-contrasted-menu-hover-font-color);
-  }
-  .button--on-contrasted-menu.button--navigation:active:not(
-      .button--disabled
-    ):not(.button--loading) {
-    background-color: var(
-      --dsa-wc-button-navigation-on-contrasted-menu-active-color
-    );
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-contrasted-menu-active-font-color);
-  }
-  .button--on-contrasted-menu.button--navigation.button--disabled {
-    background-color: var(
-      --dsa-wc-button-navigation-on-contrasted-menu-disabled-color
-    );
-    border-color: transparent;
-    color: var(
-      --dsa-wc-button-navigation-on-contrasted-menu-disabled-font-color
-    );
-  }
-  .button--on-contrasted-menu.button--navigation.button--loading {
-    background-color: var(
-      --dsa-wc-button-navigation-on-contrasted-menu-loading-color
-    );
-    border-color: transparent;
-    color: var(
-      --dsa-wc-button-navigation-on-contrasted-menu-loading-font-color
-    );
-  }
-  .button--on-contrasted-menu.button--navigation.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-contrasted-track-color: var(
-      --dsa-wc-button-navigation-on-contrasted-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-contrasted-indicator-color: var(
-      --dsa-wc-button-navigation-on-contrasted-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Neutral */
-  /* Neutral/On Base */
-  .button--on-base.button--neutral {
-    background-color: var(--dsa-wc-button-neutral-on-base-color);
-    border-color: var(--dsa-wc-button-neutral-on-base-color);
-    color: var(--dsa-wc-button-neutral-on-base-font-color);
-  }
-  .button--on-base.button--neutral:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-neutral-on-base-hover-color);
-    border-color: var(--dsa-wc-button-neutral-on-base-hover-color);
-    color: var(--dsa-wc-button-neutral-on-base-hover-font-color);
-  }
-  .button--on-base.button--neutral:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-neutral-on-base-active-color);
-    border-color: var(--dsa-wc-button-neutral-on-base-active-color);
-    color: var(--dsa-wc-button-neutral-on-base-active-font-color);
-  }
-  .button--on-base.button--neutral.button--disabled {
-    background-color: var(--dsa-wc-button-neutral-on-base-disabled-color);
-    border-color: var(--dsa-wc-button-neutral-on-base-disabled-color);
-    color: var(--dsa-wc-button-neutral-on-base-disabled-font-color);
-  }
-  .button--on-base.button--neutral.button--loading {
-    background-color: var(--dsa-wc-button-neutral-on-base-loading-color);
-    border-color: var(--dsa-wc-button-neutral-on-base-loading-color);
-    color: var(--dsa-wc-button-neutral-on-base-loading-font-color);
-  }
-  .button--on-base.button--neutral.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-base-track-color: var(
-      --dsa-wc-button-neutral-on-base-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-base-indicator-color: var(
-      --dsa-wc-button-neutral-on-base-loading-spinner-indicator-color
-    );
-  }
-  /* Neutral/On Floating Menu */
-  .button--on-floating-menu.button--neutral {
-    background-color: var(--dsa-wc-button-neutral-on-floating-menu-color);
-    border-color: var(--dsa-wc-button-neutral-on-floating-menu-color);
-    color: var(--dsa-wc-button-neutral-on-floating-menu-font-color);
-  }
-  .button--on-floating-menu.button--neutral:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-neutral-on-floating-menu-hover-color);
-    border-color: var(--dsa-wc-button-neutral-on-floating-menu-hover-color);
-    color: var(--dsa-wc-button-neutral-on-floating-menu-hover-font-color);
-  }
-  .button--on-floating-menu.button--neutral:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-neutral-on-floating-menu-active-color
-    );
-    border-color: var(--dsa-wc-button-neutral-on-floating-menu-active-color);
-    color: var(--dsa-wc-button-neutral-on-floating-menu-active-font-color);
-  }
-  .button--on-floating-menu.button--neutral.button--disabled {
-    background-color: var(
-      --dsa-wc-button-neutral-on-floating-menu-disabled-color
-    );
-    border-color: var(--dsa-wc-button-neutral-on-floating-menu-disabled-color);
-    color: var(--dsa-wc-button-neutral-on-floating-menu-disabled-font-color);
-  }
-  .button--on-floating-menu.button--neutral.button--loading {
-    background-color: var(
-      --dsa-wc-button-neutral-on-floating-menu-loading-color
-    );
-    border-color: var(--dsa-wc-button-neutral-on-floating-menu-loading-color);
-    color: var(--dsa-wc-button-neutral-on-floating-menu-loading-font-color);
-  }
-  .button--on-floating-menu.button--neutral.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-floating-track-color: var(
-      --dsa-wc-button-neutral-on-floating-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-floating-indicator-color: var(
-      --dsa-wc-button-neutral-on-floating-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Neutral/On Contrasted Menu */
-  .button--on-contrasted-menu.button--neutral {
-    background-color: var(--dsa-wc-button-neutral-on-contrasted-menu-color);
-    border-color: var(--dsa-wc-button-neutral-on-contrasted-menu-color);
-    color: var(--dsa-wc-button-neutral-on-contrasted-menu-font-color);
-  }
-  .button--on-contrasted-menu.button--neutral:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-neutral-on-contrasted-menu-hover-color
-    );
-    border-color: var(--dsa-wc-button-neutral-on-contrasted-menu-hover-color);
-    color: var(--dsa-wc-button-neutral-on-contrasted-menu-hover-font-color);
-  }
-  .button--on-contrasted-menu.button--neutral:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-neutral-on-contrasted-menu-active-color
-    );
-    border-color: var(--dsa-wc-button-neutral-on-contrasted-menu-active-color);
-    color: var(--dsa-wc-button-neutral-on-contrasted-menu-active-font-color);
-  }
-  .button--on-contrasted-menu.button--neutral.button--disabled {
-    background-color: var(
-      --dsa-wc-button-neutral-on-contrasted-menu-disabled-color
-    );
-    border-color: var(
-      --dsa-wc-button-neutral-on-contrasted-menu-disabled-color
-    );
-    color: var(--dsa-wc-button-neutral-on-contrasted-menu-disabled-font-color);
-  }
-  .button--on-contrasted-menu.button--neutral.button--loading {
-    background-color: var(
-      --dsa-wc-button-neutral-on-contrasted-menu-loading-color
-    );
-    border-color: var(--dsa-wc-button-neutral-on-contrasted-menu-loading-color);
-    color: var(--dsa-wc-button-neutral-on-contrasted-menu-loading-font-color);
-  }
-  .button--on-contrasted-menu.button--neutral.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-contrasted-track-color: var(
-      --dsa-wc-button-neutral-on-contrasted-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-contrasted-indicator-color: var(
-      --dsa-wc-button-neutral-on-contrasted-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Danger */
-  /* Danger/On Base */
-  .button--on-base.button--danger {
-    background-color: var(--dsa-wc-button-danger-on-base-color);
-    border-color: var(--dsa-wc-button-danger-on-base-color);
-    color: var(--dsa-wc-button-danger-on-base-font-color);
-  }
-  .button--on-base.button--danger:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-danger-on-base-hover-color);
-    border-color: var(--dsa-wc-button-danger-on-base-hover-color);
-    color: var(--dsa-wc-button-danger-on-base-hover-font-color);
-  }
-  .button--on-base.button--danger:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-danger-on-base-active-color);
-    border-color: var(--dsa-wc-button-danger-on-base-active-color);
-    color: var(--dsa-wc-button-danger-on-base-active-font-color);
-  }
-  .button--on-base.button--danger.button--disabled {
-    background-color: var(--dsa-wc-button-danger-on-base-disabled-color);
-    border-color: var(--dsa-wc-button-danger-on-base-disabled-color);
-    color: var(--dsa-wc-button-danger-on-base-disabled-font-color);
-  }
-  .button--on-base.button--danger.button--loading {
-    background-color: var(--dsa-wc-button-danger-on-base-loading-color);
-    border-color: var(--dsa-wc-button-danger-on-base-loading-color);
-    color: var(--dsa-wc-button-danger-on-base-loading-font-color);
-  }
-  .button--on-base.button--danger.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-base-track-color: var(
-      --dsa-wc-button-danger-on-base-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-base-indicator-color: var(
-      --dsa-wc-button-danger-on-base-loading-spinner-indicator-color
-    );
-  }
-  /* Danger/On Floating Menu */
-  .button--on-floating-menu.button--danger {
-    background-color: var(--dsa-wc-button-danger-on-floating-menu-color);
-    border-color: var(--dsa-wc-button-danger-on-floating-menu-color);
-    color: var(--dsa-wc-button-danger-on-floating-menu-font-color);
-  }
-  .button--on-floating-menu.button--danger:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-danger-on-floating-menu-hover-color);
-    border-color: var(--dsa-wc-button-danger-on-floating-menu-hover-color);
-    color: var(--dsa-wc-button-danger-on-floating-menu-hover-font-color);
-  }
-  .button--on-floating-menu.button--danger:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(--dsa-wc-button-danger-on-floating-menu-active-color);
-    border-color: var(--dsa-wc-button-danger-on-floating-menu-active-color);
-    color: var(--dsa-wc-button-danger-on-floating-menu-active-font-color);
-  }
-  .button--on-floating-menu.button--danger.button--disabled {
-    background-color: var(
-      --dsa-wc-button-danger-on-floating-menu-disabled-color
-    );
-    border-color: var(--dsa-wc-button-danger-on-floating-menu-disabled-color);
-    color: var(--dsa-wc-button-danger-on-floating-menu-disabled-font-color);
-  }
-  .button--on-floating-menu.button--danger.button--loading {
-    background-color: var(
-      --dsa-wc-button-danger-on-floating-menu-loading-color
-    );
-    border-color: var(--dsa-wc-button-danger-on-floating-menu-loading-color);
-    color: var(--dsa-wc-button-danger-on-floating-menu-loading-font-color);
-  }
-  .button--on-floating-menu.button--danger.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-floating-track-color: var(
-      --dsa-wc-button-danger-on-floating-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-floating-indicator-color: var(
-      --dsa-wc-button-danger-on-floating-menu-loading-spinner-indicator-color
-    );
-  }
-
-  /* Danger/On Contrasted Menu */
-  .button--on-contrasted-menu.button--danger {
-    background-color: var(--dsa-wc-button-danger-on-contrasted-menu-color);
-    border-color: var(--dsa-wc-button-danger-on-contrasted-menu-color);
-    color: var(--dsa-wc-button-danger-on-contrasted-menu-font-color);
-  }
-  .button--on-contrasted-menu.button--danger:hover:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-danger-on-contrasted-menu-hover-color
-    );
-    border-color: var(--dsa-wc-button-danger-on-contrasted-menu-hover-color);
-    color: var(--dsa-wc-button-danger-on-contrasted-menu-hover-font-color);
-  }
-  .button--on-contrasted-menu.button--danger:active:not(.button--disabled):not(
-      .button--loading
-    ) {
-    background-color: var(
-      --dsa-wc-button-danger-on-contrasted-menu-active-color
-    );
-    border-color: var(--dsa-wc-button-danger-on-contrasted-menu-active-color);
-    color: var(--dsa-wc-button-danger-on-contrasted-menu-active-font-color);
-  }
-  .button--on-contrasted-menu.button--danger.button--disabled {
-    background-color: var(
-      --dsa-wc-button-danger-on-contrasted-menu-disabled-color
-    );
-    border-color: var(--dsa-wc-button-danger-on-contrasted-menu-disabled-color);
-    color: var(--dsa-wc-button-danger-on-contrasted-menu-disabled-font-color);
-  }
-  .button--on-contrasted-menu.button--danger.button--loading {
-    background-color: var(
-      --dsa-wc-button-danger-on-contrasted-menu-loading-color
-    );
-    border-color: var(--dsa-wc-button-danger-on-contrasted-menu-loading-color);
-    color: var(--dsa-wc-button-danger-on-contrasted-menu-loading-font-color);
-  }
-  .button--on-contrasted-menu.button--danger.button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-contrasted-track-color: var(
-      --dsa-wc-button-danger-on-contrasted-menu-loading-spinner-track-color
-    );
-    --dsa-wc-internal-spinner-on-contrasted-indicator-color: var(
-      --dsa-wc-button-danger-on-contrasted-menu-loading-spinner-indicator-color
-    );
-  }
-
-  @media (forced-colors: active) {
-    .button.button--on-floating-menu.button--checked:not(.button--disabled) {
-      outline: solid 2px transparent;
-    }
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .button--small {
-    font: var(--dsa-wc-button-font-small);
-    height: var(--dsa-wc-form-input-height-small);
-    line-height: calc(
-      var(--dsa-wc-form-input-height-small) - var(
-          --dsa-wc-button-border-width
-        ) *
-        2
-    );
-    border-radius: var(--dsa-wc-button-border-radius);
-  }
-  .button--small:not(.button--tertiary):not(.button--navigation) {
-    padding: 0 var(--dsa-wc-button-padding-horizontal-small);
-  }
-
-  .button--medium {
-    font: var(--dsa-wc-button-font);
-    height: var(--dsa-wc-form-input-height);
-    line-height: calc(
-      var(--dsa-wc-form-input-height) - var(--dsa-wc-button-border-width) * 2
-    );
-    border-radius: var(--dsa-wc-button-border-radius);
-  }
-
-  .button--large {
-    font: var(--dsa-wc-button-font-large);
-    height: var(--dsa-wc-form-input-height-large);
-    line-height: calc(
-      var(--dsa-wc-form-input-height-large) - var(
-          --dsa-wc-button-border-width
-        ) *
-        2
-    );
-    border-radius: var(--dsa-wc-button-border-radius);
-  }
-
-  /*
-   * Caret modifier
-   */
-
-  .button--caret .button__suffix {
-    display: none;
-  }
-
-  .button--caret .button__caret {
-    height: auto;
-    margin-inline-start: var(--dsa-wc-button-caret-margin-inline-start);
-    transition: var(--dsa-wc-transition-medium) rotate ease;
-  }
-  .button--caret[aria-expanded='true'] .button__caret {
-    rotate: 180deg;
-  }
-
-  /*
-   * Loading modifier
-   */
-
-  .button--loading {
-    position: relative;
-    cursor: wait;
-  }
-
-  .button--loading .button__prefix,
-  .button--loading .button__label,
-  .button--loading .button__suffix,
-  .button--loading .button__caret {
-    visibility: hidden;
-  }
-
-  .button--loading dsa-spinner {
-    --dsa-wc-internal-spinner-on-base-indicator-color: currentColor;
-    --dsa-wc-internal-spinner-on-floating-indicator-color: currentColor;
-    position: absolute;
-    font-size: 1em;
-    height: 1em;
-    width: 1em;
-    top: calc(50% - 0.5em);
-    left: calc(50% - 0.5em);
-  }
-
-  /*
-   * Badges
-   */
-
-  .button ::slotted(dsa-badge) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    translate: 50% -50%;
-    pointer-events: none;
-  }
-
-  .button--rtl ::slotted(dsa-badge) {
-    right: auto;
-    left: 0;
-    translate: -50% -50%;
-  }
-
-  /*
-   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-   * buttons and we style them here instead.
-   */
-
-  :host(.dsa-button-group__button--first:not(.dsa-button-group__button--last))
-    .button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host(.dsa-button-group__button--inner) .button {
-    border-radius: 0;
-  }
-
-  :host(.dsa-button-group__button--last:not(.dsa-button-group__button--first))
-    .button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  /* All except the first */
-  :host(.dsa-button-group__button:not(.dsa-button-group__button--first)) {
-    margin-inline-start: calc(-1 * var(--dsa-wc-button-border-width));
-  }
-
-  /* Add a visual separator between solid buttons */
-  :host(
-      .dsa-button-group__button:not(
-          .dsa-button-group__button--first,
-          .dsa-button-group__button--radio,
-          .dsa-button-group__button--checkbox,
-          [variant='default']
-        ):not(:hover)
-    )
-    .button:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    bottom: 0;
-    border-left: solid 1px rgb(128 128 128 / 33%);
-    mix-blend-mode: multiply;
-  }
-
-  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-  :host(.dsa-button-group__button--hover) {
-    z-index: 1;
-  }
-
-  /* Focus and checked are always on top */
-  :host(.dsa-button-group__button--focus),
-  :host(.dsa-button-group__button[checked]) {
-    z-index: 2;
-  }
-
-  /* Limit width if inside a vertical button-group */
-  :host(.dsa-button-group__button--vertical) {
-    max-width: 400px;
-  }
-`;
-
-export {
-  button_styles_default
-};