@tmorrow/cre8-wc 1.2.4 → 1.2.6

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

@@ -1,1288 +1,302 @@
-import s from "classnames";
-import { css as p, nothing as i, html as n } from "lit";
-import { ifDefined as a } from "lit-html/directives/if-defined.js";
-import "../icon/icon.js";
-import "../loading-spinner/loading-spinner.js";
-import { property as t, query as m } from "lit/decorators.js";
-import { C as v } from "../../cre8-form-element-BymRdQUC.js";
-const h = p`@charset "UTF-8";
-.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import classnames from 'classnames';
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import '../icon/icon';
+import '../loading-spinner/loading-spinner';
+import { property, query } from 'lit/decorators.js';
+import styles from './danger-button.styles.js';
+import { Cre8FormElement } from '../cre8-form-element';
 /**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-: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;
+     * The size and state of buttons on the screen serve as visual cues for the user
+     * about what they can do and what they should do next.
+     * They indicate the availability and priority of the action on the page.
+     *
+     * - Buttons are a single call-to-action where a single click performs that action
+     * - Use Danger Buttons when you are performing an action that is potentially dangerous,
+     * such as permanently deleting information
+     * - Use a link instead of a button when you're navigating to another place
+     *
+     * ## How to Use
+     *
+     * Danger Buttons are distinguished by three key properties:
+     *
+     * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles;
+     *   each with large and small variations
+     * - **State**: Interaction state: hover/click (press), focus, disabled,
+     *   and submitting/loading (only for large buttons)
+     * - **Brand**: Styles determined by the site or component theme
+     *
+     * ### Usage Guidelines
+     *
+     * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define
+     * background, font style, and border colors. Large and small sizing assists with visual priority by defining button
+     * heights, left and right internal padding, and font-size.
+     *
+     * #### System Feedback
+     * Each button has a default and hover/click (press) state that give the user feedback
+     * that they have successfully interacted with a button.
+     * Button presses should always be combined with other types of timely system feedback.
+     * Examples of system feedback may be a page refresh, exposing additional controls or content,
+     * dialogs, alerts and notifications.
+     * If there is perceived a delay in system response, generally due to technical constraints,
+     * provide a progress or loading indicator.
+     *
+     * #### Button Text
+     *
+     * - Button text should be as short and simple as possible, ideally a maximum of 3 words.
+     * - Use Title Case for readability.
+     * - They should not include punctuation (exception: "Loading...").
+     * - They should not be used as an indicator of what happens on the next page, or as a substitute
+     * for a progress meter.
+     *
+     * #### Button Styling
+     *
+     * - DO use only the styles of the brand you are working on.
+     * - DO NOT combine styles, even if the page is co-branded.
+     *
+     * #### Button Sizes
+     * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.
+     * - DO NOT mix sizes of buttons when they are used together as a group.
+     *
+     * #### Input Pairing
+     *
+     * Primary and Secondary buttons may be paired with input fields.
+     * Only one Primary button may appear on each screen.
+     * Use the Secondary button when there are multiple in-context buttons
+     * and/or when there is an emphasized page level button.
+     * When used in a form context, the button's `type` needs to be `submit` to pass along form data.
+     *
+     * - DO use only large buttons with input fields.
+     * - DO NOT use small buttons with input fields.
+     *
+     */
+export class Cre8DangerButton extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        /**
+         *
+         * The button text. Should be as short and simple as possible, ideally a maximum of 3 words.
+         * - Use Title Case for readability.
+         * - Should not include punctuation (exception: "Loading...").
+         * - Should not be used as an indicator of what happens on the next page, or as a substitute for a progress meter.
+         */
+        this.text = 'Button';
+        /**
+         * Style variant
+         * - **primary** renders the button used for primary actions. Presents highest visual priority.
+         *   When grouped with other buttons, only one primary is allowed
+         * - **secondary** renders a secondary button. Presents a lower visual priority
+         * - **tertiary** renders a tertiary button. Presents the lowest visual priority.
+         *   Should be used in limited amounts - consider if a link (`<a>`) would be more appropriate
+         */
+        this.variant = 'primary';
+        /**
+         * Type of button.
+         * - **button** (default) button has no default behavior and does nothing unless provided some sort
+         * of client-side trigger
+         * - **submit** button for submitting form data to a server
+         */
+        this.type = 'button';
+        /**
+         * rotate is used for <cre8-icon> to set the arrow in the correct direction
+         */
+        this.iconRotateDegree = 0;
+        /**
+         * Icon position. Must include the name of the icon with `iconName`
+         *
+         * - **before** places the icon before the button text
+         * - **after** places the icon after the button text
+         */
+        this.iconPosition = undefined;
+        /**
+         * Controls whether your loading status update to voiceover users will occur
+         * immediately (used for more urgently needed updates) using `assertive` or at the next convenient
+         * pause in their navigation using `polite`.
+         */
+        this.ariaLive = 'assertive';
     }
-  }
-  @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;
+    formSubmit() {
+        const form = this._internals.form;
+        if (form) {
+            form.requestSubmit();
+        }
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    formReset() {
+        const form = this._internals.form;
+        if (form) {
+            form.reset();
+        }
     }
-  }
-}
-@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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-:host {
-  display: inline-flex;
-}
-
-:host([fullWidth]) {
-  display: flex;
-}
-
-/**
- * 1) Danger Button or link that has functionality to it
- */
-/**
- * Primary button
- */
-.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 primary and secondary button
-  */
-}
-.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 {
-  /**
-  * Secondary button
-  * The icon button shares the styles of the standard secondary button
-  */
-}
-.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 {
-  /**
-  * Tertiary button
-  */
-}
-.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: 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;
-}
-.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);
-}
-
-/**
- * Full-width button
- */
-.cre8-c-danger-button--full-width {
-  width: 100%;
-  display: flex;
-}
-
-/**
- * Small button
- */
-.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);
-}
-
-/**
- * Large button
- */
-.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);
-}
-
-/**
-  * 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: 0.5rem;
-  display: inline-flex;
-}
-
-/**
-   * Button icon directly after button text
-   */
-.cre8-c-danger-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
-  margin-left: 0.5rem;
-  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 {
-  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);
-}
-
-/**
- * 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;
-  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 y = Object.defineProperty, e = (g, o, u, f) => {
-  for (var c = void 0, d = g.length - 1, b; d >= 0; d--)
-    (b = g[d]) && (c = b(o, u, c) || c);
-  return c && y(o, u, c), c;
-};
-const l = class l extends v {
-  constructor() {
-    super(...arguments), this.text = "Button", this.variant = "primary", this.type = "button", this.iconRotateDegree = 0, this.iconPosition = void 0, this.ariaLive = "assertive";
-  }
-  formSubmit() {
-    const o = this._internals.form;
-    o && o.requestSubmit();
-  }
-  formReset() {
-    const o = this._internals.form;
-    o && o.reset();
-  }
-  renderDangerButtonLink(o) {
-    return n`
+    renderDangerButtonLink(componentClassName) {
+        return html `
           <a
-              href="${a(this.href)}"
-              class="${o}"
-              rel="${a(this.rel)}"
-              target="${a(this.target)}"
+              href="${ifDefined(this.href)}"
+              class="${componentClassName}"
+              rel="${ifDefined(this.rel)}"
+              target="${ifDefined(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'
+            ? html `<cre8-icon width="16" height="16" aria-hidden="true" svg="${ifDefined(this.svg)}">
+        </cre8-icon>`
+            : nothing}
       <span
-          class="${this.hideText ? "cre8-u-is-vishidden cre8-c-danger-button__text" : "cre8-c-danger-button__text"}"
+          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'
+            ? html `<cre8-icon width="16" height="16" aria-hidden="true" svg="${ifDefined(this.svg)}">
+        </cre8-icon> `
+            : nothing}
       </a>
         `;
-  }
-  renderDangerButtonIconography() {
-    return n`
+    }
+    renderDangerButtonIconography() {
+        return html `
         <cre8-icon width="16" height="16" aria-hidden="true" svg="${this.svg}"></cre8-icon>
       `;
-  }
-  renderDangerButtonLoading() {
-    return n`
+    }
+    renderDangerButtonLoading() {
+        return html `
           <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`
+              <span class="cre8-u-is-vishidden">${this.loadingComplete ? 'Loading Complete' : 'Loading'}</span>
+              ${!this.loadingComplete
+            ? html `
           <cre8-loading-spinner
               class="cre8-c-danger-button__loading-icon"
               inverted size="small"
               aria-hidden="true"
-          ></cre8-loading-spinner>`}
+          ></cre8-loading-spinner>`
+            : nothing}
               </span>`;
-  }
-  render() {
-    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",
-      "cre8-c-danger-button--full-width": this.fullWidth === !0,
-      "cre8-c-danger-button--sm": this.size === "sm",
-      "cre8-c-danger-button--lg": this.size === "lg",
-      "cre8-c-danger-button--icon-only": this.hideText,
-      "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(o)}` : n`
+    }
+    render() {
+        const componentClassName = classnames('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',
+            'cre8-c-danger-button--full-width': this.fullWidth === true,
+            'cre8-c-danger-button--sm': this.size === 'sm',
+            'cre8-c-danger-button--lg': this.size === 'lg',
+            'cre8-c-danger-button--icon-only': this.hideText,
+            'cre8-c-danger-button--loading': this.loading,
+            'cre8-c-danger-button--inverted': this.inverted,
+        });
+        if (this.hideText) {
+            this.iconPosition = 'after';
+        }
+        if (this.href) {
+            return html `${this.renderDangerButtonLink(componentClassName)}`;
+        }
+        return html `
           <button
-            class="${o}"
+            class="${componentClassName}"
             part="button"
-            aria-disabled=${a(this.loading)}
+            aria-disabled=${ifDefined(this.loading)}
             ?disabled=${this.disabled}
             @click="${this._buttonClick}"
-            aria-expanded=${a(this.buttonAriaExpanded)}
+            aria-expanded=${ifDefined(this.buttonAriaExpanded)}
             type=${this.type}
           >
-            ${this.iconPosition === "before" && this.svg ? this.renderDangerButtonIconography() : i}
+            ${this.iconPosition === 'before' && this.svg
+            ? this.renderDangerButtonIconography() : nothing}
             <span
-              class="${this.hideText ? "cre8-u-is-vishidden cre8-c-danger-button__text" : "cre8-c-danger-button__text"}"
+              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() : nothing}
+            ${this.loading || this.loadingComplete
+            ? this.renderDangerButtonLoading() : nothing}
           </button>`;
