kemet-ui 4.0.2 → 5.0.0

package/dist/elements/tab.js

@@ -1,500 +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/tab.ts
-var tab_exports = {};
-__export(tab_exports, {
-  default: () => KemetTab
-});
-module.exports = __toCommonJS(tab_exports);
-var import_lit3 = require("lit");
-var import_decorators2 = require("lit/decorators.js");
-
-// src/utilities/events.ts
-var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
-  element.dispatchEvent(
-    new CustomEvent(name, { bubbles, composed, detail })
-  );
-};
-
-// src/styles/elements/tabs.ts
-var import_lit = require("lit");
-var stylesKemetTabs = import_lit.css`
-  :host {
-    --kemet-tabs-ink-size: 6px;
-    --kemet-tabs-ink-radius: 6px;
-    --kemet-tabs-divider-size: 1px;
-    --kemet-tabs-spacer: 1rem;
-    --kemet-tabs-transition-speed: 0.5s;
-    --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));
-    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));
-
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    position: relative;
-  }
-
-  :host([placement='bottom']) {
-    flex-direction: column-reverse;
-  }
-
-  :host([placement='left']) {
-    flex-direction: row;
-  }
-
-  :host([placement='right']) {
-    flex-direction: row-reverse;
-  }
-
-  :host([placement='left']),
-  :host([placement='right']) {
-    overflow: unset;
-  }
-
-  /* panels */
-
-  [part='panels'] > div {
-    display: flex;
-  }
-
-  :host([panel-effect='slide']) [part='panels'] {
-    transition: transform var(--kemet-tabs-transition-speed) linear;
-  }
-
-  :host([panel-effect='fade']) [part='panels'] {
-    transform: none !important;
-  }
-
-  :host([panel-effect='fade']) [part='panels'] > div {
-    flex-flow: row nowrap;
-  }
-
-  :host([placement='left']) [part='panels'],
-  :host([placement='right']) [part='panels'] {
-    transform: none !important;
-    position: relative;
-    width: 100%;
-  }
-
-  :host([placement='top']) [part='panels'] > div {
-    margin-top: var(--kemet-tabs-spacer);
-  }
-
-  :host([placement='right']) [part='panels'] > div {
-    margin-right: var(--kemet-tabs-spacer);
-  }
-
-  :host([placement='bottom']) [part='panels'] > div {
-    margin-bottom: var(--kemet-tabs-spacer);
-  }
-
-  :host([placement='left']) [part='panels'] > div {
-    margin-left: var(--kemet-tabs-spacer);
-  }
-
-  /* tablist */
-
-  [part='tablist'] {
-    display: flex;
-  }
-
-  :host([placement='left']) [part='tablist'],
-  :host([placement='right']) [part='tablist'] {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-  }
-
-  :host([tabs-align='center']) [part='tablist'] {
-    justify-content: center;
-  }
-
-  :host([tabs-align='between']) [part='tablist'] {
-    justify-content: space-between;
-  }
-
-  :host([tabs-align='evenly']) [part='tablist'] {
-    justify-content: space-evenly;
-  }
-
-  :host([tabs-align='around']) [part='tablist'] {
-    justify-content: space-around
-  }
-
-  :host([tabs-align='start']) [part='tablist'] {
-    justify-content: flex-start;
-  }
-
-  :host([tabs-align='end']) [part='tablist'] {
-    justify-content: flex-end;
-  }
-
-  :host([overflow]) [part='tablist'] {
-    justify-content: start;
-  }
-
-  /* divider */
-
-  [part='divider'] {
-    height: var(--kemet-tabs-divider-size);
-    background-color: var(--kemet-tabs-divider-color);
-  }
-
-  :host([placement='left']) [part='divider'],
-  :host([placement='right']) [part='divider'] {
-    width: var(--kemet-tabs-divider-size);
-    height: auto;
-  }
-
-  /* ink */
-
-  [part='ink'] {
-    height: var(--kemet-tabs-ink-size);
-    border-top-left-radius: var(--kemet-tabs-ink-radius);
-    border-top-right-radius: var(--kemet-tabs-ink-radius);
-    transition: all 300ms ease;
-    background-color: var(--kemet-tabs-ink-color);
-  }
-
-  :host([placement='right']) [part='ink'] {
-    width: var(--kemet-tabs-ink-size);
-    border-top-right-radius: var(--kemet-tabs-ink-radius);
-    border-bottom-right-radius: var(--kemet-tabs-ink-radius);
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-  }
-
-  :host([placement='left']) [part='ink'] {
-    width: var(--kemet-tabs-ink-size);
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    border-top-left-radius: var(--kemet-tabs-ink-radius);
-    border-bottom-left-radius: var(--kemet-tabs-ink-radius);
-  }
-
-  :host([placement='bottom']) [part='ink'] {
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: var(--kemet-tabs-ink-radius);
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: var(--kemet-tabs-ink-radius);
-  }
-
-  /* links */
-
-  :host([overflow]) [part='links'] {
-    overflow-x: auto;
-    margin: 0 2rem;
-    scroll-behavior: smooth;
-  }
-
-  :host([overflow]) [part='links']::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    background: transparent;
-  }
-
-  :host([placement='bottom']) [part='links'] {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-  /* icon */
-
-  [icon*='chevron'] {
-    cursor: pointer;
-    position: absolute;
-    top: 1rem;
-  }
-
-  [icon='chevron-left'] {
-    left: 0;
-  }
-
-  [icon='chevron-right'] {
-    right: 0;
-  }
-
-  :host([placement='bottom']) [icon*='chevron'] {
-    top: auto;
-    bottom: 1rem;
-  }
-`;
-var stylesKemetTab = import_lit.css`
-  :host {
-    --kemet-tab-color: rgb(var(--kemet-color-foreground));
-
-    cursor: pointer;
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    padding: var(--kemet-tab-padding, 1rem);
-  }
-
-  :host([selected]) {
-    cursor: auto;
-    color: var(--kemet-tab-color);
-  }
-
-  kemet-icon-bootstrap {
-    cursor: pointer;
-    margin-left: 0.5rem;
-  }
-`;
-var stylesKemetTabPanel = import_lit.css`
-  :host {
-    --kemet-tab-panel-fade-speed: 0.5s;
-
-    width: 100%;
-    flex: 0 0 auto;
-  }
-
-  ::slotted(img) {
-    max-width: 100%;
-  }
-
-  :host(.fade) {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--kemet-tab-panel-fade-speed) ease;
-  }
-
-  :host(.fade[selected]) {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  :host(.fade.push) {
-    margin-left: -100%;
-  }
-
-  :host(.vertical) {
-    display: none;
-  }
-
-  :host(.vertical[selected]) {
-    display: block;
-  }
-
-  :host(.stacked) {
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  :host(.stacked[selected]) {
-    position: relative;
-    z-index: 1;
-    opacity: 1;
-    visibility: visible;
-  }
-`;
-
-// src/elements/icon-bootstrap.ts
-var import_lit2 = require("lit");
-var import_decorators = require("lit/decorators.js");
-var KemetIconBootstrap = class extends import_lit2.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_lit2.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_lit2.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);
-
-// src/elements/tab.ts
-var KemetTab = class extends import_lit3.LitElement {
-  constructor() {
-    super(...arguments);
-    this.selected = false;
-  }
-  firstUpdated() {
-    this.addEventListener("click", this.select.bind(this));
-  }
-  updated() {
-    this.a11y();
-  }
-  render() {
-    return import_lit3.html`
-      <slot></slot>
-      ${this.makeCloseable()}
-    `;
-  }
-  select() {
-    emitEvent(this, "kemet-selected", this);
-  }
-  a11y() {
-    this.setAttribute("role", "tab");
-    if (this.selected) {
-      this.setAttribute("aria-selected", "true");
-      this.setAttribute("tabindex", "0");
-    } else {
-      this.setAttribute("aria-selected", "false");
-      this.setAttribute("tabindex", "-1");
-    }
-  }
-  makeCloseable() {
-    if (this.closable) {
-      return import_lit3.html`&nbsp;<kemet-icon-bootstrap icon="x-lg" size="16" @click=${() => this.handleClosable()}></kemet-icon-bootstrap>`;
-    }
-    return null;
-  }
-  handleClosable() {
-    emitEvent(this, "kemet-closed", this);
-  }
-};
-KemetTab.styles = [stylesKemetTab];
-__decorateClass([
-  (0, import_decorators2.property)({ type: Number })
-], KemetTab.prototype, "index", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Boolean, reflect: true })
-], KemetTab.prototype, "selected", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: String })
-], KemetTab.prototype, "link", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Boolean })
-], KemetTab.prototype, "closable", 2);
-KemetTab = __decorateClass([
-  (0, import_decorators2.customElement)("kemet-tab")
-], KemetTab);
-//# sourceMappingURL=tab.js.map

