@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/button/button.js

@@ -1,984 +1,237 @@
-import { css as v, html as n, nothing as i } from "lit";
-import { ifDefined as c } from "lit-html/directives/if-defined.js";
-import { property as e, query as y } from "lit/decorators.js";
-import { Cre8FormElement as h } from "../cre8-form-element.js";
-import "../../icon-D22g8aWB.js";
-import "../loading-spinner/loading-spinner.js";
-const g = v`
-@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: inline-flex;
-}
-:host([fullWidth]) {
-  display: flex;
-
-}
-/**
- * 1) Button or link that has functionality to it
- */
-
-/**
- * Primary button
- */
-.cre8-c-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-button--primary {
-    background: var(--cre8-color-button-primary-bg);
-    border-width: var(--cre8-border-width-button-default);
-    border-color: var(--cre8-color-button-primary-border);
-    border-radius: var(--cre8-border-radius-button);
-    box-shadow: var(--cre8-shadow-button);
-    color: var(--cre8-color-button-primary-content);
-    --cre8-icon-fill: var(--cre8-color-button-primary-content);
-    &:hover,
-    &:focus {
-      box-shadow: none;
-      --cre8-icon-fill: var(--cre8-color-button-primary-content-hover);
-      color: var(--cre8-color-button-primary-content-hover);
-      border-color: var(--cre8-color-button-primary-border-hover);
-      background: var(--cre8-color-button-primary-bg-hover);
-      text-decoration: none;
-      &:focus {
-        @includefocus();
-      }
-    }
-    &:focus-visible,
-    &:active,
-    &.cre8-c-button--loading {
-      box-shadow: none;
-      color: var(--cre8-color-button-primary-content-active);
-      --cre8-icon-fill: var(--cre8-color-button-primary-content-active);
-      border-color: var(--cre8-color-button-primary-border-active);
-      background-color: var(--cre8-color-button-primary-bg-active);
-    }
-    &:focus-visible{
-      @includefocus();
-    }
-    &.cre8-c-button--loading{
-      cursor: not-allowed;
-    }
-    /**
- * Disabled primary and secondary button
- */
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-primary-bg-disabled);
-    border-color: var(--cre8-color-button-primary-border-disabled);
-    color: var(--cre8-color-button-primary-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);
-    cursor: not-allowed;
-    outline: none;
-    &:hover,
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      background-color: var(--cre8-color-button-primary-bg-disabled);
-      border-color: var(--cre8-color-button-primary-border-disabled);
-      color: var(--cre8-color-button-primary-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);
-    }
-  }
-}
-
-/**
-* Primary button inverse
-*/
-&.cre8-c-button--primary.cre8-c-button--inverse {
-background: var(--cre8-color-button-primary-inverse-bg);
-border-width: var(--cre8-border-width-button-default);
-border-color: var(--cre8-color-button-primary-inverse-border);
-border-radius: var(--cre8-border-radius-button);
-box-shadow: var(--cre8-shadow-button);
-color: var(--cre8-color-button-primary-inverse-content);
---cre8-icon-fill: var(--cre8-color-button-primary-inverse-content);
-&:hover,
-&:focus {
-  box-shadow: none;
-  --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-hover);
-  color: var(--cre8-color-button-primary-inverse-content-hover);
-  border-color: var(--cre8-color-button-primary-inverse-border-hover);
-  background: var(--cre8-color-button-primary-inverse-bg-hover);
-  text-decoration: none;
-  &:focus {
-    @includefocus();
-  }
-}
-&:focus-visible,
-&:active,
-&.cre8-c-button--loading {
-  box-shadow: none;
-  color: var(--cre8-color-button-primary-inverse-content-active);
-  --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-active);
-  border-color: var(--cre8-color-button-primary-inverse-border-active);
-  background-color: var(--cre8-color-button-primary-inverse-bg-active);
-}
-&:focus-visible{
-  @includefocus();
-}
-&.cre8-c-button--loading{
-  cursor: not-allowed;
-}
-
-&:disabled {
-  box-shadow: none;
-  background-color: var(--cre8-color-button-primary-inverse-bg-disabled);
-  border-color: var(--cre8-color-button-primary-inverse-border-disabled);
-  color: var(--cre8-color-button-primary-inverse-content-disabled);
-  --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);
-  cursor: not-allowed;
-  outline: none;
-  &:hover,
-  &:focus,
-  &:active,
-  &:focus-visible {
-    outline: none;
-    background-color: var(--cre8-color-button-primary-inverse-bg-disabled);
-    border-color: var(--cre8-color-button-primary-inverse-border-disabled);
-    color: var(--cre8-color-button-primary-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);
-  }
-}
-}
-
-/**
- * Secondary button
- * The icon button shares the styles of the standard secondary button
- */
-  &.cre8-c-button--secondary {
-    background-color: var(--cre8-color-button-secondary-bg);
-    border-color: var(--cre8-color-button-secondary-border);
-    color: var(--cre8-color-button-secondary-content);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-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-bg-hover);
-    border-color: var(--cre8-color-button-secondary-border-hover);
-    color: var(--cre8-color-button-secondary-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);
-    &:focus {
-      @includefocus();
-    }
-  }
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    transition: none;
-    transform: none;
-    background-color: var(--cre8-color-button-secondary-bg-active);
-    border-color: var(--cre8-color-button-secondary-border-active);
-    color: var(--cre8-color-button-secondary-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
-  }
-  &:focus-visible {
-    @includefocus();
-  }
-  &.cre8-c-button--loading {
-    cursor: not-allowed;
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-secondary-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-border-disabled);
-    color: var(--cre8-color-button-secondary-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-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-bg-disabled);
-      border-color: var(--cre8-color-button-secondary-border-disabled);
-      color: var(--cre8-color-button-secondary-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);
-    }
-  }
-}
-
- /**
- * Secondary button neutral
- */
- &.cre8-c-button--secondary.cre8-c-button--neutral {
-    background-color: var(--cre8-color-button-secondary-neutral-bg);
-    border-color: var(--cre8-color-button-secondary-neutral-border);
-    color: var(--cre8-color-button-secondary-neutral-content);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-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-neutral-bg-hover);
-    border-color: var(--cre8-color-button-secondary-neutral-border-hover);
-    color: var(--cre8-color-button-secondary-neutral-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-hover);
-    &:focus {
-      @includefocus();
-    }
-  }
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    transition: none;
-    transform: none;
-    background-color: var(--cre8-color-button-secondary-neutral-bg-active);
-    border-color: var(--cre8-color-button-secondary-neutral-border-active);
-    color: var(--cre8-color-button-secondary-neutral-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-active);
-  }
-  &:focus-visible {
-    @includefocus();
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-neutral-border-disabled);
-    color: var(--cre8-color-button-secondary-neutral-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-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-neutral-bg-disabled);
-      border-color: var(--cre8-color-button-secondary-neutral-border-disabled);
-      color: var(--cre8-color-button-secondary-neutral-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);
-    }
-  }
- }
-
-/**
- * Secondary button inverse
- */
- &.cre8-c-button--secondary.cre8-c-button--inverse {
-  background-color: var(--cre8-color-button-secondary-inverse-bg);
-  border-color: var(--cre8-color-button-secondary-inverse-border);
-  color: var(--cre8-color-button-secondary-inverse-content);
-  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-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-inverse-bg-hover);
-  border-color: var(--cre8-color-button-secondary-inverse-border-hover);
-  color: var(--cre8-color-button-secondary-inverse-content-hover);
-  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-hover);
-  &:focus {
-    @includefocus();
-  }
-}
-&:focus-visible,
-&:active,
-&.cre8-c-button--loading {
-  transition: none;
-  transform: none;
-  background-color: var(--cre8-color-button-secondary-inverse-bg-active);
-  border-color: var(--cre8-color-button-secondary-inverse-border-active);
-  color: var(--cre8-color-button-secondary-inverse-content-active);
-  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-active);
-}
-&:focus-visible {
-  @includefocus();
-}
-
-&:disabled {
-  box-shadow: none;
-  background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);
-  border-color: var(--cre8-color-button-secondary-inverse-border-disabled);
-  color: var(--cre8-color-button-secondary-inverse-content-disabled);
-  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-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-inverse-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-inverse-border-disabled);
-    color: var(--cre8-color-button-secondary-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);
-  }
-}
-}
-
-  /**
- * Secondary button neutral inverse
- */
- &.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse {
-  background-color: var(--cre8-color-button-secondary-neutral-inverse-bg);
-  border-color: var(--cre8-color-button-secondary-neutral-inverse-border);
-  color: var(--cre8-color-button-secondary-neutral-inverse-content);
-  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content);
-  border-radius: var(--cre8-border-radius-button);
-  border-width: var(--cre8-border-width-button-default);
-
-&:hover,
-&:focus {
-  @includefocus();
-  background-color: var(--cre8-color-button-secondary-neutral-bg-active);
-  border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);
-  outline-color: var(--cre8-color-button-secondary-neutral-inverse-outline);
-  color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
-  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);
-}
-
-&:focus-visible,
-&:active,
-&.cre8-c-button--loading {
-  transition: none;
-  transform: none;
-  background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-active);
-  border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);
-  color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
-  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);
-}
-&:focus-visible {
-  @includefocus();
-}
-
-&:disabled {
-  box-shadow: none;
-  background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);
-  border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);
-  color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
-  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-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-neutral-inverse-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);
-    color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
-  }
-}
-}
-
-  /**
- * Tertiary button
- */
-  &.cre8-c-button--tertiary {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-bg);
-    border-width: var(--cre8-border-width-button-default);
-    border-color: var(--cre8-color-button-tertiary-border);
-    color: var(--cre8-color-button-tertiary-content);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-content);
-    box-shadow: none;
-    &:hover,
-    &:focus {
-      border-radius: var(--cre8-border-radius-button);
-      background-color: var(--cre8-color-button-tertiary-bg-hover);
-      border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
-      border-color: var(--cre8-color-button-tertiary-border-hover);
-      color: var(--cre8-color-button-tertiary-content-hover);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-hover);
-      &:focus {
-        @includefocusTertiary();
-      }
-    }
-
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-bg-active);
-    border-color: var(--cre8-color-button-tertiary-border-active);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-tertiary-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-content-active);
-  }
-  &:focus-visible {
-    @includefocusTertiary();
-  }
-  &.cre8-c-button--loading {
-    cursor: not-allowed;
-  }
-  &:disabled {
-    background-color: var(--cre8-color-button-tertiary-bg-disabled);
-    border-color: transparent;
-    color: var(--cre8-color-button-tertiary-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
-    outline: none;
-    box-shadow: none;
-    cursor: not-allowed;
-
-    &:hover,
-    &:focus {
-      outline: none;
-      box-shadow: none;
-      background-color: var(--cre8-color-button-tertiary-bg-disabled);
-      color: var(--cre8-color-button-tertiary-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
-    }
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: none;
-      background-color: var(--cre8-color-button-tertiary-bg-disabled);
-      color: var(--cre8-color-button-tertiary-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
-    }
-  }
-}
-
- /**
- * Tertiary button neutral
- */
- &.cre8-c-button--tertiary.cre8-c-button--neutral {
-  background-color: var(--cre8-color-button-tertiary-neutral-bg);
-  border-color: var(--cre8-color-button-tertiary-border);
-  color: var(--cre8-color-button-tertiary-neutral-content);
-  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content);
-  border-radius: var(--cre8-border-radius-button);
-  border-width: var(--cre8-border-width-button-default);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-button-tertiary-neutral-bg-hover);
-    border-color: var(--cre8-color-button-tertiary-neutral-border-hover);
-    color: var(--cre8-color-button-tertiary-neutral-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-hover);
-    outline-color: var(--cre8-color-button-tertiary-neutral-outline);
-  }
-
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    transition: none;
-    transform: none;
-    background-color: var(--cre8-color-button-tertiary-neutral-bg-active);
-    border-color: var(--cre8-color-button-tertiary-neutral-border-active);
-    color: var(--cre8-color-button-tertiary-neutral-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-active);
-  }
-
-  &:focus-visible {
-    @includefocus();
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-tertiary-neutral-bg-disabled);
-    border-color: var(--cre8-color-button-tertiary-neutral-border-disabled);
-    color: var(--cre8-color-button-tertiary-neutral-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-disabled);
-    outline: none;
-    border-radius: var(--cre8-border-radius-button);
-    border-width: var(--cre8-border-width-button-default);
-
-    cursor: not-allowed;
-  }
- }
-
+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 { html, nothing, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, query } from 'lit/decorators.js';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../icon/icon';
+import '../loading-spinner/loading-spinner';
+import styles from './button.styles.js';
 /**
- * Tertiary button inverse
+ * 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 buttons when you are performing an action which is almost always on the same page
+ * - Use a link instead of a button when you're navigating to another place
+ *
+ * ## How to Use
+ *
+ * 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 With Icon
+ *
+ * For button with icon:
+ * - **iconRotateDegree** & **iconFlipDirection** props are optional.
+ * - They are used to set up the correct direction for icons, for example,
+ * arrows, caret up or caret down.
+ *
+ * #### 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.
+ *
  */
- &.cre8-c-button--tertiary.cre8-c-button--inverse {
-  border-radius: var(--cre8-border-radius-button);
-  background-color: var(--cre8-color-button-tertiary-inverse-bg);
-  border-width: var(--cre8-border-width-button-default);
-  border-color: var(--cre8-color-button-tertiary-inverse-border);
-  color: var(--cre8-color-button-tertiary-inverse-content);
-  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content);
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-inverse-bg-hover);
-    border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
-    border-color: var(--cre8-color-button-tertiary-inverse-border-hover);
-    color: var(--cre8-color-button-tertiary-inverse-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-hover);
-    outline-color: var(--cre8-color-button-tertiary-inverse-outline);
-  }
-
-&:focus-visible,
-&:active,
-&.cre8-c-button--loading {
-  border-radius: var(--cre8-border-radius-button);
-  background-color: var(--cre8-color-button-tertiary-inverse-bg-active);
-  border-color: var(--cre8-color-button-tertiary-inverse-border-active);
-  border-width: var(--cre8-border-width-button-default);
-  color: var(--cre8-color-button-tertiary-inverse-content-active);
-  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-active);
-  outline-color: var(--cre8-color-button-tertiary-inverse-outline);
-}
-
-&.cre8-c-button--loading {
-  cursor: not-allowed;
-}
-&:disabled {
-  background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
-  border-color: transparent;
-  color: var(--cre8-color-button-tertiary-inverse-content-disabled);
-  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
-  outline: none;
-  box-shadow: none;
-  cursor: not-allowed;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: none;
-    background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
-    color: var(--cre8-color-button-tertiary-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
-  }
-  &:active,
-  &:focus-visible {
-    outline: none;
-    box-shadow: none;
-    background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
-    color: var(--cre8-color-button-tertiary-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
-  }
-}
-}
-
- /**
- * Tertiary Neutral button inverse
- */
- &.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse {
-  border-radius: var(--cre8-border-radius-button);
-  background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg);
-  border-width: var(--cre8-border-width-button-default);
-  color: var(--cre8-color-button-tertiary-neutral-inverse-content);
-  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content);
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-hover);
-    border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
-    border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-hover);
-    color: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);
-    outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);
-  }
-
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-active);
-    border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-active);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-tertiary-neutral-inverse-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-active);
-    outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);
-  }
-
-  &.cre8-c-button--loading {
-    cursor: not-allowed;
-  }
-
-  &:disabled {
-    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-disabled);
-    border-color: transparent;
-    color: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);
-    outline: none;
-    box-shadow: none;
-    cursor: not-allowed;
-  }
- }
-
-  &.cre8-c-button.cre8-c-button--secondary.cre8-c-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-border);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-secondary-content);
-    &:active,
-    &:focus-visible {
-      outline: none;
-    }
-    &.cre8-c-button--lg {
-      padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);
+export class Cre8Button 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';
+        /**
+         * iconRotateDegree 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;
+        /**
+         * Size variants add another way to increase or decrease visual priority of a button.
+         * - **sm** Shrinks the button typography and overall size from the default. Use when vertical space is constrained.
+         * - **md** This is the default value for the size.
+         * - **lg** Increases the button typography and overall size from the default.
+         */
+        this.size = 'md';
+        /**
+         * 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';
     }
-    &.cre8-c-button--sm {
-      padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);
+    formSubmit() {
+        const form = this._internals.form;
+        if (form) {
+            form.requestSubmit();
+        }
     }
-  }
-
-  &.cre8-c-button.cre8-c-button--icon-only.cre8-c-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-bg);
-    border-color: var(--cre8-color-button-secondary-border);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-secondary-content);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-content);
-
-    &:hover,
-    &:focus {
-      background: var(--cre8-color-button-secondary-bg-hover);
-      border-color: var(--cre8-color-button-secondary-border-hover);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);
-      outline: none;
-      border-left: none;
-      border-collapse: collapse;
+    formReset() {
+        const form = this._internals.form;
+        if (form) {
+            form.reset();
+        }
     }
-    &:active,
-    &:focus-visible {
-      background: var(--cre8-color-button-secondary-bg-active);
-      border-color: var(--cre8-color-button-secondary-border-active);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
-      outline: none;
-      border-left: none;
-      border-collapse: collapse;
-    }
-  }
-}
-
-.cre8-c-button--lg {
-  padding: var(--cre8-button-padding-vertical-large);
-}
-.cre8-c-button--sm {
-  padding: var(--cre8-button-padding-vertical-small);
-}
-
-.cre8-c-button--icon-only {
-  padding: var(--cre8-button-padding-vertical-small);
-  color: var(--cre8-icon-fill, currentColor);
-}
-
-/**
- * Full-width button
- */
-.cre8-c-button--full-width {
-  width: 100%;
-  display: flex;
-}
-
-/**
- * Small button
- */
-.cre8-c-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);
-}
-
-/**
- * Small button sized for icon only
- */
- .cre8-c-button--sm.cre8-c-button--icon-only {
-  @include cre8-typography-label-small();
-  padding-top: var(--cre8-button-padding-vertical-small-icon-only);
-  padding-right: var(--cre8-button-padding-horizontal-small-icon-only);
-  padding-bottom: var(--cre8-button-padding-vertical-small-icon-only);
-  padding-left: var(--cre8-button-padding-horizontal-small-icon-only);
-}
-
-/**
- * Large button
- */
-.cre8-c-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);
-}
-
-/**
- * Large button sized for icon only
- */
- .cre8-c-button--lg.cre8-c-button--icon-only {
-  @include cre8-typography-label-large();
-  padding-top: var(--cre8-button-padding-vertical-large-icon-only);
-  padding-right: var(--cre8-button-padding-horizontal-large-icon-only);
-  padding-bottom: var(--cre8-button-padding-vertical-large-icon-only);
-  padding-left: var(--cre8-button-padding-horizontal-large-icon-only);
-}
-
-/**
-  * Icon within small button
-  */
-.cre8-c-button--sm cre8-icon-legacy {
-  --cre8-icon-height: var(--cre8-icon-size-small);
-  --cre8-icon-width: var(--cre8-icon-size-small);
-}
-
-.cre8-c-button--sm cre8-icon {
-  svg {
-    height: size(1.75);
-    width: size(1.75);
-  }
-}
-
-/**
-  * Icon within large button
-  */
-.cre8-c-button--lg cre8-icon-legacy {
-  --cre8-icon-height: var(--cre8-icon-size-large);
-  --cre8-icon-width: var(--cre8-icon-size-large);
-}
-
-.cre8-c-button--lg cre8-icon {
-  svg {
-    height: size(2.25);
-    width: size(2.25);
-  }
-}
-
-::slotted(*) {
-  margin-right: 0;
-}
-/**
- * Button icon directly before button text
- */
-
-cre8-icon-legacy + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: size(1);
-}
-
-cre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: size(1);
-}
-
-/**
-   * Button icon directly after button text
-   */
-.cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon-legacy {
-  margin-left: size(1);
-}
-
-.cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
-  margin-left: size(1);
-}
-/**
-   * Button icon only
-   */
-.cre8-c-button:has(.cre8-c-button__text.cre8-u-is-vishidden) + cre8-icon-legacy {
-  border-radius: var(--cre8-border-radius-button);
-}
-
-.cre8-c-button:has(.cre8-c-button__text.cre8-u-is-vishidden) + cre8-icon {
-  border-radius: var(--cre8-border-radius-button);
-}
-
-.cre8-c-button__text.cre8-u-is-vishidden + cre8-icon-legacy {
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
-.cre8-c-button__text.cre8-u-is-vishidden + cre8-icon {
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
-.cre8-c-button__text.cre8-u-is-vishidden {
-  @include visuallyHidden();
-}
-
-.cre8-c-button--primary.cre8-c-button--loading {
-  --cre8-icon-fill: var(--cre8-color-content-knockout);
-}
-.cre8-c-button--secondary.cre8-c-button--loading,
-.cre8-c-button--tertiary.cre8-c-button--loading {
-  --cre8-icon-fill: var(--cre8-color-button-secondary-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-legacy.cre8-u-is-vishidden {
-  @include visuallyHidden();
-}
-
-span.cre8-c-button__icon {
-  margin-left: size(1);
-  max-width: fit-content;
-  min-width: 0px;
-  width: auto;
-  height: auto;
-  max-height: fit-content;
-  min-width: 0px;
-}
-
-cre8-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    height: size(2);
-    width: size(2);
-  }
-}
-`;
-var f = Object.defineProperty, o = (b, t, u, p) => {
-  for (var a = void 0, l = b.length - 1, s; l >= 0; l--)
-    (s = b[l]) && (a = s(t, u, a) || a);
-  return a && f(t, u, a), a;
-};
-const d = class d extends h {
-  constructor() {
-    super(...arguments), this.text = "Button", this.variant = "primary", this.type = "button", this.iconRotateDegree = 0, this.iconPosition = void 0, this.size = "md", this.ariaLive = "assertive";
-  }
-  formSubmit() {
-    const t = this._internals.form;
-    t && t.requestSubmit();
-  }
-  formReset() {
-    const t = this._internals.form;
-    t && t.reset();
-  }
-  generateIconBefore() {
-    if (this.iconPosition === "before") {
-      if (this.iconName)
-        return n`<cre8-icon-legacy slot="before" aria-hidden="true" name="${c(this.iconName)}">
+    generateIconBefore() {
+        if (this.iconPosition === 'before') {
+            if (this.iconName) {
+                return html `<cre8-icon-legacy slot="before" aria-hidden="true" name="${ifDefined(this.iconName)}">
                 </cre8-icon-legacy>`;
-      if (this.svg)
-        return n`<cre8-icon slot="before" aria-hidden="true"
+            }
+            if (this.svg) {
+                return html `<cre8-icon slot="before" aria-hidden="true"
                 svg='${this.svg}' rotate="${Number(this.iconRotateDegree)}" flip="${this.iconFlipDirection}">
                 </cre8-icon>`;
+            }
+        }
+        return nothing;
     }
