kemet-ui 4.0.2 → 5.0.0

package/dist/elements/fab/index.js

@@ -0,0 +1,250 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/fab/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/elements/fab/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-fab-size: 50px;
+  --kemet-fab-color: var(--kemet-color-background-inverse);
+  --kemet-fab-icon-color: var(--kemet-color-font-inverse-base);
+  --kemet-fab-label-color: var(--kemet-color-font-inverse-base);
+  --kemet-fab-padding: 0 1.35rem 0 0.25rem;
+  --kemet-fab-border: 1px solid var(--kemet-fab-color);
+
+  /* private */
+  --_kemet-fab-border-radius: 0;
+  --_kemet-fab-background-color: var(--kemet-fab-color);
+
+  display: inline-block;
+  position: relative;
+}
+
+button {
+  color: var(--kemet-fab-icon-color);
+  font-size: inherit;
+  display: inline-flex;
+  padding: 0;
+  position: relative;
+  min-height: var(--kemet-fab-size);
+  min-width: var(--kemet-fab-size);
+  max-width: var(--kemet-fab-size);
+  align-items: center;
+  justify-content: flex-start;
+  transition: all 0.4s ease;
+  border: var(--kemet-fab-border);
+  border-radius: var(--_kemet-button-border-radius);
+  background-color: var(--_kemet-fab-background-color);
+}
+
+:host([outlined]) {
+  --kemet-fab-icon-color: var(--kemet-fab-color);
+  --kemet-fab-label-color: var(--kemet-fab-color);
+  --_kemet-fab-background-color: transparent;
+}
+
+: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);
+}
+
+:host([rounded=pill]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([appearance=brand]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=success]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-success);
+}
+
+:host([appearance=warning]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-warning);
+}
+
+:host([appearance=info]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-info);
+}
+
+:host([appearance=link]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-link);
+}
+
+
+
+button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--_kemet-button-border-radius);
+  transition: background-color 0.3s ease-in-out;
+  background-color: var(--_kemet-fab-background-color);
+}
+
+:host([expanded]) button {
+  max-width: 99rem;
+  padding: 0 1.35rem 0 0.25rem;
+}
+
+:host([disabled]) {
+  --kemet-fab-color: var(--kemet-color-background-disabled);
+}
+
+[part=icon] {
+  width: var(--kemet-fab-size);
+  height: var(--kemet-fab-size);
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+[part=label] {
+  color: var(--kemet-fab-label-color);
+  z-index: 1;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+:host([expanded]) [part=label] {
+  opacity: 1;
+}
+`;
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/fab/index.ts
+var KemetFAB = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.expanded = false;
+    this.outlined = false;
+    this.disabled = false;
+    this.expandPoint = 0;
+    this.collapsePoint = 0;
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    window.addEventListener("scroll", this.handleScroll.bind(this));
+    this.addEventListener("mouseover", this.handleMouseOver.bind(this));
+    this.addEventListener("mouseout", this.handleMouseOut.bind(this));
+    emitEvent(this, "kemet-fab-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html`
+      <button class="button" part="button" ?disabled=${this.disabled}>
+        <span part="icon">
+          <slot name="icon"></slot>
+        </span>
+        <span part="label">
+          <slot></slot>
+        </span>
+      </button>
+    `;
+  }
+  handleMouseOver() {
+    if (!this.disabled) {
+      this.expanded = true;
+    }
+  }
+  handleMouseOut() {
+    if (!this.disabled) {
+      this.expanded = false;
+    }
+  }
+  handleScroll() {
+    if (window.scrollY > this.expandPoint && window.scrollY < this.collapsePoint) {
+      this.expanded = true;
+    } else {
+      this.expanded = false;
+    }
+  }
+};
+KemetFAB.styles = [styles_css_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetFAB.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetFAB.prototype, "outlined", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetFAB.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFAB.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFAB.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Number, attribute: "expand-point" })
+], KemetFAB.prototype, "expandPoint", 2);
+__decorateClass([
+  property({ type: Number, attribute: "collapse-point" })
+], KemetFAB.prototype, "collapsePoint", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFAB.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFAB.prototype, "dom", 2);
+KemetFAB = __decorateClass([
+  customElement("kemet-fab")
+], KemetFAB);
+export {
+  KemetFAB as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/fab/index.ts","../../../src/elements/fab/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './styles.css.ts';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-fab\n * @summary The FAB, or Floating Action Button, performs a primary action on a page.\n *\n * @prop {boolean} expanded - The expanded state of the button.\n * @prop {boolean} outlined - Outline style for a button.\n * @prop {boolean} disabled - Determines whether not a button is disabled.\n * @prop {EnumRoundedSizes} rounded - Displays the fab with rounded corners.\n * @prop {EnumAppearances} appearance - The appearance of the fab.\n * @prop {number} expandPoint - The distance, in pixels, where the fab should automatically expand.\n * @prop {number} collapsePoint - The distance, in pixels, where the fab should automatically collapse.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background.\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot Icon - A slot for an icon to display.\n * @slot default - The text for the FAB.\n * *\n * @cssproperty --kemet-fab-size - The width and height of the fab.\n * @cssproperty --kemet-fab-color - The text color of the fab.\n * @cssproperty --kemet-fab-icon-color - The color of the fab icon.\n * @cssproperty --kemet-fab-label-color - The color of the fab label.\n * @cssproperty --kemet-fab-padding - The padding of the fab.\n * @cssproperty --kemet-fab-border - The border of the fab.\n *\n * @csspart button - The button's container.\n * @csspart icon -  The FAB icon.\n * @csspart label - The text in the FAB.\n *\n */\n\n@customElement('kemet-fab')\nexport default class KemetFAB extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  expanded: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Number, attribute: 'expand-point' })\n  expandPoint: number = 0;\n\n  @property({ type: Number, attribute: 'collapse-point' })\n  collapsePoint: number = 0;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n\n  firstUpdated() {\n    // events\n    window.addEventListener('scroll', this.handleScroll.bind(this));\n    this.addEventListener('mouseover', this.handleMouseOver.bind(this));\n    this.addEventListener('mouseout', this.handleMouseOut.bind(this));\n\n    emitEvent(this, 'kemet-fab-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <button class=\"button\" part=\"button\" ?disabled=${this.disabled}>\n        <span part=\"icon\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span part=\"label\">\n          <slot></slot>\n        </span>\n      </button>\n    `;\n  }\n\n  handleMouseOver() {\n    if (!this.disabled) {\n      this.expanded = true;\n    }\n  }\n\n  handleMouseOut() {\n    if (!this.disabled) {\n      this.expanded = false;\n    }\n  }\n\n  handleScroll() {\n    if (window.scrollY > this.expandPoint && window.scrollY < this.collapsePoint) {\n      this.expanded = true;\n    } else {\n      this.expanded = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-fab': KemetFAB\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-fab-size: 50px;\n  --kemet-fab-color: var(--kemet-color-background-inverse);\n  --kemet-fab-icon-color: var(--kemet-color-font-inverse-base);\n  --kemet-fab-label-color: var(--kemet-color-font-inverse-base);\n  --kemet-fab-padding: 0 1.35rem 0 0.25rem;\n  --kemet-fab-border: 1px solid var(--kemet-fab-color);\n\n  /* private */\n  --_kemet-fab-border-radius: 0;\n  --_kemet-fab-background-color: var(--kemet-fab-color);\n\n  display: inline-block;\n  position: relative;\n}\n\nbutton {\n  color: var(--kemet-fab-icon-color);\n  font-size: inherit;\n  display: inline-flex;\n  padding: 0;\n  position: relative;\n  min-height: var(--kemet-fab-size);\n  min-width: var(--kemet-fab-size);\n  max-width: var(--kemet-fab-size);\n  align-items: center;\n  justify-content: flex-start;\n  transition: all 0.4s ease;\n  border: var(--kemet-fab-border);\n  border-radius: var(--_kemet-button-border-radius);\n  background-color: var(--_kemet-fab-background-color);\n}\n\n:host([outlined]) {\n  --kemet-fab-icon-color: var(--kemet-fab-color);\n  --kemet-fab-label-color: var(--kemet-fab-color);\n  --_kemet-fab-background-color: transparent;\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}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([appearance=brand]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-link);\n}\n\n\n\nbutton::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--_kemet-button-border-radius);\n  transition: background-color 0.3s ease-in-out;\n  background-color: var(--_kemet-fab-background-color);\n}\n\n:host([expanded]) button {\n  max-width: 99rem;\n  padding: 0 1.35rem 0 0.25rem;\n}\n\n:host([disabled]) {\n  --kemet-fab-color: var(--kemet-color-background-disabled);\n}\n\n[part=icon] {\n  width: var(--kemet-fab-size);\n  height: var(--kemet-fab-size);\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n}\n\n[part=label] {\n  color: var(--kemet-fab-label-color);\n  z-index: 1;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n:host([expanded]) [part=label] {\n  opacity: 1;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

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

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

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

@@ -0,0 +1,142 @@
+// src/elements/fab/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-fab-size: 50px;
+  --kemet-fab-color: var(--kemet-color-background-inverse);
+  --kemet-fab-icon-color: var(--kemet-color-font-inverse-base);
+  --kemet-fab-label-color: var(--kemet-color-font-inverse-base);
+  --kemet-fab-padding: 0 1.35rem 0 0.25rem;
+  --kemet-fab-border: 1px solid var(--kemet-fab-color);
+
+  /* private */
+  --_kemet-fab-border-radius: 0;
+  --_kemet-fab-background-color: var(--kemet-fab-color);
+
+  display: inline-block;
+  position: relative;
+}
+
+button {
+  color: var(--kemet-fab-icon-color);
+  font-size: inherit;
+  display: inline-flex;
+  padding: 0;
+  position: relative;
+  min-height: var(--kemet-fab-size);
+  min-width: var(--kemet-fab-size);
+  max-width: var(--kemet-fab-size);
+  align-items: center;
+  justify-content: flex-start;
+  transition: all 0.4s ease;
+  border: var(--kemet-fab-border);
+  border-radius: var(--_kemet-button-border-radius);
+  background-color: var(--_kemet-fab-background-color);
+}
+
+:host([outlined]) {
+  --kemet-fab-icon-color: var(--kemet-fab-color);
+  --kemet-fab-label-color: var(--kemet-fab-color);
+  --_kemet-fab-background-color: transparent;
+}
+
+: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);
+}
+
+:host([rounded=pill]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([appearance=brand]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=success]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-success);
+}
+
+:host([appearance=warning]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-warning);
+}
+
+:host([appearance=info]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-info);
+}
+
+:host([appearance=link]:not([disabled])) {
+  --kemet-fab-color: var(--kemet-color-background-link);
+}
+
+
+
+button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--_kemet-button-border-radius);
+  transition: background-color 0.3s ease-in-out;
+  background-color: var(--_kemet-fab-background-color);
+}
+
+:host([expanded]) button {
+  max-width: 99rem;
+  padding: 0 1.35rem 0 0.25rem;
+}
+
+:host([disabled]) {
+  --kemet-fab-color: var(--kemet-color-background-disabled);
+}
+
+[part=icon] {
+  width: var(--kemet-fab-size);
+  height: var(--kemet-fab-size);
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+[part=label] {
+  color: var(--kemet-fab-label-color);
+  z-index: 1;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+:host([expanded]) [part=label] {
+  opacity: 1;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/fab/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-fab-size: 50px;\n  --kemet-fab-color: var(--kemet-color-background-inverse);\n  --kemet-fab-icon-color: var(--kemet-color-font-inverse-base);\n  --kemet-fab-label-color: var(--kemet-color-font-inverse-base);\n  --kemet-fab-padding: 0 1.35rem 0 0.25rem;\n  --kemet-fab-border: 1px solid var(--kemet-fab-color);\n\n  /* private */\n  --_kemet-fab-border-radius: 0;\n  --_kemet-fab-background-color: var(--kemet-fab-color);\n\n  display: inline-block;\n  position: relative;\n}\n\nbutton {\n  color: var(--kemet-fab-icon-color);\n  font-size: inherit;\n  display: inline-flex;\n  padding: 0;\n  position: relative;\n  min-height: var(--kemet-fab-size);\n  min-width: var(--kemet-fab-size);\n  max-width: var(--kemet-fab-size);\n  align-items: center;\n  justify-content: flex-start;\n  transition: all 0.4s ease;\n  border: var(--kemet-fab-border);\n  border-radius: var(--_kemet-button-border-radius);\n  background-color: var(--_kemet-fab-background-color);\n}\n\n:host([outlined]) {\n  --kemet-fab-icon-color: var(--kemet-fab-color);\n  --kemet-fab-label-color: var(--kemet-fab-color);\n  --_kemet-fab-background-color: transparent;\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}\n\n:host([rounded=pill]) {\n  --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([appearance=brand]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled])) {\n  --kemet-fab-color: var(--kemet-color-background-link);\n}\n\n\n\nbutton::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--_kemet-button-border-radius);\n  transition: background-color 0.3s ease-in-out;\n  background-color: var(--_kemet-fab-background-color);\n}\n\n:host([expanded]) button {\n  max-width: 99rem;\n  padding: 0 1.35rem 0 0.25rem;\n}\n\n:host([disabled]) {\n  --kemet-fab-color: var(--kemet-color-background-disabled);\n}\n\n[part=icon] {\n  width: var(--kemet-fab-size);\n  height: var(--kemet-fab-size);\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n}\n\n[part=label] {\n  color: var(--kemet-fab-label-color);\n  z-index: 1;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n:host([expanded]) [part=label] {\n  opacity: 1;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -0,0 +1,4 @@
+import 'lit-html';
+import 'lit';
+export { H as default } from '../../constants-W9QKPlZP.js';
+import '../../form-controller-3q581XcZ.js';

package/dist/elements/field/index.js

@@ -0,0 +1,183 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/field/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/elements/field/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* private */
+  --_kemet-field-message-color: inherit;
+
+  display: block;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+}
+
+label {
+  position: relative;
+  display: block;
+}
+
+label span {
+  color: inherit;
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 0.8rem;
+}
+
+.message {
+  color: var(--_kemet-field-message-color);
+  font-size: 0.9rem;
+  line-height: 1;
+  display: block;
+  margin-top: 0.8rem;
+}
+
+:host([appearance=error]) .message {
+  --_kemet-field-message-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success]) .message {
+  --_kemet-field-message-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning]) .message {
+  --_kemet-field-message-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link]) .message {
+  --_kemet-field-message-color: var(--kemet-color-font-link);
+}
+`;
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/field/index.ts
+var HTMLKemetFieldElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.appearance = "neutral" /* Neutral */;
+    this.errorIcon = "exclamation-triangle-fill";
+    this.successIcon = "check-lg";
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    this.slotInput = this.querySelector('[slot="input"]');
+    this.slotCombo = this.querySelector('[slot="combo"]');
+    this.slotCombo?.addEventListener("kemet-input-combo-selection", (event) => this.handleSelection(event));
+    if (this.slotInput.value) {
+      this.length = this.slotInput.value.length;
+    } else {
+      this.length = 0;
+    }
+    emitEvent(this, "kemet-field-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html`
+      <label for="${this.slug}" id="${this.slug}-label" part="label">
+        <span part="text">${this.label}</span>
+        <slot name="input"></slot>
+      </label>
+      ${this.makeStatusMessage()}
+      <slot name="component"></slot>
+    `;
+  }
+  makeStatusMessage() {
+    if (this.appearance !== "neutral") {
+      return html`<span class="message" part="message">${this.message}</span>`;
+    }
+    return null;
+  }
+  handleFocused(event) {
+    this.focused = event.detail;
+    if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {
+      this.slotCombo.show = false;
+    }
+  }
+  handleAppearance(event) {
+    this.appearance = event.detail.appearance;
+  }
+  handleInput(event) {
+    this.length = event.detail.value.length ?? 0;
+    this.filled = event.detail.value !== "";
+  }
+  handleSelection(event) {
+    this.slotInput.setAttribute("aria-activedescendant", event.detail);
+  }
+};
+HTMLKemetFieldElement.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], HTMLKemetFieldElement.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetFieldElement.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetFieldElement.prototype, "message", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetFieldElement.prototype, "focused", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetFieldElement.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetFieldElement.prototype, "filled", 2);
+__decorateClass([
+  property({ type: Number })
+], HTMLKemetFieldElement.prototype, "length", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetFieldElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, attribute: "error-icon" })
+], HTMLKemetFieldElement.prototype, "errorIcon", 2);
+__decorateClass([
+  property({ type: String, attribute: "success-icon" })
+], HTMLKemetFieldElement.prototype, "successIcon", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetFieldElement.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetFieldElement.prototype, "dom", 2);
+__decorateClass([
+  state()
+], HTMLKemetFieldElement.prototype, "slotInput", 2);
+__decorateClass([
+  state()
+], HTMLKemetFieldElement.prototype, "slotCombo", 2);
+HTMLKemetFieldElement = __decorateClass([
+  customElement("kemet-field")
+], HTMLKemetFieldElement);
+export {
+  HTMLKemetFieldElement as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/field/index.ts","../../../src/elements/field/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { EnumAppearances } from '../../utilities/constants';\nimport HTMLKemetComboElement from '../combo';\nimport HTMLKemetInputElement from '../input';\nimport HTMLKemetTextareaElement from '../textarea';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-field\n * @summary Used in combination with Input, Select, and Textarea, to make a Field.\n *\n * @prop {string} slug - Uniquely identifies the control. Use the same slug for slotted subcomponents.\n * @prop {string} label - The label text\n * @prop {string} message - The validation message for error or success\n * @prop {boolean} focused - Determines if the containing input is focused\n * @prop {EnumAppearances} appearance - The appearance of the input\n * @prop {boolean} filled - Is true when the containing input has a value\n * @prop {number} length - The length of the containing input\n * @prop {boolean} disabled - Determines the disabled state of the control\n * @prop {string} errorIcon - The icon while in an error or warning state\n * @prop {string} successIcon - The icon while in a success state\n *\n * @slot component - Allows subcomponents of the field to display.\n *\n * @csspart label - The label of the field.\n * @csspart message - The validation message of the field.\n * @csspart text - The text in the label.\n *\n * @event kemet-input - Fires when input fires on the input slot\n *\n */\n\n@customElement('kemet-field')\nexport default class HTMLKemetFieldElement extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug!: string;\n\n  @property({ type: String })\n  label!: string;\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: Boolean, reflect: true })\n  focused!: boolean;\n\n  @property({ type: String, reflect: true })\n  appearance: EnumAppearances = EnumAppearances.Neutral;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: boolean;\n\n  @property({ type: Number })\n  length!: number;\n\n  @property({ type: Boolean, reflect: true })\n  disabled!: boolean;\n\n  @property({ type: String, attribute: 'error-icon' })\n  errorIcon: string = 'exclamation-triangle-fill';\n\n  @property({ type: String, attribute: 'success-icon' })\n  successIcon: string = 'check-lg';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  slotInput!: HTMLKemetInputElement | HTMLKemetTextareaElement;\n\n  @state()\n  slotCombo!: HTMLKemetComboElement;\n\n  firstUpdated() {\n    this.slotInput = this.querySelector('[slot=\"input\"]') as HTMLKemetInputElement | HTMLKemetTextareaElement;\n    this.slotCombo = this.querySelector('[slot=\"combo\"]') as HTMLKemetComboElement;\n\n    // TODO: trace what components should be listened to\n    // this.slotInput.addEventListener('kemet-focus', (event: Event) => this.handleFocused(event));\n    // this.slotInput.addEventListener('kemet-status-change', (event: Event) => this.handleAppearance(event));\n    // this.slotInput.addEventListener('kemet-input', (event: Event) => this.handleInput(event));\n    this.slotCombo?.addEventListener('kemet-input-combo-selection', (event: Event) => this.handleSelection(event));\n\n\n    if (this.slotInput.value) {\n      this.length = this.slotInput.value.length;\n    } else {\n      this.length = 0;\n    }\n\n    emitEvent(this, 'kemet-field-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <label for=\"${this.slug}\" id=\"${this.slug}-label\" part=\"label\">\n        <span part=\"text\">${this.label}</span>\n        <slot name=\"input\"></slot>\n      </label>\n      ${this.makeStatusMessage()}\n      <slot name=\"component\"></slot>\n    `;\n  }\n\n  makeStatusMessage() {\n    if (this.appearance !== 'neutral') {\n      return html`<span class=\"message\" part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  handleFocused(event: Event) {\n    this.focused = (event as CustomEvent).detail;\n\n    if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {\n      this.slotCombo.show = false;\n    }\n  }\n\n  handleAppearance(event: Event) {\n    this.appearance = (event as CustomEvent).detail.appearance;\n  }\n\n  handleInput(event: Event) {\n    this.length = (event as CustomEvent).detail.value.length ?? 0;\n    this.filled = (event as CustomEvent).detail.value !== '';\n  }\n\n  handleSelection(event: Event) {\n    this.slotInput.setAttribute('aria-activedescendant', (event as CustomEvent).detail);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-field': HTMLKemetFieldElement\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* private */\n  --_kemet-field-message-color: inherit;\n\n  display: block;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  position: relative;\n  display: block;\n}\n\nlabel span {\n  color: inherit;\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.8rem;\n}\n\n.message {\n  color: var(--_kemet-field-message-color);\n  font-size: 0.9rem;\n  line-height: 1;\n  display: block;\n  margin-top: 0.8rem;\n}\n\n:host([appearance=error]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-link);\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

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

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