kemet-ui 4.1.0 → 5.0.1

package/dist/elements/toggle.js

@@ -1,319 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-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/toggle.ts
-var toggle_exports = {};
-__export(toggle_exports, {
-  default: () => KemetToggle
-});
-module.exports = __toCommonJS(toggle_exports);
-var import_lit2 = require("lit");
-var import_decorators = require("lit/decorators.js");
-
-// src/utilities/form-controller.ts
-var FormSubmitController = class {
-  constructor(host, options = void 0) {
-    (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/styles/elements/toggle.ts
-var import_lit = require("lit");
-var stylesToggle = import_lit.css`
-  :host {
-    --kemet-toggle-width: 3.5rem;
-    --kemet-toggle-height: 2rem;
-    --kemet-toggle-handle-diameter: 1.6rem;
-    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
-    --kemet-toggle-track-border: none;
-    --kemet-toggle-track-color: rgb(var(--kemet-color-white));
-    --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(var(--kemet-color-gray-800) / 35%), inset 0 -0.2rem 0.4rem 0 rgb(var(--kemet-color-gray-50));
-    --kemet-toggle-handle-border: none;
-    --kemet-toggle-handle-color: rgb(var(--kemet-color-primary));
-    --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 10%), 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 20%);
-
-    display: flex;
-    align-items: center;
-  }
-
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-
-  label {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    font-size: inherit;
-    color: inherit;
-  }
-
-  :host([disabled]) label {
-    cursor: not-allowed;
-  }
-
-  input {
-    display: none;
-  }
-
-  [part='control'] {
-    position: relative;
-    display: inline-flex;
-    margin: 0;
-    width: var(--kemet-toggle-width);
-    height: var(--kemet-toggle-height);
-  }
-
-  [part='control'] > span {
-    transition: 300ms ease-in-out;
-  }
-
-  [part='track'] {
-    width: var(--kemet-toggle-width);
-    height: var(--kemet-toggle-height);
-    border: var(--kemet-toggle-track-border);
-    border-radius: var(--kemet-toggle-height);
-    background-color: var(--kemet-toggle-track-color);
-    box-shadow: var(--kemet-toggle-track-shadow);
-  }
-
-  :host([squared]) [part='track'] {
-    border-radius: 0;
-  }
-
-  [part='handle'] {
-    position: absolute;
-    top: var(--kemet-toggle-handle-margin);
-    left: var(--kemet-toggle-handle-margin);
-    width: var(--kemet-toggle-handle-diameter);
-    height: var(--kemet-toggle-handle-diameter);
-    transform: translateX(0);
-    border: var(--kemet-toggle-handle-border);
-    border-radius: var(--kemet-toggle-handle-diameter);
-    background-color: var(--kemet-toggle-handle-color);
-    box-shadow: var(--kemet-toggle-handle-shadow);
-  }
-
-  :host([squared]) [part='handle'] {
-    border-radius: 0;
-  }
-
-  :host([checked]) [part='handle'] {
-    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
-  }
-
-  .option {
-    font-size: 90%;
-  }
-`;
-
-// src/elements/toggle.ts
-var KemetToggle = class extends import_lit2.LitElement {
-  constructor() {
-    super();
-    this.name = "toggle-switch";
-    this.checked = false;
-    this.disabled = false;
-    this.label = "";
-    this.show = false;
-    this.squared = false;
-    this.optionChecked = "on";
-    this.optionUnchecked = "off";
-    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
-    this.formSubmitController = new FormSubmitController(this);
-  }
-  render() {
-    return import_lit2.html`
-      <label part="label">
-        ${this.makeUncheckedOption()}
-        <span part="control">
-          <span part="track"></span>
-          <span part="handle"></span>
-        </span>
-        <input
-          role="switch"
-          type="checkbox"
-          name="${this.name}"
-          aria-label="${this.label}"
-          aria-checked=${this.checked ? "true" : "false"}
-          ?disabled=${this.disabled}
-          ?checked=${this.checked}
-          @change=${this.handleChange}
-        />
-        ${this.makeCheckedOption()}
-        <span part="text">${this.label}</span>
-      </label>
-    `;
-  }
-  handleChange() {
-    this.checked = !this.checked;
-    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
-    emitEvent(this, "kemet-change", this);
-  }
-  makeUncheckedOption() {
-    if (this.show) {
-      return import_lit2.html`<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
-    }
-    return null;
-  }
-  makeCheckedOption() {
-    if (this.show) {
-      return import_lit2.html`<span class="option" part="checked">${this.optionChecked}</span>`;
-    }
-    return null;
-  }
-};
-KemetToggle.styles = [stylesToggle];
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetToggle.prototype, "name", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean, reflect: true })
-], KemetToggle.prototype, "checked", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetToggle.prototype, "disabled", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetToggle.prototype, "label", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetToggle.prototype, "show", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetToggle.prototype, "squared", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String, attribute: "option-checked" })
-], KemetToggle.prototype, "optionChecked", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String, attribute: "option-unchecked" })
-], KemetToggle.prototype, "optionUnchecked", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetToggle.prototype, "value", 2);
-KemetToggle = __decorateClass([
-  (0, import_decorators.customElement)("kemet-toggle")
-], KemetToggle);
-//# sourceMappingURL=toggle.js.map

package/dist/elements/toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/elements/toggle.ts","../../src/utilities/form-controller.ts","../../src/utilities/events.ts","../../src/styles/elements/toggle.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport { emitEvent } from '../utilities/events';\nimport { stylesToggle } from '../styles/elements/toggle';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-change - Fires when the toggle changes state\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesToggle];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\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        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-change', this);\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n","export class FormSubmitController {\n  host;\n  form;\n  options;\n\n  constructor(host, options = undefined) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: input => input.closest('form'),\n      name: input => input.name,\n      value: input => input.value,\n      disabled: input => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\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 const stylesToggle = css`\n  :host {\n    --kemet-toggle-width: 3.5rem;\n    --kemet-toggle-height: 2rem;\n    --kemet-toggle-handle-diameter: 1.6rem;\n    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n    --kemet-toggle-track-border: none;\n    --kemet-toggle-track-color: rgb(var(--kemet-color-white));\n    --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(var(--kemet-color-gray-800) / 35%), inset 0 -0.2rem 0.4rem 0 rgb(var(--kemet-color-gray-50));\n    --kemet-toggle-handle-border: none;\n    --kemet-toggle-handle-color: rgb(var(--kemet-color-primary));\n    --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 10%), 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 20%);\n\n    display: flex;\n    align-items: center;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    font-size: inherit;\n    color: inherit;\n  }\n\n  :host([disabled]) label {\n    cursor: not-allowed;\n  }\n\n  input {\n    display: none;\n  }\n\n  [part='control'] {\n    position: relative;\n    display: inline-flex;\n    margin: 0;\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n  }\n\n  [part='control'] > span {\n    transition: 300ms ease-in-out;\n  }\n\n  [part='track'] {\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n    border: var(--kemet-toggle-track-border);\n    border-radius: var(--kemet-toggle-height);\n    background-color: var(--kemet-toggle-track-color);\n    box-shadow: var(--kemet-toggle-track-shadow);\n  }\n\n  :host([squared]) [part='track'] {\n    border-radius: 0;\n  }\n\n  [part='handle'] {\n    position: absolute;\n    top: var(--kemet-toggle-handle-margin);\n    left: var(--kemet-toggle-handle-margin);\n    width: var(--kemet-toggle-handle-diameter);\n    height: var(--kemet-toggle-handle-diameter);\n    transform: translateX(0);\n    border: var(--kemet-toggle-handle-border);\n    border-radius: var(--kemet-toggle-handle-diameter);\n    background-color: var(--kemet-toggle-handle-color);\n    box-shadow: var(--kemet-toggle-handle-shadow);\n  }\n\n  :host([squared]) [part='handle'] {\n    border-radius: 0;\n  }\n\n  :host([checked]) [part='handle'] {\n    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n  }\n\n  .option {\n    font-size: 90%;\n  }\n`;\n"],"mappings":"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","names":["import_lit"]}

package/dist/elements/toggle.mjs

@@ -1,10 +0,0 @@
-import {
-  KemetToggle
-} from "../chunk-QCMF4CCI.mjs";
-import "../chunk-LHEY3UOF.mjs";
-import "../chunk-VDX3OED3.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  KemetToggle as default
-};
-//# sourceMappingURL=toggle.mjs.map

package/dist/elements/toggle.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/tooltip.d.mts

@@ -1,38 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import KemetPopper from './popper.mjs';
-
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-tooltip
- * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.
- *
- * @slot trigger - Controls opening and closing the tooltip.
- * @slot content - The contents of the tooltip.
- *
- * @csspart trigger - Contains the trigger for the tooltip.
- * @csspart content - Contains the content for the tooltip.
- *
- * @cssproperty --kemet-tooltip-content-height - The height of the content.
- * @cssproperty --kemet-tooltip-size - The width and height of arrow's container
- * @cssproperty --kemet-tooltip-border-size - The border size of the arrow
- * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy
- * @cssproperty --kemet-tooltip-background-color - The background color of the arrow
- * @cssproperty --kemet-tooltip-border-color - The border color of the arrow
- * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger
- *
- */
-declare class KemetTooltip extends KemetPopper {
-    static styles: lit.CSSResult[];
-    render(): lit_html.TemplateResult<1>;
-    measureContent(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tooltip': KemetTooltip;
-    }
-}
-
-export { KemetTooltip as default };

package/dist/elements/tooltip.d.ts

@@ -1,38 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import KemetPopper from './popper.js';
-
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-tooltip
- * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.
- *
- * @slot trigger - Controls opening and closing the tooltip.
- * @slot content - The contents of the tooltip.
- *
- * @csspart trigger - Contains the trigger for the tooltip.
- * @csspart content - Contains the content for the tooltip.
- *
- * @cssproperty --kemet-tooltip-content-height - The height of the content.
- * @cssproperty --kemet-tooltip-size - The width and height of arrow's container
- * @cssproperty --kemet-tooltip-border-size - The border size of the arrow
- * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy
- * @cssproperty --kemet-tooltip-background-color - The background color of the arrow
- * @cssproperty --kemet-tooltip-border-color - The border color of the arrow
- * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger
- *
- */
-declare class KemetTooltip extends KemetPopper {
-    static styles: lit.CSSResult[];
-    render(): lit_html.TemplateResult<1>;
-    measureContent(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tooltip': KemetTooltip;
-    }
-}
-
-export { KemetTooltip as default };