kemet-ui 3.1.0 → 4.0.1

package/dist/elements/flipcard.d.ts

@@ -0,0 +1,57 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-flipcard
+ * @summary A card that has a front and back side which can be flipped.
+ *
+ * @prop {string} axis
+ * @prop {boolean} flipped
+ * @prop {boolean} flipOnHover
+ * @prop {string} height
+ * @prop {boolean} measure
+ *
+ * @slot front - The front of the card.
+ * @slot back - The back of the card.
+ *
+ * @csspart front - The front of the card.
+ * @csspart back - The back of the card.
+ * @csspart wrapper - A container for both front and back of the card.
+ *
+ * @cssproperty --kemet-flipcard-front-color - The text color for the front of the card.
+ * @cssproperty --kemet-flipcard-back-color - The text color for the back of the card.
+ * @cssproperty --kemet-flipcard-front-background-color - The background color for the front of the card.
+ * @cssproperty --kemet-flipcard-back-background-color - The background color for the back of the card.
+ * @cssproperty --kemet-flipcard-border - The border on the front and back of the card.
+ * @cssproperty --kemet-flipcard-border-radius - The border radius on the front and back of the card.
+ * @cssproperty --kemet-flipcard-ratio - The aspect ratio of the card.
+ *
+ */
+declare class KemetFlipcard extends LitElement {
+    static styles: lit.CSSResult[];
+    axis: string;
+    flipped: boolean;
+    flipOnHover: boolean;
+    height: string;
+    measure: boolean;
+    frontChildren: HTMLSlotElement;
+    backChildren: HTMLSlotElement;
+    frontElement: HTMLElement;
+    backElement: HTMLElement;
+    constructor();
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    determineHeight(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-flipcard': KemetFlipcard;
+    }
+}
+
+export { KemetFlipcard as default };

package/dist/elements/flipcard.js