-  }
-  _buttonClick(o) {
-    if (this.loading)
-      o.stopPropagation();
-    else
-      switch (this.type) {
-        case "submit":
-          this.formSubmit();
-          break;
-        case "reset":
-          this.formReset();
-          break;
-      }
-  }
-};
-l.styles = [h];
-let r = l;
-e([
-  t()
-], r.prototype, "text");
-e([
-  t({ type: String })
-], r.prototype, "variant");
-e([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-e([
-  t()
-], r.prototype, "href");
-e([
-  t()
-], r.prototype, "target");
-e([
-  t()
-], r.prototype, "type");
-e([
-  t()
-], r.prototype, "rel");
-e([
-  t()
-], r.prototype, "svg");
-e([
-  t({ type: Number })
-], r.prototype, "iconRotateDegree");
-e([
-  t()
-], r.prototype, "iconFlipDirection");
-e([
-  t()
-], r.prototype, "iconPosition");
-e([
-  t()
-], r.prototype, "size");
-e([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "hideText");
-e([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "fullWidth");
-e([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "loading");
-e([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "loadingComplete");
-e([
-  t({ type: Boolean })
-], r.prototype, "inverted");
-e([
-  t()
-], r.prototype, "ariaLive");
-e([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "buttonAriaExpanded");
-e([
-  m("button")
-], r.prototype, "field");
-customElements.get("cre8-danger-button") === void 0 && customElements.define("cre8-danger-button", r);
-export {
-  r as Cre8DangerButton,
-  r as default
-};
+    }
+    _buttonClick(e) {
+        if (this.loading) {
+            e.stopPropagation();
+        }
+        else {
+            switch (this.type) {
+                case 'submit':
+                    this.formSubmit();
+                    break;
+                case 'reset':
+                    this.formReset();
+                    break;
+                // no default
+            }
+        }
+    }
+}
+Cre8DangerButton.styles = [styles];
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], Cre8DangerButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8DangerButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "href", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "target", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "rel", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "svg", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8DangerButton.prototype, "iconRotateDegree", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "iconFlipDirection", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "iconPosition", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8DangerButton.prototype, "hideText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8DangerButton.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8DangerButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8DangerButton.prototype, "loadingComplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8DangerButton.prototype, "inverted", void 0);
+__decorate([
+    property()
+], Cre8DangerButton.prototype, "ariaLive", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8DangerButton.prototype, "buttonAriaExpanded", void 0);
+__decorate([
+    query('button')
+], Cre8DangerButton.prototype, "field", void 0);
+if (customElements.get('cre8-danger-button') === undefined) {
+    customElements.define('cre8-danger-button', Cre8DangerButton);
+}
+export default Cre8DangerButton;
+//# sourceMappingURL=danger-button.js.map