kemet-ui 4.0.2 → 5.0.0

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

@@ -0,0 +1,145 @@
+// src/elements/card/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-card-font-color: inherit;
+  --kemet-card-max-width: 600px;
+  --kemet-card-padding: 1rem;
+  --kemet-card-border: 1px solid;
+  --kemet-card-caption-font-color: var(--kemet-color-font-base-inverse);
+  --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);
+  --kemet-card-caption-background-color: var(--kemet-color-background-overlay-dark);
+  --kemet-card-body-padding: var(--kemet-card-padding);
+  --kemet-card-header-padding: var(--kemet-card-padding);
+  --kemet-card-header-border-bottom: 1px solid;
+  --kemet-card-footer-padding: var(--kemet-card-padding);
+  --kemet-card-footer-border-top: 1px solid;
+  --kemet-card-filled-color: var(--kemet-color-background-base);
+
+  /* private */
+  --_kemet-card-border-radius: 0;
+  --_kemet-card-background-color: transparent;
+  --_kemet-card-elevation: none;
+
+  color: var(--kemet-card-font-color);
+  display: inline-flex;
+  flex-direction: column;
+  max-width: var(--kemet-card-max-width);
+  border: var(--kemet-card-border);
+  border-radius: var(--_kemet-card-border-radius);
+  background-color: var(--_kemet-card-background-color);
+  box-shadow: var(--_kemet-card-elevation);
+}
+
+:host([center]) {
+  align-items: center;
+  text-align: center;
+}
+
+:host([borderless]) ::slotted(*) {
+  border: none;
+}
+
+.body {
+  padding: var(--kemet-card-body-padding);
+}
+
+.media {
+  position: relative;
+}
+
+::slotted(*) {
+  max-width: 100%;
+}
+
+::slotted(img) {
+  display: flex;
+  max-width: 100%;
+}
+
+::slotted([slot="header"]) {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kemet-card-header-padding);
+  border-bottom: var(--kemet-card-header-border-bottom);
+}
+
+::slotted([slot="caption"]) {
+  color: var(--kemet-card-caption-font-color);
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kemet-card-caption-padding);
+  background-color: var(--kemet-card-caption-background-color);
+}
+
+:host([polarity=dark]) {
+  --kemet-card-caption-font-color: var(--kemet-color-font-base);
+}
+
+::slotted([slot="footer"]) {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kemet-card-footer-padding);
+  border-top: var(--kemet-card-footer-border-top);
+}
+
+:host([rounded]) {
+  --_kemet-card-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --_kemet-card-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --_kemet-card-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --_kemet-button-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([filled]) {
+  --kemet-card-border: none;
+  --_kemet-card-background-color: var(--kemet-card-filled-color);
+}
+
+:host([polarity=dark][filled]) {
+  --kemet-card-filled-color: var(--kemet-color-background-inverse);
+}
+
+:host([elevation]),
+:host([elevation=level1]) {
+  --_kemet-card-elevation: 0 1px 2px 0 rgba(0, 0, 0, .05);
+}
+
+:host([elevation=level2]) {
+  --_kemet-card-elevation: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
+}
+
+:host([elevation=level3]) {
+  --_kemet-card-elevation: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);;
+}
+
+:host([elevation=level4]) {
+  --_kemet-card-elevation: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);;
+}
+
+:host([elevation=level5]) {
+  --_kemet-card-elevation: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
+}
+
+:host([elevation=level6]) {
+  --_kemet-card-elevation: 0 25px 50px -12px rgba(0, 0, 0, .25);
+}
+
+:host([elevation=inner]) {
+  --_kemet-card-elevation: inset 0 2px 4px 0 rgba(0, 0, 0, .05);
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/card/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-card-font-color: inherit;\n  --kemet-card-max-width: 600px;\n  --kemet-card-padding: 1rem;\n  --kemet-card-border: 1px solid;\n  --kemet-card-caption-font-color: var(--kemet-color-font-base-inverse);\n  --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);\n  --kemet-card-caption-background-color: var(--kemet-color-background-overlay-dark);\n  --kemet-card-body-padding: var(--kemet-card-padding);\n  --kemet-card-header-padding: var(--kemet-card-padding);\n  --kemet-card-header-border-bottom: 1px solid;\n  --kemet-card-footer-padding: var(--kemet-card-padding);\n  --kemet-card-footer-border-top: 1px solid;\n  --kemet-card-filled-color: var(--kemet-color-background-base);\n\n  /* private */\n  --_kemet-card-border-radius: 0;\n  --_kemet-card-background-color: transparent;\n  --_kemet-card-elevation: none;\n\n  color: var(--kemet-card-font-color);\n  display: inline-flex;\n  flex-direction: column;\n  max-width: var(--kemet-card-max-width);\n  border: var(--kemet-card-border);\n  border-radius: var(--_kemet-card-border-radius);\n  background-color: var(--_kemet-card-background-color);\n  box-shadow: var(--_kemet-card-elevation);\n}\n\n:host([center]) {\n  align-items: center;\n  text-align: center;\n}\n\n:host([borderless]) ::slotted(*) {\n  border: none;\n}\n\n.body {\n  padding: var(--kemet-card-body-padding);\n}\n\n.media {\n  position: relative;\n}\n\n::slotted(*) {\n  max-width: 100%;\n}\n\n::slotted(img) {\n  display: flex;\n  max-width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-header-padding);\n  border-bottom: var(--kemet-card-header-border-bottom);\n}\n\n::slotted([slot=\"caption\"]) {\n  color: var(--kemet-card-caption-font-color);\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-caption-padding);\n  background-color: var(--kemet-card-caption-background-color);\n}\n\n:host([polarity=dark]) {\n  --kemet-card-caption-font-color: var(--kemet-color-font-base);\n}\n\n::slotted([slot=\"footer\"]) {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--kemet-card-footer-padding);\n  border-top: var(--kemet-card-footer-border-top);\n}\n\n:host([rounded]) {\n  --_kemet-card-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-card-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-card-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([filled]) {\n  --kemet-card-border: none;\n  --_kemet-card-background-color: var(--kemet-card-filled-color);\n}\n\n:host([polarity=dark][filled]) {\n  --kemet-card-filled-color: var(--kemet-color-background-inverse);\n}\n\n:host([elevation]),\n:host([elevation=level1]) {\n  --_kemet-card-elevation: 0 1px 2px 0 rgba(0, 0, 0, .05);\n}\n\n:host([elevation=level2]) {\n  --_kemet-card-elevation: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);\n}\n\n:host([elevation=level3]) {\n  --_kemet-card-elevation: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);;\n}\n\n:host([elevation=level4]) {\n  --_kemet-card-elevation: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);;\n}\n\n:host([elevation=level5]) {\n  --_kemet-card-elevation: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);\n}\n\n:host([elevation=level6]) {\n  --_kemet-card-elevation: 0 25px 50px -12px rgba(0, 0, 0, .25);\n}\n\n:host([elevation=inner]) {\n  --_kemet-card-elevation: inset 0 2px 4px 0 rgba(0, 0, 0, .05);\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;","names":[]}

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

@@ -0,0 +1,96 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
+import { E as EnumAppearances } from '../../constants-W9QKPlZP.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-checkbox
+ * @summary An enhanced checkbox.
+ *
+ * @prop {string} label - Label text for the checkbox
+ * @prop {boolean} checked - Determines if the checkbox is selected
+ * @prop {boolean} indeterminate - An indeterminate selection status
+ * @prop {string} name - Name of the checkbox
+ * @prop {string} value - Value of the checkbox
+ * @prop {boolean} disabled - Determines if a checkbox is disabled
+ * @prop {boolean} required - Determines if a checkbox is required
+ * @prop {boolean} focused - Is true when the checkbox is focused
+ * @prop {boolean} rounded - Gives the checkbox rounded edges
+ * @prop {boolean} filled - Fills the checkbox with color
+ * @prop {EnumAppearances} appearance - The status of the checkbox
+ * @prop {string} message - Message associated with checkbox status
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @csspart label - The label element.
+ * @csspart text - The label's text.
+ * @csspart mark - The icon of the check mark.
+ *
+ * @cssproperty --kemet-checkbox-size - The width and height of the checkbox.
+ * @cssproperty --kemet-checkbox-color - The color of the checkbox mark.
+ * @cssproperty --kemet-checkbox-border - The border of the checkbox.
+ * @cssproperty --kemet-checkbox-border-radius - The border radius of the checkbox.
+ * @cssproperty --kemet-checkbox-filled-color - The filled color of the checkbox mark.
+ * @cssproperty --kemet-checkbox-filled-background-color - The filled background color.
+ *
+ * @fires kemet-change - Fires when the state of the checkbox changes
+ * @details {KemetCheckbox} element - The checkbox element
+ *
+ * @fires kemet-focus - Fires when the checkbox receives focus
+ * @details {KemetCheckbox} element - The checkbox element
+ *
+ * @fires kemet-blur - Fires when the checkbox loses focus
+ * @details {KemetCheckbox} element - The checkbox element
+ *
+ * @fires kemet-checkbox-mounted - Fires when the checkbox is mounted to the dom
+ * @details {KemetCheckbox} element -The checkbox element
+ *
+ */
+declare class KemetCheckbox extends LitElement {
+    /** @internal */
+    formSubmitController: FormSubmitController;
+    static styles: lit.CSSResult[];
+    label: string;
+    checked: boolean;
+    indeterminate: boolean;
+    name: string;
+    value: boolean;
+    disabled: boolean;
+    required: boolean;
+    focused: boolean;
+    rounded: boolean;
+    filled: boolean;
+    appearance: EnumAppearances;
+    message: string;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    input: HTMLInputElement;
+    firstUpdated(): void;
+    constructor();
+    render(): lit_html.TemplateResult<1>;
+    /**
+     * Simulates a click on the input element.
+     * @public
+     * @method click
+     * @returns {void}
+     */
+    click(): void;
+    handleClick(): void;
+    handleBlur(): void;
+    handleFocus(): void;
+    handleChange(): void;
+    makeMessage(): lit_html.TemplateResult<1> | null;
+    makeCheckMark(): lit_html.TemplateResult<1> | null;
+    checkValidity(): boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-checkbox': KemetCheckbox;
+    }
+}
+
+export { KemetCheckbox as default };

