kemet-ui 3.1.0 → 4.0.1

package/dist/chunk-CKCJX7GP.mjs

@@ -0,0 +1,265 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  FormSubmitController
+} from "./chunk-VDX3OED3.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/checkbox.ts
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+
+// src/styles/elements/checkbox.ts
+import { css } from "lit";
+var stylesBase = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-checkbox-size: 18px;
+    --kemet-checkbox-color: rgb(var(--kemet-color-foreground));
+    --kemet-checkbox-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-checkbox-border-radius: var(--kemet-border-radius-md);
+    --kemet-checkbox-filled-background-color: rgb(var(--kemet-color-primary));
+    --kemet-checkbox-filled-color: rgb(var(--kemet-color-white));
+
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  label {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  input {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    width: var(--kemet-checkbox-size);
+    height: var(--kemet-checkbox-size);
+    position: absolute;
+    opacity: 0;
+  }
+
+  button {
+    margin: 0;
+    border: none;
+    background: none;
+  }
+
+  [part='checkbox'] {
+    color: var(--kemet-checkbox-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--kemet-checkbox-size);
+    height: var(--kemet-checkbox-size);
+    border: var(--kemet-checkbox-border);
+  }
+
+  :host([rounded]) [part='checkbox'] {
+    border-radius: var(--kemet-checkbox-border-radius);
+  }
+
+  :host([filled][checked]) [part='checkbox'],
+  :host([filled][indeterminate]) [part='checkbox'] {
+    border: none;
+    background-color: var(--kemet-checkbox-filled-background-color);
+  }
+
+  [part='mark'] {
+    display: flex;
+    width: calc(var(--kemet-checkbox-size) - 4px);
+    height: calc(var(--kemet-checkbox-size) - 4px);
+  }
+
+  :host([filled][checked]) [part='mark'],
+  :host([filled][indeterminate]) [part='mark'] {
+    color: var(--kemet-checkbox-filled-color);
+  }
+
+  [part='message'] {
+    display: block;
+    margin-top: 0.5rem;
+  }
+
+  :host([status='error']) [part='message'] {
+    color: rgb(var(--kemet-color-error));
+  }
+
+  :host([status='warning']) [part='message'] {
+    color: rgb(var(--kemet-color-error));
+  }
+`;
+
+// src/elements/checkbox.ts
+var KemetCheckbox = class extends LitElement {
+  constructor() {
+    super();
+    this.label = "";
+    this.name = "checkbox";
+    this.disabled = false;
+    this.required = false;
+    this.rounded = false;
+    this.filled = false;
+    this.status = "standard" /* Standard */;
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  render() {
+    return html`
+      <label part="label">
+        <input
+          type="checkbox"
+          name=${ifDefined(this.name)}
+          .value=${this.value}
+          .indeterminate=${live(this.indeterminate)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked ? "true" : "false"}
+          @click=${() => this.handleClick()}
+          @blur=${() => this.handleBlur()}
+          @focus=${() => this.handleFocus()}
+          @change=${() => this.handleChange()}
+        />
+        <button part="checkbox" aria-label=${this.label}>
+          ${this.makeCheckMark()}
+        </button>
+        <span part="text">${this.label}</span>
+      </label>
+      ${this.makeMessage()}
+    `;
+  }
+  /**
+   * Simulates a click on the input element.
+   * @public
+   * @method click
+   * @returns {void}
+   */
+  click() {
+    this.input.click();
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    emitEvent(this, "kemet-change", this);
+  }
+  handleBlur() {
+    this.focused = false;
+    emitEvent(this, "kemet-blur", true);
+  }
+  handleFocus() {
+    this.focused = true;
+    emitEvent(this, "kemet-focus", true);
+  }
+  handleChange() {
+    this.value = this.checked;
+    if (this.input.checkValidity()) {
+      this.status = "standard" /* Standard */;
+    }
+  }
+  makeMessage() {
+    if (this.status === "error" /* Error */ || this.status === "warning" /* Warning */) {
+      return html`<span part="message">${this.message}</span>`;
+    }
+    return null;
+  }
+  makeCheckMark() {
+    if (this.checked) {
+      return html`
+        <span part="mark">
+          <svg viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+              <g stroke="currentColor" stroke-width="2">
+                <g transform="translate(3.428571, 3.428571)">
+                  <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
+                  <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+      `;
+    }
+    if (!this.checked && this.indeterminate) {
+      return html`
+        <span part="mark">
+          <svg viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+              <g stroke="currentColor" stroke-width="2">
+                <g transform="translate(2.285714, 6.857143)">
+                  <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+      `;
+    }
+    return null;
+  }
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+};
+KemetCheckbox.styles = [stylesBase];
+__decorateClass([
+  property({ type: String })
+], KemetCheckbox.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCheckbox.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCheckbox.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: String })
+], KemetCheckbox.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetCheckbox.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCheckbox.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCheckbox.prototype, "focused", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCheckbox.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCheckbox.prototype, "filled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetCheckbox.prototype, "status", 2);
+__decorateClass([
+  property({ type: String })
+], KemetCheckbox.prototype, "message", 2);
+__decorateClass([
+  query("input")
+], KemetCheckbox.prototype, "input", 2);
+KemetCheckbox = __decorateClass([
+  customElement("kemet-checkbox")
+], KemetCheckbox);
+
+export {
+  KemetCheckbox
+};
+//# sourceMappingURL=chunk-CKCJX7GP.mjs.map

package/dist/chunk-CKCJX7GP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/checkbox.ts","../src/styles/elements/checkbox.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport { emitEvent } from '../utilities/events';\nimport { stylesBase } from '../styles/elements/checkbox';\nimport { TypeStatus, EnumStatuses } from '../utilities/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-checkbox\n * @summary An enhanced checkbox.\n *\n * @prop {string} label - Label text for the checkbox\n * @prop {boolean} checked - Determines if the checkbox is selected\n * @prop {boolean} indeterminate - An indeterminate selection status\n * @prop {string} name - Name of the checkbox\n * @prop {string} value - Value of the checkbox\n * @prop {boolean} disabled - Determines if a checkbox is disabled\n * @prop {boolean} required - Determines if a checkbox is required\n * @prop {boolean} focused - Is true when the checkbox is focused\n * @prop {boolean} rounded - Gives the checkbox rounded edges\n * @prop {boolean} filled - Fills the checkbox with color\n * @prop {TypeStatus} status - The status of the checkbox\n * @prop {string} message - Message associated with checkbox status\n *\n * @csspart label - The label element.\n * @csspart text - The label's text.\n * @csspart mark - The icon of the check mark.\n *\n * @cssproperty --kemet-checkbox-size - The width and height of the checkbox.\n * @cssproperty --kemet-checkbox-color - The color of the checkbox mark.\n * @cssproperty --kemet-checkbox-border - The border of the checkbox.\n * @cssproperty --kemet-checkbox-border-radius - The border radius of the checkbox.\n * @cssproperty --kemet-checkbox-filled-color - The filled color of the checkbox mark.\n * @cssproperty --kemet-checkbox-filled-background-color - The filled background color.\n *\n * @event kemet-change - Fires when the state of the checkbox changes\n * @event kemet-focus - Fires when the checkbox receives focus\n * @event kemet-blur - Fires when the checkbox loses focus\n *\n */\n\n@customElement('kemet-checkbox')\nexport default class KemetCheckbox extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate: boolean;\n\n  @property({ type: String })\n  name: string = 'checkbox';\n\n  @property({ type: Boolean })\n  value: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean = false;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: String })\n  message: string;\n\n  @query('input')\n  input: HTMLInputElement;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"checkbox\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .indeterminate=${live(this.indeterminate)}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          @click=${() => this.handleClick()}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n          @change=${() => this.handleChange()}\n        />\n        <button part=\"checkbox\" aria-label=${this.label}>\n          ${this.makeCheckMark()}\n        </button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n      ${this.makeMessage()}\n    `;\n  }\n\n  /**\n   * Simulates a click on the input element.\n   * @public\n   * @method click\n   * @returns {void}\n   */\n  click(): void {\n    this.input.click();\n  }\n\n  handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    emitEvent(this, 'kemet-change', this);\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-blur', true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-focus', true);\n  }\n\n  handleChange() {\n    this.value = this.checked;\n\n    if (this.input.checkValidity()) {\n      this.status = EnumStatuses.Standard;\n    }\n  }\n\n  makeMessage() {\n    if (this.status === EnumStatuses.Error || this.status === EnumStatuses.Warning) {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckMark() {\n    if (this.checked) {\n      return html`\n        <span part=\"mark\">\n          <svg viewBox=\"0 0 16 16\">\n            <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n              <g stroke=\"currentColor\" stroke-width=\"2\">\n                <g transform=\"translate(3.428571, 3.428571)\">\n                  <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                  <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                </g>\n              </g>\n            </g>\n          </svg>\n        </span>\n      `;\n    }\n\n    if (!this.checked && this.indeterminate) {\n      return html`\n        <span part=\"mark\">\n          <svg viewBox=\"0 0 16 16\">\n            <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n              <g stroke=\"currentColor\" stroke-width=\"2\">\n                <g transform=\"translate(2.285714, 6.857143)\">\n                  <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                </g>\n              </g>\n            </g>\n          </svg>\n        </span>\n      `;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-checkbox': KemetCheckbox\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-checkbox-size: 18px;\n    --kemet-checkbox-color: rgb(var(--kemet-color-foreground));\n    --kemet-checkbox-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-checkbox-border-radius: var(--kemet-border-radius-md);\n    --kemet-checkbox-filled-background-color: rgb(var(--kemet-color-primary));\n    --kemet-checkbox-filled-color: rgb(var(--kemet-color-white));\n\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    display: inline-flex;\n    gap: 0.5rem;\n    align-items: center;\n  }\n\n  input {\n    cursor: pointer;\n    margin: 0;\n    padding: 0;\n    width: var(--kemet-checkbox-size);\n    height: var(--kemet-checkbox-size);\n    position: absolute;\n    opacity: 0;\n  }\n\n  button {\n    margin: 0;\n    border: none;\n    background: none;\n  }\n\n  [part='checkbox'] {\n    color: var(--kemet-checkbox-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--kemet-checkbox-size);\n    height: var(--kemet-checkbox-size);\n    border: var(--kemet-checkbox-border);\n  }\n\n  :host([rounded]) [part='checkbox'] {\n    border-radius: var(--kemet-checkbox-border-radius);\n  }\n\n  :host([filled][checked]) [part='checkbox'],\n  :host([filled][indeterminate]) [part='checkbox'] {\n    border: none;\n    background-color: var(--kemet-checkbox-filled-background-color);\n  }\n\n  [part='mark'] {\n    display: flex;\n    width: calc(var(--kemet-checkbox-size) - 4px);\n    height: calc(var(--kemet-checkbox-size) - 4px);\n  }\n\n  :host([filled][checked]) [part='mark'],\n  :host([filled][indeterminate]) [part='mark'] {\n    color: var(--kemet-checkbox-filled-color);\n  }\n\n  [part='message'] {\n    display: block;\n    margin-top: 0.5rem;\n  }\n\n  :host([status='error']) [part='message'] {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='warning']) [part='message'] {\n    color: rgb(var(--kemet-color-error));\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/chunk-CUZ6G5AK.mjs

@@ -0,0 +1,330 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  FormSubmitController
+} from "./chunk-VDX3OED3.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/select.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/styles/elements/select.ts
+import { css } from "lit";
+var stylesSelect = css`
+  :host {
+    --kemet-select-padding: 1rem;
+    --kemet-select-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-select-border-color-error: 1px solid rgb(var(--kemet-color-error));
+    --kemet-select-border-color-success: 1px solid rgb(var(--kemet-color-success));
+    --kemet-select-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);
+    --kemet-select-border-filled: none;
+    --kemet-select-color-filled: rgb(var(--kemet-color-white));
+    --kemet-select-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-select-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-select-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-select-background-color-warning: rgb(var(--kemet-color-warning));
+    --kemet-select-icon-right: 1rem;
+    --kemet-select-border-radius-rounded: 0;
+
+    position: relative;
+    display: block;
+  }
+
+  select {
+    color: rgb(var(--kemet-color-text));
+    display: block;
+    font-size: 1rem;
+    width: 100%;
+    padding: var(--kemet-select-padding);
+    border: var(--kemet-select-border);
+    appearance: none;
+    box-sizing: border-box;
+    background-color: transparent;
+    border-radius: var(--kemet-select-border-radius-rounded);
+  }
+
+  option {
+    color: rgb(var(--kemet-color-black));
+  }
+
+  :host([status='error']) select {
+    border: var(--kemet-select-border-color-error);
+  }
+
+  :host([status='success']) select {
+    border: var(--kemet-select-border-color-success);
+  }
+
+  :host([status='warning']) select {
+    border: var(--kemet-select-border-color-warning);
+  }
+
+  :host([disabled]) select {
+    opacity: 0.5;
+  }
+
+  :host([rounded]) select {
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=sm]) select {
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=md]) select {
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=lg]) select {
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) select {
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded=circle]) select {
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded=pill]) select {
+    --kemet-select-border-radius-rounded: var(--kemet-border-radius-pill);
+  }
+
+  :host([filled]) select {
+    border: var(--kemet-select-border-filled);
+    color: var(--kemet-select-color-filled);
+    background-color: var(--kemet-select-background-color-filled);
+  }
+
+  :host([status='error'][filled]) select {
+    background-color: var(--kemet-select-background-color-error);
+  }
+
+  :host([status='success'][filled]) select {
+    background-color: var(--kemet-select-background-color-success);
+  }
+
+  :host([status='warning'][filled]) select {
+    background-color: var(--kemet-select-background-color-warning);
+  }
+
+  kemet-icon-bootstrap {
+    position: absolute;
+    right: var(--kemet-select-icon-right);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([filled]) kemet-icon-bootstrap {
+    color: var(--kemet-select-color-filled);
+  }
+`;
+
+// src/elements/select.ts
+var KemetSelect = class extends LitElement {
+  constructor() {
+    super();
+    this.name = "select";
+    this.icon = "chevron-down";
+    this.iconSize = 18;
+    this.formSubmitController = new FormSubmitController(this);
+    this.control = this.closest("kemet-field");
+  }
+  firstUpdated() {
+    this.select = this.shadowRoot.querySelector("select");
+    this.selectedOption = this.querySelector("[selected]");
+    this.value = this.selectedOption ? this.selectedOption.value : "";
+  }
+  render() {
+    return html`
+      <select
+        part="select"
+        id=${this.slug}
+        name=${this.name}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?multiple=${this.multiple}
+        @change=${this.handleChange}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @invalid=${this.handleInvalid}
+      >
+        ${this.makeOptions()}
+      </select>
+      ${this.makeIcon()}
+      <slot @slotchange=${() => this.makeOptions()}></slot>
+    `;
+  }
+  /**
+   * Generates the option elements
+   * @private
+   * @returns {TemplateResult} An option element
+   */
+  makeOptions() {
+    this.options = [];
+    this.optionElements = this.querySelectorAll("kemet-option");
+    this.optionElements.forEach((option) => {
+      this.options = this.options.concat({
+        label: option.label,
+        value: option.value,
+        disabled: option.disabled,
+        selected: option.selected
+      });
+    });
+    return this.options.map(
+      (option) => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>
+        ${option.label}
+      </option>`
+    );
+  }
+  /**
+   * Generates a dropdown icon
+   * @private
+   */
+  makeIcon() {
+    if (this.icon || this.icon !== "") {
+      return html`<kemet-icon-bootstrap icon=${this.icon} size=${this.iconSize}></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  /**
+   * Handles when the input receives focus
+   * @private
+   */
+  handleFocus() {
+    this.hasFocus = true;
+    emitEvent(this, "kemet-focus", this);
+  }
+  /**
+   * Handles when the input loses focus
+   * @private
+   */
+  handleBlur() {
+    this.hasFocus = false;
+    emitEvent(this, "kemet-blur", this);
+    this.select.checkValidity();
+    if (!this.select.checkValidity()) {
+      this.invalid = true;
+      this.status = "error" /* Error */;
+      this.control.status = "error" /* Error */;
+      emitEvent(this, "kemet-status-change", {
+        status: "error" /* Error */,
+        validity: this.select.validity,
+        element: this
+      });
+    }
+  }
+  /**
+   * Handles when the input changes value
+   * @private
+   */
+  handleChange(event) {
+    this.value = this.select.value;
+    emitEvent(this, "kemet-change", {
+      status: this.status,
+      validity: this.select.validity,
+      element: this,
+      value: event.target.value
+    });
+    if (this.select.checkValidity()) {
+      this.invalid = false;
+      this.status = "standard" /* Standard */;
+      emitEvent(this, "kemet-status-change", {
+        status: "standard" /* Standard */,
+        validity: this.select.validity,
+        element: this,
+        value: event.target.value
+      });
+    }
+  }
+  /**
+   * Handles when the input has an error
+   * @private
+   */
+  handleInvalid() {
+    this.invalid = true;
+    this.status = "error" /* Error */;
+    emitEvent(this, "kemet-status-change", {
+      status: "error" /* Error */,
+      validity: this.select.validity,
+      element: this
+    });
+  }
+  /**
+   * Checks the validity of the standard select
+   * @public
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.select.checkValidity();
+  }
+};
+KemetSelect.styles = [stylesSelect];
+__decorateClass([
+  property({ type: String })
+], KemetSelect.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], KemetSelect.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], KemetSelect.prototype, "value", 2);
+__decorateClass([
+  property({ type: Array })
+], KemetSelect.prototype, "options", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetSelect.prototype, "status", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetSelect.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetSelect.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetSelect.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: String })
+], KemetSelect.prototype, "icon", 2);
+__decorateClass([
+  property({ type: Number, attribute: "icon-size" })
+], KemetSelect.prototype, "iconSize", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetSelect.prototype, "filled", 2);
+__decorateClass([
+  property({ reflect: true })
+], KemetSelect.prototype, "rounded", 2);
+__decorateClass([
+  state()
+], KemetSelect.prototype, "invalid", 2);
+__decorateClass([
+  state()
+], KemetSelect.prototype, "control", 2);
+__decorateClass([
+  state()
+], KemetSelect.prototype, "select", 2);
+__decorateClass([
+  state()
+], KemetSelect.prototype, "selectedOption", 2);
+__decorateClass([
+  state()
+], KemetSelect.prototype, "optionElements", 2);
+__decorateClass([
+  state()
+], KemetSelect.prototype, "hasFocus", 2);
+KemetSelect = __decorateClass([
+  customElement("kemet-select")
+], KemetSelect);
+
+export {
+  KemetSelect
+};
+//# sourceMappingURL=chunk-CUZ6G5AK.mjs.map

package/dist/chunk-CUZ6G5AK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/select.ts","../src/styles/elements/select.ts"],"sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport { emitEvent } from '../utilities/events';\nimport { stylesSelect } from '../styles/elements/select';\n\nimport type KemetOption from './option';\nimport './icon-bootstrap';\nimport KemetField from './field';\nimport { EnumStatuses, TypeRoundedSizes } from '../utilities/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {string} status - The status of the select\n * @prop {boolean} required - Determines whether the field is required\n * @prop {boolean} disabled - Determines whether the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {TypeRoundedSizes} rounded - Displays rounded corners\n *\n * @csspart select\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea.\n * @cssproperty --kemet-select-border - The border of the textarea.\n * @cssproperty --kemet-select-border-color-error - The border of the error state.\n * @cssproperty --kemet-select-border-color-success - The border of the success state.\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-select-border-filled - The border on filled.\n * @cssproperty --kemet-select-color-filled - The color on filled.\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-select-background-color-error - The error state background color.\n * @cssproperty --kemet-select-background-color-success - The success state background color.\n * @cssproperty --kemet-select-background-color-warning - The warning state background color.\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon.\n *\n * @event kemet-focus - Fires when the input receives focus\n * @event kemet-blur - Fires when the input loses focus\n * @event kemet-status-change - Fires when there's a change in status\n * @event kemet-change - Fires when the select input changes\n *\n */\n\ninterface IOptions {\n  label: string;\n  value: string;\n  disabled: boolean;\n  selected: boolean;\n}\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesSelect];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Array })\n  options: IOptions[];\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 18;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @state()\n  invalid: boolean;\n\n  @state()\n  control: KemetField;\n\n  @state()\n  select: HTMLSelectElement;\n\n  @state()\n  selectedOption: HTMLOptionElement;\n\n  @state()\n  optionElements: NodeListOf<KemetOption>;\n\n  @state()\n  hasFocus: boolean;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n\n    /** @internal */\n    this.control = this.closest('kemet-field');\n  }\n\n  firstUpdated() {\n    this.select = this.shadowRoot.querySelector('select');\n    this.selectedOption = this.querySelector('[selected]');\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n  }\n\n  render() {\n    return html`\n      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions(): TemplateResult<1>[] {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-option');\n\n    this.optionElements.forEach((option: KemetOption) => {\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n        ${option.label}\n      </option>`,\n    );\n  }\n\n  /**\n   * Generates a dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon-bootstrap icon=${this.icon} size=${this.iconSize}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-focus', this);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-blur', this);\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.status = EnumStatuses.Error;\n      this.control.status = EnumStatuses.Error;\n\n      emitEvent(this, 'kemet-status-change', {\n        status: EnumStatuses.Error,\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange(event: Event) {\n    this.value = this.select.value;\n    emitEvent(this, 'kemet-change', {\n      status: this.status,\n      validity: this.select.validity,\n      element: this,\n      value: (event.target as HTMLSelectElement).value,\n    });\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      this.status = EnumStatuses.Standard;\n\n      emitEvent(this, 'kemet-status-change', {\n        status: EnumStatuses.Standard,\n        validity: this.select.validity,\n        element: this,\n        value: (event.target as HTMLSelectElement).value,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.status = EnumStatuses.Error;\n\n    emitEvent(this, 'kemet-status-change', {\n      status: EnumStatuses.Error,\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesSelect = css`\n  :host {\n    --kemet-select-padding: 1rem;\n    --kemet-select-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-select-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-select-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-select-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n    --kemet-select-border-filled: none;\n    --kemet-select-color-filled: rgb(var(--kemet-color-white));\n    --kemet-select-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-select-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-select-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-select-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-select-icon-right: 1rem;\n    --kemet-select-border-radius-rounded: 0;\n\n    position: relative;\n    display: block;\n  }\n\n  select {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    padding: var(--kemet-select-padding);\n    border: var(--kemet-select-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n    border-radius: var(--kemet-select-border-radius-rounded);\n  }\n\n  option {\n    color: rgb(var(--kemet-color-black));\n  }\n\n  :host([status='error']) select {\n    border: var(--kemet-select-border-color-error);\n  }\n\n  :host([status='success']) select {\n    border: var(--kemet-select-border-color-success);\n  }\n\n  :host([status='warning']) select {\n    border: var(--kemet-select-border-color-warning);\n  }\n\n  :host([disabled]) select {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=md]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=lg]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([filled]) select {\n    border: var(--kemet-select-border-filled);\n    color: var(--kemet-select-color-filled);\n    background-color: var(--kemet-select-background-color-filled);\n  }\n\n  :host([status='error'][filled]) select {\n    background-color: var(--kemet-select-background-color-error);\n  }\n\n  :host([status='success'][filled]) select {\n    background-color: var(--kemet-select-background-color-success);\n  }\n\n  :host([status='warning'][filled]) select {\n    background-color: var(--kemet-select-background-color-warning);\n  }\n\n  kemet-icon-bootstrap {\n    position: absolute;\n    right: var(--kemet-select-icon-right);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  :host([filled]) kemet-icon-bootstrap {\n    color: var(--kemet-select-color-filled);\n  }\n`;\n"],"mappings":"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","names":[]}