@tmorrow/cre8-wc 1.1.2 → 1.1.3

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

@@ -1,175 +1,302 @@
-import s from "classnames";
-import { css as v, nothing as d, html as n } from "lit";
-import { ifDefined as c } from "lit-html/directives/if-defined.js";
-import "../../icon-D22g8aWB.js";
-import "../loading-spinner/loading-spinner.js";
-import { property as t, query as h } from "lit/decorators.js";
-import { Cre8FormElement as p } from "../cre8-form-element.js";
-const y = v`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}:host([fullWidth]){display:flex}.cre8-c-danger-button{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);width:var(--cre8-button-width, auto);height:var(--cre8-button-height, auto);min-width:var(--cre8-button-min-width, auto);min-height:var(--cre8-button-min-height, auto);justify-content:center;text-align:center;margin-top:var(--cre8-button-margin-top, 0);margin-bottom:var(--cre8-button-margin-bottom, 0);margin-left:var(--cre8-button-margin-left, 0);margin-right:var(--cre8-button-margin-right, 0);display:inline-flex;align-items:center;border-width:var(--cre8-border-width-button-default);box-shadow:var(--cre8-shadow-button);padding-top:var(--cre8-button-padding-vertical-medium);padding-right:var(--cre8-button-padding-horizontal-medium);padding-bottom:var(--cre8-button-padding-vertical-medium);padding-left:var(--cre8-button-padding-horizontal-medium);margin:0;cursor:pointer;border-style:var(--cre8-border-style-default);transition:revert;transform:revert;white-space:nowrap}.cre8-c-danger-button:hover,.cre8-c-danger-button:focus,.cre8-c-danger-button:active,.cre8-c-danger-button:focus-visible{border-style:var(--cre8-border-style-default);box-shadow:none;transform:revert;transition:revert}.cre8-c-danger-button.cre8-c-danger-button--primary{background:var(--cre8-color-button-primary-danger-bg);border-width:var(--cre8-border-width-button-default);border-color:var(--cre8-color-button-primary-danger-border);border-radius:var(--cre8-border-radius-button);box-shadow:var(--cre8-shadow-button);color:var(--cre8-color-button-primary-danger-content);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button--primary:hover,.cre8-c-danger-button.cre8-c-danger-button--primary:focus{box-shadow:none;--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-hover);color:var(--cre8-color-button-primary-danger-content-hover);border-color:var(--cre8-color-button-primary-danger-border-hover);background:var(--cre8-color-button-primary-danger-bg-hover);text-decoration:none}.cre8-c-danger-button.cre8-c-danger-button--primary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--primary:focus:focus{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--primary:active,.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading{box-shadow:none;color:var(--cre8-color-button-primary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);border-color:var(--cre8-color-button-primary-danger-border-active);background-color:var(--cre8-color-button-primary-danger-bg-active)}.cre8-c-danger-button.cre8-c-danger-button--primary:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--primary:disabled{box-shadow:none;background-color:var(--cre8-color-button-primary-danger-bg-disabled);border-color:var(--cre8-color-button-primary-danger-border-disabled);color:var(--cre8-color-button-primary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);cursor:not-allowed;outline:none}.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus-visible{outline:none;background-color:var(--cre8-color-button-primary-danger-bg-disabled);border-color:var(--cre8-color-button-primary-danger-border-disabled);color:var(--cre8-color-button-primary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-primary-danger-inverse-bg);border-color:var(--cre8-color-button-primary-danger-inverse-border);color:var(--cre8-color-button-primary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-primary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-primary-danger-inverse-border-hover);color:var(--cre8-color-button-primary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-primary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-primary-danger-inverse-bg-active);border-color:var(--cre8-color-button-primary-danger-inverse-border-active);color:var(--cre8-color-button-primary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-primary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-primary-danger-inverse-border-disabled);color:var(--cre8-color-button-primary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--secondary{background-color:var(--cre8-color-button-secondary-danger-bg);border-color:var(--cre8-color-button-secondary-danger-border);color:var(--cre8-color-button-secondary-danger-content);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);border-radius:var(--cre8-border-radius-button);border-width:var(--cre8-border-width-button-default)}.cre8-c-danger-button.cre8-c-danger-button--secondary:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary:focus{background-color:var(--cre8-color-button-secondary-danger-bg-hover);border-color:var(--cre8-color-button-secondary-danger-border-hover);color:var(--cre8-color-button-secondary-danger-content-hover);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--secondary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--secondary:focus:focus{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--secondary:active,.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading{transition:none;transform:none;background-color:var(--cre8-color-button-secondary-danger-bg-active);border-color:var(--cre8-color-button-secondary-danger-border-active);color:var(--cre8-color-button-secondary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled{box-shadow:none;background-color:var(--cre8-color-button-secondary-danger-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-border-disabled);color:var(--cre8-color-button-secondary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);outline:none;border-radius:var(--cre8-border-radius-button);border-width:var(--cre8-border-width-button-default);cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus-visible{outline:none;background-color:var(--cre8-color-button-secondary-danger-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-border-disabled);color:var(--cre8-color-button-secondary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-secondary-danger-inverse-bg);border-color:var(--cre8-color-button-secondary-danger-inverse-border);color:var(--cre8-color-button-secondary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-secondary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-secondary-danger-inverse-border-hover);color:var(--cre8-color-button-secondary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-secondary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-secondary-danger-inverse-bg-active);border-color:var(--cre8-color-button-secondary-danger-inverse-border-active);color:var(--cre8-color-button-secondary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-secondary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-inverse-border-disabled);color:var(--cre8-color-button-secondary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg);border-width:var(--cre8-border-width-button-default);border-color:var(--cre8-color-button-tertiary-danger-border);color:var(--cre8-color-button-tertiary-danger-content);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content);box-shadow:none}.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg-hover);border-width:var(--cre8-border-width-button-default, --cre8-border-width-none);border-color:var(--cre8-color-button-tertiary-danger-border-hover);color:var(--cre8-color-button-tertiary-danger-content-hover);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus:focus{outline:var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--tertiary:active,.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg-active);border-color:var(--cre8-color-button-tertiary-danger-border-active);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-tertiary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus-visible{outline:var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled{background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);border-color:rgba(0,0,0,0);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);outline:none;box-shadow:none;cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus{outline:none;box-shadow:none;background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus-visible{outline:none;box-shadow:none;background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg);border-color:var(--cre8-color-button-tertiary-danger-inverse-border);color:var(--cre8-color-button-tertiary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-hover);color:var(--cre8-color-button-tertiary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-tertiary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-active);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-active);color:var(--cre8-color-button-tertiary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-disabled);color:var(--cre8-color-button-tertiary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text{border-radius:var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);border-color:var(--cre8-color-button-secondary-danger-border);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-secondary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:active,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:focus-visible{outline:none}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--lg{padding:var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--sm{padding:var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret{padding:var(--cre8-button-padding-vertical-medium);border-radius:var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);height:100%;border-left:none !important;border-collapse:collapse;background:var(--cre8-color-button-secondary-danger-bg);border-color:var(--cre8-color-button-secondary-danger-border);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-secondary-danger-content);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:hover,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus{background:var(--cre8-color-button-secondary-danger-bg-hover);border-color:var(--cre8-color-button-secondary-danger-border-hover);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);outline:none;border-left:none;border-collapse:collapse}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:active,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus-visible{background:var(--cre8-color-button-secondary-danger-bg-active);border-color:var(--cre8-color-button-secondary-danger-border-active);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);outline:none;border-left:none;border-collapse:collapse}.cre8-c-danger-button--lg{padding:var(--cre8-button-padding-vertical-large)}.cre8-c-danger-button--sm{padding:var(--cre8-button-padding-vertical-small)}.cre8-c-danger-button--icon-only{padding:var(--cre8-button-padding-vertical-small);color:var(--cre8-icon-fill, currentColor)}.cre8-c-danger-button--full-width{width:100%;display:flex}.cre8-c-danger-button--sm{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);padding-top:var(--cre8-button-padding-vertical-small);padding-right:var(--cre8-button-padding-horizontal-small);padding-bottom:var(--cre8-button-padding-vertical-small);padding-left:var(--cre8-button-padding-horizontal-small)}.cre8-c-danger-button--lg{font-family:var(--cre8-typography-label-large-font-family);font-size:var(--cre8-typography-label-large-font-size);font-weight:var(--cre8-typography-label-large-font-weight);line-height:var(--cre8-typography-label-large-line-height);text-decoration:var(--cre8-typography-label-large-text-decoration);text-transform:var(--cre8-typography-label-large-text-transform);padding-top:var(--cre8-button-padding-vertical-large);padding-right:var(--cre8-button-padding-horizontal-large);padding-bottom:var(--cre8-button-padding-vertical-large);padding-left:var(--cre8-button-padding-horizontal-large)}.cre8-c-danger-button--sm cre8-icon{--cre8-icon-height: var(--cre8-icon-size-small);--cre8-icon-width: var(--cre8-icon-size-small)}.cre8-c-danger-button--lg cre8-icon{--cre8-icon-height: var(--cre8-icon-size-large);--cre8-icon-width: var(--cre8-icon-size-large)}::slotted(*){margin-right:0}cre8-icon+.cre8-c-danger-button__text:not(.cre8-u-is-vishidden){margin-left:0.5rem;display:inline-flex}.cre8-c-danger-button__text:not(.cre8-u-is-vishidden)+cre8-icon{margin-left:0.5rem;display:inline-flex}.cre8-c-danger-button:has(.cre8-c-danger-button__text.cre8-u-is-vishidden)+cre8-icon{border-radius:var(--cre8-border-radius-button)}.cre8-c-danger-button__text.cre8-u-is-vishidden+cre8-icon{margin-left:0px;margin-right:0px;display:flex}.cre8-c-danger-button__text.cre8-u-is-vishidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.cre8-c-danger-button--primary.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-content-knockout)}.cre8-c-danger-button--secondary.cre8-c-danger-button--loading,.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-u-is-vishidden{--cre8-icon-height: 0px;--cre8-icon-width: 0px;max-width:fit-content;min-width:0px;width:auto;height:auto;max-height:fit-content;min-width:0px;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}cre8-icon.cre8-u-is-vishidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}cre8-icon{display:flex;align-items:center;justify-content:center}span.cre8-c-danger-button__icon{margin-left:0.5rem;max-width:fit-content;min-width:0px;width:auto;height:auto;max-height:fit-content;min-width:0px}`;
-var m = Object.defineProperty, e = (b, o, u, f) => {
-  for (var a = void 0, i = b.length - 1, g; i >= 0; i--)
-    (g = b[i]) && (a = g(o, u, a) || a);
-  return a && m(o, u, a), a;
+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;
 };