package/dist/elements/checkbox/index.js

@@ -0,0 +1,401 @@
+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/checkbox/index.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/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = {}) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => input.closest("form"),
+      name: (input) => input.name,
+      value: (input) => input.value,
+      disabled: (input) => input.disabled,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+  hostConnected() {
+    this.form = this.options.form(this.host);
+    if (this.form) {
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+    }
+  }
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form = void 0;
+    }
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
+      event.formData?.append(name, value.toString());
+    }
+  }
+  handleFormSubmit(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const disabled = this.options.disabled(this.host);
+    this.form = this.options.form(this.host);
+    if (this.form && !disabled) {
+      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
+      components.forEach((component) => {
+        if (component.checkValidity) {
+          component.checkValidity();
+          if (!component.checkValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: component.validity ? component.validity : {},
+                  element: component
+                }
+              })
+            );
+          }
+          if (component.checkLimitValidity && !component.checkLimitValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: { passedLimit: true },
+                  element: component
+                }
+              })
+            );
+          }
+        }
+      });
+    }
+  }
+  submit() {
+    const button = document.createElement("button");
+    if (this.form) {
+      button.type = "submit";
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clip = "rect(0 0 0 0)";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+};
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/checkbox/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-checkbox-size: 18px;
+  --kemet-checkbox-color: var(--kemet-color-background-inverse);
+  --kemet-checkbox-mark-color: var(--kemet-checkbox-color);
+  --kemet-checkbox-border: 1px solid var(--kemet-checkbox-color);
+  --kemet-checkbox-border-radius: 0;
+
+  /* private */
+  --_kemet-checkbox-background-color: transparent;
+
+  display: inline-block;
+}
+
+:host([disabled]) {
+  --kemet-checkbox-color: var(--kemet-color-background-disabled)
+}
+
+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: relative;
+  z-index: 99;
+  opacity: 0;
+}
+
+button {
+  margin: 0;
+  border: none;
+  background: none;
+}
+
+[part=checkbox] {
+  color: var(--kemet-checkbox-mark-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kemet-checkbox-size);
+  height: var(--kemet-checkbox-size);
+  border: var(--kemet-checkbox-border);
+  border-radius: var(--kemet-checkbox-border-radius);
+  background-color: var(--_kemet-checkbox-background-color);
+  position: absolute;
+}
+
+:host([rounded]) [part=checkbox] {
+  --kemet-checkbox-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([filled]) {
+  --kemet-checkbox-mark-color: var(--kemet-color-font-inverse-base);
+  --kemet-checkbox-border: 1px solid var(--kemet-checkbox-color);
+  --_kemet-checkbox-background-color: var(--kemet-checkbox-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] {
+  --kemet-checkbox-mark-color: var(--kemet-color-font-base-inverse);
+}
+
+[part=message] {
+  display: block;
+  margin-top: 0.5rem;
+}
+
+:host([appearance=brand]) {
+  --kemet-checkbox-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]) {
+  --kemet-checkbox-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=warning]) {
+  --kemet-checkbox-color: var(--kemet-color-background-warning);
+}
+
+:host([appearance=info]) {
+  --kemet-checkbox-color: var(--kemet-color-background-info);
+}
+
+:host([appearance=link]) {
+  --kemet-checkbox-color: var(--kemet-color-background-link);
+}
+`;
+
+// src/elements/checkbox/index.ts
+var KemetCheckbox = class extends LitElement {
+  constructor() {
+    super();
+    this.label = "";
+    this.checked = false;
+    this.indeterminate = false;
+    this.name = "checkbox";
+    this.value = false;
+    this.disabled = false;
+    this.required = false;
+    this.focused = false;
+    this.rounded = false;
+    this.filled = false;
+    this.message = "";
+    this.dom = "initializing";
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-checkbox-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  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", { element: this });
+  }
+  handleBlur() {
+    this.focused = false;
+    emitEvent(this, "kemet-blur", { element: this });
+  }
+  handleFocus() {
+    this.focused = true;
+    emitEvent(this, "kemet-focus", { element: this });
+  }
+  handleChange() {
+    this.value = this.checked;
+  }
+  makeMessage() {
+    if (this.appearance === "error" /* Error */ || this.appearance === "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 = [styles_css_default];
+__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, "appearance", 2);
+__decorateClass([
+  property({ type: String })
+], KemetCheckbox.prototype, "message", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetCheckbox.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetCheckbox.prototype, "dom", 2);
+__decorateClass([
+  query("input")
+], KemetCheckbox.prototype, "input", 2);
+KemetCheckbox = __decorateClass([
+  customElement("kemet-checkbox")
+], KemetCheckbox);
+export {
+  KemetCheckbox as default
+};
+//# sourceMappingURL=index.js.map