kemet-ui 4.0.2 → 5.0.0

package/dist/elements/button.d.ts

@@ -1,124 +0,0 @@
-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

@@ -1,414 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,21 +0,0 @@
-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

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

package/dist/elements/card.d.mts

@@ -1,52 +0,0 @@
-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 };