kemet-ui 5.0.2 → 5.0.4

package/dist/{constants-CHvA2ed5.d.ts → constants-C4-3KYlX.d.ts}

@@ -179,7 +179,6 @@ declare enum EnumInputModes {
  *
  */
 declare class HTMLKemetInputElement extends LitElement {
-    /** @internal */
     formSubmitController: FormSubmitController;
     static styles: lit.CSSResult[];
     slug: string;
@@ -573,4 +572,4 @@ interface InterfaceInputDetails {
     value?: string;
 }
 
-export { EnumAppearances as E, HTMLKemetFieldElement as H, type InterfaceKemetSelectionEvent as I, KemetCombo as K, type TypeAppearance as T, KemetCount as a, type InterfaceInputDetails as b, HTMLKemetInputElement as c, type TypeRoundedSizes as d, EnumRoundedSizes as e, HTMLKemetTextareaElement as f, EnumAxis as g, EnumDirections as h, EnumAriaAutoComplete as i, EnumAutoComplete as j, EnumInputModes as k, EnumInputTypes as l, type InterfaceAppearanceChangeEvent as m };
+export { EnumAppearances as E, HTMLKemetFieldElement as H, type InterfaceKemetSelectionEvent as I, KemetCombo as K, type TypeRoundedSizes as T, KemetCount as a, type InterfaceInputDetails as b, HTMLKemetInputElement as c, EnumRoundedSizes as d, type TypeAppearance as e, HTMLKemetTextareaElement as f, EnumAxis as g, EnumDirections as h, EnumAriaAutoComplete as i, EnumAutoComplete as j, EnumInputModes as k, EnumInputTypes as l, type InterfaceAppearanceChangeEvent as m };

package/dist/elements/alert/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { T as TypeAppearance, d as TypeRoundedSizes } from '../../constants-CHvA2ed5.js';
+import { e as TypeAppearance, T as TypeRoundedSizes } from '../../constants-C4-3KYlX.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumOverlayPositions {

package/dist/elements/alert/index.js

@@ -67,8 +67,8 @@ var styles_css_default = css`:host {
     --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
   }
 
-  :host([filled][appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([filled][appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([filled][appearance="success"]) {
@@ -111,8 +111,8 @@ var styles_css_default = css`:host {
     border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
   }
 
-  :host([appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([appearance="success"]) {

package/dist/elements/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumOverlayPositions {\n  FIXED = 'fixed',\n  TOP_FULL = 'top-full',\n  BOTTOM_FULL = 'bottom-full',\n  TOP_RIGHT = 'top-right',\n  TOP_LEFT = 'top-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  BOTTOM_LEFT = 'bottom-left'\n}\n\nexport enum EnumBorderAppearances {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {EnumBorderAppearances} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n  @property({ type: String, reflect: true, attribute: 'border-appearance' })\n  borderAppearance!: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden!: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: constants.TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: boolean;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private handleTransitionEnd = () => {\n    if (!this.opened) {\n      this.hidden = true;\n    }\n  };\n\n  private handleAnimationEnd = () => {\n    this.reveal = false;\n  };\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-alert-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    } else {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div part=\"message\">\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  private makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  private handleMotion() {\n    this.addEventListener('transitionend', this.handleTransitionEnd);\n    this.addEventListener('animationend', this.handleAnimationEnd);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.removeEventListener('animationend', this.handleAnimationEnd);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AHIR,IAAK,uBAAL,kBAAKA,0BAAL;AACL,EAAAA,sBAAA,WAAQ;AACR,EAAAA,sBAAA,cAAW;AACX,EAAAA,sBAAA,iBAAc;AACd,EAAAA,sBAAA,eAAY;AACZ,EAAAA,sBAAA,cAAW;AACX,EAAAA,sBAAA,kBAAe;AACf,EAAAA,sBAAA,iBAAc;AAPJ,SAAAA;AAAA,GAAA;AAUL,IAAK,wBAAL,kBAAKC,2BAAL;AACL,EAAAA,uBAAA,SAAM;AACN,EAAAA,uBAAA,WAAQ;AACR,EAAAA,uBAAA,YAAS;AACT,EAAAA,uBAAA,UAAO;AAJG,SAAAA;AAAA,GAAA;AAiDZ,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAOE,kBAAkB;AAGlB,oBAAoB;AAGpB;AAqBA,eAAc;AAEd,SAAQ,sBAAsB,MAAM;AAClC,UAAI,CAAC,KAAK,QAAQ;AAChB,aAAK,SAAS;AAAA,MAChB;AAAA,IACF;AAEA,SAAQ,qBAAqB,MAAM;AACjC,WAAK,SAAS;AAAA,IAChB;AAAA;AAAA,EAEA,aAAa,WAA+B;AAC1C,QAAI,UAAU,IAAI,QAAQ,KAAK,CAAC,UAAU,IAAI,QAAQ,GAAG;AACvD,WAAK,SAAS;AACd,WAAK,SAAS;AAAA,IAChB;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,eAAe;AACb,cAAU,MAAM,uBAAuB;AAAA,MACrC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AACX,SAAK,aAAa;AAAA,EACpB;AAAA,EAEA,QAAQ,WAA+B;AACrC,QAAI,CAAC,UAAU,IAAI,QAAQ,KAAK,KAAK,WAAW,MAAM;AACpD,gBAAU,MAAM,gBAAgB,IAAI;AAAA,IACtC,OAAO;AACL,gBAAU,MAAM,gBAAgB,IAAI;AAAA,IACtC;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMD,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA,EAG3B;AAAA,EAEQ,eAAe;AACrB,QAAI,KAAK,UAAU;AACjB,aAAO,gDAAgD,MAAM;AAAE,aAAK,SAAS;AAAA,MAAO,CAAC;AAAA,IACvF;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,eAAe;AACrB,SAAK,iBAAiB,iBAAiB,KAAK,mBAAmB;AAC/D,SAAK,iBAAiB,gBAAgB,KAAK,kBAAkB;AAAA,EAC/D;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,oBAAoB,iBAAiB,KAAK,mBAAmB;AAClE,SAAK,oBAAoB,gBAAgB,KAAK,kBAAkB;AAAA,EAClE;AACF;AAzGqB,WACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GATvB,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,WAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,oBAAoB,CAAC;AAAA,GAftD,WAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlBvB,WAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,WAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxBtB,WAyBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA3BvB,WA4BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9BtB,WA+BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjCtB,WAkCnB;AAlCmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":["EnumOverlayPositions","EnumBorderAppearances"]}
+{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumOverlayPositions {\n  FIXED = 'fixed',\n  TOP_FULL = 'top-full',\n  BOTTOM_FULL = 'bottom-full',\n  TOP_RIGHT = 'top-right',\n  TOP_LEFT = 'top-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  BOTTOM_LEFT = 'bottom-left'\n}\n\nexport enum EnumBorderAppearances {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {EnumBorderAppearances} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n  @property({ type: String, reflect: true, attribute: 'border-appearance' })\n  borderAppearance!: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden!: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: constants.TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: boolean;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private handleTransitionEnd = () => {\n    if (!this.opened) {\n      this.hidden = true;\n    }\n  };\n\n  private handleAnimationEnd = () => {\n    this.reveal = false;\n  };\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-alert-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    } else {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div part=\"message\">\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  private makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  private handleMotion() {\n    this.addEventListener('transitionend', this.handleTransitionEnd);\n    this.addEventListener('animationend', this.handleAnimationEnd);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.removeEventListener('animationend', this.handleAnimationEnd);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=brand]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=brand]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions","EnumBorderAppearances"]}

package/dist/elements/alert/styles.css.js

@@ -41,8 +41,8 @@ var styles_css_default = css`:host {
     --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
   }
 
-  :host([filled][appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([filled][appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([filled][appearance="success"]) {
@@ -85,8 +85,8 @@ var styles_css_default = css`:host {
     border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
   }
 
-  :host([appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([appearance="success"]) {

package/dist/elements/alert/styles.css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=brand]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=brand]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/avatar/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { d as TypeRoundedSizes } from '../../constants-CHvA2ed5.js';
+import { T as TypeRoundedSizes } from '../../constants-C4-3KYlX.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**

package/dist/elements/badge/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { E as EnumAppearances, e as EnumRoundedSizes } from '../../constants-CHvA2ed5.js';
+import { E as EnumAppearances, d as EnumRoundedSizes } from '../../constants-C4-3KYlX.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**

package/dist/elements/badge/index.js

@@ -59,7 +59,7 @@ var styles_css_default = css`:host {
 }
 
 :host([appearance=brand]) {
-  --_kemet-badge-color: var(--kemet-color-brand-primary-base);
+  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]) {

package/dist/elements/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n * @ssrsafe yes\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-badge-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.Circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n * @ssrsafe yes\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-badge-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.Circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/badge/styles.css.js

@@ -33,7 +33,7 @@ var styles_css_default = css`:host {
 }
 
 :host([appearance=brand]) {
-  --_kemet-badge-color: var(--kemet-color-brand-primary-base);
+  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]) {

package/dist/elements/badge/styles.css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/button/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { d as TypeRoundedSizes, T as TypeAppearance } from '../../constants-CHvA2ed5.js';
+import { T as TypeRoundedSizes, e as TypeAppearance } from '../../constants-C4-3KYlX.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumVariants {

package/dist/elements/button/index.js

@@ -133,7 +133,7 @@ var styles_css_default = css`:host {
 }
 
 :host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
-  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
@@ -158,7 +158,7 @@ var styles_css_default = css`:host {
 
 :host([variant=text][appearance=brand]:not([disabled])),
 :host([variant=plain][appearance=brand]:not([disabled])) {
-  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([variant=text][appearance=success]:not([disabled])),
@@ -223,9 +223,9 @@ var styles_css_default = css`:host {
 }
 
 :host([variant=outlined][appearance=brand]:not([disabled])) {
-  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
   --_kemet-button-background-color: transparent;
-  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-border-color: var(--kemet-color-brand-primary-darker);
   --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
 }
 

package/dist/elements/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/button/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from '../../utilities/decorators';\nimport type { TypeRoundedSizes, TypeAppearance } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumVariants {\n  Standard = 'standard',\n  Text = 'text',\n  Outlined = 'outlined',\n  Plain = 'plain',\n  Edge = 'edge',\n}\n\nexport enum EnumTargets {\n  Blank = '_blank',\n  Self = '_self',\n  Parent = '_parent',\n  Top = '_top'\n}\n\nexport enum EnumTypes {\n  Button = 'button',\n  Submit = 'submit',\n  Reset = 'reset'\n}\n\nexport enum EnumSizes {\n  XSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  XLarge = 'xl'\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n * @ssrsafe yes\n *\n * @prop {string} href - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {TypeVariants} variant - Controls the type of button.\n * @prop {TypeTargets} target - The target attribute for a link\n * @prop {TypeTypes} type - The type attribute for a button\n * @prop {TypeRoundedSizes} rounded - The border radius of the button\n * @prop {EnumSizes} size - The size of the button\n * @prop {boolean} loading - Determines if the button is in a loading state\n * @prop {EnumAppearance} appearance - The appearance of the button's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover state.\n * @cssproperty --kemet-button-active-brightness - The brightness of the active state.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-border-width - The width of the outline border.\n * @cssproperty --kemet-button-border-style - The style of the outline border.\n *\n * @fires kemet-button-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  href!: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ reflect: true })\n  variant: EnumVariants = EnumVariants.Standard;\n\n  @property()\n  target: EnumTargets = EnumTargets.Self;\n\n  @property()\n  type: EnumTypes = EnumTypes.Button;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n  iconLeft: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n  iconRight: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-button' })\n  iconButton: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded!: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  loading: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance!: TypeAppearance;\n\n  @property({ type: String, reflect: true })\n  size!: EnumSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n  @query('button')\n  internalButton!: HTMLButtonElement;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-button-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    if (this.href && !this.disabled) {\n      return html`\n        <a\n          href=${this.href}\n          target=${this.target}\n          class=\"button\"\n          part=\"button\"\n          @click=${(event: PointerEvent) => this.handleClick(event)}\n        >\n          <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n          <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n          ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n          <span class=\"text\"><slot></slot></span>\n          <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"button\"\n        part=\"button\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=${this.loading ? 'Loading' : ''}\n        @click=${(event: PointerEvent) => this.handleClick(event)}\n      >\n        <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n        <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n        ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n        <span class=\"text\"><slot></slot></span>\n        <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n      </button>\n    `;\n  }\n\n  private handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  private handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n\n  private handleIconButtonChange() {\n    const iconButton = this.querySelector('[slot=\"icon-button\"]');\n    if (iconButton) this.iconButton = true;\n  }\n\n  private makeLightDOMButton() {\n    const button = document.createElement('button');\n\n    for (const attribute of this.attributes) {\n      button.setAttribute(attribute.name, attribute.value);\n    }\n\n    button.type = this.type;\n    button.style.position = 'absolute !important';\n    button.style.width = '0 !important';\n    button.style.height = '0 !important';\n    button.style.clipPath = 'inset(50%) !important';\n    button.style.overflow = 'hidden !important';\n    button.style.whiteSpace = 'nowrap !important';\n    button.value = '';\n\n    return button;\n  }\n\n  private handleClick(event: PointerEvent) {\n    if (this.disabled || this.loading) {\n      event?.preventDefault();\n      return;\n    }\n\n    const form = this.closest('form');\n\n    if (!form || (this.type !== EnumTypes.Submit && this.type !== EnumTypes.Reset)) {\n      return;\n    }\n\n    const lightDOMButton = this.makeLightDOMButton();\n\n    form.appendChild(lightDOMButton);\n    lightDOMButton.click();\n    lightDOMButton.remove();\n  }\n\n\n  /**\n   * Triggers a click event on the button element.\n   * @method click\n   * @public\n   * @returns {void}\n   */\n  click() {\n    if (!this.internalButton) {\n      return;\n    }\n    this.internalButton.click();\n  }\n\n  /**\n   * Triggers a blur on the button element.\n   * @method blur\n   * @public\n   * @returns {void}\n   */\n  blur() {\n    if (!this.internalButton) {\n      return;\n    }\n    this.internalButton.blur();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-button': KemetButton\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-button-hover-brightness: 1.25;\n  --kemet-button-active-brightness: 1.75;\n  --kemet-button-circle-size: 50px;\n  --kemet-button-transition-speed: 300ms;\n  --kemet-button-gap: 0.5rem;\n  --kemet-button-border-width: 1.5px;\n  --kemet-button-border-style: solid;\n\n  /* private */\n  --_kemet-button-brightness: 1;\n  --_kemet-button-font-size: inherit;\n  --_kemet-button-width: auto;\n  --_kemet-button-height: auto;\n  --_kemet-button-padding: 1rem 1.25rem;\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border: 0;\n  --_kemet-button-border-radius: 0;\n  --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-hover-decoration: underline;\n  --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_kemet-button-font-size);\n  color: var(--_kemet-button-font-color);\n  width: var(--_kemet-button-width);\n  height: var(--_kemet-button-height);\n  border: var(--_kemet-button-border);\n  border-radius: var(--_kemet-button-border-radius);\n  filter: brightness(var(--_kemet-button-brightness));\n  transition: filter var(--kemet-button-transition-speed) ease;\n  background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n  --_kemet-button-font-color: var(--kemet-color-font-disabled);\n  --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n  --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  gap: var(--kemet-button-gap);\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  font-size: inherit;\n  width: 100%;\n  padding: var(--_kemet-button-padding);\n  border: 0;\n  background: none;\n}\n\n:host([disabled]) .button {\n  cursor: not-allowed;\n}\n\n:host([variant=text]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n  text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n  --_kemet-button-width: var(--kemet-button-circle-size);\n  --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-success);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-warning);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-error);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-info);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-link);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-padding: 0;\n  --_kemet-button-border: none;\n  --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n  --_kemet-button-font-size: 0.8rem;\n  --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n  --_kemet-button-font-size: 0.9rem;\n  --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n  --_kemet-button-font-size: 1.1rem;\n  --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n  --_kemet-button-font-size: 1.2rem;\n  --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n  --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n  --_kemet-button-padding:  1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n  --kemet-loader-color: var(--_kemet-button-font-color);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n  visibility: hidden;\n}\n\n:host([icon-button]) .text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;\n"],"mappings":"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","names":["EnumVariants","EnumTargets","EnumTypes","EnumSizes"]}
+{"version":3,"sources":["../../../src/elements/button/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from '../../utilities/decorators';\nimport type { TypeRoundedSizes, TypeAppearance } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumVariants {\n  Standard = 'standard',\n  Text = 'text',\n  Outlined = 'outlined',\n  Plain = 'plain',\n  Edge = 'edge',\n}\n\nexport enum EnumTargets {\n  Blank = '_blank',\n  Self = '_self',\n  Parent = '_parent',\n  Top = '_top'\n}\n\nexport enum EnumTypes {\n  Button = 'button',\n  Submit = 'submit',\n  Reset = 'reset'\n}\n\nexport enum EnumSizes {\n  XSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  XLarge = 'xl'\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n * @ssrsafe yes\n *\n * @prop {string} href - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {TypeVariants} variant - Controls the type of button.\n * @prop {TypeTargets} target - The target attribute for a link\n * @prop {TypeTypes} type - The type attribute for a button\n * @prop {TypeRoundedSizes} rounded - The border radius of the button\n * @prop {EnumSizes} size - The size of the button\n * @prop {boolean} loading - Determines if the button is in a loading state\n * @prop {EnumAppearance} appearance - The appearance of the button's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover state.\n * @cssproperty --kemet-button-active-brightness - The brightness of the active state.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-border-width - The width of the outline border.\n * @cssproperty --kemet-button-border-style - The style of the outline border.\n *\n * @fires kemet-button-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  href!: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ reflect: true })\n  variant: EnumVariants = EnumVariants.Standard;\n\n  @property()\n  target: EnumTargets = EnumTargets.Self;\n\n  @property()\n  type: EnumTypes = EnumTypes.Button;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n  iconLeft: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n  iconRight: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-button' })\n  iconButton: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded!: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  loading: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance!: TypeAppearance;\n\n  @property({ type: String, reflect: true })\n  size!: EnumSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n  @query('button')\n  internalButton!: HTMLButtonElement;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-button-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    if (this.href && !this.disabled) {\n      return html`\n        <a\n          href=${this.href}\n          target=${this.target}\n          class=\"button\"\n          part=\"button\"\n          @click=${(event: PointerEvent) => this.handleClick(event)}\n        >\n          <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n          <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n          ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n          <span class=\"text\"><slot></slot></span>\n          <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"button\"\n        part=\"button\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=${this.loading ? 'Loading' : ''}\n        @click=${(event: PointerEvent) => this.handleClick(event)}\n      >\n        <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n        <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n        ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n        <span class=\"text\"><slot></slot></span>\n        <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n      </button>\n    `;\n  }\n\n  private handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  private handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n\n  private handleIconButtonChange() {\n    const iconButton = this.querySelector('[slot=\"icon-button\"]');\n    if (iconButton) this.iconButton = true;\n  }\n\n  private makeLightDOMButton() {\n    const button = document.createElement('button');\n\n    for (const attribute of this.attributes) {\n      button.setAttribute(attribute.name, attribute.value);\n    }\n\n    button.type = this.type;\n    button.style.position = 'absolute !important';\n    button.style.width = '0 !important';\n    button.style.height = '0 !important';\n    button.style.clipPath = 'inset(50%) !important';\n    button.style.overflow = 'hidden !important';\n    button.style.whiteSpace = 'nowrap !important';\n    button.value = '';\n\n    return button;\n  }\n\n  private handleClick(event: PointerEvent) {\n    if (this.disabled || this.loading) {\n      event?.preventDefault();\n      return;\n    }\n\n    const form = this.closest('form');\n\n    if (!form || (this.type !== EnumTypes.Submit && this.type !== EnumTypes.Reset)) {\n      return;\n    }\n\n    const lightDOMButton = this.makeLightDOMButton();\n\n    form.appendChild(lightDOMButton);\n    lightDOMButton.click();\n    lightDOMButton.remove();\n  }\n\n\n  /**\n   * Triggers a click event on the button element.\n   * @method click\n   * @public\n   * @returns {void}\n   */\n  click() {\n    if (!this.internalButton) {\n      return;\n    }\n    this.internalButton.click();\n  }\n\n  /**\n   * Triggers a blur on the button element.\n   * @method blur\n   * @public\n   * @returns {void}\n   */\n  blur() {\n    if (!this.internalButton) {\n      return;\n    }\n    this.internalButton.blur();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-button': KemetButton\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-button-hover-brightness: 1.25;\n  --kemet-button-active-brightness: 1.75;\n  --kemet-button-circle-size: 50px;\n  --kemet-button-transition-speed: 300ms;\n  --kemet-button-gap: 0.5rem;\n  --kemet-button-border-width: 1.5px;\n  --kemet-button-border-style: solid;\n\n  /* private */\n  --_kemet-button-brightness: 1;\n  --_kemet-button-font-size: inherit;\n  --_kemet-button-width: auto;\n  --_kemet-button-height: auto;\n  --_kemet-button-padding: 1rem 1.25rem;\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border: 0;\n  --_kemet-button-border-radius: 0;\n  --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-hover-decoration: underline;\n  --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_kemet-button-font-size);\n  color: var(--_kemet-button-font-color);\n  width: var(--_kemet-button-width);\n  height: var(--_kemet-button-height);\n  border: var(--_kemet-button-border);\n  border-radius: var(--_kemet-button-border-radius);\n  filter: brightness(var(--_kemet-button-brightness));\n  transition: filter var(--kemet-button-transition-speed) ease;\n  background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n  --_kemet-button-font-color: var(--kemet-color-font-disabled);\n  --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n  --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  gap: var(--kemet-button-gap);\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  font-size: inherit;\n  width: 100%;\n  padding: var(--_kemet-button-padding);\n  border: 0;\n  background: none;\n}\n\n:host([disabled]) .button {\n  cursor: not-allowed;\n}\n\n:host([variant=text]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n  text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n  --_kemet-button-width: var(--kemet-button-circle-size);\n  --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-brand-primary-darker);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-success);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-warning);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-error);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-info);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-link);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-padding: 0;\n  --_kemet-button-border: none;\n  --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n  --_kemet-button-font-size: 0.8rem;\n  --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n  --_kemet-button-font-size: 0.9rem;\n  --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n  --_kemet-button-font-size: 1.1rem;\n  --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n  --_kemet-button-font-size: 1.2rem;\n  --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n  --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n  --_kemet-button-padding:  1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n  --kemet-loader-color: var(--_kemet-button-font-color);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n  visibility: hidden;\n}\n\n:host([icon-button]) .text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;\n"],"mappings":"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","names":["EnumVariants","EnumTargets","EnumTypes","EnumSizes"]}

package/dist/elements/button/styles.css.js

@@ -107,7 +107,7 @@ var styles_css_default = css`:host {
 }
 
 :host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
-  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
@@ -132,7 +132,7 @@ var styles_css_default = css`:host {
 
 :host([variant=text][appearance=brand]:not([disabled])),
 :host([variant=plain][appearance=brand]:not([disabled])) {
-  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([variant=text][appearance=success]:not([disabled])),
@@ -197,9 +197,9 @@ var styles_css_default = css`:host {
 }
 
 :host([variant=outlined][appearance=brand]:not([disabled])) {
-  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
   --_kemet-button-background-color: transparent;
-  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-border-color: var(--kemet-color-brand-primary-darker);
   --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
 }
 

package/dist/elements/button/styles.css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-button-hover-brightness: 1.25;\n  --kemet-button-active-brightness: 1.75;\n  --kemet-button-circle-size: 50px;\n  --kemet-button-transition-speed: 300ms;\n  --kemet-button-gap: 0.5rem;\n  --kemet-button-border-width: 1.5px;\n  --kemet-button-border-style: solid;\n\n  /* private */\n  --_kemet-button-brightness: 1;\n  --_kemet-button-font-size: inherit;\n  --_kemet-button-width: auto;\n  --_kemet-button-height: auto;\n  --_kemet-button-padding: 1rem 1.25rem;\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border: 0;\n  --_kemet-button-border-radius: 0;\n  --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-hover-decoration: underline;\n  --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_kemet-button-font-size);\n  color: var(--_kemet-button-font-color);\n  width: var(--_kemet-button-width);\n  height: var(--_kemet-button-height);\n  border: var(--_kemet-button-border);\n  border-radius: var(--_kemet-button-border-radius);\n  filter: brightness(var(--_kemet-button-brightness));\n  transition: filter var(--kemet-button-transition-speed) ease;\n  background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n  --_kemet-button-font-color: var(--kemet-color-font-disabled);\n  --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n  --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  gap: var(--kemet-button-gap);\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  font-size: inherit;\n  width: 100%;\n  padding: var(--_kemet-button-padding);\n  border: 0;\n  background: none;\n}\n\n:host([disabled]) .button {\n  cursor: not-allowed;\n}\n\n:host([variant=text]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n  text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n  --_kemet-button-width: var(--kemet-button-circle-size);\n  --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-success);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-warning);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-error);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-info);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-link);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-padding: 0;\n  --_kemet-button-border: none;\n  --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n  --_kemet-button-font-size: 0.8rem;\n  --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n  --_kemet-button-font-size: 0.9rem;\n  --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n  --_kemet-button-font-size: 1.1rem;\n  --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n  --_kemet-button-font-size: 1.2rem;\n  --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n  --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n  --_kemet-button-padding:  1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n  --kemet-loader-color: var(--_kemet-button-font-color);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n  visibility: hidden;\n}\n\n:host([icon-button]) .text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-button-hover-brightness: 1.25;\n  --kemet-button-active-brightness: 1.75;\n  --kemet-button-circle-size: 50px;\n  --kemet-button-transition-speed: 300ms;\n  --kemet-button-gap: 0.5rem;\n  --kemet-button-border-width: 1.5px;\n  --kemet-button-border-style: solid;\n\n  /* private */\n  --_kemet-button-brightness: 1;\n  --_kemet-button-font-size: inherit;\n  --_kemet-button-width: auto;\n  --_kemet-button-height: auto;\n  --_kemet-button-padding: 1rem 1.25rem;\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border: 0;\n  --_kemet-button-border-radius: 0;\n  --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-hover-decoration: underline;\n  --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_kemet-button-font-size);\n  color: var(--_kemet-button-font-color);\n  width: var(--_kemet-button-width);\n  height: var(--_kemet-button-height);\n  border: var(--_kemet-button-border);\n  border-radius: var(--_kemet-button-border-radius);\n  filter: brightness(var(--_kemet-button-brightness));\n  transition: filter var(--kemet-button-transition-speed) ease;\n  background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n  --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n  --_kemet-button-font-color: var(--kemet-color-font-disabled);\n  --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n  --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  gap: var(--kemet-button-gap);\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  font-size: inherit;\n  width: 100%;\n  padding: var(--_kemet-button-padding);\n  border: 0;\n  background: none;\n}\n\n:host([disabled]) .button {\n  cursor: not-allowed;\n}\n\n:host([variant=text]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n  text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n  --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n  --_kemet-button-width: var(--kemet-button-circle-size);\n  --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n  --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-brand-primary-darker);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-success);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-success);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-warning);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-warning);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-error);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-error);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-info);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-info);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n  --_kemet-button-font-color: var(--kemet-color-background-link);\n  --_kemet-button-background-color: transparent;\n  --_kemet-button-border-color: var(--kemet-color-background-link);\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n  --_kemet-button-font-color: var(--kemet-color-font-base);\n  --_kemet-button-padding: 0;\n  --_kemet-button-border: none;\n  --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n  --_kemet-button-font-size: 0.8rem;\n  --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n  --_kemet-button-font-size: 0.9rem;\n  --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n  --_kemet-button-font-size: 1.1rem;\n  --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n  --_kemet-button-font-size: 1.2rem;\n  --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n  --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n  --_kemet-button-padding:  1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n  --kemet-loader-color: var(--_kemet-button-font-color);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n  visibility: hidden;\n}\n\n:host([icon-button]) .text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/card/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { e as EnumRoundedSizes } from '../../constants-CHvA2ed5.js';
+import { d as EnumRoundedSizes } from '../../constants-C4-3KYlX.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumElevation {

package/dist/elements/checkbox/index.d.ts

@@ -2,7 +2,7 @@ import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
 import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
-import { E as EnumAppearances } from '../../constants-CHvA2ed5.js';
+import { E as EnumAppearances } from '../../constants-C4-3KYlX.js';
 
 /**
  * @since 1.0.0

package/dist/elements/checkbox/index.js

@@ -36,8 +36,10 @@ var FormSubmitController = class {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
   }
   hostConnected() {
+    console.log("what?!");
     this.form = this.options.form(this.host);
     if (this.form) {
+      console.log("Adding form listeners");
       this.form.addEventListener("formdata", this.handleFormData);
       this.form.addEventListener("submit", this.handleFormSubmit);
     }
@@ -58,6 +60,7 @@ var FormSubmitController = class {
     }
   }
   handleFormSubmit(event) {
+    console.log("~~Form submitted~~");
     event.preventDefault();
     event.stopImmediatePropagation();
     const disabled = this.options.disabled(this.host);
@@ -68,14 +71,14 @@ var FormSubmitController = class {
         if (component.checkValidity) {
           component.checkValidity();
           if (!component.checkValidity()) {
-            component.status = "error";
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
                 bubbles: true,
                 composed: true,
                 detail: {
-                  status: "error",
+                  status: "error" /* Error */,
                   validity: component.validity ? component.validity : {},
                   element: component
                 }
@@ -83,7 +86,7 @@ var FormSubmitController = class {
             );
           }
           if (component.checkLimitValidity && !component.checkLimitValidity()) {
-            component.status = "error";
+            component.appearance = "error" /* Error */;
             component.invalid = true;
             component.dispatchEvent(
               new CustomEvent("kemet-input-status", {
@@ -210,7 +213,7 @@ button {
 }
 
 :host([appearance=brand]) {
-  --kemet-checkbox-color: var(--kemet-color-brand-primary-base);
+  --kemet-checkbox-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=error]) {