kemet-ui 3.1.0 → 4.0.1

package/dist/chunk-MZO4Q7DU.mjs

@@ -0,0 +1,88 @@
+// src/styles/elements/scroll-snap.ts
+import { css } from "lit";
+var stylesScrollSnap = css`
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-scroll-snap-horizontal-max-width: 1024px;
+    --kemet-scroll-snap-vertical-height: 100vh;
+    --kemet-scroll-snap-slides-vertical-padding: 0 2rem;
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  :host([axis='horizontal']) {
+    margin: auto;
+    max-width: var(--kemet-scroll-snap-horizontal-max-width);
+  }
+
+  :host([pagination="left"]),
+  :host([pagination="right"]) {
+    flex-direction: row;
+  }
+
+  :host([pagination="none"]) ::slotted([slot="pagination"]) {
+    display: none;
+  }
+
+  :host([pagination="top"]) ::slotted([slot="pagination"]),
+  :host([pagination="left"]) ::slotted([slot="pagination"]) {
+    order: -1;
+  }
+
+
+  ::slotted([slot="slides"]) {
+    display: flex;
+    gap: var(--kemet-scroll-snap-gap, 1.5rem);
+    scroll-snap-type: x mandatory;
+    overflow-x: scroll;
+  }
+
+  /* vertical */
+  :host([axis="vertical"]) {
+    height: var(--kemet-scroll-snap-vertical-height);
+  }
+
+  :host([axis="vertical"]) ::slotted([slot="slides"]) {
+    flex-direction: column;
+    overflow-x: hidden;
+    scroll-snap-type: y mandatory;
+    padding: var(--kemet-scroll-snap-slides-vertical-padding);
+  }
+`;
+var stylesScrollSnapPaginator = css`
+  :host {
+    --kemet-scroll-snap-paginator-padding: 1rem 0;
+    --kemet-scroll-snap-paginator-gap: 0.5rem;
+    --kemet-scroll-snap-paginator-link-color: rgb(var(--kemet-color-primary));
+
+    margin: auto;
+    padding: var(--kemet-scroll-snap-paginator-padding);
+  }
+
+  nav {
+    display: flex;
+    gap: var(--kemet-scroll-snap-paginator-gap);
+  }
+
+  :host([center]) nav {
+    justify-content: center;
+  }
+
+  .link {
+    cursor: pointer;
+    color: var(--kemet-scroll-snap-paginator-link-color);
+  }
+`;
+
+export {
+  stylesScrollSnap,
+  stylesScrollSnapPaginator
+};
+//# sourceMappingURL=chunk-MZO4Q7DU.mjs.map

