kemet-ui 4.0.0 → 4.0.2

package/dist/elements/tabs.js

@@ -0,0 +1,906 @@
+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