kemet-ui 4.0.0 → 4.0.2

package/dist/elements/button.d.ts

@@ -0,0 +1,124 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { F as FormSubmitController } from '../form-controller-BR0gZhrG.js';
+import { a as TypeRoundedSizes } from '../constants-CcB9aXsT.js';
+
+declare const variants: readonly ["standard", "text", "outlined"];
+declare enum EnumVariants {
+    STANDARD = "standard",
+    TEXT = "text",
+    OUTLINED = "outlined"
+}
+type TypeVariants = typeof variants[number];
+declare const targets: readonly ["_blank", "_self", "_parent", "_top"];
+declare enum EnumTargets {
+    BLANK = "_blank",
+    SELF = "_self",
+    PARENT = "_parent",
+    TOP = "_top"
+}
+type TypeTargets = typeof targets[number];
+declare const types: readonly ["button", "submit", "reset"];
+declare enum EnumTypes {
+    BUTTON = "button",
+    SUBMIT = "submit",
+    RESET = "reset"
+}
+type TypeTypes = typeof types[number];
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-button
+ * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.
+ *
+ * @prop {boolean} active - Determines if the button is active
+ * @prop {boolean} hover - Is true when the button is hovered
+ * @prop {boolean} focused - Is true when the button is focused
+ * @prop {string} link - The url a button should link too
+ * @prop {boolean} outlined - Outline style for a button
+ * @prop {boolean} disabled - Determines whether not a button is disabled
+ * @prop {TypeVariants} variant - Controls the type of button. standard | text | circle | rounded | pill
+ * @prop {TypeTargets} target - The target attribute for a link
+ * @prop {TypeTypes} type - The type attribute for a button
+ * @prop {TypeRoundedSizes} rounded - The border radius of the button
+ *
+ * @slot left - Allows you to place an icon to the left of the button text.
+ * @slot right - Allows you to place an icon to the right of the button text.
+ *
+ * @csspart button - The button or anchor element.
+ *
+ * @cssproperty --kemet-button-font-size - The font size.
+ * @cssproperty --kemet-button-color - The text color.
+ * @cssproperty --kemet-button-width - The width.
+ * @cssproperty --kemet-button-height - The height.
+ * @cssproperty --kemet-button-border - The border.
+ * @cssproperty --kemet-button-border-radius - The border radius.
+ * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.
+ * @cssproperty --kemet-button-background-color - The background color.
+ * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect.
+ * @cssproperty --kemet-button-gap - The gap between the button and icons.
+ * @cssproperty --kemet-button-padding - The button padding.
+ * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover.
+ * @cssproperty --kemet-button-circle-size - The diameter of a circle button.
+ * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button.
+ * @cssproperty --kemet-button-border-width - The width of the outline border.
+ * @cssproperty --kemet-button-border-style - The style of the outline border.
+ * @cssproperty --kemet-button-border-color - The color of the outline border.
+ * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state.
+ *
+ */
+declare class KemetButton extends LitElement {
+    /** @internal */
+    formSubmitController: FormSubmitController;
+    static styles: lit.CSSResult[];
+    active: boolean;
+    hover: boolean;
+    focused: boolean;
+    link: string;
+    disabled: boolean;
+    variant: TypeVariants;
+    target: TypeTargets;
+    type: TypeTypes;
+    iconLeft: boolean;
+    iconRight: boolean;
+    rounded: TypeRoundedSizes;
+    constructor();
+    render(): lit_html.TemplateResult<1>;
+    handleLeftChange(): void;
+    handleRightChange(): void;
+    /**
+     * Sets hover to true onMouseOver
+     * @private
+     */
+    handleMouseOver(): void;
+    /**
+     * Sets hover to false onMouseOut
+     * @private
+     */
+    handleMouseOut(): void;
+    /**
+     * Handles click behavior
+     * @private
+     */
+    handleClick(): void;
+    /**
+     * Handles blur
+     * @private
+     */
+    handleBlur(): void;
+    /**
+     * Handles keyup
+     * @private
+     * @param {object} event - event object
+     */
+    handleKeyUp(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-button': KemetButton;
+    }
+}
+
+export { EnumTargets, EnumTypes, EnumVariants, type TypeTargets, type TypeTypes, type TypeVariants, KemetButton as default, targets, types, variants };