package/dist/chunk-MZO4Q7DU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/elements/scroll-snap.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stylesScrollSnap = css`\n  *,\n  *::after,\n  *::before {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-scroll-snap-horizontal-max-width: 1024px;\n    --kemet-scroll-snap-vertical-height: 100vh;\n    --kemet-scroll-snap-slides-vertical-padding: 0 2rem;\n\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  :host([axis='horizontal']) {\n    margin: auto;\n    max-width: var(--kemet-scroll-snap-horizontal-max-width);\n  }\n\n  :host([pagination=\"left\"]),\n  :host([pagination=\"right\"]) {\n    flex-direction: row;\n  }\n\n  :host([pagination=\"none\"]) ::slotted([slot=\"pagination\"]) {\n    display: none;\n  }\n\n  :host([pagination=\"top\"]) ::slotted([slot=\"pagination\"]),\n  :host([pagination=\"left\"]) ::slotted([slot=\"pagination\"]) {\n    order: -1;\n  }\n\n\n  ::slotted([slot=\"slides\"]) {\n    display: flex;\n    gap: var(--kemet-scroll-snap-gap, 1.5rem);\n    scroll-snap-type: x mandatory;\n    overflow-x: scroll;\n  }\n\n  /* vertical */\n  :host([axis=\"vertical\"]) {\n    height: var(--kemet-scroll-snap-vertical-height);\n  }\n\n  :host([axis=\"vertical\"]) ::slotted([slot=\"slides\"]) {\n    flex-direction: column;\n    overflow-x: hidden;\n    scroll-snap-type: y mandatory;\n    padding: var(--kemet-scroll-snap-slides-vertical-padding);\n  }\n`;\n\nexport const stylesScrollSnapPaginator = css`\n  :host {\n    --kemet-scroll-snap-paginator-padding: 1rem 0;\n    --kemet-scroll-snap-paginator-gap: 0.5rem;\n    --kemet-scroll-snap-paginator-link-color: rgb(var(--kemet-color-primary));\n\n    margin: auto;\n    padding: var(--kemet-scroll-snap-paginator-padding);\n  }\n\n  nav {\n    display: flex;\n    gap: var(--kemet-scroll-snap-paginator-gap);\n  }\n\n  :host([center]) nav {\n    justify-content: center;\n  }\n\n  .link {\n    cursor: pointer;\n    color: var(--kemet-scroll-snap-paginator-link-color);\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDzB,IAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/chunk-NFIR3QAK.mjs

@@ -0,0 +1,287 @@
+import {
+  FormSubmitController
+} from "./chunk-VDX3OED3.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/button.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/styles/elements/button.ts
+import { css } from "lit";
+var stylesBase = 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/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 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 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 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([
+  property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "hover", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "focused", 2);
+__decorateClass([
+  property({ type: String })
+], KemetButton.prototype, "link", 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: String, reflect: true })
+], KemetButton.prototype, "rounded", 2);
+KemetButton = __decorateClass([
+  customElement("kemet-button")
+], KemetButton);
+
+export {
+  variants,
+  EnumVariants,
+  targets,
+  EnumTargets,
+  types,
+  EnumTypes,
+  KemetButton
+};
+//# sourceMappingURL=chunk-NFIR3QAK.mjs.map

package/dist/chunk-NFIR3QAK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/button.ts","../src/styles/elements/button.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"],"mappings":"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","names":["EnumVariants","EnumTargets","EnumTypes"]}

package/dist/chunk-NY2FTW7A.mjs

@@ -0,0 +1,24 @@
+import {
+  stylesAvatars
+} from "./chunk-ASA4GA5J.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/avatars.ts
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+var KemetAvatars = class extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+KemetAvatars.styles = [stylesAvatars];
+KemetAvatars = __decorateClass([
+  customElement("kemet-avatars")
+], KemetAvatars);
+
+export {
+  KemetAvatars
+};
+//# sourceMappingURL=chunk-NY2FTW7A.mjs.map

package/dist/chunk-NY2FTW7A.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/avatars.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { stylesAvatars } from '../styles/elements/avatar';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatars\n * @summary Groups multiple avatars.\n *\n * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.\n *\n */\n\n@customElement('kemet-avatars')\nexport default class KemetAvatars extends LitElement {\n  static styles = [stylesAvatars];\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatars': KemetAvatars\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,qBAAqB;AAe9B,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAGnD,SAAS;AACP,WAAO;AAAA,EACT;AACF;AANqB,aACZ,SAAS,CAAC,aAAa;AADX,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}

package/dist/chunk-OIGUEDIP.mjs

@@ -0,0 +1,91 @@
+import {
+  stylesLoaders,
+  stylesUploadFile
+} from "./chunk-PWWLC4X4.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/upload-file.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+};
+var KemetUploadFile = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.loaded = 0;
+    this.size = 0;
+    this.percent = 0;
+  }
+  updated() {
+    this.percent = this.calculatePercent();
+  }
+  render() {
+    return html`
+      <div class="percentage" part="percentage">
+        <span>${this.percent}%</span>
+      </div>
+      <div>
+        <h3 part="filename">${this.name}</h3>
+        <span part="loaded">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>
+        ${this.message ? html`<div class="message" part="message">${this.message}</div>` : null}
+      </div>
+      <div class="indicator" part="indicator">
+        ${this.getStatusIcon()}
+      </div>
+    `;
+  }
+  calculatePercent() {
+    const percent = Math.round(this.loaded * 100 / this.size);
+    return percent > 100 ? 100 : percent;
+  }
+  getStatusIcon() {
+    if (this.status === "uploading") {
+      return html`<div class="lds-ripple"><div></div><div></div></div>`;
+    }
+    if (this.status === "complete") {
+      return html`<kemet-icon-bootstrap icon="check-circle" size="48"></kemet-icon-bootstrap>`;
+    }
+    if (this.status === "error") {
+      return html`<kemet-icon-bootstrap icon="exclamation-circle" size="48"></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+};
+KemetUploadFile.styles = [stylesUploadFile, stylesLoaders];
+__decorateClass([
+  property({ type: String })
+], KemetUploadFile.prototype, "name", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetUploadFile.prototype, "loaded", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetUploadFile.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], KemetUploadFile.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetUploadFile.prototype, "status", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetUploadFile.prototype, "percent", 2);
+__decorateClass([
+  property({ type: String })
+], KemetUploadFile.prototype, "message", 2);
+KemetUploadFile = __decorateClass([
+  customElement("kemet-upload-file")
+], KemetUploadFile);
+
+export {
+  KemetUploadFile
+};
+//# sourceMappingURL=chunk-OIGUEDIP.mjs.map

