kemet-ui 4.0.2 → 5.0.0

package/dist/elements/tabs/index.js

@@ -0,0 +1,930 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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/index.ts
+import { LitElement as LitElement2, html as html2 } from "lit";
+import { customElement as customElement2, property as property2, query, state as state2 } from "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/elements/icon/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { isTemplateResult } from "lit/directive-helpers.js";
+
+// src/elements/icon/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+`;
+
+// src/elements/icon/index.ts
+var CACHEABLE_ERROR = /* @__PURE__ */ Symbol();
+var RETRYABLE_ERROR = /* @__PURE__ */ Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var MAX_CONCURRENT_REQUESTS = 10;
+var requestQueue = [];
+var activeRequests = 0;
+function queueRequest(callback) {
+  if (activeRequests < MAX_CONCURRENT_REQUESTS) {
+    activeRequests++;
+    callback();
+  } else {
+    requestQueue.push(callback);
+  }
+}
+function requestComplete() {
+  activeRequests--;
+  if (requestQueue.length > 0) {
+    const nextRequest = requestQueue.shift();
+    if (nextRequest) {
+      activeRequests++;
+      nextRequest();
+    }
+  }
+}
+var KemetIcon = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.name = "house";
+    this.library = "bootstrap";
+    this.family = "regular";
+    this.size = 16;
+    this.dom = "initializing";
+    this.svg = null;
+    this.url = "https://unpkg.com/bootstrap-icons@latest/icons";
+    /** @internal */
+    this.isVisible = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateUrl();
+    if (!this.svg) {
+      this.isVisible = true;
+      this.setIcon();
+    }
+  }
+  updated() {
+    this.updateUrl();
+    this.updateSize();
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-icon-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    if (this.svg) {
+      return this.svg;
+    }
+    if (!this.isVisible) {
+      this.isVisible = true;
+      this.setIcon();
+    }
+    return html`<svg part="svg" width="${this.size}" height="${this.size}" viewBox="0 0 16 16"></svg>`;
+  }
+  /** Public method to force icon loading */
+  loadIcon() {
+    this.isVisible = true;
+    this.setIcon();
+  }
+  async setIcon() {
+    if (!this.isVisible) return;
+    let iconResolver = iconCache.get(`${this.family}/${this.name}`);
+    if (!iconResolver) {
+      iconResolver = this.resolveIcon();
+      iconCache.set(`${this.family}/${this.name}`, iconResolver);
+    }
+    const svg = await iconResolver;
+    if (svg === RETRYABLE_ERROR) {
+      iconCache.delete(`${this.family}/${this.name}`);
+    }
+    if (isTemplateResult(svg)) {
+      this.svg = svg;
+    } else if (svg instanceof SVGSVGElement) {
+      this.svg = svg.cloneNode(true);
+    }
+  }
+  updateUrl() {
+    switch (this.library) {
+      case "fontawesome" /* FONTAWESOME */:
+        this.version = this.version || "7.3.1";
+        this.url = `https://unpkg.com/@fortawesome/fontawesome-free@${this.version}/svgs`;
+        break;
+      case "bootstrap" /* BOOTSTRAP */:
+        this.version = this.version || "1.11.3";
+        this.url = `https://unpkg.com/bootstrap-icons@${this.version}/icons`;
+        break;
+    }
+  }
+  async resolveIcon() {
+    return new Promise((resolve) => {
+      queueRequest(async () => {
+        let fileData;
+        let fetchURL = `${this.url}/${this.family}/${this.name}.svg`;
+        switch (this.library) {
+          case "fontawesome" /* FONTAWESOME */:
+            fetchURL = `${this.url}/${this.family}/${this.name}.svg`;
+            break;
+          case "bootstrap" /* BOOTSTRAP */:
+            fetchURL = `${this.url}/${this.name}.svg`;
+            break;
+        }
+        try {
+          fileData = await fetch(fetchURL);
+          if (!fileData.ok) {
+            requestComplete();
+            resolve(fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR);
+            return;
+          }
+        } catch {
+          requestComplete();
+          resolve(RETRYABLE_ERROR);
+          return;
+        }
+        try {
+          const div = document.createElement("div");
+          div.innerHTML = await fileData.text();
+          const svg = div.firstElementChild;
+          if (svg?.tagName?.toLowerCase() !== "svg") {
+            requestComplete();
+            resolve(CACHEABLE_ERROR);
+            return;
+          }
+          if (!parser) parser = new DOMParser();
+          const doc = parser.parseFromString(svg.outerHTML, "text/html");
+          const svgEl = doc.body.querySelector("svg");
+          if (!svgEl) {
+            requestComplete();
+            resolve(CACHEABLE_ERROR);
+            return;
+          }
+          svgEl.part.add("svg");
+          svgEl.setAttribute("width", `${this.size}px`);
+          svgEl.setAttribute("height", `${this.size}px`);
+          requestComplete();
+          resolve(document.adoptNode(svgEl));
+        } catch {
+          requestComplete();
+          resolve(CACHEABLE_ERROR);
+        }
+      });
+    });
+  }
+  updateSize() {
+    if (this.svg) {
+      const svg = this.svg;
+      svg.setAttribute("width", `${this.size}px`);
+      svg.setAttribute("height", `${this.size}px`);
+    }
+  }
+};
+KemetIcon.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "library", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "family", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetIcon.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "version", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetIcon.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetIcon.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetIcon.prototype, "svg", 2);
+__decorateClass([
+  state()
+], KemetIcon.prototype, "url", 2);
+KemetIcon = __decorateClass([
+  customElement("kemet-icon")
+], KemetIcon);
+
+// src/elements/tabs/styles.css.ts
+import { css as css2 } from "lit";
+var styles_css_default2 = css2`: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: var(--kemet-color-font-base);
+  --kemet-tabs-ink-color: var(--kemet-color-font-active);
+
+  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;
+}
+`;
+
+// src/elements/tabs/index.ts
+var EnumPanelEffect = /* @__PURE__ */ ((EnumPanelEffect2) => {
+  EnumPanelEffect2["None"] = "none";
+  EnumPanelEffect2["Slide"] = "slide";
+  EnumPanelEffect2["Fade"] = "fade";
+  EnumPanelEffect2["Stacked"] = "stacked";
+  return EnumPanelEffect2;
+})(EnumPanelEffect || {});
+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 LitElement2 {
+  constructor() {
+    super();
+    this.selectedIndex = 0;
+    this.panelPosition = 0;
+    this.panelEffect = "none" /* None */;
+    this.swipe = false;
+    this.placement = "top" /* Top */;
+    this.divider = false;
+    this.tabsAlign = "center" /* Center */;
+    this.ink = { width: "0", height: "0", positionX: "0", positionY: "0" };
+    this.hideInk = false;
+    this.overflow = false;
+    this.dom = "initializing";
+    this.addEventListener("kemet-tab-selected", this.tabSelectedChange.bind(this));
+    this.addEventListener("kemet-tab-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");
+    emitEvent(this, "kemet-tabs-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html2`
+      ${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));
+    });
+    const firstTab = this.tabs[0];
+    if (firstTab) firstTab.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) {
+      const firstPanel = this.panels[0];
+      if (firstPanel) firstPanel.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];
+    if (!selectedElement) return;
+    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];
+    if (!selectedElement) return;
+    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.element;
+    const panel = this.panels[tab.index];
+    if (this.tabs[0]) {
+      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 html2`<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 html2`<div part="ink" style="height:${this.ink.height}; transform:translateY(${this.ink.positionY})"></div>`;
+    }
+    return null;
+  }
+  makeDivider() {
+    if (this.divider) {
+      return html2`<div part="divider"></div>`;
+    }
+    return null;
+  }
+  makeLeftArrow() {
+    if (this.overflow) {
+      return html2`<kemet-icon name='chevron-left' size="20" @click=${() => this.handleLeftArrow()}></kemet-icon>`;
+    }
+    return null;
+  }
+  makeRightArrow() {
+    if (this.overflow) {
+      return html2`<kemet-icon name='chevron-right' size="20" @click=${() => this.handleRightArrow()}></kemet-icon>`;
+    }
+    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-tabs-change", {
+      element: this,
+      selectedName: this.selected,
+      selectedIndex: this.selectedIndex
+    });
+  }
+  tabSelectedChange(event) {
+    if (this.selected) {
+      this.selected = event.detail.element.getAttribute("link");
+    } else {
+      this.selectedIndex = event.detail.element.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 (panelIndex !== null && this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;
+    }
+  }
+  handleTabKeydown(event) {
+    if (this.selected) {
+      switch (event.key) {
+        case "Home":
+          if (this.tabs[0]) {
+            this.selected = this.tabs[0].getAttribute("link") ?? void 0;
+          }
+          break;
+        case "End":
+          const lastTab = this.tabs[this.tabs.length - 1];
+          if (lastTab) {
+            this.selected = lastTab.getAttribute("link") ?? void 0;
+          }
+          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;
+      }
+      const tabToFocus = this.tabs.find((tab) => tab.link === this.selected);
+      if (tabToFocus) tabToFocus.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;
+      }
+      if (this.tabs[this.selectedIndex]) {
+        this.tabs[this.selectedIndex]?.focus();
+      }
+    }
+  }
+  handleTouchStart(event) {
+    this.xDown = event.touches[0]?.clientX ?? 0;
+    this.yDown = event.touches[0]?.clientY ?? 0;
+  }
+  handleTouchMove(event) {
+    if (!this.xDown || !this.yDown) {
+      return;
+    }
+    const xUp = event.touches[0]?.clientX ?? 0;
+    const yUp = event.touches[0]?.clientY ?? 0;
+    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 = [styles_css_default2];
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetTabs.prototype, "selected", 2);
+__decorateClass([
+  property2({ type: Number })
+], KemetTabs.prototype, "selectedIndex", 2);
+__decorateClass([
+  property2({ type: Number })
+], KemetTabs.prototype, "panelPosition", 2);
+__decorateClass([
+  property2({ type: String, reflect: true, attribute: "panel-effect" })
+], KemetTabs.prototype, "panelEffect", 2);
+__decorateClass([
+  property2({ type: Boolean })
+], KemetTabs.prototype, "swipe", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetTabs.prototype, "placement", 2);
+__decorateClass([
+  property2({ type: Boolean })
+], KemetTabs.prototype, "divider", 2);
+__decorateClass([
+  property2({ type: String, reflect: true, attribute: "tabs-align" })
+], KemetTabs.prototype, "tabsAlign", 2);
+__decorateClass([
+  property2({ type: Object })
+], KemetTabs.prototype, "ink", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "hide-ink" })
+], KemetTabs.prototype, "hideInk", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], KemetTabs.prototype, "overflow", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetTabs.prototype, "polarity", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetTabs.prototype, "dom", 2);
+__decorateClass([
+  state2()
+], KemetTabs.prototype, "tabs", 2);
+__decorateClass([
+  state2()
+], KemetTabs.prototype, "panels", 2);
+__decorateClass([
+  state2()
+], KemetTabs.prototype, "xDown", 2);
+__decorateClass([
+  state2()
+], KemetTabs.prototype, "yDown", 2);
+__decorateClass([
+  state2()
+], KemetTabs.prototype, "links", 2);
+__decorateClass([
+  query("#panels")
+], KemetTabs.prototype, "panelsElement", 2);
+KemetTabs = __decorateClass([
+  customElement2("kemet-tabs")
+], KemetTabs);
+export {
+  EnumPanelEffect,
+  EnumTabsAlign,
+  KemetTabs as default
+};
+//# sourceMappingURL=index.js.map