kemet-ui 4.0.2 → 5.0.0

package/dist/elements/input-combo/index.js

@@ -0,0 +1,416 @@
+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/input-combo/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { live } from "lit/directives/live.js";
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/input-combo/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-input-combo-height: 50px;
+  --kemet-input-combo-color: var(--kemet-color-font-base);
+  --kemet-input-combo-border: 1px solid var(--kemet-input-combo-color);
+  --kemet-input-combo-padding-y: 0.5rem;
+  --kemet-input-combo-padding-x: 1rem;
+  --kemet-input-combo-icon-gap: 3rem;
+  --kemet-input-combo-font-color: var(--kemet-input-combo-color);
+  --kemet-input-combo-chip-font-color: var(--kemet-color-font-inverse-base);
+  --kemet-input-combo-chip-background-color: var(--kemet-color-background-inverse);
+
+  /* private */
+  --_kemet-input-combo-border-radius: var(--kemet-input-combo-border-radius);
+  --_kemet-input-combo-background-color: transparent;
+  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-padding-x);
+  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-padding-x);
+
+  position: relative;
+  display: block;
+}
+
+input {
+  color: var(--kemet-input-combo-font-color);
+  display: block;
+  font-size: 1rem;
+  width: 100%;
+  height: var(--kemet-input-combo-height);
+  border: var(--kemet-input-combo-border);
+  appearance: none;
+  box-sizing: border-box;
+  background-color: var(--_kemet-input-combo-background-color);
+  border-radius: var(--_kemet-input-combo-border-radius);
+  padding-left: var(--_kemet-input-combo-icon-left-padding);
+  padding-right: var(--_kemet-input-combo-icon-right-padding);
+  padding-top: var(--kemet-input-combo-padding-y);
+  padding-bottom: var(--kemet-input-combo-padding-y);
+}
+
+:host([polarity=dark]) {
+  --kemet-input-combo-color: var(--kemet-color-font-inverse-base);
+  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([icon-left]) {
+  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-icon-gap);
+}
+
+:host([icon-right]) {
+  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-icon-gap);
+}
+
+:host([appearance=brand]) {
+  --kemet-input-combo-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]) {
+  --kemet-input-combo-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success]) {
+  --kemet-input-combo-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning]) {
+  --kemet-input-combo-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link]) {
+  --kemet-input-combo-color: var(--kemet-color-font-link);
+}
+
+:host([appearance=brand][filled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error][filled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success][fiiled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning][filled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link][filled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-font-link);
+}
+
+:host([disabled]) {
+  --kemet-input-combo-color: var(--kemet-color-font-disabled);
+}
+
+:host([rounded]) {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm])  {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl])  {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill])  {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([filled]) {
+  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-input-combo-background-color: var(--kemet-color-background-inverse);
+  --kemet-input-combo-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+kemet-icon,
+::slotted(kemet-icon) {
+  color: var(--kemet-input-combo-font-color);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+kemet-icon.left,
+:host([icon-left]) ::slotted(kemet-icon) {
+  left: 1rem;
+}
+
+kemet-icon.right,
+:host([icon-right]) ::slotted(kemet-icon) {
+  right: 1rem;
+}
+
+
+div {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
+
+ul {
+  display: flex;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+li {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  color: var(--kemet-input-combo-chip-font-color);
+  background-color: var(--kemet-input-combo-chip-background-color);
+}
+
+:host([rounded]) li {
+  border-radius: var(--_kemet-input-combo-border-radius);
+}
+
+button {
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0;
+  border: 0;
+  background-color: transparent
+}
+`;
+
+// src/elements/input-combo/index.ts
+var InputCombo = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.slug = "input";
+    this.placeholder = "";
+    this.disabled = false;
+    this.filled = false;
+    this.name = "input";
+    this.required = false;
+    this.validateOnBlur = false;
+    this.value = "";
+    this.selections = [];
+  }
+  firstUpdated() {
+    this.field = this.closest("kemet-field");
+    this.combo = this.field.querySelector("kemet-combo");
+    document.addEventListener("click", this.handleComboClose.bind(this));
+    if (this.combo) {
+      this.combo.addEventListener("kemet-combo-selection", (event) => this.addComboItem(event));
+    }
+  }
+  updated() {
+    if (this.chips) this.calculatePadding();
+  }
+  render() {
+    return html`
+      <div>
+        <input
+          part="input"
+          id=${this.slug}
+          name=${this.name}
+          placeholder=${this.placeholder}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @change=${this.handleChange}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeydown}
+          .value=${live(this.value)}
+        />
+         ${this.makeSelections()}
+      </div>
+    `;
+  }
+  /**
+   * Handles when a selection is made from a combo
+   * @private
+   * @param event
+   */
+  addComboItem(event) {
+    this.value = "";
+    this.appearance = "neutral" /* Neutral */;
+    const isPresent = this.selections.find((selection) => selection.id === event.detail.id);
+    if (!isPresent) this.selections = [...this.selections, event.detail];
+  }
+  /**
+   * Handles when the input receives input
+   * @private
+   */
+  handleInput(event) {
+    this.value = event.target.value;
+    emitEvent(this, "kemet-input-combo-input", {
+      element: this,
+      validity: this.input.validity,
+      status: this.appearance,
+      value: event.target.value
+    });
+  }
+  /**
+   * Handles when the input is focused
+   */
+  handleFocus() {
+    emitEvent(this, "kemet-input-combo-focus", { element: this });
+  }
+  handleBlur() {
+    emitEvent(this, "kemet-input-combo-blur", { element: this });
+    if (this.validateOnBlur) {
+      this.input.checkValidity();
+    }
+  }
+  handleChange(event) {
+    emitEvent(this, "kemet-input-combo-change", {
+      element: this,
+      validity: this.input.validity,
+      status: this.appearance,
+      value: event.target.value
+    });
+  }
+  handleInvalid(event) {
+    this.appearance = "error" /* Error */;
+    emitEvent(this, "kemet-input-combo-invalid", {
+      element: this,
+      validity: this.input.validity,
+      status: this.appearance,
+      value: event.target.value
+    });
+  }
+  /**
+   * Renders the chips from the selections of the combo
+   * @private
+   */
+  makeSelections() {
+    const selections = this.selections.map((selection) => html`
+      <li part="chip">
+        <span>${selection.text}</span>
+        <button @click=${this.handleRemoveChip}>&times;</button>
+      </li>
+    `);
+    if (this.selections) {
+      return html`<ul part="chips">${selections}</ul>`;
+    }
+    return null;
+  }
+  /**
+   * calculates padding to properly place the cursor of the input
+   * @private
+   */
+  calculatePadding() {
+    this.paddingLeft = this.chips.offsetWidth + 16;
+  }
+  /**
+   * handle removing a chip from the selections
+   * @private
+   */
+  handleRemoveChip(event) {
+    const chip = event.target.closest("[part=chip]");
+    if (chip) {
+      const span = chip.querySelector("span");
+      if (span) {
+        const text = span.innerText;
+        this.selections = this.selections.filter((selection) => selection.text !== text);
+      }
+    }
+  }
+  handleComboClose(event) {
+    if (event.target !== this && this.combo) {
+      this.combo.show = false;
+    }
+  }
+  handleKeydown(event) {
+    if (event.key === "Escape" /* ESCAPE */) {
+      this.combo.show = false;
+    }
+  }
+};
+InputCombo.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], InputCombo.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], InputCombo.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean })
+], InputCombo.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], InputCombo.prototype, "filled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], InputCombo.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: String })
+], InputCombo.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], InputCombo.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Boolean })
+], InputCombo.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean })
+], InputCombo.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "validate-on-blur" })
+], InputCombo.prototype, "validateOnBlur", 2);
+__decorateClass([
+  state()
+], InputCombo.prototype, "value", 2);
+__decorateClass([
+  state()
+], InputCombo.prototype, "selections", 2);
+__decorateClass([
+  state()
+], InputCombo.prototype, "paddingLeft", 2);
+__decorateClass([
+  state()
+], InputCombo.prototype, "field", 2);
+__decorateClass([
+  state()
+], InputCombo.prototype, "combo", 2);
+__decorateClass([
+  query("[part=chips]")
+], InputCombo.prototype, "chips", 2);
+__decorateClass([
+  query("input")
+], InputCombo.prototype, "input", 2);
+InputCombo = __decorateClass([
+  customElement("kemet-input-combo")
+], InputCombo);
+export {
+  InputCombo as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/input-combo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input-combo/index.ts","../../../src/utilities/events.ts","../../../src/elements/input-combo/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumKeyCodes, EnumAppearances, TypeRoundedSizes, TypeAppearance, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetComboElement from '../combo';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceSelections {\n  element: HTMLUListElement;\n  text: string;\n  id: string;\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-multi-input\n * @summary An input element that accepts multiple items from a combo.\n *\n * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {EnumRoundedSizes} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {ValidityState} validity - The HTML5 validity object.\n\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-combo-height - The height of the input.\n * @cssproperty --kemet-input-combo-color - The color of the input.\n * @cssproperty --kemet-input-combo-border - The border of the input.\n * @cssproperty --kemet-input-combo-padding-y - The padding on the input.\n * @cssproperty --kemet-input-combo-padding-x - The padding on the input.\n * @cssproperty --kemet-input-combo-icon-gap - The icon gap of the input.\n * @cssproperty --kemet-input-combo-font-color - The font color of the input.\n * @cssproperty --kemet-input-combo-chip-font-color - The font color of the chip.\n * @cssproperty --kemet-input-combo-chip-background-color - The background color of the chip.\n *\n * @event kemet-input-combo-focus - Fires when the input receives focus\n * @event kemet-input-combo-blur - Fires when the input loses focus\n * @event kemet-input-combo-input - Fires when the input receives input\n * @event kemet-input-combo-change - Fires when the input changes\n * @event kemet-input-combo-invalid - Fires when the input is invalid\n *\n */\n\n@customElement('kemet-input-combo')\nexport default class InputCombo extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'input';\n\n  @property({ type: String })\n  placeholder: string = '';\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: Boolean })\n  filled: boolean = false;\n\n  @property({ type: String,reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  @property({ type: Boolean })\n  invalid!: boolean;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @state()\n  value: string = '';\n\n  @state()\n  selections: InterfaceSelections[] = [];\n\n  @state()\n  paddingLeft!: number;\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  combo!: HTMLKemetComboElement;\n\n  @query('[part=chips]')\n  chips!: { offsetWidth: number; };\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.combo = this.field.querySelector('kemet-combo') as HTMLKemetComboElement;\n\n    document.addEventListener('click', this.handleComboClose.bind(this));\n\n    if (this.combo) {\n      this.combo.addEventListener('kemet-combo-selection', (event: Event) => this.addComboItem(event));\n    }\n  }\n\n  updated() {\n    if (this.chips) this.calculatePadding();\n  }\n\n  render() {\n    return html`\n      <div>\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${this.placeholder}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          @input=${this.handleInput}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          @change=${this.handleChange}\n          @invalid=${this.handleInvalid}\n          @keydown=${this.handleKeydown}\n          .value=${live(this.value)}\n        />\n         ${this.makeSelections()}\n      </div>\n    `;\n  }\n\n  /**\n   * Handles when a selection is made from a combo\n   * @private\n   * @param event\n   */\n\n  addComboItem(event: Event) {\n    this.value = '';\n    this.appearance = EnumAppearances.Neutral;\n    const isPresent = this.selections.find(selection => selection.id === (event as CustomEvent).detail.id);\n    if (!isPresent) this.selections = [...this.selections, (event as CustomEvent).detail];\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput(event: Event) {\n    this.value = (event.target as HTMLInputElement).value;\n    emitEvent(this, 'kemet-input-combo-input', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Handles when the input is focused\n   */\n  handleFocus() {\n    emitEvent(this, 'kemet-input-combo-focus', { element: this });\n  }\n\n  handleBlur() {\n    emitEvent(this, 'kemet-input-combo-blur', { element: this });\n    if (this.validateOnBlur) {\n      this.input.checkValidity();\n    }\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-input-combo-change', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  handleInvalid(event: Event) {\n    this.appearance = EnumAppearances.Error;\n    emitEvent(this, 'kemet-input-combo-invalid', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Renders the chips from the selections of the combo\n   * @private\n   */\n  makeSelections() {\n    const selections = this.selections.map(selection => html`\n      <li part=\"chip\">\n        <span>${selection.text}</span>\n        <button @click=${this.handleRemoveChip}>&times;</button>\n      </li>\n    `);\n\n    if (this.selections) {\n      return html`<ul part=\"chips\">${selections}</ul>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * calculates padding to properly place the cursor of the input\n   * @private\n   */\n  calculatePadding() {\n    this.paddingLeft = this.chips.offsetWidth + 16;\n  }\n\n  /**\n   * handle removing a chip from the selections\n   * @private\n   */\n  handleRemoveChip(event: MouseEvent) {\n    const chip = (event.target as Element).closest('[part=chip]');\n    if (chip) {\n      const span = chip.querySelector('span');\n      if (span) {\n        const text = span.innerText;\n        this.selections = this.selections.filter(selection => selection.text !== text);\n      }\n    }\n  }\n\n  handleComboClose(event: MouseEvent) {\n    if (event.target !== this && this.combo) {\n      this.combo.show = false;\n    }\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === EnumKeyCodes.ESCAPE) {\n      this.combo.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-combo': InputCombo\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-input-combo-height: 50px;\n  --kemet-input-combo-color: var(--kemet-color-font-base);\n  --kemet-input-combo-border: 1px solid var(--kemet-input-combo-color);\n  --kemet-input-combo-padding-y: 0.5rem;\n  --kemet-input-combo-padding-x: 1rem;\n  --kemet-input-combo-icon-gap: 3rem;\n  --kemet-input-combo-font-color: var(--kemet-input-combo-color);\n  --kemet-input-combo-chip-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-combo-chip-background-color: var(--kemet-color-background-inverse);\n\n  /* private */\n  --_kemet-input-combo-border-radius: var(--kemet-input-combo-border-radius);\n  --_kemet-input-combo-background-color: transparent;\n  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-padding-x);\n  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-padding-x);\n\n  position: relative;\n  display: block;\n}\n\ninput {\n  color: var(--kemet-input-combo-font-color);\n  display: block;\n  font-size: 1rem;\n  width: 100%;\n  height: var(--kemet-input-combo-height);\n  border: var(--kemet-input-combo-border);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: var(--_kemet-input-combo-background-color);\n  border-radius: var(--_kemet-input-combo-border-radius);\n  padding-left: var(--_kemet-input-combo-icon-left-padding);\n  padding-right: var(--_kemet-input-combo-icon-right-padding);\n  padding-top: var(--kemet-input-combo-padding-y);\n  padding-bottom: var(--kemet-input-combo-padding-y);\n}\n\n:host([polarity=dark]) {\n  --kemet-input-combo-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([icon-left]) {\n  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([icon-right]) {\n  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([appearance=brand]) {\n  --kemet-input-combo-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]) {\n  --kemet-input-combo-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n  --kemet-input-combo-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-input-combo-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n  --kemet-input-combo-color: var(--kemet-color-font-link);\n}\n\n:host([appearance=brand][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-link);\n}\n\n:host([disabled]) {\n  --kemet-input-combo-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-input-combo-background-color: var(--kemet-color-background-inverse);\n  --kemet-input-combo-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\nkemet-icon,\n::slotted(kemet-icon) {\n  color: var(--kemet-input-combo-font-color);\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\nkemet-icon.left,\n:host([icon-left]) ::slotted(kemet-icon) {\n  left: 1rem;\n}\n\nkemet-icon.right,\n:host([icon-right]) ::slotted(kemet-icon) {\n  right: 1rem;\n}\n\n\ndiv {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n}\n\nul {\n  display: flex;\n  gap: 0.5rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  flex-wrap: wrap;\n}\n\nli {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  padding: 0.25rem 0.5rem;\n  color: var(--kemet-input-combo-chip-font-color);\n  background-color: var(--kemet-input-combo-chip-background-color);\n}\n\n:host([rounded]) li {\n  border-radius: var(--_kemet-input-combo-border-radius);\n}\n\nbutton {\n  color: inherit;\n  cursor: pointer;\n  font-size: 1.25rem;\n  padding: 0;\n  border: 0;\n  background-color: transparent\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/input-combo/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/input-combo/styles.css.js

@@ -0,0 +1,189 @@
+// src/elements/input-combo/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-input-combo-height: 50px;
+  --kemet-input-combo-color: var(--kemet-color-font-base);
+  --kemet-input-combo-border: 1px solid var(--kemet-input-combo-color);
+  --kemet-input-combo-padding-y: 0.5rem;
+  --kemet-input-combo-padding-x: 1rem;
+  --kemet-input-combo-icon-gap: 3rem;
+  --kemet-input-combo-font-color: var(--kemet-input-combo-color);
+  --kemet-input-combo-chip-font-color: var(--kemet-color-font-inverse-base);
+  --kemet-input-combo-chip-background-color: var(--kemet-color-background-inverse);
+
+  /* private */
+  --_kemet-input-combo-border-radius: var(--kemet-input-combo-border-radius);
+  --_kemet-input-combo-background-color: transparent;
+  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-padding-x);
+  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-padding-x);
+
+  position: relative;
+  display: block;
+}
+
+input {
+  color: var(--kemet-input-combo-font-color);
+  display: block;
+  font-size: 1rem;
+  width: 100%;
+  height: var(--kemet-input-combo-height);
+  border: var(--kemet-input-combo-border);
+  appearance: none;
+  box-sizing: border-box;
+  background-color: var(--_kemet-input-combo-background-color);
+  border-radius: var(--_kemet-input-combo-border-radius);
+  padding-left: var(--_kemet-input-combo-icon-left-padding);
+  padding-right: var(--_kemet-input-combo-icon-right-padding);
+  padding-top: var(--kemet-input-combo-padding-y);
+  padding-bottom: var(--kemet-input-combo-padding-y);
+}
+
+:host([polarity=dark]) {
+  --kemet-input-combo-color: var(--kemet-color-font-inverse-base);
+  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([icon-left]) {
+  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-icon-gap);
+}
+
+:host([icon-right]) {
+  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-icon-gap);
+}
+
+:host([appearance=brand]) {
+  --kemet-input-combo-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]) {
+  --kemet-input-combo-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success]) {
+  --kemet-input-combo-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning]) {
+  --kemet-input-combo-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link]) {
+  --kemet-input-combo-color: var(--kemet-color-font-link);
+}
+
+:host([appearance=brand][filled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error][filled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success][fiiled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning][filled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link][filled]) {
+  --_kemet-input-combo-background-color: var(--kemet-color-font-link);
+}
+
+:host([disabled]) {
+  --kemet-input-combo-color: var(--kemet-color-font-disabled);
+}
+
+:host([rounded]) {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm])  {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl])  {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill])  {
+  --_kemet-input-combo-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([filled]) {
+  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-input-combo-background-color: var(--kemet-color-background-inverse);
+  --kemet-input-combo-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+kemet-icon,
+::slotted(kemet-icon) {
+  color: var(--kemet-input-combo-font-color);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+kemet-icon.left,
+:host([icon-left]) ::slotted(kemet-icon) {
+  left: 1rem;
+}
+
+kemet-icon.right,
+:host([icon-right]) ::slotted(kemet-icon) {
+  right: 1rem;
+}
+
+
+div {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
+
+ul {
+  display: flex;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+li {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  color: var(--kemet-input-combo-chip-font-color);
+  background-color: var(--kemet-input-combo-chip-background-color);
+}
+
+:host([rounded]) li {
+  border-radius: var(--_kemet-input-combo-border-radius);
+}
+
+button {
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0;
+  border: 0;
+  background-color: transparent
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/input-combo/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input-combo/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-input-combo-height: 50px;\n  --kemet-input-combo-color: var(--kemet-color-font-base);\n  --kemet-input-combo-border: 1px solid var(--kemet-input-combo-color);\n  --kemet-input-combo-padding-y: 0.5rem;\n  --kemet-input-combo-padding-x: 1rem;\n  --kemet-input-combo-icon-gap: 3rem;\n  --kemet-input-combo-font-color: var(--kemet-input-combo-color);\n  --kemet-input-combo-chip-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-combo-chip-background-color: var(--kemet-color-background-inverse);\n\n  /* private */\n  --_kemet-input-combo-border-radius: var(--kemet-input-combo-border-radius);\n  --_kemet-input-combo-background-color: transparent;\n  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-padding-x);\n  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-padding-x);\n\n  position: relative;\n  display: block;\n}\n\ninput {\n  color: var(--kemet-input-combo-font-color);\n  display: block;\n  font-size: 1rem;\n  width: 100%;\n  height: var(--kemet-input-combo-height);\n  border: var(--kemet-input-combo-border);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: var(--_kemet-input-combo-background-color);\n  border-radius: var(--_kemet-input-combo-border-radius);\n  padding-left: var(--_kemet-input-combo-icon-left-padding);\n  padding-right: var(--_kemet-input-combo-icon-right-padding);\n  padding-top: var(--kemet-input-combo-padding-y);\n  padding-bottom: var(--kemet-input-combo-padding-y);\n}\n\n:host([polarity=dark]) {\n  --kemet-input-combo-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([icon-left]) {\n  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([icon-right]) {\n  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([appearance=brand]) {\n  --kemet-input-combo-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]) {\n  --kemet-input-combo-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n  --kemet-input-combo-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-input-combo-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n  --kemet-input-combo-color: var(--kemet-color-font-link);\n}\n\n:host([appearance=brand][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-link);\n}\n\n:host([disabled]) {\n  --kemet-input-combo-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-input-combo-background-color: var(--kemet-color-background-inverse);\n  --kemet-input-combo-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\nkemet-icon,\n::slotted(kemet-icon) {\n  color: var(--kemet-input-combo-font-color);\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\nkemet-icon.left,\n:host([icon-left]) ::slotted(kemet-icon) {\n  left: 1rem;\n}\n\nkemet-icon.right,\n:host([icon-right]) ::slotted(kemet-icon) {\n  right: 1rem;\n}\n\n\ndiv {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n}\n\nul {\n  display: flex;\n  gap: 0.5rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  flex-wrap: wrap;\n}\n\nli {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  padding: 0.25rem 0.5rem;\n  color: var(--kemet-input-combo-chip-font-color);\n  background-color: var(--kemet-input-combo-chip-background-color);\n}\n\n:host([rounded]) li {\n  border-radius: var(--_kemet-input-combo-border-radius);\n}\n\nbutton {\n  color: inherit;\n  cursor: pointer;\n  font-size: 1.25rem;\n  padding: 0;\n  border: 0;\n  background-color: transparent\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;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":[]}