kemet-ui 3.1.0 → 4.0.1

package/dist/elements/sortable-item.d.ts

@@ -0,0 +1,26 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-sortable-item
+ * @summary An item in a sortable list.
+ *
+ * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.
+ */
+declare class KemetSortableItem extends LitElement {
+    static styles: lit.CSSResult[];
+    ghost: boolean;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-sortable-item': KemetSortableItem;
+    }
+}
+
+export { KemetSortableItem as default };

package/dist/elements/sortable-item.js

@@ -0,0 +1,75 @@
+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/sortable-item.ts
+var sortable_item_exports = {};
+__export(sortable_item_exports, {
+  default: () => KemetSortableItem
+});
+module.exports = __toCommonJS(sortable_item_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/sortable.ts
+var import_lit = require("lit");
+var stylesSortable = import_lit.css`
+  :host {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+  }
+`;
+var stylesSortableItem = import_lit.css`
+  :host {
+    cursor: grab;
+    display: block;
+    padding: 1rem;
+    border: 1px solid rgb(var(--kemet-color-foreground));
+  }
+
+  :host([ghost]) {
+    opacity: 0.5;
+    border-style: dashed;
+  }
+`;
+
+// src/elements/sortable-item.ts
+var KemetSortableItem = class extends import_lit2.LitElement {
+  firstUpdated() {
+    this.draggable = true;
+  }
+  render() {
+    return import_lit2.html`<slot></slot>`;
+  }
+};
+KemetSortableItem.styles = [stylesSortableItem];
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetSortableItem.prototype, "ghost", 2);
+KemetSortableItem = __decorateClass([
+  (0, import_decorators.customElement)("kemet-sortable-item")
+], KemetSortableItem);
+//# sourceMappingURL=sortable-item.js.map

package/dist/elements/sortable-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/sortable-item.ts","../../src/styles/elements/sortable.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesSortableItem } from '../styles/elements/sortable';\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable-item\n * @summary An item in a sortable list.\n *\n * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.\n */\n\n@customElement('kemet-sortable-item')\nexport default class KemetSortableItem extends LitElement {\n  static styles = [stylesSortableItem];\n\n  @property({ type: Boolean, reflect: true })\n  ghost: boolean;\n\n  firstUpdated() {\n    this.draggable = true;\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable-item': KemetSortableItem\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesSortable = css`\n  :host {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n`;\n\nexport const stylesSortableItem = css`\n  :host {\n    cursor: grab;\n    display: block;\n    padding: 1rem;\n    border: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  :host([ghost]) {\n    opacity: 0.5;\n    border-style: dashed;\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAAwC;;;ACDxC,iBAAoB;AAEb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADKlC,IAAqB,oBAArB,cAA+C,uBAAW;AAAA,EAMxD,eAAe;AACb,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAbqB,kBACZ,SAAS,CAAC,kBAAkB;AAGnC;AAAA,MADC,4BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,kBAInB;AAJmB,oBAArB;AAAA,MADC,iCAAc,qBAAqB;AAAA,GACf;","names":["import_lit"]}

package/dist/elements/sortable-item.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetSortableItem
+} from "../chunk-RN4YODB5.mjs";
+import "../chunk-5WUBMMWS.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetSortableItem as default
+};
+//# sourceMappingURL=sortable-item.mjs.map

package/dist/elements/sortable-item.mjs.map

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

package/dist/elements/sortable.d.mts

@@ -0,0 +1,37 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetSortableItem from './sortable-item.mjs';
+
+interface InterfaceSortableDragDetails {
+    event: DragEvent;
+    current: KemetSortableItem;
+    all: NodeListOf<KemetSortableItem>;
+}
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-sortable
+ * @summary A list that can be sorted by drag and drop.
+ *
+ * @event kemet-drag-start - Fires when an item starts to be moved.
+ * @event kemet-drag-over - Fires when an item is moving to a new spot.
+ * @event kemet-drag-end - Fires when an item has been moved to a new spot.
+ */
+declare class KemetSortable extends LitElement {
+    static styles: lit.CSSResult[];
+    sortableItem: KemetSortableItem;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleDragStart(event: DragEvent): void;
+    handleDragOver(event: DragEvent): void;
+    handleDragEnd(event: DragEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-sortable': KemetSortable;
+    }
+}
+
+export { type InterfaceSortableDragDetails, KemetSortable as default };

