kemet-ui 4.0.2 → 5.0.0

package/dist/elements/tabs.js

@@ -1,906 +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/tabs.ts
-var tabs_exports = {};
-__export(tabs_exports, {
-  EnumPanelEffect: () => EnumPanelEffect,
-  EnumTabsAlign: () => EnumTabsAlign,
-  default: () => KemetTabs,
-  panelEffect: () => panelEffect,
-  tabsAlign: () => tabsAlign
-});
-module.exports = __toCommonJS(tabs_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/tabs.ts
-var panelEffect = ["none", "slide", "fade", "stacked"];
-var EnumPanelEffect = /* @__PURE__ */ ((EnumPanelEffect2) => {
-  EnumPanelEffect2["None"] = "none";
-  EnumPanelEffect2["Slide"] = "slide";
-  EnumPanelEffect2["Fade"] = "fade";
-  EnumPanelEffect2["Stacked"] = "stacked";
-  return EnumPanelEffect2;
-})(EnumPanelEffect || {});
-var tabsAlign = ["center", "between", "around", "evenly", "start", "end"];
-var EnumTabsAlign = /* @__PURE__ */ ((EnumTabsAlign2) => {
-  EnumTabsAlign2["Center"] = "center";
-  EnumTabsAlign2["Between"] = "between";
-  EnumTabsAlign2["Around"] = "around";
-  EnumTabsAlign2["Evenly"] = "evenly";
-  EnumTabsAlign2["Start"] = "start";
-  EnumTabsAlign2["End"] = "end";
-  return EnumTabsAlign2;
-})(EnumTabsAlign || {});
-var KemetTabs = class extends import_lit3.LitElement {
-  constructor() {
-    super();
-    this.selectedIndex = 0;
-    this.panelPosition = 0;
-    this.panelEffect = "none" /* None */;
-    this.placement = "top" /* Top */;
-    this.tabsAlign = "center" /* Center */;
-    this.hideInk = false;
-    this.addEventListener("kemet-selected", this.tabSelectedChange.bind(this));
-    this.addEventListener("kemet-closed", this.handleTabClose.bind(this));
-    window.addEventListener("resize", this.handleResize.bind(this));
-  }
-  firstUpdated() {
-    this.tabs = [];
-    this.panels = [];
-    this.xDown = null;
-    this.yDown = null;
-    this.links = this.shadowRoot.getElementById("links");
-  }
-  render() {
-    return import_lit3.html`
-      ${this.makeLeftArrow()}
-      ${this.makeRightArrow()}
-      <div id="links" part="links">
-        <div part='tablist' role="tablist">
-          <slot name="tab" @slotchange=${() => this.handleLinksSlotChange()}></slot>
-        </div>
-        ${this.makeInk("links")}
-      </div>
-      ${this.makeInk("host")}
-      ${this.makeDivider()}
-      <section id="panels" part="panels" style="transform:translateX(${this.panelPosition}px);">
-        <div>
-          <slot name="panel" @slotchange=${() => this.handlePanelsSlotChange()}></slot>
-        </div>
-      </section>
-    `;
-  }
-  updated(prevProps) {
-    this.determineFade();
-    this.determineStacked();
-    if (prevProps.get("selected") && prevProps.get("selected") !== this.selected) {
-      this.selectTab();
-      this.selectPanel();
-    }
-    if (typeof prevProps.get("selectedIndex") === "number" && prevProps.get("selectedIndex") !== this.selected) {
-      this.selectTab();
-      this.selectPanel();
-    }
-  }
-  handleLinksSlotChange() {
-    const tabs = this.querySelectorAll("kemet-tab");
-    let index = 0;
-    tabs.forEach((tab) => {
-      tab.index = index;
-      index += 1;
-      this.tabs = this.tabs.concat(tab);
-      tab.addEventListener("keydown", (event) => this.handleTabKeydown(event));
-    });
-    if (this.tabs.length > 0) this.tabs[0].selected = true;
-    setTimeout(() => {
-      this.selectTab();
-    }, 1);
-    this.determineOverflow();
-  }
-  handlePanelsSlotChange() {
-    const panels = this.querySelectorAll("kemet-tab-panel");
-    const panelElement = this.shadowRoot.getElementById("panels");
-    let index = 0;
-    panels.forEach((panel) => {
-      panel.index = index;
-      index += 1;
-      this.panels = this.panels.concat(panel);
-    });
-    if (this.panels.length > 0) this.panels[0].selected = true;
-    if (this.swipe) {
-      panelElement.addEventListener("touchstart", (event) => this.handleTouchStart(event), false);
-      panelElement.addEventListener("touchmove", (event) => this.handleTouchMove(event), false);
-    }
-    this.selectPanel();
-  }
-  handleLeftArrow() {
-    const selectedElement = this.tabs.find((tab) => tab.selected) || this.tabs[0];
-    const previousElement = selectedElement.previousElementSibling;
-    const selectedIndex = this.tabs.findIndex((tab) => tab.selected);
-    if (this.selected) {
-      this.selected = previousElement ? previousElement.link : selectedElement.link;
-    } else {
-      this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;
-    }
-    if (previousElement) {
-      this.links.scrollLeft = previousElement.offsetLeft - 20;
-    }
-    this.selectTab();
-    this.selectPanel();
-  }
-  handleRightArrow() {
-    const selectedElement = this.tabs.find((tab) => tab.selected) || this.tabs[this.tabs.length - 1];
-    const nextElement = selectedElement.nextElementSibling;
-    const selectedIndex = this.tabs.findIndex((tab) => tab.selected);
-    if (this.selected) {
-      this.selected = nextElement ? nextElement.link : selectedElement.link;
-    } else {
-      this.selectedIndex = selectedIndex < this.tabs.length - 1 ? selectedIndex + 1 : this.tabs.length - 1;
-    }
-    if (nextElement) {
-      this.links.scrollLeft = nextElement.offsetLeft - 20;
-    }
-    this.selectTab();
-    this.selectPanel();
-  }
-  handleTabClose(event) {
-    const tab = event.detail;
-    const panel = this.panels[tab.index];
-    this.selected = this.tabs[0].link;
-    this.selectedIndex = 0;
-    panel.remove();
-    tab.remove();
-  }
-  makeInk(location) {
-    if (this.hideInk) {
-      return null;
-    }
-    if ((this.placement === "top" || this.placement === "bottom") && this.ink && location === "links") {
-      return import_lit3.html`<div part="ink" style="width:${this.ink.width}; transform:translateX(${this.ink.positionX})"></div>`;
-    }
-    if ((this.placement === "left" || this.placement === "right") && this.ink && location === "host") {
-      return import_lit3.html`<div part="ink" style="height:${this.ink.height}; transform:translateY(${this.ink.positionY})"></div>`;
-    }
-    return null;
-  }
-  makeDivider() {
-    if (this.divider) {
-      return import_lit3.html`<div part="divider"></div>`;
-    }
-    return null;
-  }
-  makeLeftArrow() {
-    if (this.overflow) {
-      return import_lit3.html`<kemet-icon-bootstrap icon='chevron-left' size="20" @click=${() => this.handleLeftArrow()}></kemet-icon-bootstrap>`;
-    }
-    return null;
-  }
-  makeRightArrow() {
-    if (this.overflow) {
-      return import_lit3.html`<kemet-icon-bootstrap icon='chevron-right' size="20" @click=${() => this.handleRightArrow()}></kemet-icon-bootstrap>`;
-    }
-    return null;
-  }
-  selectTab() {
-    const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace("px", ""), 10) : 0;
-    const overflowOffset = this.overflow ? marginLeft : 0;
-    if (this.selected) {
-      this.tabs.forEach((tab) => {
-        const tabName = tab.getAttribute("link");
-        if (tabName === this.selected) {
-          tab.selected = true;
-          this.selected = tabName;
-          this.ink = {
-            width: `${tab.offsetWidth}px`,
-            height: `${tab.offsetHeight}px`,
-            positionX: `${tab.offsetLeft - overflowOffset}px`,
-            positionY: `${tab.offsetTop}px`
-          };
-          this.links.scrollLeft = tab.offsetLeft - overflowOffset;
-        } else {
-          tab.selected = false;
-        }
-      });
-    } else {
-      this.tabs.forEach((tab) => {
-        if (this.selectedIndex === tab.index) {
-          tab.selected = true;
-          this.ink = {
-            width: `${tab.offsetWidth}px`,
-            height: `${tab.offsetHeight}px`,
-            positionX: `${tab.offsetLeft - overflowOffset}px`,
-            positionY: `${tab.offsetTop}px`
-          };
-          this.links.scrollLeft = tab.offsetLeft - overflowOffset;
-        } else {
-          tab.selected = false;
-        }
-      });
-    }
-  }
-  selectPanel() {
-    if (this.selected) {
-      this.panels.forEach((panel) => {
-        const panelName = panel.getAttribute("panel");
-        if (this.panelEffect === "fade" && panel.index !== 0) {
-          panel.classList.add("push");
-        }
-        if (this.placement === "left" || this.placement === "right") {
-          panel.classList.add("vertical");
-        }
-        if (panelName === this.selected) {
-          panel.selected = true;
-          this.animatePanel(panelName, null);
-        } else {
-          panel.selected = false;
-        }
-      });
-    } else {
-      this.panels.forEach((panel) => {
-        if (this.panelEffect === "fade" && panel.index !== 0) {
-          panel.classList.add("push");
-        }
-        if (this.placement === "left" || this.placement === "right") {
-          panel.classList.add("vertical");
-        }
-        if (this.selectedIndex === panel.index) {
-          panel.selected = true;
-          this.animatePanel(null, panel.index);
-        } else {
-          panel.selected = false;
-        }
-      });
-    }
-  }
-  dispatchTabChange() {
-    emitEvent(this, "kemet-change", {
-      element: this,
-      selectedName: this.selected,
-      selectedIndex: this.selectedIndex
-    });
-  }
-  tabSelectedChange(event) {
-    if (this.selected) {
-      this.selected = event.detail.getAttribute("link");
-    } else {
-      this.selectedIndex = event.detail.index;
-    }
-    this.selectTab();
-    this.selectPanel();
-    this.dispatchTabChange();
-  }
-  determineFade() {
-    this.panels.forEach((panel) => {
-      if (this.panelEffect === "fade") panel.classList.add("fade");
-    });
-  }
-  determineStacked() {
-    this.panels.forEach((panel) => {
-      if (this.panelEffect === "stacked") panel.classList.add("stacked");
-    });
-  }
-  determineOverflow() {
-    const tabsContainerWidth = this.offsetWidth;
-    const tabElements = this.querySelectorAll("kemet-tab");
-    let totalTabsWidth = 0;
-    tabElements.forEach((tab) => {
-      totalTabsWidth += tab.offsetWidth;
-    });
-    this.overflow = totalTabsWidth > tabsContainerWidth && (this.placement === "top" || this.placement === "bottom");
-  }
-  handleResize() {
-    if (this.tabs && this.panels) {
-      const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace("px", ""), 10) : 0;
-      const overflowOffset = this.overflow ? marginLeft : 0;
-      const selectedElement = this.tabs.find((tab) => tab.selected);
-      if (selectedElement) {
-        this.ink = {
-          width: `${selectedElement.offsetWidth}px`,
-          height: `${selectedElement.offsetHeight}px`,
-          positionX: `${selectedElement.offsetLeft - overflowOffset}px`,
-          positionY: `${selectedElement.offsetTop}px`
-        };
-      }
-      this.determineOverflow();
-      if (this.selected) {
-        this.animatePanel(this.selected, null);
-      } else {
-        this.animatePanel(null, this.selectedIndex);
-      }
-    }
-  }
-  animatePanel(panelName, panelIndex) {
-    if (panelName) {
-      const selectedPanel = this.querySelector(`[panel="${panelName}"]`);
-      if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;
-    } else {
-      if (this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;
-    }
-  }
-  handleTabKeydown(event) {
-    if (this.selected) {
-      switch (event.key) {
-        case "Home":
-          this.selected = this.tabs[0].getAttribute("link");
-          break;
-        case "End":
-          this.selected = this.tabs[this.tabs.length - 1].getAttribute("link");
-          break;
-        case "ArrowRight":
-          const nextLinkElement = this.querySelector("kemet-tab[selected]").nextElementSibling;
-          const nextLink = nextLinkElement ? nextLinkElement.getAttribute("link") : false;
-          if (nextLink) {
-            this.selected = nextLink;
-          }
-          break;
-        case "ArrowLeft":
-          const previousLinkElement = this.querySelector("kemet-tab[selected]").previousElementSibling;
-          const previousLink = previousLinkElement ? previousLinkElement.getAttribute("link") : false;
-          if (previousLink) {
-            this.selected = previousLink;
-          }
-          break;
-        default:
-          break;
-      }
-      this.tabs.find((tab) => tab.link === this.selected).focus();
-    } else {
-      switch (event.key) {
-        case "Home":
-          this.selectedIndex = 0;
-          break;
-        case "End":
-          this.selectedIndex = this.tabs.length - 1;
-          break;
-        case "ArrowRight":
-          if (this.selectedIndex < this.tabs.length - 1) {
-            this.selectedIndex += 1;
-          } else {
-            this.selectedIndex = this.tabs.length - 1;
-          }
-          break;
-        case "ArrowLeft":
-          if (this.selectedIndex < 1) {
-            this.selectedIndex = 0;
-          } else {
-            this.selectedIndex -= 1;
-          }
-          break;
-        default:
-          break;
-      }
-      this.tabs[this.selectedIndex].focus();
-    }
-  }
-  handleTouchStart(event) {
-    this.xDown = event.touches[0].clientX;
-    this.yDown = event.touches[0].clientY;
-  }
-  handleTouchMove(event) {
-    if (!this.xDown || !this.yDown) {
-      return;
-    }
-    const xUp = event.touches[0].clientX;
-    const yUp = event.touches[0].clientY;
-    const xDiff = this.xDown - xUp;
-    const yDiff = this.yDown - yUp;
-    const nextElement = this.querySelector("kemet-tab-panel[selected]")?.nextElementSibling;
-    const next = nextElement ? nextElement.getAttribute("panel") : false;
-    const previousElement = this.querySelector("kemet-tab-panel[selected]")?.previousElementSibling;
-    const previous = previousElement ? previousElement.getAttribute("panel") : false;
-    if (Math.abs(xDiff) > Math.abs(yDiff)) {
-      if (xDiff > 0) {
-        if (this.selected) {
-          if (next) this.selected = next;
-        } else {
-          if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;
-        }
-      } else {
-        if (this.selected) {
-          if (previous) this.selected = previous;
-        } else {
-          if (this.selectedIndex > 0) this.selectedIndex -= 1;
-        }
-      }
-      this.selectTab();
-      this.selectPanel();
-    }
-    this.xDown = null;
-    this.yDown = null;
-  }
-};
-KemetTabs.styles = [stylesKemetTabs];
-__decorateClass([
-  (0, import_decorators2.property)({ type: String, reflect: true })
-], KemetTabs.prototype, "selected", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Number })
-], KemetTabs.prototype, "selectedIndex", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Number })
-], KemetTabs.prototype, "panelPosition", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: String, reflect: true, attribute: "panel-effect" })
-], KemetTabs.prototype, "panelEffect", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Boolean })
-], KemetTabs.prototype, "swipe", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: String, reflect: true })
-], KemetTabs.prototype, "placement", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Boolean })
-], KemetTabs.prototype, "divider", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: String, reflect: true, attribute: "tabs-align" })
-], KemetTabs.prototype, "tabsAlign", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Object })
-], KemetTabs.prototype, "ink", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Boolean, attribute: "hide-ink" })
-], KemetTabs.prototype, "hideInk", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Boolean, reflect: true })
-], KemetTabs.prototype, "overflow", 2);
-__decorateClass([
-  (0, import_decorators2.state)()
-], KemetTabs.prototype, "tabs", 2);
-__decorateClass([
-  (0, import_decorators2.state)()
-], KemetTabs.prototype, "panels", 2);
-__decorateClass([
-  (0, import_decorators2.state)()
-], KemetTabs.prototype, "xDown", 2);
-__decorateClass([
-  (0, import_decorators2.state)()
-], KemetTabs.prototype, "yDown", 2);
-__decorateClass([
-  (0, import_decorators2.state)()
-], KemetTabs.prototype, "links", 2);
-__decorateClass([
-  (0, import_decorators2.query)("#panels")
-], KemetTabs.prototype, "panelsElement", 2);
-KemetTabs = __decorateClass([
-  (0, import_decorators2.customElement)("kemet-tabs")
-], KemetTabs);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  EnumPanelEffect,
-  EnumTabsAlign,
-  panelEffect,
-  tabsAlign
-});
-//# sourceMappingURL=tabs.js.map