@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/danger-button/danger-button.js

@@ -1,574 +1,45 @@
-import g from "classnames";
-import { css as v, nothing as i, html as n } from "lit";
-import { ifDefined as a } from "lit-html/directives/if-defined.js";
-import "../../icon-DImqxDiW.js";
+import s from "classnames";
+import { css as v, nothing as d, html as n } from "lit";
+import { ifDefined as c } from "lit-html/directives/if-defined.js";
+import "../../icon-D22g8aWB.js";
 import "../loading-spinner/loading-spinner.js";
-import { property as o, query as h } from "lit/decorators.js";
+import { property as t, query as h } from "lit/decorators.js";
 import { Cre8FormElement as p } from "../cre8-form-element.js";
-const y = v`@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: inline-flex;
-}
-:host([fullWidth]) {
-  display: flex;
-
-}
-/**
- * 1) Danger Button or link that has functionality to it
- */
-
-/**
- * Primary button
- */
-.cre8-c-danger-button {
-  @include cre8-typography-label-default();
-  width: var(--cre8-button-width, auto);
-  height: var(--cre8-button-height, auto);
-  min-width: var(--cre8-button-min-width, auto);
-  min-height: var(--cre8-button-min-height, auto);
-  justify-content: center;
-  text-align: center;
-  margin-top: var( --cre8-button-margin-top, 0);
-  margin-bottom: var( --cre8-button-margin-bottom, 0);
-  margin-left: var( --cre8-button-margin-left, 0);
-  margin-right: var( --cre8-button-margin-right, 0);
-  display: inline-flex;
-  align-items: center;
-  border-width: var(--cre8-border-width-button-default);
-  box-shadow: var(--cre8-shadow-button);
-  padding-top: var(--cre8-button-padding-vertical-medium);
-  padding-right: var(--cre8-button-padding-horizontal-medium);
-  padding-bottom: var(--cre8-button-padding-vertical-medium);
-  padding-left: var(--cre8-button-padding-horizontal-medium);
-  margin: 0;
-  cursor: pointer;
-  border-style: var(--cre8-border-style-default);
-  transition: revert;
-  transform: revert;
-  white-space: nowrap;
-  &:hover,
-  &:focus,
-  &:active,
-  &:focus-visible {
-    border-style: var(--cre8-border-style-default);
-    box-shadow: none;
-    transform: revert;
-    transition: revert;
-  }
-  &.cre8-c-danger-button--primary {
-    background: var(--cre8-color-button-primary-danger-bg);
-    border-width: var(--cre8-border-width-button-default);
-    border-color: var(--cre8-color-button-primary-danger-border);
-    border-radius: var(--cre8-border-radius-button);
-    box-shadow: var(--cre8-shadow-button);
-    color: var(--cre8-color-button-primary-danger-content);
-    --cre8-icon-fill: var(--cre8-color-button-primary-danger-content);
-    &:hover,
-    &:focus {
-      box-shadow: none;
-      --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-hover);
-      color: var(--cre8-color-button-primary-danger-content-hover);
-      border-color: var(--cre8-color-button-primary-danger-border-hover);
-      background: var(--cre8-color-button-primary-danger-bg-hover);
-      text-decoration: none;
-      &:focus {
-        @includefocus();
-      }
-    }
-    &:active,
-    &.cre8-c-danger-button--loading {
-      box-shadow: none;
-      color: var(--cre8-color-button-primary-danger-content-active);
-      --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);
-      border-color: var(--cre8-color-button-primary-danger-border-active);
-      background-color: var(--cre8-color-button-primary-danger-bg-active);
-    }
-    &:focus-visible{
-      @includefocus();
-    }
-    &.cre8-c-danger-button--loading{
-      cursor: not-allowed;
-    }
-/**
- * Disabled primary and secondary button
- */
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-primary-danger-bg-disabled);
-    border-color: var(--cre8-color-button-primary-danger-border-disabled);
-    color: var(--cre8-color-button-primary-danger-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);
-    cursor: not-allowed;
-    outline: none;
-    &:hover,
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      background-color: var(--cre8-color-button-primary-danger-bg-disabled);
-      border-color: var(--cre8-color-button-primary-danger-border-disabled);
-      color: var(--cre8-color-button-primary-danger-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);
-    }
-  }
-
-  &.cre8-c-danger-button--inverted {
-    background-color: var(--cre8-color-button-primary-danger-inverse-bg);
-    border-color: var(--cre8-color-button-primary-danger-inverse-border);
-    color: var(--cre8-color-button-primary-danger-inverse-content);
-  
-    &:hover,
-    &:focus {
-     background-color: var(--cre8-color-button-primary-danger-inverse-bg-hover);
-     border-color: var(--cre8-color-button-primary-danger-inverse-border-hover);
-     color: var(--cre8-color-button-primary-danger-inverse-content-hover);
-    }
-
-    &:focus {
-      outline-color: var(--cre8-color-button-primary-danger-inverse-outline);
-     }
-
-    &:active {
-      background-color: var(--cre8-color-button-primary-danger-inverse-bg-active);
-      border-color: var(--cre8-color-button-primary-danger-inverse-border-active);
-      color: var(--cre8-color-button-primary-danger-inverse-content-active);
-     
-    &.cre8-c-danger-button--loading {
-      --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);
-      }
-    }
-
-    &:disabled { 
-      outline: none;
-      cursor: not-allowed;
-      background-color: var(--cre8-color-button-primary-danger-inverse-bg-disabled);
-      border-color: var(--cre8-color-button-primary-danger-inverse-border-disabled);
-      color: var(--cre8-color-button-primary-danger-inverse-content-disabled);
-    }
-  }
-}
-
-/**
- * Secondary button
- * The icon button shares the styles of the standard secondary button
- */
-  &.cre8-c-danger-button--secondary {
-    background-color: var(--cre8-color-button-secondary-danger-bg);
-    border-color: var(--cre8-color-button-secondary-danger-border);
-    color: var(--cre8-color-button-secondary-danger-content);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);
-    border-radius: var(--cre8-border-radius-button);
-    border-width: var(--cre8-border-width-button-default);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-button-secondary-danger-bg-hover);
-    border-color: var(--cre8-color-button-secondary-danger-border-hover);
-    color: var(--cre8-color-button-secondary-danger-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);
-    &:focus {
-      @include focus;
-    }
-  }
-  &:active,
-  &.cre8-c-danger-button--loading {
-    transition: none;
-    transform: none;
-    background-color: var(--cre8-color-button-secondary-danger-bg-active);
-    border-color: var(--cre8-color-button-secondary-danger-border-active);
-    color: var(--cre8-color-button-secondary-danger-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);
-  }
-  &:focus-visible {
-    @include focus;
-  }
-  &.cre8-c-danger-button--loading {
-    cursor: not-allowed;
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-secondary-danger-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-danger-border-disabled);
-    color: var(--cre8-color-button-secondary-danger-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);
-    outline: none;
-    border-radius: var(--cre8-border-radius-button);
-    border-width: var(--cre8-border-width-button-default);
-    cursor: not-allowed;
-    &:hover,
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      background-color: var(--cre8-color-button-secondary-danger-bg-disabled);
-      border-color: var(--cre8-color-button-secondary-danger-border-disabled);
-      color: var(--cre8-color-button-secondary-danger-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);
-    }
-  }
-
-  &.cre8-c-danger-button--inverted {
-    background-color: var(--cre8-color-button-secondary-danger-inverse-bg);
-    border-color: var(--cre8-color-button-secondary-danger-inverse-border);
-    color: var(--cre8-color-button-secondary-danger-inverse-content);
-  
-    &:hover,
-    &:focus {
-     background-color: var(--cre8-color-button-secondary-danger-inverse-bg-hover);
-     border-color: var(--cre8-color-button-secondary-danger-inverse-border-hover);
-     color: var(--cre8-color-button-secondary-danger-inverse-content-hover);
-    }
-
-    &:focus {
-      outline-color: var(--cre8-color-button-secondary-danger-inverse-outline);
-     }
-
-    &:active {
-      background-color: var(--cre8-color-button-secondary-danger-inverse-bg-active);
-      border-color: var(--cre8-color-button-secondary-danger-inverse-border-active);
-      color: var(--cre8-color-button-secondary-danger-inverse-content-active);
-     
-    &.cre8-c-danger-button--loading {
-      --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);
-      }
-    }
-
-    &:disabled { 
-      outline: none;
-      cursor: not-allowed;
-      background-color: var(--cre8-color-button-secondary-danger-inverse-bg-disabled);
-      border-color: var(--cre8-color-button-secondary-danger-inverse-border-disabled);
-      color: var(--cre8-color-button-secondary-danger-inverse-content-disabled);
-    }
-  }
-}
-
-  /**
- * Tertiary button
- */
-  &.cre8-c-danger-button--tertiary {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-danger-bg);
-    border-width: var(--cre8-border-width-button-default);
-    border-color: var(--cre8-color-button-tertiary-danger-border);
-    color: var(--cre8-color-button-tertiary-danger-content);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content);
-    box-shadow: none;
-    &:hover,
-    &:focus {
-      border-radius: var(--cre8-border-radius-button);
-      background-color: var(--cre8-color-button-tertiary-danger-bg-hover);
-      border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
-      border-color: var(--cre8-color-button-tertiary-danger-border-hover);
-      color: var(--cre8-color-button-tertiary-danger-content-hover);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-hover);
-      &:focus {
-        @include focusTertiary();
-      }
-    }
-  &:active,
-  &.cre8-c-danger-button--loading {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-danger-bg-active);
-    border-color: var(--cre8-color-button-tertiary-danger-border-active);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-tertiary-danger-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active);
-  }
-  &:focus-visible {
-    @include focusTertiary();
-  }
-  &.cre8-c-danger-button--loading {
-    cursor: not-allowed;
-  }
-  &:disabled {
-    background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);
-    border-color: transparent;
-    color: var(--cre8-color-button-tertiary-danger-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);
-    outline: none;
-    box-shadow: none;
-    cursor: not-allowed;
-
-    &:hover,
-    &:focus {
-      outline: none;
-      box-shadow: none;
-      background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);
-      color: var(--cre8-color-button-tertiary-danger-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);
-    }
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: none;
-      background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);
-      color: var(--cre8-color-button-tertiary-danger-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);
-    }
-  }
-
-  &.cre8-c-danger-button--inverted {
-    background-color: var(--cre8-color-button-tertiary-danger-inverse-bg);
-    border-color: var(--cre8-color-button-tertiary-danger-inverse-border);
-    color: var(--cre8-color-button-tertiary-danger-inverse-content);
-  
-    &:hover,
-    &:focus {
-     background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-hover);
-     border-color: var(--cre8-color-button-tertiary-danger-inverse-border-hover);
-     color: var(--cre8-color-button-tertiary-danger-inverse-content-hover);
-    }
-
-    &:focus {
-      outline-color: var(--cre8-color-button-tertiary-danger-inverse-outline);
-    }
-
-    &:active {
-      background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-active);
-      border-color: var(--cre8-color-button-tertiary-danger-inverse-border-active);
-      color: var(--cre8-color-button-tertiary-danger-inverse-content-active);
-     
-      &.cre8-c-danger-button--loading {
-        --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active);
-      }
-    }
-
-    &:disabled { 
-      outline: none;
-      cursor: not-allowed;
-      background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-disabled);
-      border-color: var(--cre8-color-button-tertiary-danger-inverse-border-disabled);
-      color: var(--cre8-color-button-tertiary-danger-inverse-content-disabled);
-    }
-  }
-}
-
-  &.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text {
-    border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);
-    border-color: var(--cre8-color-button-secondary-danger-border);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-secondary-danger-content);
-    &:active,
-    &:focus-visible {
-      outline: none;
-    }
-    &.cre8-c-danger-button--lg {
-      padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);
-    }
-    &.cre8-c-danger-button--sm {
-      padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);
-    }
-  }
-
-  &.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret {
-    padding: var(--cre8-button-padding-vertical-medium);
-    border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);
-    height: 100%;
-    border-left: none !important ;
-    border-collapse: collapse;
-    background: var(--cre8-color-button-secondary-danger-bg);
-    border-color: var(--cre8-color-button-secondary-danger-border);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-secondary-danger-content);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);
-
-    &:hover,
-    &:focus {
-      background: var(--cre8-color-button-secondary-danger-bg-hover);
-      border-color: var(--cre8-color-button-secondary-danger-border-hover);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);
-      outline: none;
-      border-left: none;
-      border-collapse: collapse;
-    }
-    &:active,
-    &:focus-visible {
-      background: var(--cre8-color-button-secondary-danger-bg-active);
-      border-color: var(--cre8-color-button-secondary-danger-border-active);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);
-      outline: none;
-      border-left: none;
-      border-collapse: collapse;
-    }
-  }
-}
-.cre8-c-danger-button--lg {
-  padding: var(--cre8-button-padding-vertical-large);
-}
-.cre8-c-danger-button--sm {
-  padding: var(--cre8-button-padding-vertical-small);
-}
-
-.cre8-c-danger-button--icon-only {
-  padding: var(--cre8-button-padding-vertical-small);
-  color: var(--cre8-icon-fill, currentColor);
-}
-
-/**
- * Full-width button
- */
-.cre8-c-danger-button--full-width {
-  width: 100%;
-  display: flex;
-}
-
-/**
- * Small button
- */
-.cre8-c-danger-button--sm {
-  @include cre8-typography-label-small();
-  padding-top: var(--cre8-button-padding-vertical-small);
-  padding-right: var(--cre8-button-padding-horizontal-small);
-  padding-bottom: var(--cre8-button-padding-vertical-small);
-  padding-left: var(--cre8-button-padding-horizontal-small);
-}
-
-/**
- * Large button
- */
-.cre8-c-danger-button--lg {
-  @include cre8-typography-label-large();
-  padding-top: var(--cre8-button-padding-vertical-large);
-  padding-right: var(--cre8-button-padding-horizontal-large);
-  padding-bottom: var(--cre8-button-padding-vertical-large);
-  padding-left: var(--cre8-button-padding-horizontal-large);
-}
-
-/**
-  * Icon within small button
-  */
-.cre8-c-danger-button--sm cre8-icon {
-  --cre8-icon-height: var(--cre8-icon-size-small);
-  --cre8-icon-width: var(--cre8-icon-size-small);
-
-  /**
-       * Button text directly after button icon within small button
-       */
-}
-
-/**
-  * Icon within large button
-  */
-.cre8-c-danger-button--lg cre8-icon {
-  --cre8-icon-height: var(--cre8-icon-size-large);
-  --cre8-icon-width: var(--cre8-icon-size-large);
-}
-
-::slotted(*) {
-  margin-right: 0;
-}
-/**
- * Button icon directly before button text
- */
-
-cre8-icon + .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: calc(8px * 1);
-  display: inline-flex;
-}
-
-/**
-   * Button icon directly after button text
-   */
-.cre8-c-danger-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
-  margin-left: calc(8px * 1);
-  display: inline-flex;
-}
-/**
-   * Button icon only
-   */
-.cre8-c-danger-button:has(.cre8-c-danger-button__text.cre8-u-is-vishidden) + cre8-icon {
-  border-radius: var(--cre8-border-radius-button);
-}
-.cre8-c-danger-button__text.cre8-u-is-vishidden + cre8-icon {
-  margin-left: 0px;
-  margin-right: 0px;
-  display: flex;
-}
-.cre8-c-danger-button__text.cre8-u-is-vishidden {
-  @include visuallyHidden();
-}
-
-.cre8-c-danger-button--primary.cre8-c-danger-button--loading {
-  --cre8-icon-fill: var(--cre8-color-content-knockout);
-}
-.cre8-c-danger-button--secondary.cre8-c-danger-button--loading,
-.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {
-  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);
-}
-
-/**
- * Aria live span
- */
-.cre8-u-is-vishidden {
-  --cre8-icon-height: 0px;
-  --cre8-icon-width: 0px;
-  max-width: fit-content;
-  min-width: 0px;
-  width: auto;
-  height: auto;
-  max-height: fit-content;
-  min-width: 0px;
-
-  @include visuallyHidden;
-}
-
-cre8-icon.cre8-u-is-vishidden {
-  @include visuallyHidden;
-}
-
-cre8-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-span.cre8-c-danger-button__icon {
-  margin-left: calc(8px * 1);
-  max-width: fit-content;
-  min-width: 0px;
-  width: auto;
-  height: auto;
-  max-height: fit-content;
-  min-width: 0px;
-}
-`;
-var m = Object.defineProperty, e = (b, t, u, f) => {
-  for (var c = void 0, d = b.length - 1, s; d >= 0; d--)
-    (s = b[d]) && (c = s(t, u, c) || c);
-  return c && m(t, u, c), c;
+const y = v`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}:host([fullWidth]){display:flex}.cre8-c-danger-button{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);width:var(--cre8-button-width, auto);height:var(--cre8-button-height, auto);min-width:var(--cre8-button-min-width, auto);min-height:var(--cre8-button-min-height, auto);justify-content:center;text-align:center;margin-top:var(--cre8-button-margin-top, 0);margin-bottom:var(--cre8-button-margin-bottom, 0);margin-left:var(--cre8-button-margin-left, 0);margin-right:var(--cre8-button-margin-right, 0);display:inline-flex;align-items:center;border-width:var(--cre8-border-width-button-default);box-shadow:var(--cre8-shadow-button);padding-top:var(--cre8-button-padding-vertical-medium);padding-right:var(--cre8-button-padding-horizontal-medium);padding-bottom:var(--cre8-button-padding-vertical-medium);padding-left:var(--cre8-button-padding-horizontal-medium);margin:0;cursor:pointer;border-style:var(--cre8-border-style-default);transition:revert;transform:revert;white-space:nowrap}.cre8-c-danger-button:hover,.cre8-c-danger-button:focus,.cre8-c-danger-button:active,.cre8-c-danger-button:focus-visible{border-style:var(--cre8-border-style-default);box-shadow:none;transform:revert;transition:revert}.cre8-c-danger-button.cre8-c-danger-button--primary{background:var(--cre8-color-button-primary-danger-bg);border-width:var(--cre8-border-width-button-default);border-color:var(--cre8-color-button-primary-danger-border);border-radius:var(--cre8-border-radius-button);box-shadow:var(--cre8-shadow-button);color:var(--cre8-color-button-primary-danger-content);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button--primary:hover,.cre8-c-danger-button.cre8-c-danger-button--primary:focus{box-shadow:none;--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-hover);color:var(--cre8-color-button-primary-danger-content-hover);border-color:var(--cre8-color-button-primary-danger-border-hover);background:var(--cre8-color-button-primary-danger-bg-hover);text-decoration:none}.cre8-c-danger-button.cre8-c-danger-button--primary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--primary:focus:focus{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--primary:active,.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading{box-shadow:none;color:var(--cre8-color-button-primary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);border-color:var(--cre8-color-button-primary-danger-border-active);background-color:var(--cre8-color-button-primary-danger-bg-active)}.cre8-c-danger-button.cre8-c-danger-button--primary:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--primary:disabled{box-shadow:none;background-color:var(--cre8-color-button-primary-danger-bg-disabled);border-color:var(--cre8-color-button-primary-danger-border-disabled);color:var(--cre8-color-button-primary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);cursor:not-allowed;outline:none}.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus-visible{outline:none;background-color:var(--cre8-color-button-primary-danger-bg-disabled);border-color:var(--cre8-color-button-primary-danger-border-disabled);color:var(--cre8-color-button-primary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-primary-danger-inverse-bg);border-color:var(--cre8-color-button-primary-danger-inverse-border);color:var(--cre8-color-button-primary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-primary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-primary-danger-inverse-border-hover);color:var(--cre8-color-button-primary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-primary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-primary-danger-inverse-bg-active);border-color:var(--cre8-color-button-primary-danger-inverse-border-active);color:var(--cre8-color-button-primary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-primary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-primary-danger-inverse-border-disabled);color:var(--cre8-color-button-primary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--secondary{background-color:var(--cre8-color-button-secondary-danger-bg);border-color:var(--cre8-color-button-secondary-danger-border);color:var(--cre8-color-button-secondary-danger-content);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);border-radius:var(--cre8-border-radius-button);border-width:var(--cre8-border-width-button-default)}.cre8-c-danger-button.cre8-c-danger-button--secondary:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary:focus{background-color:var(--cre8-color-button-secondary-danger-bg-hover);border-color:var(--cre8-color-button-secondary-danger-border-hover);color:var(--cre8-color-button-secondary-danger-content-hover);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--secondary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--secondary:focus:focus{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--secondary:active,.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading{transition:none;transform:none;background-color:var(--cre8-color-button-secondary-danger-bg-active);border-color:var(--cre8-color-button-secondary-danger-border-active);color:var(--cre8-color-button-secondary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled{box-shadow:none;background-color:var(--cre8-color-button-secondary-danger-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-border-disabled);color:var(--cre8-color-button-secondary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);outline:none;border-radius:var(--cre8-border-radius-button);border-width:var(--cre8-border-width-button-default);cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus-visible{outline:none;background-color:var(--cre8-color-button-secondary-danger-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-border-disabled);color:var(--cre8-color-button-secondary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-secondary-danger-inverse-bg);border-color:var(--cre8-color-button-secondary-danger-inverse-border);color:var(--cre8-color-button-secondary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-secondary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-secondary-danger-inverse-border-hover);color:var(--cre8-color-button-secondary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-secondary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-secondary-danger-inverse-bg-active);border-color:var(--cre8-color-button-secondary-danger-inverse-border-active);color:var(--cre8-color-button-secondary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-secondary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-inverse-border-disabled);color:var(--cre8-color-button-secondary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg);border-width:var(--cre8-border-width-button-default);border-color:var(--cre8-color-button-tertiary-danger-border);color:var(--cre8-color-button-tertiary-danger-content);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content);box-shadow:none}.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg-hover);border-width:var(--cre8-border-width-button-default, --cre8-border-width-none);border-color:var(--cre8-color-button-tertiary-danger-border-hover);color:var(--cre8-color-button-tertiary-danger-content-hover);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus:focus{outline:var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--tertiary:active,.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg-active);border-color:var(--cre8-color-button-tertiary-danger-border-active);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-tertiary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus-visible{outline:var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled{background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);border-color:rgba(0,0,0,0);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);outline:none;box-shadow:none;cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus{outline:none;box-shadow:none;background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus-visible{outline:none;box-shadow:none;background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg);border-color:var(--cre8-color-button-tertiary-danger-inverse-border);color:var(--cre8-color-button-tertiary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-hover);color:var(--cre8-color-button-tertiary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-tertiary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-active);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-active);color:var(--cre8-color-button-tertiary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-disabled);color:var(--cre8-color-button-tertiary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text{border-radius:var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);border-color:var(--cre8-color-button-secondary-danger-border);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-secondary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:active,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:focus-visible{outline:none}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--lg{padding:var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--sm{padding:var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret{padding:var(--cre8-button-padding-vertical-medium);border-radius:var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);height:100%;border-left:none !important;border-collapse:collapse;background:var(--cre8-color-button-secondary-danger-bg);border-color:var(--cre8-color-button-secondary-danger-border);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-secondary-danger-content);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:hover,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus{background:var(--cre8-color-button-secondary-danger-bg-hover);border-color:var(--cre8-color-button-secondary-danger-border-hover);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);outline:none;border-left:none;border-collapse:collapse}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:active,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus-visible{background:var(--cre8-color-button-secondary-danger-bg-active);border-color:var(--cre8-color-button-secondary-danger-border-active);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);outline:none;border-left:none;border-collapse:collapse}.cre8-c-danger-button--lg{padding:var(--cre8-button-padding-vertical-large)}.cre8-c-danger-button--sm{padding:var(--cre8-button-padding-vertical-small)}.cre8-c-danger-button--icon-only{padding:var(--cre8-button-padding-vertical-small);color:var(--cre8-icon-fill, currentColor)}.cre8-c-danger-button--full-width{width:100%;display:flex}.cre8-c-danger-button--sm{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);padding-top:var(--cre8-button-padding-vertical-small);padding-right:var(--cre8-button-padding-horizontal-small);padding-bottom:var(--cre8-button-padding-vertical-small);padding-left:var(--cre8-button-padding-horizontal-small)}.cre8-c-danger-button--lg{font-family:var(--cre8-typography-label-large-font-family);font-size:var(--cre8-typography-label-large-font-size);font-weight:var(--cre8-typography-label-large-font-weight);line-height:var(--cre8-typography-label-large-line-height);text-decoration:var(--cre8-typography-label-large-text-decoration);text-transform:var(--cre8-typography-label-large-text-transform);padding-top:var(--cre8-button-padding-vertical-large);padding-right:var(--cre8-button-padding-horizontal-large);padding-bottom:var(--cre8-button-padding-vertical-large);padding-left:var(--cre8-button-padding-horizontal-large)}.cre8-c-danger-button--sm cre8-icon{--cre8-icon-height: var(--cre8-icon-size-small);--cre8-icon-width: var(--cre8-icon-size-small)}.cre8-c-danger-button--lg cre8-icon{--cre8-icon-height: var(--cre8-icon-size-large);--cre8-icon-width: var(--cre8-icon-size-large)}::slotted(*){margin-right:0}cre8-icon+.cre8-c-danger-button__text:not(.cre8-u-is-vishidden){margin-left:0.5rem;display:inline-flex}.cre8-c-danger-button__text:not(.cre8-u-is-vishidden)+cre8-icon{margin-left:0.5rem;display:inline-flex}.cre8-c-danger-button:has(.cre8-c-danger-button__text.cre8-u-is-vishidden)+cre8-icon{border-radius:var(--cre8-border-radius-button)}.cre8-c-danger-button__text.cre8-u-is-vishidden+cre8-icon{margin-left:0px;margin-right:0px;display:flex}.cre8-c-danger-button__text.cre8-u-is-vishidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.cre8-c-danger-button--primary.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-content-knockout)}.cre8-c-danger-button--secondary.cre8-c-danger-button--loading,.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-u-is-vishidden{--cre8-icon-height: 0px;--cre8-icon-width: 0px;max-width:fit-content;min-width:0px;width:auto;height:auto;max-height:fit-content;min-width:0px;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}cre8-icon.cre8-u-is-vishidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}cre8-icon{display:flex;align-items:center;justify-content:center}span.cre8-c-danger-button__icon{margin-left:0.5rem;max-width:fit-content;min-width:0px;width:auto;height:auto;max-height:fit-content;min-width:0px}`;
+var m = Object.defineProperty, e = (b, o, u, f) => {
+  for (var a = void 0, i = b.length - 1, g; i >= 0; i--)
+    (g = b[i]) && (a = g(o, u, a) || a);
+  return a && m(o, u, a), a;
 };
 const l = class l extends p {
   constructor() {
     super(...arguments), this.text = "Button", this.variant = "primary", this.type = "button", this.iconRotateDegree = 0, this.iconPosition = void 0, this.ariaLive = "assertive";
   }
   formSubmit() {
-    const t = this._internals.form;
-    t && t.requestSubmit();
+    const o = this._internals.form;
+    o && o.requestSubmit();
   }
   formReset() {
-    const t = this._internals.form;
-    t && t.reset();
+    const o = this._internals.form;
+    o && o.reset();
   }
-  renderDangerButtonLink(t) {
+  renderDangerButtonLink(o) {
     return n`
           <a
-              href="${a(this.href)}"
-              class="${t}"
-              rel="${a(this.rel)}"
-              target="${a(this.target)}"
+              href="${c(this.href)}"
+              class="${o}"
+              rel="${c(this.rel)}"
+              target="${c(this.target)}"
           >
-            ${this.iconPosition === "before" ? n`<cre8-icon width="16" height="16" aria-hidden="true" svg="${a(this.svg)}">
-        </cre8-icon>` : i}
+            ${this.iconPosition === "before" ? n`<cre8-icon width="16" height="16" aria-hidden="true" svg="${c(this.svg)}">
+        </cre8-icon>` : d}
       <span
           class="${this.hideText ? "cre8-u-is-vishidden cre8-c-danger-button__text" : "cre8-c-danger-button__text"}"
       >
           ${this.text}
       </span>
-      ${this.iconPosition === "after" ? n`<cre8-icon width="16" height="16" aria-hidden="true" svg="${a(this.svg)}">
-        </cre8-icon> ` : i}
+      ${this.iconPosition === "after" ? n`<cre8-icon width="16" height="16" aria-hidden="true" svg="${c(this.svg)}">
+        </cre8-icon> ` : d}
       </a>
         `;
   }
@@ -581,7 +52,7 @@ const l = class l extends p {
     return n`
           <span class="cre8-c-danger-button__icon" aria-live="${this.ariaLive}" role="alert">
               <span class="cre8-u-is-vishidden">${this.loadingComplete ? "Loading Complete" : "Loading"}</span>
-              ${this.loadingComplete ? i : n`
+              ${this.loadingComplete ? d : n`
           <cre8-loading-spinner
               class="cre8-c-danger-button__loading-icon"
               inverted size="small"
@@ -590,7 +61,7 @@ const l = class l extends p {
               </span>`;
   }
   render() {
-    const t = g("cre8-c-danger-button", {
+    const o = s("cre8-c-danger-button", {
       "cre8-c-danger-button--primary": this.variant === "primary",
       "cre8-c-danger-button--secondary": this.variant === "secondary",
       "cre8-c-danger-button--tertiary": this.variant === "tertiary",
@@ -601,29 +72,29 @@ const l = class l extends p {
       "cre8-c-danger-button--loading": this.loading,
       "cre8-c-danger-button--inverted": this.inverted
     });
-    return this.hideText && (this.iconPosition = "after"), this.href ? n`${this.renderDangerButtonLink(t)}` : n`
+    return this.hideText && (this.iconPosition = "after"), this.href ? n`${this.renderDangerButtonLink(o)}` : n`
           <button
-            class="${t}"
+            class="${o}"
             part="button"
-            aria-disabled=${a(this.loading)}
+            aria-disabled=${c(this.loading)}
             ?disabled=${this.disabled}
             @click="${this._buttonClick}"
-            aria-expanded=${a(this.buttonAriaExpanded)}
+            aria-expanded=${c(this.buttonAriaExpanded)}
             type=${this.type}
           >
-            ${this.iconPosition === "before" && this.svg ? this.renderDangerButtonIconography() : i}
+            ${this.iconPosition === "before" && this.svg ? this.renderDangerButtonIconography() : d}
             <span
               class="${this.hideText ? "cre8-u-is-vishidden cre8-c-danger-button__text" : "cre8-c-danger-button__text"}"
             >
                 ${this.text}
             </span>
-            ${this.iconPosition === "after" && this.svg ? this.renderDangerButtonIconography() : i}
-            ${this.loading || this.loadingComplete ? this.renderDangerButtonLoading() : i}
+            ${this.iconPosition === "after" && this.svg ? this.renderDangerButtonIconography() : d}
+            ${this.loading || this.loadingComplete ? this.renderDangerButtonLoading() : d}
           </button>`;
   }
-  _buttonClick(t) {
+  _buttonClick(o) {
     if (this.loading)
-      t.stopPropagation();
+      o.stopPropagation();
     else
       switch (this.type) {
         case "submit":
@@ -638,61 +109,61 @@ const l = class l extends p {
 l.styles = [y];
 let r = l;
 e([
-  o()
+  t()
 ], r.prototype, "text");
 e([
-  o({ type: String })
+  t({ type: String })
 ], r.prototype, "variant");
 e([
-  o({ type: Boolean, reflect: !0 })
+  t({ type: Boolean, reflect: !0 })
 ], r.prototype, "disabled");
 e([
-  o()
+  t()
 ], r.prototype, "href");
 e([
-  o()
+  t()
 ], r.prototype, "target");
 e([
-  o()
+  t()
 ], r.prototype, "type");
 e([
-  o()
+  t()
 ], r.prototype, "rel");
 e([
-  o()
+  t()
 ], r.prototype, "svg");
 e([
-  o({ type: Number })
+  t({ type: Number })
 ], r.prototype, "iconRotateDegree");
 e([
-  o()
+  t()
 ], r.prototype, "iconFlipDirection");
 e([
-  o()
+  t()
 ], r.prototype, "iconPosition");
 e([
-  o()
+  t()
 ], r.prototype, "size");
 e([
-  o({ type: Boolean, reflect: !0 })
+  t({ type: Boolean, reflect: !0 })
 ], r.prototype, "hideText");
 e([
-  o({ type: Boolean, reflect: !0 })
+  t({ type: Boolean, reflect: !0 })
 ], r.prototype, "fullWidth");
 e([
-  o({ type: Boolean, reflect: !0 })
+  t({ type: Boolean, reflect: !0 })
 ], r.prototype, "loading");
 e([
-  o({ type: Boolean, reflect: !0 })
+  t({ type: Boolean, reflect: !0 })
 ], r.prototype, "loadingComplete");
 e([
-  o({ type: Boolean })
+  t({ type: Boolean })
 ], r.prototype, "inverted");
 e([
-  o()
+  t()
 ], r.prototype, "ariaLive");
 e([
-  o({ type: Boolean, reflect: !0 })
+  t({ type: Boolean, reflect: !0 })
 ], r.prototype, "buttonAriaExpanded");
 e([
   h("button")