package/dist/elements/sortable.d.ts

@@ -0,0 +1,37 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetSortableItem from './sortable-item.js';
+
+interface InterfaceSortableDragDetails {
+    event: DragEvent;
+    current: KemetSortableItem;
+    all: NodeListOf<KemetSortableItem>;
+}
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-sortable
+ * @summary A list that can be sorted by drag and drop.
+ *
+ * @event kemet-drag-start - Fires when an item starts to be moved.
+ * @event kemet-drag-over - Fires when an item is moving to a new spot.
+ * @event kemet-drag-end - Fires when an item has been moved to a new spot.
+ */
+declare class KemetSortable extends LitElement {
+    static styles: lit.CSSResult[];
+    sortableItem: KemetSortableItem;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleDragStart(event: DragEvent): void;
+    handleDragOver(event: DragEvent): void;
+    handleDragEnd(event: DragEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-sortable': KemetSortable;
+    }
+}
+
+export { type InterfaceSortableDragDetails, KemetSortable as default };

package/dist/elements/sortable.js

@@ -0,0 +1,139 @@
+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/sortable.ts
+var sortable_exports = {};
+__export(sortable_exports, {
+  default: () => KemetSortable
+});
+module.exports = __toCommonJS(sortable_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+var import_mobile_drag_drop = require("mobile-drag-drop");
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/styles/elements/sortable.ts
+var import_lit = require("lit");
+var stylesSortable = import_lit.css`
+  :host {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+  }
+`;
+var stylesSortableItem = import_lit.css`
+  :host {
+    cursor: grab;
+    display: block;
+    padding: 1rem;
+    border: 1px solid rgb(var(--kemet-color-foreground));
+  }
+
+  :host([ghost]) {
+    opacity: 0.5;
+    border-style: dashed;
+  }
+`;
+
+// src/elements/sortable.ts
+var getMouseOffset = (event) => {
+  const target = event.target;
+  const targetRect = target.getBoundingClientRect();
+  return {
+    x: event.pageX - targetRect.left,
+    y: event.pageY - targetRect.top
+  };
+};
+var getElementVerticalCenter = (element) => {
+  const rect = element.getBoundingClientRect();
+  return (rect.bottom - rect.top) / 2;
+};
+var KemetSortable = class extends import_lit2.LitElement {
+  firstUpdated() {
+    (0, import_mobile_drag_drop.polyfill)();
+    this.addEventListener("dragstart", (event) => this.handleDragStart(event), false);
+    this.addEventListener("dragenter", (event) => {
+      event.preventDefault();
+    });
+  }
+  render() {
+    return import_lit2.html`<slot></slot>`;
+  }
+  handleDragStart(event) {
+    this.sortableItem = event.target;
+    this.addEventListener("dragover", (dragOverEvent) => this.handleDragOver(dragOverEvent), false);
+    this.addEventListener("dragend", (dragEndEvent) => this.handleDragEnd(dragEndEvent), false);
+    setTimeout(() => {
+      this.sortableItem.ghost = true;
+      emitEvent(this, "kemet-drag-start", {
+        event,
+        current: this.sortableItem,
+        all: this.querySelectorAll("kemet-sortable-item")
+      });
+    }, 0);
+  }
+  handleDragOver(event) {
+    event.preventDefault();
+    const target = event.target;
+    emitEvent(this, "kemet-drag-over", {
+      event,
+      current: this.sortableItem,
+      all: this.querySelectorAll("kemet-sortable-item")
+    });
+    if (target && target.tagName === "KEMET-SORTABLE-ITEM") {
+      const offset = getMouseOffset(event);
+      const middleY = getElementVerticalCenter(target);
+      if (offset.y > middleY) {
+        this.insertBefore(this.sortableItem, target.nextSibling);
+      } else {
+        this.insertBefore(this.sortableItem, target);
+      }
+    }
+  }
+  handleDragEnd(event) {
+    event.preventDefault();
+    this.sortableItem.ghost = false;
+    emitEvent(this, "kemet-drag-end", {
+      event,
+      current: this.sortableItem,
+      all: this.querySelectorAll("kemet-sortable-item")
+    });
+  }
+};
+KemetSortable.styles = [stylesSortable];
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetSortable.prototype, "sortableItem", 2);
+KemetSortable = __decorateClass([
+  (0, import_decorators.customElement)("kemet-sortable")
+], KemetSortable);
+//# sourceMappingURL=sortable.js.map