package/dist/chunk-OIGUEDIP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/upload-file.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesUploadFile, stylesLoaders } from '../styles/elements/upload';\nimport './icon-bootstrap';\n\nconst formatBytes = (bytes: number, decimals = 2) => {\n  if (bytes === 0) return '0 Bytes';\n\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-upload-file\n * @summary A file in the upload.\n *\n * @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete | uploading | error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n *\n * @cssproperty --kemet-upload-file-color - The default text color.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\n *\n * @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n *\n */\n\n@customElement('kemet-upload-file')\nexport default class KemetUploadFile extends LitElement {\n  static styles = [stylesUploadFile, stylesLoaders];\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: Number })\n  loaded: number = 0;\n\n  @property({ type: Number })\n  size: number = 0;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Number })\n  percent: number = 0;\n\n  @property({ type: String })\n  message: string;\n\n  updated() {\n    this.percent = this.calculatePercent();\n  }\n\n  render() {\n    return html`\n      <div class=\"percentage\" part=\"percentage\">\n        <span>${this.percent}%</span>\n      </div>\n      <div>\n        <h3 part=\"filename\">${this.name}</h3>\n        <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n        ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n      </div>\n      <div class=\"indicator\" part=\"indicator\">\n        ${this.getStatusIcon()}\n      </div>\n    `;\n  }\n\n  calculatePercent() {\n    const percent = Math.round((this.loaded * 100.0) / this.size);\n    return percent > 100 ? 100 : percent;\n  }\n\n  getStatusIcon() {\n    if (this.status === 'uploading') {\n      return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n    }\n\n    if (this.status === 'complete') {\n      return html`<kemet-icon-bootstrap icon=\"check-circle\" size=\"48\"></kemet-icon-bootstrap>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon-bootstrap icon=\"exclamation-circle\" size=\"48\"></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload-file': KemetUploadFile\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,gBAAgB;AAIxC,IAAM,cAAc,CAAC,OAAe,WAAW,MAAM;AACnD,MAAI,UAAU,EAAG,QAAO;AAExB,QAAM,IAAI;AACV,QAAM,KAAK,WAAW,IAAI,IAAI;AAC9B,QAAM,QAAQ,CAAC,SAAS,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAEtE,QAAM,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC,CAAC;AAElD,SAAO,GAAG,YAAY,QAAQ,KAAK,GAAG,QAAQ,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;AAChE;AA8BA,IAAqB,kBAArB,cAA6C,WAAW;AAAA,EAAxD;AAAA;AAOE,kBAAiB;AAGjB,gBAAe;AASf,mBAAkB;AAAA;AAAA,EAKlB,UAAU;AACR,SAAK,UAAU,KAAK,iBAAiB;AAAA,EACvC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,gBAEK,KAAK,OAAO;AAAA;AAAA;AAAA,8BAGE,KAAK,IAAI;AAAA,8BACT,YAAY,KAAK,MAAM,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC;AAAA,UACxE,KAAK,UAAU,2CAA2C,KAAK,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA,UAGrF,KAAK,cAAc,CAAC;AAAA;AAAA;AAAA,EAG5B;AAAA,EAEA,mBAAmB;AACjB,UAAM,UAAU,KAAK,MAAO,KAAK,SAAS,MAAS,KAAK,IAAI;AAC5D,WAAO,UAAU,MAAM,MAAM;AAAA,EAC/B;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,WAAW,aAAa;AAC/B,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,WAAW,YAAY;AAC9B,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,WAAW,SAAS;AAC3B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AACF;AAhEqB,gBACZ,SAAS,CAAC,kBAAkB,aAAa;AAGhD;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,gBAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,gBAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,gBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,gBAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,gBAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlBP,gBAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArBP,gBAsBnB;AAtBmB,kBAArB;AAAA,EADC,cAAc,mBAAmB;AAAA,GACb;","names":[]}

package/dist/chunk-OLDBGAR2.mjs

@@ -0,0 +1,66 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel-link.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetCarouselLink = class extends LitElement {
+  render() {
+    return html`
+      <button @keyup=${(event) => this.handleKeyUp(event)} @click=${() => this.activated()}>
+        <slot></slot>
+      </button>
+    `;
+  }
+  activated() {
+    if (!this.disabled) {
+      emitEvent(this, "kemet-link-activated", this);
+    }
+  }
+  handleKeyUp(event) {
+    if (event.code === "Enter") {
+      this.activated();
+    }
+  }
+};
+KemetCarouselLink.styles = [
+  css`
+      :host([selected]) {
+        color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));
+      }
+
+      button {
+        border: 0;
+        background: none;
+      }
+
+      :host(:not([selected])) button {
+        cursor: pointer;
+      }
+
+      :host([disabled]) button {
+        cursor: not-allowed;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number, reflect: true })
+], KemetCarouselLink.prototype, "slide", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarouselLink.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarouselLink.prototype, "disabled", 2);
+KemetCarouselLink = __decorateClass([
+  customElement("kemet-carousel-link")
+], KemetCarouselLink);
+
+export {
+  KemetCarouselLink
+};
+//# sourceMappingURL=chunk-OLDBGAR2.mjs.map