package/dist/elements/tab.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/elements/tab.ts","../../src/utilities/events.ts","../../src/styles/elements/tabs.ts","../../src/elements/icon-bootstrap.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesKemetTab } from '../styles/elements/tabs';\nimport './icon-bootstrap';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab\n * @summary A tab in a set of tabs.\n *\n * @prop {boolean} selected - Is true when the tab is selected\n * @prop {string} link - Links to a panel name\n * @prop {boolean} closable - Determines if the tab can be closed\n *\n * @cssproperty --kemet-tab-padding - The padding of the tab.\n * @cssproperty --kemet-tab-color - The color of the selected tab.\n *\n * @event kemet-selected - Fires when a tab is selected\n * @event kemet-closed - Fires when the tab should close\n *\n */\n\n@customElement('kemet-tab')\nexport default class KemetTab extends LitElement {\n  static styles = [stylesKemetTab];\n\n  @property({ type: Number })\n  index: number;\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  @property({ type: String })\n  link: string;\n\n  @property({ type: Boolean })\n  closable: boolean;\n\n  firstUpdated() {\n    this.addEventListener('click', this.select.bind(this));\n  }\n\n  updated() {\n    this.a11y();\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n      ${this.makeCloseable()}\n    `;\n  }\n\n  select() {\n    emitEvent(this, 'kemet-selected', this);\n  }\n\n  a11y() {\n    this.setAttribute('role', 'tab');\n\n    if (this.selected) {\n      this.setAttribute('aria-selected', 'true');\n      this.setAttribute('tabindex', '0');\n    } else {\n      this.setAttribute('aria-selected', 'false');\n      this.setAttribute('tabindex', '-1');\n    }\n  }\n\n  makeCloseable() {\n    if (this.closable) {\n      return html`&nbsp;<kemet-icon-bootstrap icon=\"x-lg\" size=\"16\" @click=${() => this.handleClosable()}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  handleClosable() {\n    emitEvent(this, 'kemet-closed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tab': KemetTab\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 stylesKemetTabs = css`\n  :host {\n    --kemet-tabs-ink-size: 6px;\n    --kemet-tabs-ink-radius: 6px;\n    --kemet-tabs-divider-size: 1px;\n    --kemet-tabs-spacer: 1rem;\n    --kemet-tabs-transition-speed: 0.5s;\n    --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));\n    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));\n\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    position: relative;\n  }\n\n  :host([placement='bottom']) {\n    flex-direction: column-reverse;\n  }\n\n  :host([placement='left']) {\n    flex-direction: row;\n  }\n\n  :host([placement='right']) {\n    flex-direction: row-reverse;\n  }\n\n  :host([placement='left']),\n  :host([placement='right']) {\n    overflow: unset;\n  }\n\n  /* panels */\n\n  [part='panels'] > div {\n    display: flex;\n  }\n\n  :host([panel-effect='slide']) [part='panels'] {\n    transition: transform var(--kemet-tabs-transition-speed) linear;\n  }\n\n  :host([panel-effect='fade']) [part='panels'] {\n    transform: none !important;\n  }\n\n  :host([panel-effect='fade']) [part='panels'] > div {\n    flex-flow: row nowrap;\n  }\n\n  :host([placement='left']) [part='panels'],\n  :host([placement='right']) [part='panels'] {\n    transform: none !important;\n    position: relative;\n    width: 100%;\n  }\n\n  :host([placement='top']) [part='panels'] > div {\n    margin-top: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='right']) [part='panels'] > div {\n    margin-right: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='bottom']) [part='panels'] > div {\n    margin-bottom: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='left']) [part='panels'] > div {\n    margin-left: var(--kemet-tabs-spacer);\n  }\n\n  /* tablist */\n\n  [part='tablist'] {\n    display: flex;\n  }\n\n  :host([placement='left']) [part='tablist'],\n  :host([placement='right']) [part='tablist'] {\n    display: flex;\n    flex-direction: column;\n    align-items: start;\n  }\n\n  :host([tabs-align='center']) [part='tablist'] {\n    justify-content: center;\n  }\n\n  :host([tabs-align='between']) [part='tablist'] {\n    justify-content: space-between;\n  }\n\n  :host([tabs-align='evenly']) [part='tablist'] {\n    justify-content: space-evenly;\n  }\n\n  :host([tabs-align='around']) [part='tablist'] {\n    justify-content: space-around\n  }\n\n  :host([tabs-align='start']) [part='tablist'] {\n    justify-content: flex-start;\n  }\n\n  :host([tabs-align='end']) [part='tablist'] {\n    justify-content: flex-end;\n  }\n\n  :host([overflow]) [part='tablist'] {\n    justify-content: start;\n  }\n\n  /* divider */\n\n  [part='divider'] {\n    height: var(--kemet-tabs-divider-size);\n    background-color: var(--kemet-tabs-divider-color);\n  }\n\n  :host([placement='left']) [part='divider'],\n  :host([placement='right']) [part='divider'] {\n    width: var(--kemet-tabs-divider-size);\n    height: auto;\n  }\n\n  /* ink */\n\n  [part='ink'] {\n    height: var(--kemet-tabs-ink-size);\n    border-top-left-radius: var(--kemet-tabs-ink-radius);\n    border-top-right-radius: var(--kemet-tabs-ink-radius);\n    transition: all 300ms ease;\n    background-color: var(--kemet-tabs-ink-color);\n  }\n\n  :host([placement='right']) [part='ink'] {\n    width: var(--kemet-tabs-ink-size);\n    border-top-right-radius: var(--kemet-tabs-ink-radius);\n    border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n  }\n\n  :host([placement='left']) [part='ink'] {\n    width: var(--kemet-tabs-ink-size);\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: 0px;\n    border-top-left-radius: var(--kemet-tabs-ink-radius);\n    border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n  }\n\n  :host([placement='bottom']) [part='ink'] {\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n  }\n\n  /* links */\n\n  :host([overflow]) [part='links'] {\n    overflow-x: auto;\n    margin: 0 2rem;\n    scroll-behavior: smooth;\n  }\n\n  :host([overflow]) [part='links']::-webkit-scrollbar {\n    display: none;\n    width: 0;\n    background: transparent;\n  }\n\n  :host([placement='bottom']) [part='links'] {\n    display: flex;\n    flex-direction: column-reverse;\n  }\n\n  /* icon */\n\n  [icon*='chevron'] {\n    cursor: pointer;\n    position: absolute;\n    top: 1rem;\n  }\n\n  [icon='chevron-left'] {\n    left: 0;\n  }\n\n  [icon='chevron-right'] {\n    right: 0;\n  }\n\n  :host([placement='bottom']) [icon*='chevron'] {\n    top: auto;\n    bottom: 1rem;\n  }\n`;\n\nexport const stylesKemetTab = css`\n  :host {\n    --kemet-tab-color: rgb(var(--kemet-color-foreground));\n\n    cursor: pointer;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    padding: var(--kemet-tab-padding, 1rem);\n  }\n\n  :host([selected]) {\n    cursor: auto;\n    color: var(--kemet-tab-color);\n  }\n\n  kemet-icon-bootstrap {\n    cursor: pointer;\n    margin-left: 0.5rem;\n  }\n`;\n\nexport const stylesKemetTabPanel = css`\n  :host {\n    --kemet-tab-panel-fade-speed: 0.5s;\n\n    width: 100%;\n    flex: 0 0 auto;\n  }\n\n  ::slotted(img) {\n    max-width: 100%;\n  }\n\n  :host(.fade) {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--kemet-tab-panel-fade-speed) ease;\n  }\n\n  :host(.fade[selected]) {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.fade.push) {\n    margin-left: -100%;\n  }\n\n  :host(.vertical) {\n    display: none;\n  }\n\n  :host(.vertical[selected]) {\n    display: block;\n  }\n\n  :host(.stacked) {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  :host(.stacked[selected]) {\n    position: relative;\n    z-index: 1;\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n","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":["import_lit","import_decorators","import_lit"]}

package/dist/elements/tab.mjs

@@ -1,11 +0,0 @@
-import {
-  KemetTab
-} from "../chunk-6KGFENNL.mjs";
-import "../chunk-5LCSEF3N.mjs";
-import "../chunk-7DJKARFX.mjs";
-import "../chunk-LHEY3UOF.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  KemetTab as default
-};
-//# sourceMappingURL=tab.mjs.map