package/dist/elements/sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/sortable.ts","../../src/utilities/events.ts","../../src/styles/elements/sortable.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../utilities/events';\nimport { stylesSortable } from '../styles/elements/sortable';\nimport type KemetSortableItem from './sortable-item';\n\nexport interface InterfaceSortableDragDetails {\n  event: DragEvent,\n  current: KemetSortableItem,\n  all: NodeListOf<KemetSortableItem>,\n}\n\nconst getMouseOffset = (event: DragEvent) => {\n  const target = event.target as HTMLElement;\n  const targetRect = target.getBoundingClientRect();\n  return {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n};\n\nconst getElementVerticalCenter = (element: HTMLElement) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n *\n * @event kemet-drag-start - Fires when an item starts to be moved.\n * @event kemet-drag-over - Fires when an item is moving to a new spot.\n * @event kemet-drag-end - Fires when an item has been moved to a new spot.\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [stylesSortable];\n\n  @state()\n  sortableItem: KemetSortableItem;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  handleDragStart(event: DragEvent) {\n    this.sortableItem = event.target as KemetSortableItem;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n\n      emitEvent(this, 'kemet-drag-start', {\n        event,\n        current: this.sortableItem,\n        all: this.querySelectorAll('kemet-sortable-item'),\n      });\n    }, 0);\n  }\n\n  handleDragOver(event: DragEvent) {\n    event.preventDefault();\n\n    const target = event.target as KemetSortableItem;\n\n    emitEvent(this, 'kemet-drag-over', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event: DragEvent) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\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 stylesSortable = css`\n  :host {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n`;\n\nexport const stylesSortableItem = css`\n  :host {\n    cursor: grab;\n    display: block;\n    padding: 1rem;\n    border: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  :host([ghost]) {\n    opacity: 0.5;\n    border-style: dashed;\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAAqC;AACrC,8BAAyB;;;ACFlB,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,iBAAoB;AAEb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AFGlC,IAAM,iBAAiB,CAAC,UAAqB;AAC3C,QAAM,SAAS,MAAM;AACrB,QAAM,aAAa,OAAO,sBAAsB;AAChD,SAAO;AAAA,IACL,GAAG,MAAM,QAAQ,WAAW;AAAA,IAC5B,GAAG,MAAM,QAAQ,WAAW;AAAA,EAC9B;AACF;AAEA,IAAM,2BAA2B,CAAC,YAAyB;AACzD,QAAM,OAAO,QAAQ,sBAAsB;AAC3C,UAAQ,KAAK,SAAS,KAAK,OAAO;AACpC;AAeA,IAAqB,gBAArB,cAA2C,uBAAW;AAAA,EAMpD,eAAe;AACb,0CAAS;AAET,SAAK,iBAAiB,aAAa,WAAS,KAAK,gBAAgB,KAAK,GAAG,KAAK;AAC9E,SAAK,iBAAiB,aAAa,CAAC,UAAU;AAAE,YAAM,eAAe;AAAA,IAAG,CAAC;AAAA,EAC3E;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB,OAAkB;AAChC,SAAK,eAAe,MAAM;AAE1B,SAAK,iBAAiB,YAAY,mBAAiB,KAAK,eAAe,aAAa,GAAG,KAAK;AAC5F,SAAK,iBAAiB,WAAW,kBAAgB,KAAK,cAAc,YAAY,GAAG,KAAK;AAExF,eAAW,MAAM;AACf,WAAK,aAAa,QAAQ;AAE1B,gBAAU,MAAM,oBAAoB;AAAA,QAClC;AAAA,QACA,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,MAClD,CAAC;AAAA,IACH,GAAG,CAAC;AAAA,EACN;AAAA,EAEA,eAAe,OAAkB;AAC/B,UAAM,eAAe;AAErB,UAAM,SAAS,MAAM;AAErB,cAAU,MAAM,mBAAmB;AAAA,MACjC;AAAA,MACA,SAAS,KAAK;AAAA,MACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,IAClD,CAAC;AAED,QAAI,UAAU,OAAO,YAAY,uBAAuB;AACtD,YAAM,SAAS,eAAe,KAAK;AACnC,YAAM,UAAU,yBAAyB,MAAM;AAE/C,UAAI,OAAO,IAAI,SAAS;AACtB,aAAK,aAAa,KAAK,cAAc,OAAO,WAAW;AAAA,MACzD,OAAO;AACL,aAAK,aAAa,KAAK,cAAc,MAAM;AAAA,MAC7C;AAAA,IACF;AAAA,EACF;AAAA,EAEA,cAAc,OAAkB;AAC9B,UAAM,eAAe;AACrB,SAAK,aAAa,QAAQ;AAE1B,cAAU,MAAM,kBAAkB;AAAA,MAChC;AAAA,MACA,SAAS,KAAK;AAAA,MACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,IAClD,CAAC;AAAA,EACH;AACF;AAnEqB,cACZ,SAAS,CAAC,cAAc;AAG/B;AAAA,MADC,yBAAM;AAAA,GAHY,cAInB;AAJmB,gBAArB;AAAA,MADC,iCAAc,gBAAgB;AAAA,GACV;","names":["import_lit"]}