@@ -0,0 +1,225 @@
+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/flipcard.ts
+var flipcard_exports = {};
+__export(flipcard_exports, {
+  default: () => KemetFlipcard
+});
+module.exports = __toCommonJS(flipcard_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/flipcard.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-flipcard-width: 100%;
+    --kemet-flipcard-height: auto;
+    --kemet-flipcard-ratio: 16/9;
+    --kemet-flipcard-border-radius: 0;
+    --kemet-flipcard-border: 2px solid rgb(var(--kemet-color-primary));
+    --kemet-flipcard-front-color: rgb(var(--kemet-color-gray-950));
+    --kemet-flipcard-front-background-color: rgb(var(--kemet-color-gray-50));
+    --kemet-flipcard-back-color: rgb(var(--kemet-color-gray-950));
+    --kemet-flipcard-back-background-color: rgb(var(--kemet-color-gray-50));
+
+    display: inline-block;
+    width: var(--kemet-flipcard-width);
+    height: var(--kemet-flipcard-height);
+    aspect-ratio: var(--kemet-flipcard-ratio);
+    perspective: 1000px;
+  }
+
+  section {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+  }
+
+  .front,
+  .back {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    /* overflow: hidden; */
+    border-radius: var(--kemet-flipcard-border-radius);
+    border: var(--kemet-flipcard-border);
+  }
+
+  :host([rounded]) .front,
+  :host([rounded]) .back {
+    border-radius: var(--kemet-border-radius-xl);
+  }
+
+  .front {
+    color: var(--kemet-flipcard-front-color);
+    background-color: var(--kemet-flipcard-front-background-color);
+  }
+
+  :host([flipped]) .front {
+    z-index: -1;
+  }
+
+  .back {
+    color: var(--kemet-flipcard-back-color);
+    background-color: var(--kemet-flipcard-back-background-color)
+  }
+
+  :host([axis="horizontal"]) .back {
+    transform: rotateY(180deg);
+  }
+
+  :host([flipped][axis="horizontal"]) section {
+    transform: rotateY(180deg);
+  }
+
+  :host([axis="vertical"]) .back {
+    transform: rotateX(180deg);
+  }
+
+  :host([flipped][axis="vertical"]) section {
+    transform: rotateX(180deg);
+  }
+
+  :host([flip-on-hover]) section {
+    cursor: pointer;
+  }
+
+  ::slotted([slot="front"]),
+  ::slotted([slot="back"]) {
+    display: inline-block;
+    margin: auto;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+// src/elements/flipcard.ts
+var KemetFlipcard = class extends import_lit2.LitElement {
+  constructor() {
+    super();
+    this.axis = "horizontal";
+    this.flipped = false;
+    this.flipOnHover = false;
+    this.height = "auto";
+    this.measure = false;
+    this.addEventListener("kemet-flipped", () => {
+      this.flipped = !this.flipped;
+    });
+  }
+  firstUpdated() {
+    this.frontElement = this.querySelector("[slot=front]");
+    this.backElement = this.querySelector("[slot=back]");
+    window.addEventListener("resize", this.determineHeight.bind(this));
+  }
+  updated() {
+    this.determineHeight();
+  }
+  render() {
+    return import_lit2.html`
+      <section
+        tabindex="0"
+        part="wrapper"
+        @blur=${() => {
+      if (this.flipOnHover) this.flipped = false;
+    }}
+        @focus=${() => {
+      if (this.flipOnHover) this.flipped = true;
+    }}
+        @mouseover=${() => {
+      if (this.flipOnHover) this.flipped = true;
+    }}
+        @mouseout=${() => {
+      if (this.flipOnHover) this.flipped = false;
+    }}>
+        <div id="front" class="front" part="front">
+          <slot name="front" @slotchange="${() => this.determineHeight()}"></slot>
+        </div>
+        <div id="back" class="back" part="back">
+          <slot name="back" @slotchange="${() => this.determineHeight()}"></slot>
+        </div>
+      </section>
+    `;
+  }
+  determineHeight() {
+    setTimeout(() => {
+      if (this.measure) {
+        if (this.frontElement?.offsetHeight > this.backElement?.offsetHeight) {
+          this.height = `${this.frontElement?.offsetHeight}px`;
+        } else {
+          this.height = `${this.backElement?.offsetHeight}px`;
+        }
+        this.style.height = this.height;
+      } else {
+        this.style.removeProperty("height");
+      }
+    }, 0);
+  }
+};
+KemetFlipcard.styles = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetFlipcard.prototype, "axis", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetFlipcard.prototype, "flipped", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "flip-on-hover" })
+], KemetFlipcard.prototype, "flipOnHover", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetFlipcard.prototype, "height", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetFlipcard.prototype, "measure", 2);
+__decorateClass([
+  (0, import_decorators.query)('[name="front"]')
+], KemetFlipcard.prototype, "frontChildren", 2);
+__decorateClass([
+  (0, import_decorators.query)('[name="back"]')
+], KemetFlipcard.prototype, "backChildren", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetFlipcard.prototype, "frontElement", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetFlipcard.prototype, "backElement", 2);
+KemetFlipcard = __decorateClass([
+  (0, import_decorators.customElement)("kemet-flipcard")
+], KemetFlipcard);
+//# sourceMappingURL=flipcard.js.map