package/dist/elements/tab.mjs.map

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

package/dist/elements/tabs.d.mts

@@ -1,128 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-import { b as TypeDirection } from '../constants-BEtO8uLN.mjs';
-import KemetTab from './tab.mjs';
-import KemetTabPanel from './tab-panel.mjs';
-import '../form-controller-BR0gZhrG.mjs';
-
-interface InterfaceLink {
-    width: string;
-    height: string;
-    positionX: string;
-    positionY: string;
-}
-interface InterfaceTabsDetails {
-    element: KemetTabs;
-    selectedName: string;
-    selectedIndex: number;
-}
-declare const panelEffect: readonly ["none", "slide", "fade", "stacked"];
-declare enum EnumPanelEffect {
-    None = "none",
-    Slide = "slide",
-    Fade = "fade",
-    Stacked = "stacked"
-}
-type TypePanelEffect = typeof panelEffect[number];
-declare const tabsAlign: readonly ["center", "between", "around", "evenly", "start", "end"];
-declare enum EnumTabsAlign {
-    Center = "center",
-    Between = "between",
-    Around = "around",
-    Evenly = "evenly",
-    Start = "start",
-    End = "end"
-}
-type TypeTabsAlign = typeof tabsAlign[number];
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-tabs
- * @summary A group of tabs and panels.
- *
- * @prop {string} selected - The selected tab by name
- * @prop {number} selectedIndex - The selected tab by index
- * @prop {number} panelPosition - Positions the current panel
- * @prop {string} panelEffect - The transition effect for panels
- * @prop {boolean} swipe - Determines whether to enable swipe behavior
- * @prop {TypeDirection} placement - Places the tabs to the top, right, bottom, or left
- * @prop {boolean} divider - Determines whether to show a divider line
- * @prop {TypeTabsAlign} tabsAlign - Spacing alignment of the tabs
- * @prop {object} ink - An object that contains information about the ink
- * @prop {boolean} hideInk - Determines whether to hide the ink
- * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container
- *
- * @slot tab - Place the tabs here.
- * @slot panel - Place the panels here.
- *
- * @csspart links - The container for the tablist.
- * @csspart tablist - Contains the tabs.
- * @csspart panels - Contains the panels.
- * @csspart ink - The ink element.
- * @csspart divider - The divider element.
- *
- * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.
- * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.
- * @cssproperty --kemet-tabs-ink-color - The color of the ink.
- * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.
- * @cssproperty --kemet-tabs-divider-color - The color of the divider.
- * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.
- * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.
- *
- * @event kemet-change - Fires when a tab is changed
- *
- */
-declare class KemetTabs extends LitElement {
-    static styles: lit.CSSResult[];
-    selected: string;
-    selectedIndex: number;
-    panelPosition: number;
-    panelEffect: TypePanelEffect;
-    swipe: boolean;
-    placement: TypeDirection;
-    divider: boolean;
-    tabsAlign: TypeTabsAlign;
-    ink: InterfaceLink;
-    hideInk: boolean;
-    overflow: boolean;
-    tabs: KemetTab[];
-    panels: KemetTabPanel[];
-    xDown: number | null;
-    yDown: number | null;
-    links: HTMLElement;
-    panelsElement: HTMLElement;
-    constructor();
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    updated(prevProps: Map<string, never>): void;
-    handleLinksSlotChange(): void;
-    handlePanelsSlotChange(): void;
-    handleLeftArrow(): void;
-    handleRightArrow(): void;
-    handleTabClose(event: CustomEvent): void;
-    makeInk(location: string): lit_html.TemplateResult<1>;
-    makeDivider(): lit_html.TemplateResult<1>;
-    makeLeftArrow(): lit_html.TemplateResult<1>;
-    makeRightArrow(): lit_html.TemplateResult<1>;
-    selectTab(): void;
-    selectPanel(): void;
-    dispatchTabChange(): void;
-    tabSelectedChange(event: CustomEvent): void;
-    determineFade(): void;
-    determineStacked(): void;
-    determineOverflow(): void;
-    handleResize(): void;
-    animatePanel(panelName: string, panelIndex: number): void;
-    handleTabKeydown(event: KeyboardEvent): void;
-    handleTouchStart(event: TouchEvent): void;
-    handleTouchMove(event: TouchEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tabs': KemetTabs;
-    }
-}
-
-export { EnumPanelEffect, EnumTabsAlign, type InterfaceTabsDetails, type TypePanelEffect, type TypeTabsAlign, KemetTabs as default, panelEffect, tabsAlign };