package/dist/elements/sortable.mjs

@@ -0,0 +1,10 @@
+import {
+  KemetSortable
+} from "../chunk-F74NYUH5.mjs";
+import "../chunk-5WUBMMWS.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetSortable as default
+};
+//# sourceMappingURL=sortable.mjs.map

package/dist/elements/sortable.mjs.map

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

package/dist/elements/svg.d.mts

@@ -0,0 +1,43 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-svg
+ * @summary A svg from a set of custom SVGs.
+ *
+ * @prop {string} set - Defines which set of svgs is referenced.
+ * @prop {string} svg - The name (id) of the svg to be displayed.
+ * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.
+ * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.
+ * @prop {string} viewBox - The value for the viewBox attribute of the svg.
+ *
+ * @csspart svg - The svg element.
+ *
+ */
+declare class KemetSVG extends LitElement {
+    static styles: lit.CSSResult[];
+    set: string;
+    svg: string;
+    size: number;
+    ratio: string;
+    viewBox: string;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    setSize(): void;
+    getIcon(): void;
+    fillSVG(element: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-svg': KemetSVG;
+    }
+    interface Document {
+        kemetSVGs: any;
+    }
+}
+
+export { KemetSVG as default };

package/dist/elements/svg.d.ts

@@ -0,0 +1,43 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-svg
+ * @summary A svg from a set of custom SVGs.
+ *
+ * @prop {string} set - Defines which set of svgs is referenced.
+ * @prop {string} svg - The name (id) of the svg to be displayed.
+ * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.
+ * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.
+ * @prop {string} viewBox - The value for the viewBox attribute of the svg.
+ *
+ * @csspart svg - The svg element.
+ *
+ */
+declare class KemetSVG extends LitElement {
+    static styles: lit.CSSResult[];
+    set: string;
+    svg: string;
+    size: number;
+    ratio: string;
+    viewBox: string;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    setSize(): void;
+    getIcon(): void;
+    fillSVG(element: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-svg': KemetSVG;
+    }
+    interface Document {
+        kemetSVGs: any;
+    }
+}
+
+export { KemetSVG as default };