-const l = class l extends p {
-  constructor() {
-    super(...arguments), this.text = "Button", this.variant = "primary", this.type = "button", this.iconRotateDegree = 0, this.iconPosition = void 0, this.ariaLive = "assertive";
-  }
-  formSubmit() {
-    const o = this._internals.form;
-    o && o.requestSubmit();
-  }
-  formReset() {
-    const o = this._internals.form;
-    o && o.reset();
-  }
-  renderDangerButtonLink(o) {
-    return n`
+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';
+/**
+     * 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';
+    }
+    formSubmit() {
+        const form = this._internals.form;
+        if (form) {
+            form.requestSubmit();
+        }
+    }
+    formReset() {
+        const form = this._internals.form;
+        if (form) {
+            form.reset();
+        }
+    }
+    renderDangerButtonLink(componentClassName) {
+        return html `
           <a
-              href="${c(this.href)}"
-              class="${o}"
-              rel="${c(this.rel)}"
-              target="${c(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="${c(this.svg)}">
-        </cre8-icon>` : d}
+            ${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="${c(this.svg)}">
-        </cre8-icon> ` : d}
+      ${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 ? d : 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=${c(this.loading)}
+            aria-disabled=${ifDefined(this.loading)}
             ?disabled=${this.disabled}
             @click="${this._buttonClick}"
-            aria-expanded=${c(this.buttonAriaExpanded)}
+            aria-expanded=${ifDefined(this.buttonAriaExpanded)}
             type=${this.type}
           >
-            ${this.iconPosition === "before" && this.svg ? this.renderDangerButtonIconography() : d}
+            ${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() : d}
-            ${this.loading || this.loadingComplete ? this.renderDangerButtonLoading() : d}
+            ${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 = [y];
-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([
-  h("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

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

@@ -0,0 +1 @@
+{"version":3,"file":"danger-button.js","sourceRoot":"","sources":["../../../components/danger-button/danger-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,cAAc,CAAC;AACtB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+DO;AAEP,MAAM,OAAO,gBAAiB,SAAQ,eAAe;IAArD;;QAGI;;;;;;WAMG;QAEC,SAAI,GAAI,QAAQ,CAAC;QAErB;;;;;;;WAOG;QAEC,YAAO,GAA0C,SAAS,CAAC;QAkC/D;;;;;WAKG;QAEC,SAAI,GAAkC,QAAQ,CAAC;QAenD;;WAEG;QAEC,qBAAgB,GAAY,CAAC,CAAC;QAQlC;;;;;WAKG;QAEC,iBAAY,GAAwB,SAAS,CAAC;QAqDlD;;;;WAIG;QAEC,aAAQ,GAA2B,WAAW,CAAC;IAsIvD,CAAC;IA3HG,UAAU;QACN,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAClC,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,aAAa,EAAE,CAAC;QACzB,CAAC;IACL,CAAC;IAED,SAAS;QACL,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAClC,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACL,CAAC;IAEO,sBAAsB,CAAC,kBAA0B;QACrD,OAAO,IAAI,CAAA;;sBAEG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACnB,kBAAkB;qBACpB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;wBAChB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;cAEhC,IAAI,CAAC,YAAY,KAAK,QAAQ;YACpC,CAAC,CAAC,IAAI,CAAA,6DAA6D,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;qBACzE;YACb,CAAC,CAAC,OAAO;;mBAEE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gDAAgD,CAAC,CAAC,CAAC,4BAA4B;;YAEtG,IAAI,CAAC,IAAI;;QAEb,IAAI,CAAC,YAAY,KAAK,OAAO;YAC7B,CAAC,CAAC,IAAI,CAAA,6DAA6D,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACxE;YACd,CAAC,CAAC,OAAO;;SAER,CAAC;IACN,CAAC;IAEO,6BAA6B;QACjC,OAAO,IAAI,CAAA;oEACiD,IAAI,CAAC,GAAG;OACrE,CAAC;IACJ,CAAC;IAEO,yBAAyB;QAC7B,OAAO,IAAI,CAAA;gEAC6C,IAAI,CAAC,QAAQ;kDAC3B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;gBACvF,CAAC,IAAI,CAAC,eAAe;YAC7B,CAAC,CAAC,IAAI,CAAA;;;;;mCAKqB;YAC3B,CAAC,CAAC,OAAO;sBACK,CAAC;IACnB,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,sBAAsB,EAAE;YAC1D,+BAA+B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC3D,iCAAiC,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC/D,gCAAgC,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YAC7D,kCAAkC,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;YAC3D,0BAA0B,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9C,0BAA0B,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9C,iCAAiC,EAAE,IAAI,CAAC,QAAQ;YAChD,+BAA+B,EAAE,IAAI,CAAC,OAAO;YAC7C,gCAAgC,EAAE,IAAI,CAAC,QAAQ;SAClD,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAChC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,EAAE,CAAC;QACpE,CAAC;QAED,OAAO,IAAI,CAAA;;qBAEE,kBAAkB;;4BAEX,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;wBAC3B,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,YAAY;4BACX,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC;mBAC3C,IAAI,CAAC,IAAI;;cAEd,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,GAAG;YAChD,CAAC,CAAC,IAAI,CAAC,6BAA6B,EAAE,CAAC,CAAC,CAAC,OACjD;;uBAEuB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gDAAgD,CAAC,CAAC,CAAC,4BAA4B;;kBAEpG,IAAI,CAAC,IAAI;;cAEb,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,GAAG;YAC/C,CAAC,CAAC,IAAI,CAAC,6BAA6B,EAAE,CAAC,CAAC,CAAC,OACjD;cACc,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe;YAC1C,CAAC,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC,CAAC,OAC7C;oBACoB,CAAC;IACjB,CAAC;IAEM,YAAY,CAAC,CAA6B;QAC7C,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;aAAM,CAAC;YACJ,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;gBAChB,KAAK,QAAQ;oBACT,IAAI,CAAC,UAAU,EAAE,CAAC;oBAClB,MAAM;gBACV,KAAK,OAAO;oBACR,IAAI,CAAC,SAAS,EAAE,CAAC;oBACjB,MAAM;gBACV,aAAa;YACjB,CAAC;QACL,CAAC;IACL,CAAC;;AAhSM,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAUrB;IADH,QAAQ,EAAE;8CACU;AAWjB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACoC;AAW3D;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACpB;AAQnB;IADH,QAAQ,EAAE;8CACO;AAad;IADH,QAAQ,EAAE;gDAC0C;AASjD;IADH,QAAQ,EAAE;8CACwC;AAM/C;IADH,QAAQ,EAAE;6CACM;AAOb;IADH,QAAQ,EAAE;6CACM;AAMb;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DACO;AAM9B;IADH,QAAQ,EAAE;2DACoB;AAS3B;IADH,QAAQ,EAAE;sDACuC;AAQ9C;IADH,QAAQ,EAAE;8CACY;AAOnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnB;AAYpB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACrB;AAUlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACb;AAM1B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACL;AAQnB;IADH,QAAQ,EAAE;kDACwC;AAM/C;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACV;AAG7B;IADH,KAAK,CAAC,QAAQ,CAAC;+CACc;AA+HlC,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC;AAClE,CAAC;AAID,eAAe,gBAAgB,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html, nothing } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport '../icon/icon';\nimport '../loading-spinner/loading-spinner';\nimport { property, query } from 'lit/decorators.js';\nimport styles from './danger-button.styles.js';\nimport { Cre8FormElement } from '../cre8-form-element';\n\n/**\n     * The size and state of buttons on the screen serve as visual cues for the user\n     * about what they can do and what they should do next.\n     * They indicate the availability and priority of the action on the page.\n     *\n     * - Buttons are a single call-to-action where a single click performs that action\n     * - Use Danger Buttons when you are performing an action that is potentially dangerous,\n     * such as permanently deleting information\n     * - Use a link instead of a button when you're navigating to another place\n     *\n     * ## How to Use\n     *\n     * Danger Buttons are distinguished by three key properties:\n     *\n     * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles;\n     *   each with large and small variations\n     * - **State**: Interaction state: hover/click (press), focus, disabled,\n     *   and submitting/loading (only for large buttons)\n     * - **Brand**: Styles determined by the site or component theme\n     *\n     * ### Usage Guidelines\n     *\n     * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define\n     * background, font style, and border colors. Large and small sizing assists with visual priority by defining button\n     * heights, left and right internal padding, and font-size.\n     *\n     * #### System Feedback\n     * Each button has a default and hover/click (press) state that give the user feedback\n     * that they have successfully interacted with a button.\n     * Button presses should always be combined with other types of timely system feedback.\n     * Examples of system feedback may be a page refresh, exposing additional controls or content,\n     * dialogs, alerts and notifications.\n     * If there is perceived a delay in system response, generally due to technical constraints,\n     * provide a progress or loading indicator.\n     *\n     * #### Button Text\n     *\n     * - Button text should be as short and simple as possible, ideally a maximum of 3 words.\n     * - Use Title Case for readability.\n     * - They should not include punctuation (exception: \"Loading...\").\n     * - They should not be used as an indicator of what happens on the next page, or as a substitute\n     * for a progress meter.\n     *\n     * #### Button Styling\n     *\n     * - DO use only the styles of the brand you are working on.\n     * - DO NOT combine styles, even if the page is co-branded.\n     *\n     * #### Button Sizes\n     * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.\n     * - DO NOT mix sizes of buttons when they are used together as a group.\n     *\n     * #### Input Pairing\n     *\n     * Primary and Secondary buttons may be paired with input fields.\n     * Only one Primary button may appear on each screen.\n     * Use the Secondary button when there are multiple in-context buttons\n     * and/or when there is an emphasized page level button.\n     * When used in a form context, the button's `type` needs to be `submit` to pass along form data.\n     *\n     * - DO use only large buttons with input fields.\n     * - DO NOT use small buttons with input fields.\n     *\n     */\n\nexport class Cre8DangerButton extends Cre8FormElement {\n    static styles = [styles];\n\n    /**\n     *\n     * The button text. Should be as short and simple as possible, ideally a maximum of 3 words.\n     * - Use Title Case for readability.\n     * - Should not include punctuation (exception: \"Loading...\").\n     * - Should not be used as an indicator of what happens on the next page, or as a substitute for a progress meter.\n     */\n    @property()\n        text? = 'Button';\n\n    /**\n     * Style variant\n     * - **primary** renders the button used for primary actions. Presents highest visual priority.\n     *   When grouped with other buttons, only one primary is allowed\n     * - **secondary** renders a secondary button. Presents a lower visual priority\n     * - **tertiary** renders a tertiary button. Presents the lowest visual priority.\n     *   Should be used in limited amounts - consider if a link (`<a>`) would be more appropriate\n     */\n    @property({ type: String })\n        variant?: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n    /**\n     * Disabled attribute\n     * @attr {boolean}\n     *\n     * **NOTE**: Disabled states are used to indicate that an action is temporarily unavailable.\n     * In general, using disabled states is NOT advised. It should be clear to the user what actions they must\n     * take to activate the button. Real-time, field-level validation can help provide clarity.\n     */\n    @property({ type: Boolean, reflect: true })\n        disabled?: boolean;\n\n    /**\n     *\n     * Provide this property if you intend to use button styles for an anchor tag (`<a>`).\n     * This changes the component markup from `<button>` usage to `<a>` instead.\n     */\n    @property()\n        href?: string;\n\n    /**\n     * Target attribute for a link if providing `href` to style a link as a button\n     * - **_blank** yields a link that opens in a new tab\n     * - **_self** yields a link that loads the URL into the same browsing context as the current one.\n     *   This is the default behavior\n     * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.\n     *   If there is no parent, this behaves the same way as _self\n     * - **_top** yields a link that loads the URL into the top-level browsing context.\n     *   If there is no parent, this behaves the same way as _self.\n     */\n    @property()\n        target?: '_blank' | '_self' | '_parent' | '_top';\n\n    /**\n     * Type of button.\n     * - **button** (default) button has no default behavior and does nothing unless provided some sort\n     * of client-side trigger\n     * - **submit** button for submitting form data to a server\n     */\n    @property()\n        type: 'button' | 'submit' | 'reset' = 'button';\n\n    /**\n     * Rel if this is an <a> element - this swaps <button> for <a>\n     */\n    @property()\n        rel?: string;\n\n    /**\n     * SVG raw string if including an icon within a button.\n     * Must include the icon's position with `iconPostion`. This prop is used for <cre8-icon>\n     */\n    @property()\n        svg?: string;\n\n    /**\n     * rotate is used for <cre8-icon> to set the arrow in the correct direction\n     */\n    @property({ type: Number })\n        iconRotateDegree?: number = 0;\n\n    /**\n     * flip is used for <cre8-icon> to set the icon in the correct direction\n     */\n    @property()\n        iconFlipDirection?: string;\n\n    /**\n     * Icon position. Must include the name of the icon with `iconName`\n     *\n     * - **before** places the icon before the button text\n     * - **after** places the icon after the button text\n     */\n    @property()\n        iconPosition?: 'before' | 'after' = undefined;\n\n    /**\n     * Size variants add another way to increase or decrease visual priority of a button.\n     * - **sm** shrinks the button typography and overall size from the default. Use when vertical space is constrained.\n     * - **lg** increases the button typography and overall size from the default.\n     */\n    @property()\n        size?: 'sm' | 'lg';\n\n    /**\n     * Visually hide button text. Text is still accessible to assistive technology.\n     * Use this for icon-only buttons for accessibility\n     */\n    @property({ type: Boolean, reflect: true })\n        hideText?: boolean;\n\n    /**\n     * Full width button\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n        fullWidth?: boolean;\n\n    /**\n     * * Changes styling to an active state with a spinning icon.\n     * * Adds accessibility treatment by:\n     *   * announcing via voiceover when the loading success/error state via a aria-live region\n     *   * setting `aria-disabled`\n     * * Disables click events / form submitting while allowing focus (for accessibility)\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n        loading?: boolean;\n\n    /**\n     * * Variant of the loading button that:\n     *   * Removes loading spinner\n     *   * Informs the SR user that the loading status is now complete, with visually hidden text in the live area\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n        loadingComplete?: boolean;\n\n    /**\n     * Inverted colors Danger Button (onDark)\n     */\n    @property({ type: Boolean })\n        inverted?: boolean;\n\n    /**\n     * Controls whether your loading status update to voiceover users will occur\n     * immediately (used for more urgently needed updates) using `assertive` or at the next convenient\n     * pause in their navigation using `polite`.\n     */\n    @property()\n        ariaLive: 'polite' | 'assertive' = 'assertive';\n\n    /**\n     * Button aria expanded attribute\n     */\n    @property({ type: Boolean, reflect: true })\n        buttonAriaExpanded?: boolean;\n\n    @query('button')\n        field!: HTMLButtonElement;\n\n    formSubmit() {\n        const form = this._internals.form;\n        if (form) {\n            form.requestSubmit();\n        }\n    }\n\n    formReset() {\n        const form = this._internals.form;\n        if (form) {\n            form.reset();\n        }\n    }\n\n    private renderDangerButtonLink(componentClassName: string) {\n        return html`\n          <a\n              href=\"${ifDefined(this.href)}\"\n              class=\"${componentClassName}\"\n              rel=\"${ifDefined(this.rel)}\"\n              target=\"${ifDefined(this.target)}\"\n          >\n            ${this.iconPosition === 'before'\n        ? html`<cre8-icon width=\"16\" height=\"16\" aria-hidden=\"true\" svg=\"${ifDefined(this.svg)}\">\n        </cre8-icon>`\n        : nothing}\n      <span\n          class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-danger-button__text' : 'cre8-c-danger-button__text'}\"\n      >\n          ${this.text}\n      </span>\n      ${this.iconPosition === 'after'\n        ? html`<cre8-icon width=\"16\" height=\"16\" aria-hidden=\"true\" svg=\"${ifDefined(this.svg)}\">\n        </cre8-icon> `\n        : nothing}\n      </a>\n        `;\n    }\n\n    private renderDangerButtonIconography() {\n        return html`\n        <cre8-icon width=\"16\" height=\"16\" aria-hidden=\"true\" svg=\"${this.svg}\"></cre8-icon>\n      `;\n    }\n\n    private renderDangerButtonLoading() {\n        return html`\n          <span class=\"cre8-c-danger-button__icon\" aria-live=\"${this.ariaLive}\" role=\"alert\">\n              <span class=\"cre8-u-is-vishidden\">${this.loadingComplete ? 'Loading Complete' : 'Loading'}</span>\n              ${!this.loadingComplete\n        ? html`\n          <cre8-loading-spinner\n              class=\"cre8-c-danger-button__loading-icon\"\n              inverted size=\"small\"\n              aria-hidden=\"true\"\n          ></cre8-loading-spinner>`\n        : nothing}\n              </span>`;\n    }\n\n    render() {\n        const componentClassName = classnames('cre8-c-danger-button', {\n            'cre8-c-danger-button--primary': this.variant === 'primary',\n            'cre8-c-danger-button--secondary': this.variant === 'secondary',\n            'cre8-c-danger-button--tertiary': this.variant === 'tertiary',\n            'cre8-c-danger-button--full-width': this.fullWidth === true,\n            'cre8-c-danger-button--sm': this.size === 'sm',\n            'cre8-c-danger-button--lg': this.size === 'lg',\n            'cre8-c-danger-button--icon-only': this.hideText,\n            'cre8-c-danger-button--loading': this.loading,\n            'cre8-c-danger-button--inverted': this.inverted,\n        });\n\n        if (this.hideText) {\n            this.iconPosition = 'after';\n        }\n\n        if (this.href) {\n            return html`${this.renderDangerButtonLink(componentClassName)}`;\n        }\n\n        return html`\n          <button\n            class=\"${componentClassName}\"\n            part=\"button\"\n            aria-disabled=${ifDefined(this.loading)}\n            ?disabled=${this.disabled}\n            @click=\"${this._buttonClick}\"\n            aria-expanded=${ifDefined(this.buttonAriaExpanded)}\n            type=${this.type}\n          >\n            ${this.iconPosition === 'before' && this.svg\n        ? this.renderDangerButtonIconography() : nothing\n}\n            <span\n              class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-danger-button__text' : 'cre8-c-danger-button__text'}\"\n            >\n                ${this.text}\n            </span>\n            ${this.iconPosition === 'after' && this.svg\n        ? this.renderDangerButtonIconography() : nothing\n}\n            ${this.loading || this.loadingComplete\n        ? this.renderDangerButtonLoading() : nothing\n}\n          </button>`;\n    }\n\n    public _buttonClick(e: MouseEvent | KeyboardEvent) {\n        if (this.loading) {\n            e.stopPropagation();\n        } else {\n            switch (this.type) {\n                case 'submit':\n                    this.formSubmit();\n                    break;\n                case 'reset':\n                    this.formReset();\n                    break;\n                // no default\n            }\n        }\n    }\n}\n\nif (customElements.get('cre8-danger-button') === undefined) {\n    customElements.define('cre8-danger-button', Cre8DangerButton);\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cre8-danger-button': Cre8DangerButton; } }\n\nexport default Cre8DangerButton;\n"]}

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}:host([fullWidth]){display:flex}.cre8-c-danger-button{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);width:var(--cre8-button-width, auto);height:var(--cre8-button-height, auto);min-width:var(--cre8-button-min-width, auto);min-height:var(--cre8-button-min-height, auto);justify-content:center;text-align:center;margin-top:var(--cre8-button-margin-top, 0);margin-bottom:var(--cre8-button-margin-bottom, 0);margin-left:var(--cre8-button-margin-left, 0);margin-right:var(--cre8-button-margin-right, 0);display:inline-flex;align-items:center;border-width:var(--cre8-border-width-button-default);box-shadow:var(--cre8-shadow-button);padding-top:var(--cre8-button-padding-vertical-medium);padding-right:var(--cre8-button-padding-horizontal-medium);padding-bottom:var(--cre8-button-padding-vertical-medium);padding-left:var(--cre8-button-padding-horizontal-medium);margin:0;cursor:pointer;border-style:var(--cre8-border-style-default);transition:revert;transform:revert;white-space:nowrap}.cre8-c-danger-button:hover,.cre8-c-danger-button:focus,.cre8-c-danger-button:active,.cre8-c-danger-button:focus-visible{border-style:var(--cre8-border-style-default);box-shadow:none;transform:revert;transition:revert}.cre8-c-danger-button.cre8-c-danger-button--primary{background:var(--cre8-color-button-primary-danger-bg);border-width:var(--cre8-border-width-button-default);border-color:var(--cre8-color-button-primary-danger-border);border-radius:var(--cre8-border-radius-button);box-shadow:var(--cre8-shadow-button);color:var(--cre8-color-button-primary-danger-content);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button--primary:hover,.cre8-c-danger-button.cre8-c-danger-button--primary:focus{box-shadow:none;--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-hover);color:var(--cre8-color-button-primary-danger-content-hover);border-color:var(--cre8-color-button-primary-danger-border-hover);background:var(--cre8-color-button-primary-danger-bg-hover);text-decoration:none}.cre8-c-danger-button.cre8-c-danger-button--primary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--primary:focus:focus{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--primary:active,.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading{box-shadow:none;color:var(--cre8-color-button-primary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);border-color:var(--cre8-color-button-primary-danger-border-active);background-color:var(--cre8-color-button-primary-danger-bg-active)}.cre8-c-danger-button.cre8-c-danger-button--primary:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--primary:disabled{box-shadow:none;background-color:var(--cre8-color-button-primary-danger-bg-disabled);border-color:var(--cre8-color-button-primary-danger-border-disabled);color:var(--cre8-color-button-primary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);cursor:not-allowed;outline:none}.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus-visible{outline:none;background-color:var(--cre8-color-button-primary-danger-bg-disabled);border-color:var(--cre8-color-button-primary-danger-border-disabled);color:var(--cre8-color-button-primary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-primary-danger-inverse-bg);border-color:var(--cre8-color-button-primary-danger-inverse-border);color:var(--cre8-color-button-primary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-primary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-primary-danger-inverse-border-hover);color:var(--cre8-color-button-primary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-primary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-primary-danger-inverse-bg-active);border-color:var(--cre8-color-button-primary-danger-inverse-border-active);color:var(--cre8-color-button-primary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-primary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-primary-danger-inverse-border-disabled);color:var(--cre8-color-button-primary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--secondary{background-color:var(--cre8-color-button-secondary-danger-bg);border-color:var(--cre8-color-button-secondary-danger-border);color:var(--cre8-color-button-secondary-danger-content);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);border-radius:var(--cre8-border-radius-button);border-width:var(--cre8-border-width-button-default)}.cre8-c-danger-button.cre8-c-danger-button--secondary:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary:focus{background-color:var(--cre8-color-button-secondary-danger-bg-hover);border-color:var(--cre8-color-button-secondary-danger-border-hover);color:var(--cre8-color-button-secondary-danger-content-hover);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--secondary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--secondary:focus:focus{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--secondary:active,.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading{transition:none;transform:none;background-color:var(--cre8-color-button-secondary-danger-bg-active);border-color:var(--cre8-color-button-secondary-danger-border-active);color:var(--cre8-color-button-secondary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled{box-shadow:none;background-color:var(--cre8-color-button-secondary-danger-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-border-disabled);color:var(--cre8-color-button-secondary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);outline:none;border-radius:var(--cre8-border-radius-button);border-width:var(--cre8-border-width-button-default);cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus-visible{outline:none;background-color:var(--cre8-color-button-secondary-danger-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-border-disabled);color:var(--cre8-color-button-secondary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-secondary-danger-inverse-bg);border-color:var(--cre8-color-button-secondary-danger-inverse-border);color:var(--cre8-color-button-secondary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-secondary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-secondary-danger-inverse-border-hover);color:var(--cre8-color-button-secondary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-secondary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-secondary-danger-inverse-bg-active);border-color:var(--cre8-color-button-secondary-danger-inverse-border-active);color:var(--cre8-color-button-secondary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-secondary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-secondary-danger-inverse-border-disabled);color:var(--cre8-color-button-secondary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg);border-width:var(--cre8-border-width-button-default);border-color:var(--cre8-color-button-tertiary-danger-border);color:var(--cre8-color-button-tertiary-danger-content);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content);box-shadow:none}.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg-hover);border-width:var(--cre8-border-width-button-default, --cre8-border-width-none);border-color:var(--cre8-color-button-tertiary-danger-border-hover);color:var(--cre8-color-button-tertiary-danger-content-hover);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover:focus,.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus:focus{outline:var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--tertiary:active,.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{border-radius:var(--cre8-border-radius-button);background-color:var(--cre8-color-button-tertiary-danger-bg-active);border-color:var(--cre8-color-button-tertiary-danger-border-active);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-tertiary-danger-content-active);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus-visible{outline:var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled{background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);border-color:rgba(0,0,0,0);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);outline:none;box-shadow:none;cursor:not-allowed}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus{outline:none;box-shadow:none;background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:active,.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus-visible{outline:none;box-shadow:none;background-color:var(--cre8-color-button-tertiary-danger-bg-disabled);color:var(--cre8-color-button-tertiary-danger-content-disabled);--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg);border-color:var(--cre8-color-button-tertiary-danger-inverse-border);color:var(--cre8-color-button-tertiary-danger-inverse-content)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:hover,.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-hover);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-hover);color:var(--cre8-color-button-tertiary-danger-inverse-content-hover)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus{outline-color:var(--cre8-color-button-tertiary-danger-inverse-outline)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active{background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-active);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-active);color:var(--cre8-color-button-tertiary-danger-inverse-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active)}.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:disabled{outline:none;cursor:not-allowed;background-color:var(--cre8-color-button-tertiary-danger-inverse-bg-disabled);border-color:var(--cre8-color-button-tertiary-danger-inverse-border-disabled);color:var(--cre8-color-button-tertiary-danger-inverse-content-disabled)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text{border-radius:var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);border-color:var(--cre8-color-button-secondary-danger-border);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-secondary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:active,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:focus-visible{outline:none}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--lg{padding:var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--sm{padding:var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret{padding:var(--cre8-button-padding-vertical-medium);border-radius:var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);height:100%;border-left:none !important;border-collapse:collapse;background:var(--cre8-color-button-secondary-danger-bg);border-color:var(--cre8-color-button-secondary-danger-border);border-width:var(--cre8-border-width-button-default);color:var(--cre8-color-button-secondary-danger-content);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content)}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:hover,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus{background:var(--cre8-color-button-secondary-danger-bg-hover);border-color:var(--cre8-color-button-secondary-danger-border-hover);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);outline:none;border-left:none;border-collapse:collapse}.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:active,.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus-visible{background:var(--cre8-color-button-secondary-danger-bg-active);border-color:var(--cre8-color-button-secondary-danger-border-active);--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);outline:none;border-left:none;border-collapse:collapse}.cre8-c-danger-button--lg{padding:var(--cre8-button-padding-vertical-large)}.cre8-c-danger-button--sm{padding:var(--cre8-button-padding-vertical-small)}.cre8-c-danger-button--icon-only{padding:var(--cre8-button-padding-vertical-small);color:var(--cre8-icon-fill, currentColor)}.cre8-c-danger-button--full-width{width:100%;display:flex}.cre8-c-danger-button--sm{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);padding-top:var(--cre8-button-padding-vertical-small);padding-right:var(--cre8-button-padding-horizontal-small);padding-bottom:var(--cre8-button-padding-vertical-small);padding-left:var(--cre8-button-padding-horizontal-small)}.cre8-c-danger-button--lg{font-family:var(--cre8-typography-label-large-font-family);font-size:var(--cre8-typography-label-large-font-size);font-weight:var(--cre8-typography-label-large-font-weight);line-height:var(--cre8-typography-label-large-line-height);text-decoration:var(--cre8-typography-label-large-text-decoration);text-transform:var(--cre8-typography-label-large-text-transform);padding-top:var(--cre8-button-padding-vertical-large);padding-right:var(--cre8-button-padding-horizontal-large);padding-bottom:var(--cre8-button-padding-vertical-large);padding-left:var(--cre8-button-padding-horizontal-large)}.cre8-c-danger-button--sm cre8-icon{--cre8-icon-height: var(--cre8-icon-size-small);--cre8-icon-width: var(--cre8-icon-size-small)}.cre8-c-danger-button--lg cre8-icon{--cre8-icon-height: var(--cre8-icon-size-large);--cre8-icon-width: var(--cre8-icon-size-large)}::slotted(*){margin-right:0}cre8-icon+.cre8-c-danger-button__text:not(.cre8-u-is-vishidden){margin-left:0.5rem;display:inline-flex}.cre8-c-danger-button__text:not(.cre8-u-is-vishidden)+cre8-icon{margin-left:0.5rem;display:inline-flex}.cre8-c-danger-button:has(.cre8-c-danger-button__text.cre8-u-is-vishidden)+cre8-icon{border-radius:var(--cre8-border-radius-button)}.cre8-c-danger-button__text.cre8-u-is-vishidden+cre8-icon{margin-left:0px;margin-right:0px;display:flex}.cre8-c-danger-button__text.cre8-u-is-vishidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.cre8-c-danger-button--primary.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-content-knockout)}.cre8-c-danger-button--secondary.cre8-c-danger-button--loading,.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading{--cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active)}.cre8-u-is-vishidden{--cre8-icon-height: 0px;--cre8-icon-width: 0px;max-width:fit-content;min-width:0px;width:auto;height:auto;max-height:fit-content;min-width:0px;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}cre8-icon.cre8-u-is-vishidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}cre8-icon{display:flex;align-items:center;justify-content:center}span.cre8-c-danger-button__icon{margin-left:0.5rem;max-width:fit-content;min-width:0px;width:auto;height:auto;max-height:fit-content;min-width:0px}`;
+export default styles;
+//# sourceMappingURL=danger-button.styles.js.map