package/dist/elements/button.js

@@ -0,0 +1,414 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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.ts
+var button_exports = {};
+__export(button_exports, {
+  EnumTargets: () => EnumTargets,
+  EnumTypes: () => EnumTypes,
+  EnumVariants: () => EnumVariants,
+  default: () => KemetButton,
+  targets: () => targets,
+  types: () => types,
+  variants: () => variants
+});
+module.exports = __toCommonJS(button_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/button.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  :host {
+    --kemet-button-font-size: inherit;
+    --kemet-button-color: rgb(var(--kemet-color-background));
+    --kemet-button-width: auto;
+    --kemet-button-height: auto;
+    --kemet-button-border: 0;
+    --kemet-button-border-radius: 0;
+    --kemet-button-transition-speed: 300ms;
+    --kemet-button-background-color: rgb(var(--kemet-color-foreground));
+    --kemet-button-hover-brightness: 1.25;
+    --kemet-button-disabled-opacity: 0.5;
+    --kemet-button-gap: 0.5rem;
+    --kemet-button-padding: 1rem 1.25rem;
+    --kemet-button-hover-decoration: underline;
+    --kemet-button-circle-size: 50px;
+    --kemet-button-border-width: 1.5px;
+    --kemet-button-border-style: solid;
+    --kemet-button-border-color: rgb(var(--kemet-color-foreground));
+
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--kemet-button-font-size);
+    color: var(--kemet-button-color);
+    width: var(--kemet-button-width);
+    height: var(--kemet-button-height);
+    border: var(--kemet-button-border);
+    border-radius: var(--kemet-button-border-radius);
+    transition: filter var(--kemet-button-transition-speed) ease;
+    background-color: var(--kemet-button-background-color);
+  }
+
+  :host(:hover:not([disabled])) {
+    filter: brightness(var(--kemet-button-hover-brightness));
+  }
+
+  :host([disabled]) {
+    opacity: var(--kemet-button-disabled-opacity);
+  }
+
+  .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-color: rgb(var(--kemet-color-text));
+    --kemet-button-background-color: none;
+  }
+
+  :host([variant=text]:hover) {
+    text-decoration: var(--kemet-button-hover-decoration);
+  }
+
+  :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-color: rgb(var(--kemet-color-foreground));
+    --kemet-button-background-color: transparent;
+    --kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--kemet-button-border-color);
+  }
+
+  :host([icon-left]) {
+    --kemet-button-padding: 1rem 1.25rem 1rem .75rem;
+  }
+
+  :host([icon-right]) {
+    --kemet-button-padding:  1rem .75rem 1rem 1.25rem;
+  }
+`;
+
+// src/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = void 0) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => input.closest("form"),
+      name: (input) => input.name,
+      value: (input) => input.value,
+      disabled: (input) => input.disabled,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+  hostConnected() {
+    this.form = this.options.form(this.host);
+    if (this.form) {
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+    }
+  }
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form = void 0;
+    }
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
+      event.formData?.append(name, value.toString());
+    }
+  }
+  handleFormSubmit(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const disabled = this.options.disabled(this.host);
+    this.form = this.options.form(this.host);
+    if (this.form && !disabled) {
+      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
+      components.forEach((component) => {
+        if (component.checkValidity) {
+          component.checkValidity();
+          if (!component.checkValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: component.validity ? component.validity : {},
+                  element: component
+                }
+              })
+            );
+          }
+          if (component.checkLimitValidity && !component.checkLimitValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: { passedLimit: true },
+                  element: component
+                }
+              })
+            );
+          }
+        }
+      });
+    }
+  }
+  submit() {
+    const button = document.createElement("button");
+    if (this.form) {
+      button.type = "submit";
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clip = "rect(0 0 0 0)";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+};
+
+// src/elements/button.ts
+var variants = ["standard", "text", "outlined"];
+var EnumVariants = /* @__PURE__ */ ((EnumVariants2) => {
+  EnumVariants2["STANDARD"] = "standard";
+  EnumVariants2["TEXT"] = "text";
+  EnumVariants2["OUTLINED"] = "outlined";
+  return EnumVariants2;
+})(EnumVariants || {});
+var targets = ["_blank", "_self", "_parent", "_top"];
+var EnumTargets = /* @__PURE__ */ ((EnumTargets2) => {
+  EnumTargets2["BLANK"] = "_blank";
+  EnumTargets2["SELF"] = "_self";
+  EnumTargets2["PARENT"] = "_parent";
+  EnumTargets2["TOP"] = "_top";
+  return EnumTargets2;
+})(EnumTargets || {});
+var types = ["button", "submit", "reset"];
+var EnumTypes = /* @__PURE__ */ ((EnumTypes2) => {
+  EnumTypes2["BUTTON"] = "button";
+  EnumTypes2["SUBMIT"] = "submit";
+  EnumTypes2["RESET"] = "reset";
+  return EnumTypes2;
+})(EnumTypes || {});
+var KemetButton = class extends import_lit2.LitElement {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.variant = "standard" /* STANDARD */;
+    this.target = "_self" /* SELF */;
+    this.type = "button" /* BUTTON */;
+    this.iconLeft = false;
+    this.iconRight = false;
+    this.addEventListener("click", this.handleClick.bind(this));
+    this.addEventListener("mouseover", this.handleMouseOver.bind(this));
+    this.addEventListener("mouseout", this.handleMouseOut.bind(this));
+    this.addEventListener("blur", this.handleBlur.bind(this));
+    this.addEventListener("keyup", (event) => this.handleKeyUp(event));
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  render() {
+    if (this.link && !this.disabled) {
+      return import_lit2.html`
+        <a href=${this.link} target=${this.target} class="button" role="button" part="button">
+          <slot name="left" @slotchange=${this.handleLeftChange}></slot>
+          <slot></slot>
+          <slot name="right" @slotchange=${this.handleRightChange}></slot>
+        </a>
+      `;
+    }
+    return import_lit2.html`
+      <button class="button" part="button" type=${this.type} ?disabled=${this.disabled} aria-disabled=${this.disabled ? "true" : "false"}>
+        <slot name="left" @slotchange=${this.handleLeftChange}></slot>
+        <slot></slot>
+        <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;
+  }
+  /**
+   * Sets hover to true onMouseOver
+   * @private
+   */
+  handleMouseOver() {
+    this.hover = true;
+  }
+  /**
+   * Sets hover to false onMouseOut
+   * @private
+   */
+  handleMouseOut() {
+    this.hover = false;
+  }
+  /**
+   * Handles click behavior
+   * @private
+   */
+  handleClick() {
+    if (!this.disabled) {
+      this.hover = false;
+      this.active = true;
+      setTimeout(() => {
+        this.active = false;
+      }, 300);
+      if (this.shadowRoot.querySelector("button")) {
+        this.formSubmitController.submit();
+      }
+    }
+  }
+  /**
+   * Handles blur
+   * @private
+   */
+  handleBlur() {
+    this.focused = false;
+    this.active = false;
+    this.hover = false;
+  }
+  /**
+   * Handles keyup
+   * @private
+   * @param {object} event - event object
+   */
+  handleKeyUp(event) {
+    if (event.key === "Tab") {
+      this.focused = true;
+    }
+  }
+};
+KemetButton.styles = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetButton.prototype, "active", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetButton.prototype, "hover", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetButton.prototype, "focused", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetButton.prototype, "link", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetButton.prototype, "disabled", 2);
+__decorateClass([
+  (0, import_decorators.property)({ reflect: true })
+], KemetButton.prototype, "variant", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetButton.prototype, "target", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetButton.prototype, "type", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true, attribute: "icon-left" })
+], KemetButton.prototype, "iconLeft", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true, attribute: "icon-right" })
+], KemetButton.prototype, "iconRight", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetButton.prototype, "rounded", 2);
+KemetButton = __decorateClass([
+  (0, import_decorators.customElement)("kemet-button")
+], KemetButton);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnumTargets,
+  EnumTypes,
+  EnumVariants,
+  targets,
+  types,
+  variants
+});
+//# sourceMappingURL=button.js.map