package/dist/elements/svg.js

@@ -0,0 +1,108 @@
+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/svg.ts
+var svg_exports = {};
+__export(svg_exports, {
+  default: () => KemetSVG
+});
+module.exports = __toCommonJS(svg_exports);
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+var KemetSVG = class extends import_lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.svg = "svgs";
+    this.ratio = "none";
+    this.viewBox = "0 0 128 128";
+  }
+  updated() {
+    this.setSize();
+    this.getIcon();
+  }
+  render() {
+    return import_lit.html`
+      <svg part="svg" viewBox="${this.viewBox}" preserveAspectRatio="${this.ratio}" fill="currentColor"></svg>
+    `;
+  }
+  setSize() {
+    if (this.size) {
+      this.style.width = `${this.size}px`;
+      this.style.height = `${this.size}px`;
+    }
+  }
+  getIcon() {
+    let svgElement;
+    const svgs = document.kemetSVGs[this.set];
+    svgs.forEach((svg, index) => {
+      const id = svg.getAttribute("id");
+      if (id && id === this.svg) {
+        svgElement = svgs[index];
+      }
+    });
+    if (svgElement) {
+      this.fillSVG(svgElement);
+    } else {
+      console.error(`Could not find svg "${this.svg}" in set "${this.set}".`);
+    }
+  }
+  fillSVG(element) {
+    const content = element.cloneNode(true);
+    const svg = this.shadowRoot.querySelector("svg");
+    const g = svg.querySelector("g");
+    if (g) g.remove();
+    svg.appendChild(content);
+  }
+};
+KemetSVG.styles = [import_lit.css`
+    :host {
+      display: inline-block;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  `];
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetSVG.prototype, "set", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetSVG.prototype, "svg", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetSVG.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetSVG.prototype, "ratio", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetSVG.prototype, "viewBox", 2);
+KemetSVG = __decorateClass([
+  (0, import_decorators.customElement)("kemet-svg")
+], KemetSVG);
+//# sourceMappingURL=svg.js.map

package/dist/elements/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/svg.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svg\n * @summary A svg from a set of custom SVGs.\n *\n * @prop {string} set - Defines which set of svgs is referenced.\n * @prop {string} svg - The name (id) of the svg to be displayed.\n * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.\n * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.\n * @prop {string} viewBox - The value for the viewBox attribute of the svg.\n *\n * @csspart svg - The svg element.\n *\n */\n\n@customElement('kemet-svg')\nexport default class KemetSVG extends LitElement {\n  static styles = [css`\n    :host {\n      display: inline-block;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  `];\n\n  @property({ type: String })\n  set: string;\n\n  @property({ type: String })\n  svg: string = 'svgs';\n\n  @property({ type: Number })\n  size: number;\n\n  @property({ type: String })\n  ratio: string = 'none';\n\n  @property({ type: String })\n  viewBox: string = '0 0 128 128';\n\n  updated() {\n    this.setSize();\n    this.getIcon();\n  }\n\n  render() {\n    return html`\n      <svg part=\"svg\" viewBox=\"${this.viewBox}\" preserveAspectRatio=\"${this.ratio}\" fill=\"currentColor\"></svg>\n    `;\n  }\n\n  setSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  getIcon() {\n    let svgElement;\n    const svgs = document.kemetSVGs[this.set];\n\n    svgs.forEach((svg, index) => {\n      const id = svg.getAttribute('id');\n\n      if (id && id === this.svg) {\n        svgElement = svgs[index];\n      }\n    });\n\n    if (svgElement) {\n      this.fillSVG(svgElement);\n    } else {\n      console.error(`Could not find svg \"${this.svg}\" in set \"${this.set}\".`);\n    }\n  }\n\n  fillSVG(element) {\n    const content = element.cloneNode(true);\n    const svg = this.shadowRoot.querySelector('svg');\n    const g = svg.querySelector('g');\n\n    if (g) g.remove();\n    svg.appendChild(content);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-svg': KemetSVG\n  }\n\n  interface Document {\n    kemetSVGs: any;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAsC;AACtC,wBAAwC;AAoBxC,IAAqB,WAArB,cAAsC,sBAAW;AAAA,EAAjD;AAAA;AAgBE,eAAc;AAMd,iBAAgB;AAGhB,mBAAkB;AAAA;AAAA,EAElB,UAAU;AACR,SAAK,QAAQ;AACb,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,iCACsB,KAAK,OAAO,0BAA0B,KAAK,KAAK;AAAA;AAAA,EAE/E;AAAA,EAEA,UAAU;AACR,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,UAAU;AACR,QAAI;AACJ,UAAM,OAAO,SAAS,UAAU,KAAK,GAAG;AAExC,SAAK,QAAQ,CAAC,KAAK,UAAU;AAC3B,YAAM,KAAK,IAAI,aAAa,IAAI;AAEhC,UAAI,MAAM,OAAO,KAAK,KAAK;AACzB,qBAAa,KAAK,KAAK;AAAA,MACzB;AAAA,IACF,CAAC;AAED,QAAI,YAAY;AACd,WAAK,QAAQ,UAAU;AAAA,IACzB,OAAO;AACL,cAAQ,MAAM,uBAAuB,KAAK,GAAG,aAAa,KAAK,GAAG,IAAI;AAAA,IACxE;AAAA,EACF;AAAA,EAEA,QAAQ,SAAS;AACf,UAAM,UAAU,QAAQ,UAAU,IAAI;AACtC,UAAM,MAAM,KAAK,WAAW,cAAc,KAAK;AAC/C,UAAM,IAAI,IAAI,cAAc,GAAG;AAE/B,QAAI,EAAG,GAAE,OAAO;AAChB,QAAI,YAAY,OAAO;AAAA,EACzB;AACF;AAxEqB,SACZ,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShB;AAGD;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,SAanB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAfP,SAgBnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlBP,SAmBnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArBP,SAsBnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxBP,SAyBnB;AAzBmB,WAArB;AAAA,MADC,iCAAc,WAAW;AAAA,GACL;","names":[]}

package/dist/elements/svg.mjs

@@ -0,0 +1,8 @@
+import {
+  KemetSVG
+} from "../chunk-T7FJ76DU.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetSVG as default
+};
+//# sourceMappingURL=svg.mjs.map

package/dist/elements/svg.mjs.map

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

package/dist/elements/svgs.d.mts

@@ -0,0 +1,32 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-svgs
+ * @summary A set of SVG graphics that can be referenced anywhere in a page or app.
+ *
+ * @prop {string} set - Defines the name for the set of svgs.
+ *
+ */
+declare class KemetSVGs extends LitElement {
+    static styles: lit.CSSResult[];
+    set: string;
+    slotElement: HTMLSlotElement;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    populateIcons(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-svgs': KemetSVGs;
+    }
+    interface Document {
+        kemetSVGs: any;
+    }
+}
+
+export { KemetSVGs as default };

package/dist/elements/svgs.d.ts

@@ -0,0 +1,32 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-svgs
+ * @summary A set of SVG graphics that can be referenced anywhere in a page or app.
+ *
+ * @prop {string} set - Defines the name for the set of svgs.
+ *
+ */
+declare class KemetSVGs extends LitElement {
+    static styles: lit.CSSResult[];
+    set: string;
+    slotElement: HTMLSlotElement;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    populateIcons(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-svgs': KemetSVGs;
+    }
+    interface Document {
+        kemetSVGs: any;
+    }
+}
+
+export { KemetSVGs as default };