-    return i;
-  }
-  generateIconAfter() {
-    if (this.iconPosition === "after") {
-      if (this.iconName)
-        return n`<cre8-icon-legacy slot="after" aria-hidden="true" name="${c(this.iconName)}">
+    generateIconAfter() {
+        if (this.iconPosition === 'after') {
+            if (this.iconName) {
+                return html `<cre8-icon-legacy slot="after" aria-hidden="true" name="${ifDefined(this.iconName)}">
                 </cre8-icon-legacy>`;
-      if (this.svg)
-        return n`<cre8-icon slot="after" aria-hidden="true"
+            }
+            if (this.svg) {
+                return html `<cre8-icon slot="after" aria-hidden="true"
                 svg='${this.svg}' rotate="${Number(this.iconRotateDegree)}" flip="${this.iconFlipDirection}">
                 </cre8-icon>`;
+            }
+        }
+        return nothing;
     }
-    return i;
-  }
-  // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.
-  /* eslint complexity: ["warn", 10] */
-  render() {
-    const t = this.componentClassNames("cre8-c-button", {
-      "cre8-c-button--primary": this.variant === "primary",
-      "cre8-c-button--secondary": this.variant === "secondary",
-      "cre8-c-button--tertiary": this.variant === "tertiary",
-      "cre8-c-button--full-width": this.fullWidth === !0,
-      "cre8-c-button--sm": this.size === "sm",
-      "cre8-c-button--lg": this.size === "lg",
-      "cre8-c-button--icon-only": this.hideText,
-      "cre8-c-button--split-button-text": this.splitButtonType === "text",
-      "cre8-c-button--split-button-caret": this.splitButtonType === "caret",
-      "cre8-c-button--neutral": this.neutral,
-      "cre8-c-button--inverse": this.inverse,
-      "cre8-c-button--loading": this.loading
-    });
-    return this.hideText && (this.iconPosition = "after"), this.href ? n`
+    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.
+    /* eslint complexity: ["warn", 10] */
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-button', {
+            'cre8-c-button--primary': this.variant === 'primary',
+            'cre8-c-button--secondary': this.variant === 'secondary',
+            'cre8-c-button--tertiary': this.variant === 'tertiary',
+            'cre8-c-button--full-width': this.fullWidth === true,
+            'cre8-c-button--sm': this.size === 'sm',
+            'cre8-c-button--lg': this.size === 'lg',
+            'cre8-c-button--icon-only': this.hideText,
+            'cre8-c-button--split-button-text': this.splitButtonType === 'text',
+            'cre8-c-button--split-button-caret': this.splitButtonType === 'caret',
+            'cre8-c-button--neutral': this.neutral,
+            'cre8-c-button--inverse': this.inverse,
+            'cre8-c-button--loading': this.loading,
+        });
+        if (this.hideText) {
+            this.iconPosition = 'after';
+        }
+        if (this.href) {
+            return html `
             <a
-                href="${c(this.href)}"
-                class="${t}"
-                rel="${c(this.rel)}"
-                target="${c(this.target)}"
+                href="${ifDefined(this.href)}"
+                class="${componentClassName}"
+                rel="${ifDefined(this.rel)}"
+                target="${ifDefined(this.target)}"
             >
             ${this.generateIconBefore()}
             <span
-                class="${this.hideText ? "cre8-u-is-vishidden cre8-c-button__text" : "cre8-c-button__text"}"
+                class="${this.hideText ? 'cre8-u-is-vishidden cre8-c-button__text' : 'cre8-c-button__text'}"
             >
                 ${this.text}
             </span>
             ${this.generateIconAfter()}
             </a>
-        ` : n` <button
-            class="${t}"
+        `;
+        }
+        return html ` <button
+            class="${componentClassName}"
             part="button"
-            aria-disabled="${c(this.loading)}"
+            aria-disabled="${ifDefined(this.loading)}"
             ?disabled=${this.disabled}
             @click="${this._buttonClick}"
-            aria-expanded="${c(this.buttonAriaExpanded)}"
+            aria-expanded="${ifDefined(this.buttonAriaExpanded)}"
         >
             <slot name="before"></slot>
             ${this.generateIconBefore()}
             <span
-                class="${this.hideText ? "cre8-u-is-vishidden cre8-c-button__text" : "cre8-c-button__text"}"
+                class="${this.hideText ? 'cre8-u-is-vishidden cre8-c-button__text' : 'cre8-c-button__text'}"
             >
                 ${this.text}
             </span>
             ${this.generateIconAfter()}
             <slot name="after"></slot>
-            ${this.loading || this.loadingComplete ? n`<span class="cre8-c-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.loading || this.loadingComplete
+            ? html `<span class="cre8-c-button__icon" aria-live="${this.ariaLive}" role="alert">
+                <span class="cre8-u-is-vishidden">${this.loadingComplete ? 'Loading Complete' : 'Loading'}</span>
+                ${!this.loadingComplete
+                ? html `
             <cre8-loading-spinner
                 class="cre8-c-button__loading-icon"
                 size="small"
@@ -986,97 +239,101 @@ const d = class d extends h {
                 ?inverse=${this.inverse}
                 buttonVariant=${this.variant}
                 aria-hidden="true"
-            ></cre8-loading-spinner>`}
-                </span>` : i}
+            ></cre8-loading-spinner>`
+                : nothing}
+                </span>`
+            : nothing}
         </button>`;
-  }
-  _buttonClick(t) {
-    if (this.loading)
-      t.stopPropagation();
-    else
-      switch (this.type) {
-        case "submit":
-          this.formSubmit();
-          break;
-        case "reset":
-          this.formReset();
-          break;
-      }
-  }
-};
-d.styles = [g];
-let r = d;
-o([
-  e()
-], r.prototype, "text");
-o([
-  e({ type: String })
-], r.prototype, "variant");
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "neutral");
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "inverse");
-o([
-  e()
-], r.prototype, "href");
-o([
-  e()
-], r.prototype, "target");
-o([
-  e()
-], r.prototype, "type");
-o([
-  e()
-], r.prototype, "rel");
-o([
-  e()
-], r.prototype, "iconName");
-o([
-  e()
-], r.prototype, "svg");
-o([
-  e({ type: Number })
-], r.prototype, "iconRotateDegree");
-o([
-  e()
-], r.prototype, "iconFlipDirection");
-o([
-  e()
-], r.prototype, "iconPosition");
-o([
-  e()
-], r.prototype, "size");
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "hideText");
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "fullWidth");
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "loading");
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "loadingComplete");
-o([
-  e()
-], r.prototype, "ariaLive");
-o([
-  e()
-], r.prototype, "splitButtonType");
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "buttonAriaExpanded");
-o([
-  y("button")
-], r.prototype, "field");
-customElements.get("cre8-button") === void 0 && customElements.define("cre8-button", r);
-export {
-  r as Cre8Button,
-  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
+            }
+        }
+    }
+}
+Cre8Button.styles = [styles];
+__decorate([
+    property()
+], Cre8Button.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Button.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Button.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Button.prototype, "neutral", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Button.prototype, "inverse", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "href", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "target", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "rel", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "iconName", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "svg", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Button.prototype, "iconRotateDegree", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "iconFlipDirection", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "iconPosition", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Button.prototype, "hideText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Button.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Button.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Button.prototype, "loadingComplete", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "ariaLive", void 0);
+__decorate([
+    property()
+], Cre8Button.prototype, "splitButtonType", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Button.prototype, "buttonAriaExpanded", void 0);
+__decorate([
+    query('button')
+], Cre8Button.prototype, "field", void 0);
+if (customElements.get('cre8-button') === undefined) {
+    customElements.define('cre8-button', Cre8Button);
+}
+export default Cre8Button;
+//# sourceMappingURL=button.js.map