package/dist/elements/flipcard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/flipcard.ts","../../src/styles/elements/flipcard.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, state, query,\n} from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/flipcard';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard\n * @summary A card that has a front and back side which can be flipped.\n *\n * @prop {string} axis\n * @prop {boolean} flipped\n * @prop {boolean} flipOnHover\n * @prop {string} height\n * @prop {boolean} measure\n *\n * @slot front - The front of the card.\n * @slot back - The back of the card.\n *\n * @csspart front - The front of the card.\n * @csspart back - The back of the card.\n * @csspart wrapper - A container for both front and back of the card.\n *\n * @cssproperty --kemet-flipcard-front-color - The text color for the front of the card.\n * @cssproperty --kemet-flipcard-back-color - The text color for the back of the card.\n * @cssproperty --kemet-flipcard-front-background-color - The background color for the front of the card.\n * @cssproperty --kemet-flipcard-back-background-color - The background color for the back of the card.\n * @cssproperty --kemet-flipcard-border - The border on the front and back of the card.\n * @cssproperty --kemet-flipcard-border-radius - The border radius on the front and back of the card.\n * @cssproperty --kemet-flipcard-ratio - The aspect ratio of the card.\n *\n */\n\n@customElement('kemet-flipcard')\nexport default class KemetFlipcard extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String, reflect: true })\n  axis: string = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  flipped: boolean = false;\n\n  @property({ type: Boolean, attribute: 'flip-on-hover' })\n  flipOnHover: boolean = false;\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Boolean })\n  measure: boolean = false;\n\n  @query('[name=\"front\"]')\n  frontChildren: HTMLSlotElement;\n\n  @query('[name=\"back\"]')\n  backChildren: HTMLSlotElement;\n\n  @state()\n  frontElement: HTMLElement;\n\n  @state()\n  backElement: HTMLElement;\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-flipped', () => {\n      this.flipped = !this.flipped;\n    });\n  }\n\n  firstUpdated() {\n    this.frontElement = this.querySelector('[slot=front]');\n    this.backElement = this.querySelector('[slot=back]');\n    window.addEventListener('resize', this.determineHeight.bind(this));\n  }\n\n  updated() {\n    this.determineHeight();\n  }\n\n  render() {\n    return html`\n      <section\n        tabindex=\"0\"\n        part=\"wrapper\"\n        @blur=${() => { if (this.flipOnHover) this.flipped = false; }}\n        @focus=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseover=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseout=${() => { if (this.flipOnHover) this.flipped = false; }}>\n        <div id=\"front\" class=\"front\" part=\"front\">\n          <slot name=\"front\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n        <div id=\"back\" class=\"back\" part=\"back\">\n          <slot name=\"back\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n      </section>\n    `;\n  }\n\n  determineHeight() {\n    // setTimeout is need to simulate a DOM repaint\n    // without the repaint, offsetHeight on Custom Elements = 0\n    // so this is needed for 'measure' to work correctly\n\n    setTimeout(() => {\n      if (this.measure) {\n        if (this.frontElement?.offsetHeight > this.backElement?.offsetHeight) {\n          this.height = `${this.frontElement?.offsetHeight}px`;\n        } else {\n          this.height = `${this.backElement?.offsetHeight}px`;\n        }\n\n        this.style.height = this.height;\n      } else {\n        this.style.removeProperty('height');\n      }\n    }, 0);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard': KemetFlipcard\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  ::after,\n  ::before {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-flipcard-width: 100%;\n    --kemet-flipcard-height: auto;\n    --kemet-flipcard-ratio: 16/9;\n    --kemet-flipcard-border-radius: 0;\n    --kemet-flipcard-border: 2px solid rgb(var(--kemet-color-primary));\n    --kemet-flipcard-front-color: rgb(var(--kemet-color-gray-950));\n    --kemet-flipcard-front-background-color: rgb(var(--kemet-color-gray-50));\n    --kemet-flipcard-back-color: rgb(var(--kemet-color-gray-950));\n    --kemet-flipcard-back-background-color: rgb(var(--kemet-color-gray-50));\n\n    display: inline-block;\n    width: var(--kemet-flipcard-width);\n    height: var(--kemet-flipcard-height);\n    aspect-ratio: var(--kemet-flipcard-ratio);\n    perspective: 1000px;\n  }\n\n  section {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    transition: transform 0.8s;\n    transform-style: preserve-3d;\n  }\n\n  .front,\n  .back {\n    position: absolute;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    backface-visibility: hidden;\n    /* overflow: hidden; */\n    border-radius: var(--kemet-flipcard-border-radius);\n    border: var(--kemet-flipcard-border);\n  }\n\n  :host([rounded]) .front,\n  :host([rounded]) .back {\n    border-radius: var(--kemet-border-radius-xl);\n  }\n\n  .front {\n    color: var(--kemet-flipcard-front-color);\n    background-color: var(--kemet-flipcard-front-background-color);\n  }\n\n  :host([flipped]) .front {\n    z-index: -1;\n  }\n\n  .back {\n    color: var(--kemet-flipcard-back-color);\n    background-color: var(--kemet-flipcard-back-background-color)\n  }\n\n  :host([axis=\"horizontal\"]) .back {\n    transform: rotateY(180deg);\n  }\n\n  :host([flipped][axis=\"horizontal\"]) section {\n    transform: rotateY(180deg);\n  }\n\n  :host([axis=\"vertical\"]) .back {\n    transform: rotateX(180deg);\n  }\n\n  :host([flipped][axis=\"vertical\"]) section {\n    transform: rotateX(180deg);\n  }\n\n  :host([flip-on-hover]) section {\n    cursor: pointer;\n  }\n\n  ::slotted([slot=\"front\"]),\n  ::slotted([slot=\"back\"]) {\n    display: inline-block;\n    margin: auto;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n`;\n"],"mappings":"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","names":["import_lit"]}