package/dist/elements/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/button.ts","../../src/styles/elements/button.ts","../../src/utilities/form-controller.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/button';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport { TypeRoundedSizes } from '../utilities/constants';\n\nexport const variants = ['standard', 'text', 'outlined'] as const;\nexport enum EnumVariants {\n  STANDARD = 'standard',\n  TEXT = 'text',\n  OUTLINED = 'outlined',\n}\nexport type TypeVariants = typeof variants[number];\n\nexport const targets = ['_blank', '_self', '_parent', '_top'] as const;\nexport enum EnumTargets {\n  BLANK = '_blank',\n  SELF = '_self',\n  PARENT = '_parent',\n  TOP = '_top'\n}\nexport type TypeTargets = typeof targets[number];\n\nexport const types = ['button', 'submit', 'reset'] as const;\nexport enum EnumTypes {\n  BUTTON = 'button',\n  SUBMIT = 'submit',\n  RESET = 'reset'\n}\nexport type TypeTypes = typeof types[number];\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 {boolean} active - Determines if the button is active\n * @prop {boolean} hover - Is true when the button is hovered\n * @prop {boolean} focused - Is true when the button is focused\n * @prop {string} link - 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. standard | text | circle | rounded | pill\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 *\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-font-size - The font size.\n * @cssproperty --kemet-button-color - The text color.\n * @cssproperty --kemet-button-width - The width.\n * @cssproperty --kemet-button-height - The height.\n * @cssproperty --kemet-button-border - The border.\n * @cssproperty --kemet-button-border-radius - The border radius.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-background-color - The background color.\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-padding - The button padding.\n * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button.\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 * @cssproperty --kemet-button-border-color - The color of the outline border.\n * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state.\n *\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  active: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  hover: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: String })\n  link: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ reflect: true })\n  variant: TypeVariants = EnumVariants.STANDARD;\n\n  @property()\n  target: TypeTargets = EnumTargets.SELF;\n\n  @property()\n  type: TypeTypes = 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: String, reflect: true })\n  rounded: TypeRoundedSizes;\n\n  constructor() {\n    super();\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('mouseover', this.handleMouseOver.bind(this));\n    this.addEventListener('mouseout', this.handleMouseOut.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n    this.addEventListener('keyup', event => this.handleKeyUp(event));\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    if (this.link && !this.disabled) {\n      return html`\n        <a href=${this.link} target=${this.target} class=\"button\" role=\"button\" part=\"button\">\n          <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n          <slot></slot>\n          <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n        </a>\n      `;\n    }\n\n    return html`\n      <button class=\"button\" part=\"button\" type=${this.type} ?disabled=${this.disabled} aria-disabled=${this.disabled ? 'true' : 'false'}>\n        <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n        <slot></slot>\n        <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n      </button>\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  /**\n   * Sets hover to true onMouseOver\n   * @private\n   */\n  handleMouseOver() {\n    this.hover = true;\n  }\n\n  /**\n   * Sets hover to false onMouseOut\n   * @private\n   */\n  handleMouseOut() {\n    this.hover = false;\n  }\n\n  /**\n   * Handles click behavior\n   * @private\n   */\n  handleClick() {\n    if (!this.disabled) {\n      this.hover = false;\n      this.active = true;\n\n      setTimeout(() => {\n        this.active = false;\n      }, 300);\n\n      if (this.shadowRoot.querySelector('button')) {\n        this.formSubmitController.submit();\n      }\n    }\n  }\n\n  /**\n   * Handles blur\n   * @private\n   */\n  handleBlur() {\n    this.focused = false;\n    this.active = false;\n    this.hover = false;\n  }\n\n  /**\n   * Handles keyup\n   * @private\n   * @param {object} event - event object\n   */\n  handleKeyUp(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      this.focused = true;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-button': KemetButton\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-button-font-size: inherit;\n    --kemet-button-color: rgb(var(--kemet-color-background));\n    --kemet-button-width: auto;\n    --kemet-button-height: auto;\n    --kemet-button-border: 0;\n    --kemet-button-border-radius: 0;\n    --kemet-button-transition-speed: 300ms;\n    --kemet-button-background-color: rgb(var(--kemet-color-foreground));\n    --kemet-button-hover-brightness: 1.25;\n    --kemet-button-disabled-opacity: 0.5;\n    --kemet-button-gap: 0.5rem;\n    --kemet-button-padding: 1rem 1.25rem;\n    --kemet-button-hover-decoration: underline;\n    --kemet-button-circle-size: 50px;\n    --kemet-button-border-width: 1.5px;\n    --kemet-button-border-style: solid;\n    --kemet-button-border-color: rgb(var(--kemet-color-foreground));\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-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    transition: filter var(--kemet-button-transition-speed) ease;\n    background-color: var(--kemet-button-background-color);\n  }\n\n  :host(:hover:not([disabled])) {\n    filter: brightness(var(--kemet-button-hover-brightness));\n  }\n\n  :host([disabled]) {\n    opacity: var(--kemet-button-disabled-opacity);\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-color: rgb(var(--kemet-color-text));\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([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-color: rgb(var(--kemet-color-foreground));\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([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","export class FormSubmitController {\n  host;\n  form;\n  options;\n\n  constructor(host, options = undefined) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: input => input.closest('form'),\n      name: input => input.name,\n      value: input => input.value,\n      disabled: input => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n"],"mappings":"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","names":["import_lit","EnumVariants","EnumTargets","EnumTypes"]}

package/dist/elements/button.mjs

@@ -0,0 +1,21 @@
+import {
+  EnumTargets,
+  EnumTypes,
+  EnumVariants,
+  KemetButton,
+  targets,
+  types,
+  variants
+} from "../chunk-NFIR3QAK.mjs";
+import "../chunk-VDX3OED3.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  EnumTargets,
+  EnumTypes,
+  EnumVariants,
+  KemetButton as default,
+  targets,
+  types,
+  variants
+};
+//# sourceMappingURL=button.mjs.map

package/dist/elements/button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/card.d.mts

@@ -0,0 +1,52 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-card
+ * @summary A highly configurable panel design to display media and information.
+ *
+ * @prop {boolean} center - Centers the elements in the card.
+ *
+ * @slot default - The contents of the alert.
+ * @slot header - The card's header.
+ * @slot media - A slot for images, videos, or embeds.
+ * @slot caption - Text for the media slot.
+ * @slot footer - The card's footer.
+ *
+ *
+ * @csspart media - The media area of the card.
+ * @csspart body - The main contents of the card.
+ *
+ * @cssproperty --kemet-card-padding - The space around elements.
+ * @cssproperty --kemet-card-border-color - The color of the borders.
+ * @cssproperty --kemet-card-color - The color of the text. Default:
+ * @cssproperty --kemet-card-max-width - The max width of the card.
+ * @cssproperty --kemet-card-border - The border around the card.
+ * @cssproperty --kemet-card-border-radius - The border radius of the card.
+ * @cssproperty --kemet-card-background-color - The background color.
+ * @cssproperty --kemet-card-body-padding - The body spacing.
+ * @cssproperty --kemet-card-header-padding - The header spacing.
+ * @cssproperty --kemet-card-header-border-bottom - The header border.
+ * @cssproperty --kemet-card-caption-color - The caption text color.
+ * @cssproperty --kemet-card-caption-padding - The caption spacing.
+ * @cssproperty --kemet-card-caption-background-color - The caption background color.
+ * @cssproperty --kemet-card-footer-padding - The footer spacing.
+ * @cssproperty --kemet-card-footer-border-top - The footer border.
+ *
+ */
+declare class KemetCard extends LitElement {
+    static styles: lit.CSSResult[];
+    center: boolean;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-card': KemetCard;
+    }
+}
+
+export { KemetCard as default };