package/dist/chunk-OLDBGAR2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel-link.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-link\n * @summary Zero-based index link to a slide in the carousel.\n *\n * @prop {number} slide\n * @prop {boolean} selected - Automatically applied when link is active slide.\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-link-activated\n *\n * @cssproperty --kemet-carousel-link-selected-color - The color of an selected link. Default: var(--kemet-color-primary).\n *\n */\n\n@customElement('kemet-carousel-link')\nexport default class KemetCarouselLink extends LitElement {\n  static styles = [\n    css`\n      :host([selected]) {\n        color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));\n      }\n\n      button {\n        border: 0;\n        background: none;\n      }\n\n      :host(:not([selected])) button {\n        cursor: pointer;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Number, reflect: true })\n  slide: number;\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.activated()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  activated() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-link-activated', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.activated();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-link': KemetCarouselLink\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAsBxC,IAAqB,oBAArB,cAA+C,WAAW;AAAA,EA+BxD,SAAS;AACP,WAAO;AAAA,uBACY,WAAS,KAAK,YAAY,KAAK,CAAC,WAAW,MAAM,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAItF;AAAA,EAEA,YAAY;AACV,QAAI,CAAC,KAAK,UAAU;AAClB,gBAAU,MAAM,wBAAwB,IAAI;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AACF;AAlDqB,kBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAtBtB,kBAuBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzBvB,kBA0BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA5BvB,kBA6BnB;AA7BmB,oBAArB;AAAA,EADC,cAAc,qBAAqB;AAAA,GACf;","names":[]}