package/dist/elements/flipcard.mjs

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

package/dist/elements/flipcard.mjs.map

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

package/dist/elements/icon-bootstrap.d.mts

@@ -0,0 +1,21 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class KemetIconBootstrap extends LitElement {
+    icon: string;
+    version: string;
+    size: number;
+    private static fontFaceLoaded;
+    private static iconStylesCache;
+    private static resolvedVersions;
+    private stylesLoaded;
+    connectedCallback(): Promise<void>;
+    private _resolveVersion;
+    private _loadBootstrapStyles;
+    private _loadFontFaceInDocument;
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { KemetIconBootstrap as default };

package/dist/elements/icon-bootstrap.d.ts

@@ -0,0 +1,21 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class KemetIconBootstrap extends LitElement {
+    icon: string;
+    version: string;
+    size: number;
+    private static fontFaceLoaded;
+    private static iconStylesCache;
+    private static resolvedVersions;
+    private stylesLoaded;
+    connectedCallback(): Promise<void>;
+    private _resolveVersion;
+    private _loadBootstrapStyles;
+    private _loadFontFaceInDocument;
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { KemetIconBootstrap as default };

package/dist/elements/icon-bootstrap.js

@@ -0,0 +1,155 @@
+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/icon-bootstrap.ts
+var icon_bootstrap_exports = {};
+__export(icon_bootstrap_exports, {
+  default: () => KemetIconBootstrap
+});
+module.exports = __toCommonJS(icon_bootstrap_exports);
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+var KemetIconBootstrap = class extends import_lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "code";
+    this.version = "1.11.3";
+    this.size = 24;
+    this.stylesLoaded = false;
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this._loadBootstrapStyles();
+  }
+  async _resolveVersion(version) {
+    if (version !== "latest" && /^\d+\.\d+\.\d+/.test(version)) {
+      return version;
+    }
+    if (KemetIconBootstrap.resolvedVersions.has(version)) {
+      return KemetIconBootstrap.resolvedVersions.get(version);
+    }
+    try {
+      const response = await fetch("https://unpkg.com/bootstrap-icons/package.json");
+      if (!response.ok) throw new Error("Failed to resolve version");
+      const pkg = await response.json();
+      const resolvedVersion = pkg.version;
+      KemetIconBootstrap.resolvedVersions.set(version, resolvedVersion);
+      return resolvedVersion;
+    } catch (error) {
+      console.warn("Failed to resolve Bootstrap Icons version, using 1.11.3:", error);
+      return "1.11.3";
+    }
+  }
+  async _loadBootstrapStyles() {
+    if (this.stylesLoaded) return;
+    try {
+      const resolvedVersion = await this._resolveVersion(this.version);
+      const cacheKey = resolvedVersion;
+      if (!KemetIconBootstrap.fontFaceLoaded.get(cacheKey)) {
+        await this._loadFontFaceInDocument(resolvedVersion);
+        KemetIconBootstrap.fontFaceLoaded.set(cacheKey, true);
+      }
+      let iconSheet = KemetIconBootstrap.iconStylesCache.get(cacheKey);
+      if (!iconSheet) {
+        const response = await fetch(
+          `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        let cssText = await response.text();
+        cssText = cssText.replace(/@font-face\s*{[^}]*}/g, "");
+        iconSheet = new CSSStyleSheet();
+        await iconSheet.replace(cssText);
+        KemetIconBootstrap.iconStylesCache.set(cacheKey, iconSheet);
+      }
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        iconSheet
+      ];
+      this.stylesLoaded = true;
+      this.requestUpdate();
+    } catch (error) {
+      console.error("Failed to load Bootstrap Icons:", error);
+      this.requestUpdate();
+    }
+  }
+  async _loadFontFaceInDocument(resolvedVersion) {
+    try {
+      const response = await fetch(
+        `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const cssText = await response.text();
+      const fontFaceMatches = cssText.match(/@font-face\s*{[^}]*}/g);
+      if (!fontFaceMatches) return;
+      const baseUrl = `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/`;
+      let fontFaceCss = fontFaceMatches.join("\n");
+      fontFaceCss = fontFaceCss.replace(/url\(["']?\.\/fonts\//g, `url("${baseUrl}fonts/`);
+      fontFaceCss = fontFaceCss.replace(/url\(["']?fonts\//g, `url("${baseUrl}fonts/`);
+      const styleId = `bootstrap-icons-fonts-${resolvedVersion}`;
+      if (!document.getElementById(styleId)) {
+        const style = document.createElement("style");
+        style.id = styleId;
+        style.textContent = fontFaceCss;
+        document.head.appendChild(style);
+      }
+    } catch (error) {
+      console.error("Failed to load Bootstrap Icons fonts:", error);
+      throw error;
+    }
+  }
+  render() {
+    return import_lit.html`
+      <i class="bi bi-${this.icon}" style="font-size: ${this.size}px;"></i>
+    `;
+  }
+};
+KemetIconBootstrap.fontFaceLoaded = /* @__PURE__ */ new Map();
+KemetIconBootstrap.iconStylesCache = /* @__PURE__ */ new Map();
+KemetIconBootstrap.resolvedVersions = /* @__PURE__ */ new Map();
+KemetIconBootstrap.styles = import_lit.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "icon", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "version", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "size", 2);
+KemetIconBootstrap = __decorateClass([
+  (0, import_decorators.customElement)("kemet-icon-bootstrap")
+], KemetIconBootstrap);
+//# sourceMappingURL=icon-bootstrap.js.map

package/dist/elements/icon-bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/icon-bootstrap.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('kemet-icon-bootstrap')\nexport default class KemetIconBootstrap extends LitElement {\n  @property() icon: string = 'code';\n  @property() version: string = '1.11.3'; // Default to stable version\n  @property() size: number = 24;\n\n  private static fontFaceLoaded = new Map<string, boolean>();\n  private static iconStylesCache = new Map<string, CSSStyleSheet>();\n  private static resolvedVersions = new Map<string, string>();\n  private stylesLoaded = false;\n\n  async connectedCallback() {\n    super.connectedCallback();\n    await this._loadBootstrapStyles();\n  }\n\n  private async _resolveVersion(version: string): Promise<string> {\n    // If it's already a specific version, return it\n    if (version !== 'latest' && /^\\d+\\.\\d+\\.\\d+/.test(version)) {\n      return version;\n    }\n\n    // Check cache\n    if (KemetIconBootstrap.resolvedVersions.has(version)) {\n      return KemetIconBootstrap.resolvedVersions.get(version)!;\n    }\n\n    try {\n      // Fetch without version to get redirected to latest\n      const response = await fetch('https://unpkg.com/bootstrap-icons/package.json');\n      if (!response.ok) throw new Error('Failed to resolve version');\n\n      const pkg = await response.json();\n      const resolvedVersion = pkg.version;\n\n      KemetIconBootstrap.resolvedVersions.set(version, resolvedVersion);\n      return resolvedVersion;\n    } catch (error) {\n      console.warn('Failed to resolve Bootstrap Icons version, using 1.11.3:', error);\n      return '1.11.3'; // Fallback to known stable version\n    }\n  }\n\n  private async _loadBootstrapStyles() {\n    if (this.stylesLoaded) return;\n\n    try {\n      // Resolve version if needed\n      const resolvedVersion = await this._resolveVersion(this.version);\n      const cacheKey = resolvedVersion;\n\n      // Load font-face in light DOM (only once per version)\n      if (!KemetIconBootstrap.fontFaceLoaded.get(cacheKey)) {\n        await this._loadFontFaceInDocument(resolvedVersion);\n        KemetIconBootstrap.fontFaceLoaded.set(cacheKey, true);\n      }\n\n      // Load icon classes in shadow DOM\n      let iconSheet = KemetIconBootstrap.iconStylesCache.get(cacheKey);\n\n      if (!iconSheet) {\n        const response = await fetch(\n          `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`\n        );\n\n        if (!response.ok) {\n          throw new Error(`HTTP error! status: ${response.status}`);\n        }\n\n        let cssText = await response.text();\n\n        // Remove @font-face rules (already in light DOM)\n        cssText = cssText.replace(/@font-face\\s*{[^}]*}/g, '');\n\n        iconSheet = new CSSStyleSheet();\n        await iconSheet.replace(cssText);\n        KemetIconBootstrap.iconStylesCache.set(cacheKey, iconSheet);\n      }\n\n      this.shadowRoot!.adoptedStyleSheets = [\n        ...this.shadowRoot!.adoptedStyleSheets,\n        iconSheet\n      ];\n\n      this.stylesLoaded = true;\n      this.requestUpdate();\n    } catch (error) {\n      console.error('Failed to load Bootstrap Icons:', error);\n      this.requestUpdate();\n    }\n  }\n\n  private async _loadFontFaceInDocument(resolvedVersion: string) {\n    try {\n      const response = await fetch(\n        `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`\n      );\n\n      if (!response.ok) {\n        throw new Error(`HTTP error! status: ${response.status}`);\n      }\n\n      const cssText = await response.text();\n\n      // Extract ONLY @font-face rules\n      const fontFaceMatches = cssText.match(/@font-face\\s*{[^}]*}/g);\n      if (!fontFaceMatches) return;\n\n      // Fix relative URLs to absolute\n      const baseUrl = `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/`;\n      let fontFaceCss = fontFaceMatches.join('\\n');\n      fontFaceCss = fontFaceCss.replace(/url\\([\"']?\\.\\/fonts\\//g, `url(\"${baseUrl}fonts/`);\n      fontFaceCss = fontFaceCss.replace(/url\\([\"']?fonts\\//g, `url(\"${baseUrl}fonts/`);\n\n      // Add to document head\n      const styleId = `bootstrap-icons-fonts-${resolvedVersion}`;\n      if (!document.getElementById(styleId)) {\n        const style = document.createElement('style');\n        style.id = styleId;\n        style.textContent = fontFaceCss;\n        document.head.appendChild(style);\n      }\n    } catch (error) {\n      console.error('Failed to load Bootstrap Icons fonts:', error);\n      throw error;\n    }\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n  `;\n\n  render() {\n    return html`\n      <i class=\"bi bi-${this.icon}\" style=\"font-size: ${this.size}px;\"></i>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/elements/icon-bootstrap.mjs

@@ -0,0 +1,8 @@
+import {
+  KemetIconBootstrap
+} from "../chunk-7DJKARFX.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetIconBootstrap as default
+};
+//# sourceMappingURL=icon-bootstrap.mjs.map

package/dist/elements/icon-bootstrap.mjs.map

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

package/dist/elements/icon-lucide.d.mts

@@ -0,0 +1,29 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 4.0.0
+ * @status stable
+ *
+ * @tagname kemet-icon-lucide
+ * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.
+ *
+ * @prop {string} icon - The name of the icon to display
+ * @prop {string} version - The version of Lucide to use
+ * @prop {number} size - The size of the icon
+ *
+ */
+declare class KemetIconLucide extends LitElement {
+    static styles: lit.CSSResult[];
+    icon: string;
+    version: string;
+    size: number;
+    svg: SVGElement | null;
+    render(): unknown;
+    firstUpdated(): Promise<void>;
+    willUpdate(changed: Map<string, unknown>): void;
+    updated(changed: Map<string, unknown>): void;
+    private _initLucide;
+}
+
+export { KemetIconLucide as default };

package/dist/elements/icon-lucide.d.ts

@@ -0,0 +1,29 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 4.0.0
+ * @status stable
+ *
+ * @tagname kemet-icon-lucide
+ * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.
+ *
+ * @prop {string} icon - The name of the icon to display
+ * @prop {string} version - The version of Lucide to use
+ * @prop {number} size - The size of the icon
+ *
+ */
+declare class KemetIconLucide extends LitElement {
+    static styles: lit.CSSResult[];
+    icon: string;
+    version: string;
+    size: number;
+    svg: SVGElement | null;
+    render(): unknown;
+    firstUpdated(): Promise<void>;
+    willUpdate(changed: Map<string, unknown>): void;
+    updated(changed: Map<string, unknown>): void;
+    private _initLucide;
+}
+
+export { KemetIconLucide as default };