kemet-ui 4.0.2 → 5.0.0

package/dist/elements/button/index.js

@@ -0,0 +1,541 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/button/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/button/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-button-hover-brightness: 1.25;
+  --kemet-button-active-brightness: 1.75;
+  --kemet-button-circle-size: 50px;
+  --kemet-button-transition-speed: 300ms;
+  --kemet-button-gap: 0.5rem;
+  --kemet-button-border-width: 1.5px;
+  --kemet-button-border-style: solid;
+
+  /* private */
+  --_kemet-button-brightness: 1;
+  --_kemet-button-font-size: inherit;
+  --_kemet-button-width: auto;
+  --_kemet-button-height: auto;
+  --_kemet-button-padding: 1rem 1.25rem;
+  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-button-border: 0;
+  --_kemet-button-border-radius: 0;
+  --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);
+  --_kemet-button-hover-decoration: underline;
+  --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);
+
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--_kemet-button-font-size);
+  color: var(--_kemet-button-font-color);
+  width: var(--_kemet-button-width);
+  height: var(--_kemet-button-height);
+  border: var(--_kemet-button-border);
+  border-radius: var(--_kemet-button-border-radius);
+  filter: brightness(var(--_kemet-button-brightness));
+  transition: filter var(--kemet-button-transition-speed) ease;
+  background-color: var(--_kemet-button-background-color);
+}
+
+:host(:hover:not([disabled])) {
+  --_kemet-button-brightness: var(--kemet-button-hover-brightness);
+}
+
+:host(:active:not([disabled])) {
+  --_kemet-button-brightness: var(--kemet-button-active-brightness);
+}
+
+:host([disabled]) {
+  --_kemet-button-font-color: var(--kemet-color-font-disabled);
+  --_kemet-button-background-color: var(--kemet-color-background-disabled);
+}
+
+:host([disabled][variant=outlined]) {
+  --_kemet-button-border-color: var(--kemet-color-font-disabled);
+}
+
+:host([polarity=dark]) {
+  --_kemet-button-font-color: var(--kemet-color-font-base);
+  --_kemet-button-background-color: var(--kemet-color-background-base);
+}
+
+:host([polarity=dark][appearance]) {
+  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([polarity=dark][variant=text]),
+:host([polarity=dark][variant=plain]) {
+  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([polarity=dark][variant=outlined]) {
+  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-button-border-color: var(--kemet-color-font-inverse-base);
+}
+
+.button {
+  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  gap: var(--kemet-button-gap);
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  font-size: inherit;
+  width: 100%;
+  padding: var(--_kemet-button-padding);
+  border: 0;
+  background: none;
+}
+
+:host([disabled]) .button {
+  cursor: not-allowed;
+}
+
+:host([variant=text]) {
+  --_kemet-button-font-color: var(--kemet-color-font-base);
+  --_kemet-button-background-color: none;
+}
+
+:host([variant=text]:hover) {
+  text-decoration: var(--_kemet-button-hover-decoration);
+}
+
+:host([appearance]:not([disabled]):not([variant])) {
+  --_kemet-button-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
+  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
+  --_kemet-button-background-color: var(--kemet-color-background-success);
+}
+
+:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
+  --_kemet-button-background-color: var(--kemet-color-background-warning);
+}
+
+:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
+  --_kemet-button-background-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
+  --_kemet-button-background-color: var(--kemet-color-background-info);
+}
+
+:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
+  --_kemet-button-background-color: var(--kemet-color-background-link);
+}
+
+:host([variant=text][appearance=brand]:not([disabled])),
+:host([variant=plain][appearance=brand]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([variant=text][appearance=success]:not([disabled])),
+:host([variant=plain][appearance=success]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-success);
+}
+
+:host([variant=text][appearance=warning]:not([disabled])),
+:host([variant=plain][appearance=warning]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-warning);
+}
+
+:host([variant=text][appearance=error]:not([disabled])),
+:host([variant=plain][appearance=error]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-error);
+}
+
+:host([variant=text][appearance=info]:not([disabled])),
+:host([variant=plain][appearance=info]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-info);
+}
+
+:host([variant=text][appearance=link]:not([disabled])),
+:host([variant=plain][appearance=link]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-link);
+}
+
+:host([appearance=neutral][polarity=dark]) {
+  --_kemet-button-font-color: var(--kemet-color-font-base);
+}
+
+:host([rounded]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-circle);
+  --_kemet-button-width: var(--kemet-button-circle-size);
+  --_kemet-button-height: var(--kemet-button-circle-size);
+}
+
+:host([rounded=pill]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([variant=outlined]) {
+  --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);
+  --_kemet-button-background-color: transparent;
+  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
+}
+
+:host([variant=outlined][appearance=brand]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-background-color: transparent;
+  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
+}
+
+:host([variant=outlined][appearance=success]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-success);
+  --_kemet-button-background-color: transparent;
+  --_kemet-button-border-color: var(--kemet-color-background-success);
+  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
+}
+
+:host([variant=outlined][appearance=warning]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-warning);
+  --_kemet-button-background-color: transparent;
+  --_kemet-button-border-color: var(--kemet-color-background-warning);
+  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
+}
+
+:host([variant=outlined][appearance=error]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-error);
+  --_kemet-button-background-color: transparent;
+  --_kemet-button-border-color: var(--kemet-color-background-error);
+  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
+}
+
+:host([variant=outlined][appearance=info]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-info);
+  --_kemet-button-background-color: transparent;
+  --_kemet-button-border-color: var(--kemet-color-background-info);
+  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
+}
+
+:host([variant=outlined][appearance=link]:not([disabled])) {
+  --_kemet-button-font-color: var(--kemet-color-background-link);
+  --_kemet-button-background-color: transparent;
+  --_kemet-button-border-color: var(--kemet-color-background-link);
+  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
+}
+
+
+
+:host([variant=edge]) {
+  --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);
+}
+
+:host([variant=plain]) {
+  --_kemet-button-font-color: var(--kemet-color-font-base);
+  --_kemet-button-padding: 0;
+  --_kemet-button-border: none;
+  --_kemet-button-background-color: transparent;
+}
+
+:host([size=xs]) {
+  --_kemet-button-font-size: 0.8rem;
+  --_kemet-button-padding: 0.5rem 0.75rem;
+}
+
+:host([size=sm]) {
+  --_kemet-button-font-size: 0.9rem;
+  --_kemet-button-padding: 0.75rem 1rem;
+}
+
+:host([size=lg]) {
+  --_kemet-button-font-size: 1.1rem;
+  --_kemet-button-padding: 1.25rem 1.5rem;
+}
+
+:host([size=xl]) {
+  --_kemet-button-font-size: 1.2rem;
+  --_kemet-button-padding: 1.5rem 2rem;
+}
+
+:host([icon-left]) {
+  --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;
+}
+
+:host([icon-right]) {
+  --_kemet-button-padding:  1rem .75rem 1rem 1.25rem;
+}
+
+
+::slotted([slot="loader"]) {
+  --kemet-loader-color: var(--_kemet-button-font-color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:host([loading]) .text {
+  visibility: hidden;
+}
+
+:host([icon-button]) .text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`;
+
+// src/elements/button/index.ts
+var EnumVariants = /* @__PURE__ */ ((EnumVariants2) => {
+  EnumVariants2["Standard"] = "standard";
+  EnumVariants2["Text"] = "text";
+  EnumVariants2["Outlined"] = "outlined";
+  EnumVariants2["Plain"] = "plain";
+  EnumVariants2["Edge"] = "edge";
+  return EnumVariants2;
+})(EnumVariants || {});
+var EnumTargets = /* @__PURE__ */ ((EnumTargets2) => {
+  EnumTargets2["Blank"] = "_blank";
+  EnumTargets2["Self"] = "_self";
+  EnumTargets2["Parent"] = "_parent";
+  EnumTargets2["Top"] = "_top";
+  return EnumTargets2;
+})(EnumTargets || {});
+var EnumTypes = /* @__PURE__ */ ((EnumTypes2) => {
+  EnumTypes2["Button"] = "button";
+  EnumTypes2["Submit"] = "submit";
+  EnumTypes2["Reset"] = "reset";
+  return EnumTypes2;
+})(EnumTypes || {});
+var EnumSizes = /* @__PURE__ */ ((EnumSizes2) => {
+  EnumSizes2["XSmall"] = "xs";
+  EnumSizes2["Small"] = "sm";
+  EnumSizes2["Medium"] = "md";
+  EnumSizes2["Large"] = "lg";
+  EnumSizes2["XLarge"] = "xl";
+  return EnumSizes2;
+})(EnumSizes || {});
+var KemetButton = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.variant = "standard" /* Standard */;
+    this.target = "_self" /* Self */;
+    this.type = "button" /* Button */;
+    this.iconLeft = false;
+    this.iconRight = false;
+    this.iconButton = false;
+    this.loading = false;
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-button-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    if (this.href && !this.disabled) {
+      return html`
+        <a
+          href=${this.href}
+          target=${this.target}
+          class="button"
+          part="button"
+          @click=${(event) => this.handleClick(event)}
+        >
+          <slot name="left" @slotchange=${this.handleLeftChange}></slot>
+          <slot name="icon-button" @slotchange=${this.handleIconButtonChange}></slot>
+          ${this.loading ? html`<slot name="loader"></slot>` : ""}
+          <span class="text"><slot></slot></span>
+          <slot name="right" @slotchange=${this.handleRightChange}></slot>
+        </a>
+      `;
+    }
+    return html`
+      <button
+        class="button"
+        part="button"
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label=${this.loading ? "Loading" : ""}
+        @click=${(event) => this.handleClick(event)}
+      >
+        <slot name="left" @slotchange=${this.handleLeftChange}></slot>
+        <slot name="icon-button" @slotchange=${this.handleIconButtonChange}></slot>
+        ${this.loading ? html`<slot name="loader"></slot>` : ""}
+        <span class="text"><slot></slot></span>
+        <slot name="right" @slotchange=${this.handleRightChange}></slot>
+      </button>
+    `;
+  }
+  handleLeftChange() {
+    const left = this.querySelector('[slot="left"]');
+    if (left) this.iconLeft = true;
+  }
+  handleRightChange() {
+    const right = this.querySelector('[slot="right"]');
+    if (right) this.iconRight = true;
+  }
+  handleIconButtonChange() {
+    const iconButton = this.querySelector('[slot="icon-button"]');
+    if (iconButton) this.iconButton = true;
+  }
+  makeLightDOMButton() {
+    const button = document.createElement("button");
+    for (const attribute of this.attributes) {
+      button.setAttribute(attribute.name, attribute.value);
+    }
+    button.type = this.type;
+    button.style.position = "absolute !important";
+    button.style.width = "0 !important";
+    button.style.height = "0 !important";
+    button.style.clipPath = "inset(50%) !important";
+    button.style.overflow = "hidden !important";
+    button.style.whiteSpace = "nowrap !important";
+    button.value = "";
+    return button;
+  }
+  handleClick(event) {
+    if (this.disabled || this.loading) {
+      event?.preventDefault();
+      return;
+    }
+    const form = this.closest("form");
+    if (!form || this.type !== "submit" /* Submit */ && this.type !== "reset" /* Reset */) {
+      return;
+    }
+    const lightDOMButton = this.makeLightDOMButton();
+    form.appendChild(lightDOMButton);
+    lightDOMButton.click();
+    lightDOMButton.remove();
+  }
+  /**
+   * Triggers a click event on the button element.
+   * @method click
+   * @public
+   * @returns {void}
+   */
+  click() {
+    if (!this.internalButton) {
+      return;
+    }
+    this.internalButton.click();
+  }
+  /**
+   * Triggers a blur on the button element.
+   * @method blur
+   * @public
+   * @returns {void}
+   */
+  blur() {
+    if (!this.internalButton) {
+      return;
+    }
+    this.internalButton.blur();
+  }
+};
+KemetButton.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], KemetButton.prototype, "href", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], KemetButton.prototype, "variant", 2);
+__decorateClass([
+  property()
+], KemetButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], KemetButton.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-left" })
+], KemetButton.prototype, "iconLeft", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-right" })
+], KemetButton.prototype, "iconRight", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-button" })
+], KemetButton.prototype, "iconButton", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetButton.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "loading", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetButton.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetButton.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetButton.prototype, "dom", 2);
+__decorateClass([
+  query("button")
+], KemetButton.prototype, "internalButton", 2);
+KemetButton = __decorateClass([
+  customElement("kemet-button")
+], KemetButton);
+export {
+  EnumSizes,
+  EnumTargets,
+  EnumTypes,
+  EnumVariants,
+  KemetButton as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/button/index.ts","../../../src/utilities/events.ts","../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\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 *\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 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"]}

package/dist/elements/button/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };