@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/tabs/tabs.js

@@ -1,951 +1,424 @@
-import { css as b, html as u } from "lit";
-import { property as o, state as d, queryAssignedElements as p, query as g } from "lit/decorators.js";
-import { nanoid as f } from "nanoid";
-import { Cre8Element as v } from "../cre8-element.js";
-const x = b`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+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;
+};
+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;
 /**
- * Visually hidden from display
+ * 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
  */
-/*
-=======
-Animations
-=======
-*/
-: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;
+export class Cre8Tabs extends Cre8Element {
+    /**
+     * Query the document direction value
+     *
+     * _*This property is dynamically set_
+     */
+    get isRTL() {
+        return document.dir === 'rtl';
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
+    /**
+     * 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;
     }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
+    /**
+     * 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);
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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);
     }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+    /**
+     * 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 */
+        this.activeTab = this._Cre8TabItems[this.activeIndex] || this._Cre8TabItems[0];
+        this.setActiveTab();
+        /* 3 */
+        this.setIsStart();
+        this.setIsEnd();
+        /* 4 */
+        this.setTabVariant();
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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 */
+            }
+        });
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    /**
+     * 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 */
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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 */
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    /**
+     * 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;
+        }
     }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
+    /**
+     * 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;
+        }
     }
-  }
-}
-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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*------------------------------------*\\
- #TABS
-\\*------------------------------------*/
-:host {
-  display: block;
-}
-
-/**
- * Tabs header
- */
-.cre8-c-tabs__header {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-  overflow: hidden;
-  /**
-   * Tabs inner where the beginning of the tabs list isn't fully in the viewport
-   */
-}
-.cre8-c-tabs:not(.cre8-is-start) .cre8-c-tabs__header {
-  /**
-   * Left overflow gradient for the tabs list
-   */
-}
-.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__header {
-  /**
-   * Tabs inner where the end of the tabs list isn't fully in the viewport
-   */
-}
-.cre8-c-tabs:not(.cre8-is-end) .cre8-c-tabs__header {
-  /**
-   * Right overflow gradient for the tabs list
-   */
-}
-.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;
-}
-
-/**
- * Tabs list
- * 1) The div that contains the cre8-tab's
- */
-.cre8-c-tabs__list {
-  display: flex;
-  overflow: auto;
-  width: 100%;
-  margin: 0;
-  position: relative;
-  padding: var(--cre8-border-width-focus);
-  /**
-   * Visually hides the scrollbar
-   */
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.cre8-c-tabs__list::-webkit-scrollbar {
-  display: none;
-}
-
-/**
- * Tabs body
- * 1) The div that contains the tab panel content
- */
-.cre8-c-tabs__body {
-  padding-block-start: 1rem;
-  /**
-   * Full Width Variant - border default bar across tabs
-   */
-}
-.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 y = Object.defineProperty, s = (c, t, e, a) => {
-  for (var i = void 0, n = c.length - 1, m; n >= 0; n--)
-    (m = c[n]) && (i = m(t, e, i) || i);
-  return i && y(t, e, i), i;
-};
-let h = 1;
-const l = class l extends v {
-  /**
-   * 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-${h}`, h += 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(t) {
-    t.forEach(async (e, a) => {
-      a === "activeIndex" && this.activeIndex !== e && (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 e = this._Cre8TabItems[this._Cre8TabItems.length - 1].shadowRoot?.querySelector(".cre8-c-tab");
-    if (!e)
-      return !1;
-    const a = e.getBoundingClientRect(), i = window.innerWidth || document.documentElement.clientWidth;
-    return a.left >= 0 && a.right <= i;
-  }
-  /**
-   * 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((t) => {
-      t.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((t, e) => {
-      t.index = e;
-      const i = t.ariaLabelledBy || f();
-      t.ariaLabelledBy = i;
-      const n = this._Cre8TabPanels[e];
-      n.index = e;
-    });
-  }
-  /**
-   * 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 t = this._Cre8TabPanels.find((e) => e.index === this.activeTab.index);
-    t && (t.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(t) {
-    const { target: e } = t;
-    if (this._Cre8TabItems.includes(e)) {
-      this.activeTab && this.removePreviousActiveTab(), this.activeTab = e;
-      const a = this._Cre8TabItems.findIndex((i) => i === this.activeTab);
-      this.activeIndex = a, this.setActiveTab(), this.emitEvent();
+    /**
+     * 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();
+        }
+    }
+    /**
+     * 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
+        }
     }
-  }
-  /**
-   * 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(t) {
-    const { target: e } = t;
-    if (document.activeElement.matches("cre8-tab"))
-      switch (t.key) {
+    /**
+     * 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 */
-        case "ArrowRight":
-          t.preventDefault(), this.setSelectedToNextTab(e);
-          break;
+        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 */
-        case "ArrowLeft":
-          t.preventDefault(), this.setSelectedToPreviousTab(e);
-          break;
+        this.setActiveTab();
+        this.setActiveTabFocus();
         /* 4 */
-        case "Home":
-          t.preventDefault(), this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);
-          break;
-        /* 5 */
-        case "End":
-          t.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(t) {
-    const e = t.index;
-    this.removePreviousActiveTab();
-    const a = this._Cre8TabItems.length - 1;
-    if (e === 0)
-      this.activeIndex = a, this.activeTab = this._Cre8TabItems[a];
-    else {
-      const i = e - 1;
-      this.activeIndex = i, this.activeTab = this._Cre8TabItems[i];
+        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(t) {
-    const e = t.index;
-    this.removePreviousActiveTab();
-    const a = this._Cre8TabItems.length - 1;
-    if (e === a)
-      this.activeIndex = 0, this.activeTab = this._Cre8TabItems[0];
-    else {
-      const i = e + 1;
-      this.activeIndex = i, this.activeTab = this._Cre8TabItems[i];
+    /**
+     * 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;
+        }
     }
-    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 t = this._Cre8TabPanels.find((e) => e.index === this.activeTab.index);
-    t && (t.isActive = !1);
-  }
-  /**
-   * Emit custom event
-   */
-  emitEvent() {
-    const t = new CustomEvent("tabChange", {
-      detail: {
-        value: this.activeTab,
-        activeTabIndex: this.activeIndex
-      },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(t);
-  }
-  render() {
-    const t = 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 u`
-        <div class="${t}">
+    /**
+     * 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"
@@ -963,42 +436,41 @@ const l = class l extends v {
             </div>
         </div>
     `;
-  }
-};
-l.styles = [x];
-let r = l;
-s([
-  o()
-], r.prototype, "size");
-s([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "fullWidth");
-s([
-  o({ type: Number })
-], r.prototype, "activeIndex");
-s([
-  d()
-], r.prototype, "activeTab");
-s([
-  d()
-], r.prototype, "isStart");
-s([
-  d()
-], r.prototype, "isEnd");
-s([
-  p()
-], r.prototype, "_Cre8TabItems");
-s([
-  p({ slot: "panel" })
-], r.prototype, "_Cre8TabPanels");
-s([
-  g(".cre8-c-tabs__header")
-], r.prototype, "_Cre8TabsHeader");
-s([
-  g(".cre8-c-tabs__list")
-], r.prototype, "_Cre8TabsHeaderList");
-customElements.get("cre8-tabs") === void 0 && customElements.define("cre8-tabs", r);
-export {
-  r as Cre8Tabs,
-  r 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