@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/tabs/tabs.js

@@ -1,274 +1,424 @@
-import { css as p, html as f } from "lit";
-import { property as d, state as c, queryAssignedElements as v, query as m } from "lit/decorators.js";
-import { nanoid as u } from "nanoid";
-import { Cre8Element as T } from "../cre8-element.js";
-const x = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-tabs__header{position:relative;display:flex;flex-direction:column;align-items:baseline;overflow:hidden}.cre8-c-tabs:not(.cre8-is-start) .cre8-c-tabs__header::before{content:"";display:block;position:absolute;pointer-events:none;background:linear-gradient(var(--rtlGradientToRight, 90deg), var(--cre8-color-bg-default), rgba(255, 255, 255, 0.001) 30%);height:100%;inset-block-start:0;inset-inline-start:0;width:3rem;z-index:1}.cre8-c-tabs:not(.cre8-is-end) .cre8-c-tabs__header::after{content:"";display:block !important;position:absolute;pointer-events:none;background:linear-gradient(var(--rtlGradientToRight, 90deg), rgba(255, 255, 255, 0.001) 30%, var(--cre8-color-bg-default));height:100%;inset-block-start:0;inset-inline-end:0;width:3rem;z-index:1}.cre8-c-tabs__list{display:flex;overflow:auto;width:100%;margin:0;position:relative;padding:var(--cre8-border-width-focus);scrollbar-width:none;-ms-overflow-style:none}.cre8-c-tabs__list::-webkit-scrollbar{display:none}.cre8-c-tabs__body{padding-block-start:1rem}.cre8-c-tabs--full-width .cre8-c-tabs__body{border-top:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);margin-top:calc(var(--cre8-border-width-tab-selected)*-2)}`;
-var g = Object.defineProperty, r = (l, e, t, i) => {
-  for (var s = void 0, n = l.length - 1, h; n >= 0; n--)
-    (h = l[n]) && (s = h(e, t, s) || s);
-  return s && g(e, t, s), s;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-let b = 1;
-const o = class o extends T {
-  /**
-   * Initialize Functions
-   */
-  constructor() {
-    super(), this.activeIndex = 0, this.isStart = !0, this.isEnd = !1, this.handleScroll = this.handleScroll.bind(this), this.handleResize = this.handleResize.bind(this), this.setIsStart = this.setIsStart.bind(this), this.setIsEnd = this.setIsEnd.bind(this), this.emitEvent = this.emitEvent.bind(this), this.tabId = `cre8-tabpanel-${b}`, b += 1;
-  }
-  /**
-   * Query the document direction value
-   *
-   * _*This property is dynamically set_
-   */
-  get isRTL() {
-    return document.dir === "rtl";
-  }
-  /**
-   * Connected Callback Lifecycle
-   * 1. Fires each time a custom element is appended into a document-connected element.
-   */
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("resize", this.handleResize);
-  }
-  /**
-   * Disconnected Callback Lifecycle
-   * 1. Removes the event listeners to ensure that any memory allocated by your component
-   *    will be cleaned up when your component is destroyed or disconnected from the page.
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("resize", this.handleResize);
-  }
-  /**
-   * First Updated Lifecycle Hook
-   * 1. Sets the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop.
-   * 2. Sets the active tab if activeIndex is defined. Otherwise, set the first tab as active by default.
-   * 3. Initialize isStart and isEnd.
-   * 4. Set the varaint on the cre8-tab according to the cre8-tabs variant.
-   */
-  async firstUpdated() {
-    this.setTabAttributes(), await this.updateComplete, this.activeTab = this._Cre8TabItems[this.activeIndex] || this._Cre8TabItems[0], this.setActiveTab(), this.setIsStart(), this.setIsEnd(), this.setTabVariant();
-  }
-  /**
-   * Updated Lifecycle Hook
-   * 1. remove selected state from previously selected tab
-   * 2. Checks to see if the old `activeIndex` property has been updated.
-   *    If the new value doesn't equal the old value, activate the proper tab
-   */
-  async updated(e) {
-    e.forEach(async (t, i) => {
-      i === "activeIndex" && this.activeIndex !== t && (await this.updateComplete, this.activeTab && this.removePreviousActiveTab(), this.activeTab = this._Cre8TabItems[this.activeIndex], this.setActiveTab());
-    });
-  }
-  /**
-   * Handle Resize
-   * 1. On resize, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
-   * 2. On resize, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
-   * @fires resize
-   */
-  handleResize() {
-    this.setIsStart(), this.setIsEnd();
-  }
-  /**
-   * Handle Scroll
-   * 1. On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
-   * 2. On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
-   * @fires scroll
-   */
-  handleScroll() {
-    this.setIsStart(), this.setIsEnd();
-  }
-  /**
-   * Set isStart State
-   * 1. If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
-   */
-  setIsStart() {
-    this.isRTL ? this._Cre8TabsHeaderList.scrollLeft > 0 ? this.isStart = !0 : this.isStart = !1 : this._Cre8TabsHeaderList.scrollLeft > 0 ? this.isStart = !1 : this.isStart = !0;
-  }
-  /**
-   * Set isEnd State
-   * 1. If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
-   */
-  setIsEnd() {
-    this.isInViewport() === !0 ? this.isEnd = !0 : this.isEnd = !1;
-  }
-  /**
-   * Check if last overflow list item is in the viewport
-   * 1. Get children of the overflow list inner container and get bounding client rectangle of last child
-   * 2. Return true if the left property is greater than or equal to 0 and if the right property is less
-   * than or equal to the window inner width or document client width
-   */
-  isInViewport() {
-    const t = this._Cre8TabItems[this._Cre8TabItems.length - 1].shadowRoot?.querySelector(".cre8-c-tab");
-    if (!t)
-      return !1;
-    const i = t.getBoundingClientRect(), s = window.innerWidth || document.documentElement.clientWidth;
-    return i.left >= 0 && i.right <= s;
-  }
-  /**
-   * Set Tab Variant
-   * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.
-   */
-  setTabVariant() {
-    this.size === "sm" && this._Cre8TabItems.forEach((e) => {
-      e.size = "sm";
-    });
-  }
-  /**
-   * Set the attributes on tab and tab panel
-   * 1. Sets the index value on the tab items.
-   * 2. Sets the `aria-labelledby` on the tab items.
-   * 3. Set the index and id on the tab-panel to match the tab.
-   */
-  setTabAttributes() {
-    this._Cre8TabItems.forEach((e, t) => {
-      e.index = t;
-      const s = e.ariaLabelledBy || u();
-      e.ariaLabelledBy = s;
-      const n = this._Cre8TabPanels[t];
-      n.index = t;
-    });
-  }
-  /**
-   * Set Active Tab
-   * 1. Sets the active state for the selected tab.
-   * 2. Sets the active state for the tab panel with the same index value as the selected tab.
-   */
-  setActiveTab() {
-    this.activeTab.isActive = !0;
-    const e = this._Cre8TabPanels.find((t) => t.index === this.activeTab.index);
-    e && (e.isActive = !0);
-  }
-  /**
-   * Set Active Tab Focus
-   */
-  setActiveTabFocus() {
-    this.activeTab.shadowRoot?.querySelector(".cre8-c-tab").focus();
-  }
-  /**
-   * Handle Tab Selected
-   * 1. Only continue if event target is a tab
-   * 2. If tab is active, make the previous selected tab inactive.
-   * 3. Set the clicked tab active.
-   * 4. Emit the custom event.
-   * @fires tabSelected
-   */
-  handleTabSelected(e) {
-    const { target: t } = e;
-    if (this._Cre8TabItems.includes(t)) {
-      this.activeTab && this.removePreviousActiveTab(), this.activeTab = t;
-      const i = this._Cre8TabItems.findIndex((s) => s === this.activeTab);
-      this.activeIndex = i, this.setActiveTab(), this.emitEvent();
+import { html, } from 'lit';
+import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { Cre8Element } from '../cre8-element';
+import styles from './tabs.styles.js';
+let tabId = 1;
+/**
+ * Tabs are used to quickly navigate back and forth between views.
+ * The Tab design and interaction varies depending on the requirements for your organization and project.
+ * Standardizing on the best individual controls will improve usability and reduce development and QA time.
+ *
+ * Create a standard set of Tab controls:
+ * Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).
+ *
+ * ## Usability Guidelines
+ * - The selected Tab should be visually differentiated from the other Tabs.
+ *   The deselected Tabs should still look enabled.
+ *   Dimming the other Tabs decreases the legibility of items that are actually active and clickable.
+ * - There must be a minimum of 2 Tabs.
+ * - Showing status in a Tab is non-standard (such as 0%, 10%).
+ * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab
+ *   which can be a rollup of content across other Tabs.
+ * - Keep the font size of the Tabs the same.
+ *   If the Tabs are a fixed width and one of the labels is too long,
+ *   don't resize the text to fit and consider wrapping text to a second line.
+ * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.
+ * - Try not to use more than six Tabs to keep the UI uncluttered.
+ * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs.
+ *   Find alternate ways of navigating page hierarchy.
+ *
+ * @slot default - Default, unnamed slot container for each `cre8-tab` button
+ * @slot panel - Container for each `cre8-tab-panel` content item
+ */
+export class Cre8Tabs extends Cre8Element {
+    /**
+     * Query the document direction value
+     *
+     * _*This property is dynamically set_
+     */
+    get isRTL() {
+        return document.dir === 'rtl';
     }
-  }
-  /**
-   * Handle Keydown
-   * 1. If the active tab is not focused then handle the keydown events.
-   * 2. On keydown of the right arrow, make the next tab active.
-   * 3. On keydown of the left arrow, make the previous tab active.
-   * 4. On keydown of the home key, make the first tab active.
-   * 5. On keydown of the end key, make the last tab active.
-   * 6. On keydown of the escape key, remove the focus.
-   * @fires keydown
-   */
-  handleKeydown(e) {
-    const { target: t } = e;
-    if (document.activeElement.matches("cre8-tab"))
-      switch (e.key) {
+    /**
+     * Initialize Functions
+     */
+    constructor() {
+        super();
+        /**
+         * Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)
+         * @attr {number}
+         */
+        this.activeIndex = 0;
+        /**
+         * If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+         *
+         * _*This property is dynamically set_
+         * @attr {boolean}
+         */
+        this.isStart = true;
+        /**
+         * If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+         *
+         * _*This property is dynamically set_
+         * @attr {boolean}
+         */
+        this.isEnd = false;
+        this.handleScroll = this.handleScroll.bind(this);
+        this.handleResize = this.handleResize.bind(this);
+        this.setIsStart = this.setIsStart.bind(this);
+        this.setIsEnd = this.setIsEnd.bind(this);
+        this.emitEvent = this.emitEvent.bind(this);
+        /**
+         * Set the tab id.
+         */
+        this.tabId = `cre8-tabpanel-${tabId}`;
+        tabId += 1;
+    }
+    /**
+     * Connected Callback Lifecycle
+     * 1. Fires each time a custom element is appended into a document-connected element.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.handleResize);
+    }
+    /**
+     * Disconnected Callback Lifecycle
+     * 1. Removes the event listeners to ensure that any memory allocated by your component
+     *    will be cleaned up when your component is destroyed or disconnected from the page.
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.handleResize);
+    }
+    /**
+     * First Updated Lifecycle Hook
+     * 1. Sets the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop.
+     * 2. Sets the active tab if activeIndex is defined. Otherwise, set the first tab as active by default.
+     * 3. Initialize isStart and isEnd.
+     * 4. Set the varaint on the cre8-tab according to the cre8-tabs variant.
+     */
+    async firstUpdated() {
+        /* 1 */
+        this.setTabAttributes();
+        await this.updateComplete;
         /* 2 */
-        case "ArrowRight":
-          e.preventDefault(), this.setSelectedToNextTab(t);
-          break;
+        this.activeTab = this._Cre8TabItems[this.activeIndex] || this._Cre8TabItems[0];
+        this.setActiveTab();
         /* 3 */
-        case "ArrowLeft":
-          e.preventDefault(), this.setSelectedToPreviousTab(t);
-          break;
+        this.setIsStart();
+        this.setIsEnd();
         /* 4 */
-        case "Home":
-          e.preventDefault(), this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);
-          break;
-        /* 5 */
-        case "End":
-          e.preventDefault(), this.setSelectedToPreviousTab(this._Cre8TabItems[0]);
-          break;
-        /* 6 */
-        case "Escape":
-          this.activeTab.blur();
-          break;
-      }
-  }
-  /**
-   * Set Selected To Previous Tab
-   * 1. Get current selected Tab index then deactivate previously selected tab.
-   * 2. If current activeIndex is in first position then move the tab focus to last tab.
-   * 3. Set the active tab and focus.
-   * 4. Emit custom event.
-   * @fires tabChange
-   */
-  setSelectedToPreviousTab(e) {
-    const t = e.index;
-    this.removePreviousActiveTab();
-    const i = this._Cre8TabItems.length - 1;
-    if (t === 0)
-      this.activeIndex = i, this.activeTab = this._Cre8TabItems[i];
-    else {
-      const s = t - 1;
-      this.activeIndex = s, this.activeTab = this._Cre8TabItems[s];
+        this.setTabVariant();
+    }
+    /**
+     * Updated Lifecycle Hook
+     * 1. remove selected state from previously selected tab
+     * 2. Checks to see if the old `activeIndex` property has been updated.
+     *    If the new value doesn't equal the old value, activate the proper tab
+     */
+    async updated(changedProperties) {
+        changedProperties.forEach(async (oldValue, propName) => {
+            if (propName === 'activeIndex' && this.activeIndex !== oldValue) {
+                await this.updateComplete;
+                if (this.activeTab) {
+                    this.removePreviousActiveTab(); /* 1 */
+                }
+                this.activeTab = this._Cre8TabItems[this.activeIndex];
+                this.setActiveTab(); /* 2 */
+            }
+        });
+    }
+    /**
+     * Handle Resize
+     * 1. On resize, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+     * 2. On resize, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+     * @fires resize
+     */
+    handleResize() {
+        this.setIsStart(); /* 1 */
+        this.setIsEnd(); /* 2 */
+    }
+    /**
+     * Handle Scroll
+     * 1. On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+     * 2. On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+     * @fires scroll
+     */
+    handleScroll() {
+        this.setIsStart(); /* 1 */
+        this.setIsEnd(); /* 2 */
+    }
+    /**
+     * Set isStart State
+     * 1. If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+     */
+    setIsStart() {
+        if (this.isRTL) {
+            if (this._Cre8TabsHeaderList.scrollLeft > 0) {
+                this.isStart = true;
+            }
+            else {
+                this.isStart = false;
+            }
+        }
+        else if (this._Cre8TabsHeaderList.scrollLeft > 0) {
+            this.isStart = false;
+        }
+        else {
+            this.isStart = true;
+        }
+    }
+    /**
+     * Set isEnd State
+     * 1. If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+     */
+    setIsEnd() {
+        if (this.isInViewport() === true) {
+            this.isEnd = true;
+        }
+        else {
+            this.isEnd = false;
+        }
+    }
+    /**
+     * Check if last overflow list item is in the viewport
+     * 1. Get children of the overflow list inner container and get bounding client rectangle of last child
+     * 2. Return true if the left property is greater than or equal to 0 and if the right property is less
+     * than or equal to the window inner width or document client width
+     */
+    isInViewport() {
+        const lastChild = this._Cre8TabItems[this._Cre8TabItems.length - 1];
+        const tabElement = lastChild.shadowRoot?.querySelector('.cre8-c-tab');
+        if (!tabElement) {
+            return false; // Return false if the tab element is not found
+        }
+        const rect = tabElement.getBoundingClientRect(); /* 1 */
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+        return rect.left >= 0 && rect.right <= windowWidth; /* 2 */
+    }
+    /**
+     * Set Tab Variant
+     * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.
+     */
+    setTabVariant() {
+        if (this.size === 'sm') {
+            this._Cre8TabItems.forEach((tab) => {
+                tab.size = 'sm';
+            });
+        }
+    }
+    /**
+     * Set the attributes on tab and tab panel
+     * 1. Sets the index value on the tab items.
+     * 2. Sets the `aria-labelledby` on the tab items.
+     * 3. Set the index and id on the tab-panel to match the tab.
+     */
+    setTabAttributes() {
+        this._Cre8TabItems.forEach((tab, index) => {
+            /* 1 */
+            tab.index = index;
+            /* 2 */
+            const ariaLabelledBy = tab.ariaLabelledBy;
+            const id = ariaLabelledBy || nanoid();
+            tab.ariaLabelledBy = id;
+            /* 3 */
+            const tabPanel = this._Cre8TabPanels[index];
+            tabPanel.index = index;
+        });
+    }
+    /**
+     * Set Active Tab
+     * 1. Sets the active state for the selected tab.
+     * 2. Sets the active state for the tab panel with the same index value as the selected tab.
+     */
+    setActiveTab() {
+        /* 1 */
+        this.activeTab.isActive = true;
+        /* 2 */
+        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);
+        if (activeTabPanel) {
+            activeTabPanel.isActive = true;
+        }
+    }
+    /**
+     * Set Active Tab Focus
+     */
+    setActiveTabFocus() {
+        this.activeTab.shadowRoot?.querySelector('.cre8-c-tab').focus();
+    }
+    /**
+     * Handle Tab Selected
+     * 1. Only continue if event target is a tab
+     * 2. If tab is active, make the previous selected tab inactive.
+     * 3. Set the clicked tab active.
+     * 4. Emit the custom event.
+     * @fires tabSelected
+     */
+    handleTabSelected(event) {
+        const { target } = event;
+        /* 1 */
+        if (this._Cre8TabItems.includes(target)) {
+            /* 2 */
+            if (this.activeTab) {
+                this.removePreviousActiveTab();
+            }
+            /* 3 */
+            this.activeTab = target;
+            const activeIndex = this._Cre8TabItems.findIndex((tab) => tab === this.activeTab);
+            this.activeIndex = activeIndex;
+            this.setActiveTab();
+            /* 4 */
+            this.emitEvent();
+        }
     }
-    this.setActiveTab(), this.setActiveTabFocus(), this.emitEvent();
-  }
-  /**
-   * Set Selected To Next Tab
-   * 1. Get current selected Tab index then deactivate previously selected tab.
-   * 2. If current activeIndex is in last position then move the tab focus to first tab.
-   * 3. Set the active tab and focus.
-   * 4. Emit custom event.
-   * @fires tabChange
-   */
-  setSelectedToNextTab(e) {
-    const t = e.index;
-    this.removePreviousActiveTab();
-    const i = this._Cre8TabItems.length - 1;
-    if (t === i)
-      this.activeIndex = 0, this.activeTab = this._Cre8TabItems[0];
-    else {
-      const s = t + 1;
-      this.activeIndex = s, this.activeTab = this._Cre8TabItems[s];
+    /**
+     * Handle Keydown
+     * 1. If the active tab is not focused then handle the keydown events.
+     * 2. On keydown of the right arrow, make the next tab active.
+     * 3. On keydown of the left arrow, make the previous tab active.
+     * 4. On keydown of the home key, make the first tab active.
+     * 5. On keydown of the end key, make the last tab active.
+     * 6. On keydown of the escape key, remove the focus.
+     * @fires keydown
+     */
+    handleKeydown(event) {
+        /* 1 */
+        const { target } = event;
+        const focused = document.activeElement;
+        if (!focused.matches('cre8-tab')) {
+            return;
+        }
+        switch (event.key) {
+            /* 2 */
+            case 'ArrowRight':
+                event.preventDefault();
+                this.setSelectedToNextTab(target);
+                break;
+            /* 3 */
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.setSelectedToPreviousTab(target);
+                break;
+            /* 4 */
+            case 'Home':
+                event.preventDefault();
+                this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);
+                break;
+            /* 5 */
+            case 'End':
+                event.preventDefault();
+                this.setSelectedToPreviousTab(this._Cre8TabItems[0]);
+                break;
+            /* 6 */
+            case 'Escape':
+                this.activeTab.blur();
+                break;
+            default:
+            // no default
+        }
     }
-    this.setActiveTab(), this.setActiveTabFocus(), this.emitEvent();
-  }
-  /**
-   * Remove Active from Previous Tab
-   * 1. Get current selected Tab index then deactivate previously selected tab
-   * 2. If current activeIndex is in first position then move the tab focus to last tab
-   */
-  removePreviousActiveTab() {
-    this.activeTab.isActive = !1;
-    const e = this._Cre8TabPanels.find((t) => t.index === this.activeTab.index);
-    e && (e.isActive = !1);
-  }
-  /**
-   * Emit custom event
-   */
-  emitEvent() {
-    const e = new CustomEvent("tabChange", {
-      detail: {
-        value: this.activeTab,
-        activeTabIndex: this.activeIndex
-      },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(e);
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-tabs", {
-      "cre8-is-start": this.isStart === !0,
-      "cre8-is-end": this.isEnd === !0,
-      "cre8-c-tabs--full-width": this.fullWidth
-    });
-    return f`
-        <div class="${e}">
+    /**
+     * Set Selected To Previous Tab
+     * 1. Get current selected Tab index then deactivate previously selected tab.
+     * 2. If current activeIndex is in first position then move the tab focus to last tab.
+     * 3. Set the active tab and focus.
+     * 4. Emit custom event.
+     * @fires tabChange
+     */
+    setSelectedToPreviousTab(currentTab) {
+        /* 1 */
+        const activeIndex = currentTab.index;
+        this.removePreviousActiveTab();
+        /* 2 */
+        const tabListLength = this._Cre8TabItems.length - 1;
+        if (activeIndex === 0) {
+            this.activeIndex = tabListLength;
+            this.activeTab = this._Cre8TabItems[tabListLength];
+        }
+        else {
+            const previousIndex = activeIndex - 1;
+            this.activeIndex = previousIndex;
+            this.activeTab = this._Cre8TabItems[previousIndex];
+        }
+        /* 3 */
+        this.setActiveTab();
+        this.setActiveTabFocus();
+        /* 4 */
+        this.emitEvent();
+    }
+    /**
+     * Set Selected To Next Tab
+     * 1. Get current selected Tab index then deactivate previously selected tab.
+     * 2. If current activeIndex is in last position then move the tab focus to first tab.
+     * 3. Set the active tab and focus.
+     * 4. Emit custom event.
+     * @fires tabChange
+     */
+    setSelectedToNextTab(currentTab) {
+        /* 1 */
+        const activeIndex = currentTab.index;
+        this.removePreviousActiveTab();
+        /* 2 */
+        const tabListLength = this._Cre8TabItems.length - 1;
+        if (activeIndex === tabListLength) {
+            this.activeIndex = 0;
+            this.activeTab = this._Cre8TabItems[0];
+        }
+        else {
+            const nextIndex = activeIndex + 1;
+            this.activeIndex = nextIndex;
+            this.activeTab = this._Cre8TabItems[nextIndex];
+        }
+        /* 3 */
+        this.setActiveTab();
+        this.setActiveTabFocus();
+        /* 4 */
+        this.emitEvent();
+    }
+    /**
+     * Remove Active from Previous Tab
+     * 1. Get current selected Tab index then deactivate previously selected tab
+     * 2. If current activeIndex is in first position then move the tab focus to last tab
+     */
+    removePreviousActiveTab() {
+        /* 1 */
+        this.activeTab.isActive = false;
+        /* 2 */
+        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);
+        if (activeTabPanel) {
+            activeTabPanel.isActive = false;
+        }
+    }
+    /**
+     * Emit custom event
+     */
+    emitEvent() {
+        const customEvent = new CustomEvent('tabChange', {
+            detail: {
+                value: this.activeTab,
+                activeTabIndex: this.activeIndex,
+            },
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(customEvent);
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tabs', {
+            'cre8-is-start': this.isStart === true,
+            'cre8-is-end': this.isEnd === true,
+            'cre8-c-tabs--full-width': this.fullWidth,
+        });
+        return html `
+        <div class="${componentClassNames}">
             <div class="cre8-c-tabs__header">
                 <div
                     class="cre8-c-tabs__list"
@@ -286,42 +436,41 @@ const o = class o extends T {
             </div>
         </div>
     `;
-  }
-};
-o.styles = [x];
-let a = o;
-r([
-  d()
-], a.prototype, "size");
-r([
-  d({ type: Boolean, reflect: !0 })
-], a.prototype, "fullWidth");
-r([
-  d({ type: Number })
-], a.prototype, "activeIndex");
-r([
-  c()
-], a.prototype, "activeTab");
-r([
-  c()
-], a.prototype, "isStart");
-r([
-  c()
-], a.prototype, "isEnd");
-r([
-  v()
-], a.prototype, "_Cre8TabItems");
-r([
-  v({ slot: "panel" })
-], a.prototype, "_Cre8TabPanels");
-r([
-  m(".cre8-c-tabs__header")
-], a.prototype, "_Cre8TabsHeader");
-r([
-  m(".cre8-c-tabs__list")
-], a.prototype, "_Cre8TabsHeaderList");
-customElements.get("cre8-tabs") === void 0 && customElements.define("cre8-tabs", a);
-export {
-  a as Cre8Tabs,
-  a as default
-};
+    }
+}
+Cre8Tabs.styles = [styles];
+__decorate([
+    property()
+], Cre8Tabs.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Tabs.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Tabs.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], Cre8Tabs.prototype, "activeTab", void 0);
+__decorate([
+    state()
+], Cre8Tabs.prototype, "isStart", void 0);
+__decorate([
+    state()
+], Cre8Tabs.prototype, "isEnd", void 0);
+__decorate([
+    queryAssignedElements()
+], Cre8Tabs.prototype, "_Cre8TabItems", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'panel' })
+], Cre8Tabs.prototype, "_Cre8TabPanels", void 0);
+__decorate([
+    query('.cre8-c-tabs__header')
+], Cre8Tabs.prototype, "_Cre8TabsHeader", void 0);
+__decorate([
+    query('.cre8-c-tabs__list')
+], Cre8Tabs.prototype, "_Cre8TabsHeaderList", void 0);
+if (customElements.get('cre8-tabs') === undefined) {
+    customElements.define('cre8-tabs', Cre8Tabs);
+}
+export default Cre8Tabs;
+//# sourceMappingURL=tabs.js.map