@six-group/ui-library 0.0.0-insider.e5360cd → 0.0.0-insider.e8b5a11

package/dist/cjs/six-tab-group.cjs.entry.js

@@ -1,9 +1,7 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-900437fc.js');
-const scroll = require('./scroll-2c4200dc.js');
+var index = require('./index-B_stPhJp.js');
+var scroll = require('./scroll-BQR9FxnJ.js');
 
 /**
  * Animates a given `element` from the position and dimension of `fromElement` to
@@ -17,234 +15,262 @@ const scroll = require('./scroll-2c4200dc.js');
  *
  */
 function flipAnimate(element, fromElement, options = {
-  duration: 150,
-  easing: 'ease',
-  fill: 'both',
+    duration: 150,
+    easing: 'ease',
+    fill: 'both',
 }) {
-  const dimensionsTo = fromElement.getBoundingClientRect();
-  const dimensionsFrom = element.getBoundingClientRect();
-  const deltaX = dimensionsTo.left - dimensionsFrom.left;
-  const deltaY = dimensionsTo.top - dimensionsFrom.top;
-  const deltaW = dimensionsTo.width / dimensionsFrom.width;
-  const deltaH = dimensionsTo.height / dimensionsFrom.height;
-  element.animate([
-    {
-      transformOrigin: 'top left',
-      transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,
-    },
-    {
-      transformOrigin: 'top left',
-      transform: 'none',
-    },
-  ], options);
+    const dimensionsTo = fromElement.getBoundingClientRect();
+    const dimensionsFrom = element.getBoundingClientRect();
+    const deltaX = dimensionsTo.left - dimensionsFrom.left;
+    const deltaY = dimensionsTo.top - dimensionsFrom.top;
+    const deltaW = dimensionsTo.width / dimensionsFrom.width;
+    const deltaH = dimensionsTo.height / dimensionsFrom.height;
+    element.animate([
+        {
+            transformOrigin: 'top left',
+            transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,
+        },
+        {
+            transformOrigin: 'top left',
+            transform: 'none',
+        },
+    ], options);
 }
 
-const sixTabGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";
+const sixTabGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";
 
 const SixTabGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixTabShow = index.createEvent(this, "six-tab-show", 7);
-    this.sixTabHide = index.createEvent(this, "six-tab-hide", 7);
-    this.handleClick = (event) => {
-      const target = event.target;
-      const tab = target.closest('six-tab');
-      const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
-      // Ensure the target tab is in this tab group
-      if (tabGroup !== this.host) {
-        return false;
-      }
-      if (tab != null) {
-        this.setActiveTab(tab);
-      }
-    };
-    this.handleKeyDown = (event) => {
-      if (this.nav == null)
-        return;
-      const target = event.target;
-      const tab = target.closest('six-tab');
-      const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
-      // Ensure the target tab is in this tab group
-      if (tabGroup !== this.host) {
-        return false;
-      }
-      // Move focus left or right
-      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-        const activeEl = document.activeElement;
-        if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {
-          const tabs = this.getAllTabs();
-          let index = tabs.indexOf(activeEl);
-          if (event.key === 'Home') {
-            index = 0;
-          }
-          else if (event.key === 'End') {
-            index = tabs.length - 1;
-          }
-          else if (event.key === 'ArrowLeft') {
-            index = Math.max(0, index - 1);
-          }
-          else if (event.key === 'ArrowRight') {
-            index = Math.min(tabs.length - 1, index + 1);
-          }
-          tabs[index].setFocus({ preventScroll: true });
-          this.setActiveTab(tabs[index]);
-          if (['top', 'bottom'].includes(this.placement)) {
-            scroll.scrollIntoView(tabs[index], this.nav, 'horizontal');
-          }
-          event.preventDefault();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixTabShow = index.createEvent(this, "six-tab-show");
+        this.sixTabHide = index.createEvent(this, "six-tab-hide");
+        this.hasLeftControl = false;
+        this.hasRightControl = false;
+        /** The placement of the tabs. */
+        this.placement = 'top';
+        /** Disables the scroll arrows that appear when tabs overflow. */
+        this.noScrollControls = false;
+        this.handleClick = (event) => {
+            const target = event.target;
+            const tab = target.closest('six-tab');
+            const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
+            // Ensure the target tab is in this tab group
+            if (tabGroup !== this.host) {
+                return false;
+            }
+            if (tab != null) {
+                this.setActiveTab(tab);
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (this.nav == null)
+                return;
+            const target = event.target;
+            const tab = target.closest('six-tab');
+            const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
+            // Ensure the target tab is in this tab group
+            if (tabGroup !== this.host) {
+                return false;
+            }
+            // Move focus left or right
+            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+                const activeEl = document.activeElement;
+                if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {
+                    const tabs = this.getAllTabs();
+                    let index = tabs.indexOf(activeEl);
+                    if (event.key === 'Home') {
+                        index = 0;
+                    }
+                    else if (event.key === 'End') {
+                        index = tabs.length - 1;
+                    }
+                    else if (event.key === 'ArrowLeft') {
+                        index = Math.max(0, index - 1);
+                    }
+                    else if (event.key === 'ArrowRight') {
+                        index = Math.min(tabs.length - 1, index + 1);
+                    }
+                    tabs[index].setFocus({ preventScroll: true });
+                    this.setActiveTab(tabs[index]);
+                    if (['top', 'bottom'].includes(this.placement)) {
+                        scroll.scrollIntoView(tabs[index], this.nav, 'horizontal');
+                    }
+                    event.preventDefault();
+                }
+            }
+        };
+        this.handleScrollLeft = () => {
+            if (this.nav == null)
+                return;
+            this.nav.scroll({
+                left: this.nav.scrollLeft - this.nav.clientWidth,
+                behavior: 'smooth',
+            });
+        };
+        this.handleScrollRight = () => {
+            if (this.nav == null)
+                return;
+            this.nav.scroll({
+                left: this.nav.scrollLeft + this.nav.clientWidth,
+                behavior: 'smooth',
+            });
+        };
+    }
+    handleNoScrollControlsChange() {
+        this.updateScrollControls();
+    }
+    componentDidLoad() {
+        if (this.tabGroup == null || this.nav == null)
+            return;
+        // Set initial tab state when the tabs first become visible
+        const observer = new IntersectionObserver((entries, observer) => {
+            if (entries[0].intersectionRatio > 0) {
+                this.setAriaLabels();
+                this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
+                observer.unobserve(entries[0].target);
+            }
+        });
+        observer.observe(this.host);
+        this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
+        this.resizeObserver.observe(this.nav);
+        requestAnimationFrame(() => this.updateScrollControls());
+        this.nav.addEventListener('scroll', () => {
+            if (this.nav == null) {
+                return;
+            }
+            this.hasRightControl = this.calculateRightControlVisibility();
+            this.hasLeftControl = this.calculateLeftControlVisibility();
+        });
+        // Update aria labels if the DOM changes
+        this.mutationObserver = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                return !['aria-labelledby', 'aria-controls'].includes((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : '');
+            })) {
+                setTimeout(() => this.setAriaLabels());
+            }
+        });
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {
+            return;
         }
-      }
-    };
-    this.handleScrollLeft = () => {
-      if (this.nav == null)
-        return;
-      this.nav.scroll({
-        left: this.nav.scrollLeft - this.nav.clientWidth,
-        behavior: 'smooth',
-      });
-    };
-    this.handleScrollRight = () => {
-      if (this.nav == null)
-        return;
-      this.nav.scroll({
-        left: this.nav.scrollLeft + this.nav.clientWidth,
-        behavior: 'smooth',
-      });
-    };
-    this.hasScrollControls = false;
-    this.placement = 'top';
-    this.noScrollControls = false;
-  }
-  handleNoScrollControlsChange() {
-    this.updateScrollControls();
-  }
-  componentDidLoad() {
-    if (this.tabGroup == null || this.nav == null)
-      return;
-    // Set initial tab state when the tabs first become visible
-    const observer = new IntersectionObserver((entries, observer) => {
-      if (entries[0].intersectionRatio > 0) {
-        this.setAriaLabels();
-        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
-        observer.unobserve(entries[0].target);
-      }
-    });
-    observer.observe(this.host);
-    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
-    this.resizeObserver.observe(this.nav);
-    requestAnimationFrame(() => this.updateScrollControls());
-    // Update aria labels if the DOM changes
-    this.mutationObserver = new MutationObserver((mutations) => {
-      if (mutations.some((mutation) => {
+        this.mutationObserver.disconnect();
+        this.resizeObserver.unobserve(this.nav);
+    }
+    /** Shows the specified tab panel. */
+    async show(panel) {
+        const tabs = this.getAllTabs();
+        const tab = tabs.find((el) => el.panel === panel);
+        if (tab != null) {
+            this.setActiveTab(tab);
+        }
+    }
+    getAllTabs(includeDisabled = false) {
         var _a;
-        return !['aria-labelledby', 'aria-controls'].includes((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : '');
-      })) {
-        setTimeout(() => this.setAriaLabels());
-      }
-    });
-    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
-  }
-  disconnectedCallback() {
-    if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {
-      return;
+        const slot = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot == null)
+            return [];
+        return [...slot.assignedElements()].filter((el) => {
+            return includeDisabled
+                ? el.tagName.toLowerCase() === 'six-tab'
+                : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;
+        });
     }
-    this.mutationObserver.disconnect();
-    this.resizeObserver.unobserve(this.nav);
-  }
-  /** Shows the specified tab panel. */
-  async show(panel) {
-    const tabs = this.getAllTabs();
-    const tab = tabs.find((el) => el.panel === panel);
-    if (tab != null) {
-      this.setActiveTab(tab);
+    getAllPanels() {
+        var _a;
+        const slot = (_a = this.body) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot == null)
+            return [];
+        return [...slot.assignedElements()].filter((el) => el.tagName.toLowerCase() === 'six-tab-panel');
     }
-  }
-  getAllTabs(includeDisabled = false) {
-    var _a;
-    const slot = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    if (slot == null)
-      return [];
-    return [...slot.assignedElements()].filter((el) => {
-      return includeDisabled
-        ? el.tagName.toLowerCase() === 'six-tab'
-        : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;
-    });
-  }
-  getAllPanels() {
-    var _a;
-    const slot = (_a = this.body) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    if (slot == null)
-      return [];
-    return [...slot.assignedElements()].filter((el) => el.tagName.toLowerCase() === 'six-tab-panel');
-  }
-  getActiveTab() {
-    return this.getAllTabs().find((el) => el.active);
-  }
-  updateScrollControls() {
-    if (this.nav == null)
-      return;
-    this.hasScrollControls = this.noScrollControls
-      ? false
-      : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
-  }
-  setActiveTab(tab, emitEvents = true) {
-    var _a, _b, _c;
-    if (this.nav == null)
-      return;
-    const newIndicator = (_a = tab === null || tab === void 0 ? void 0 : tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab__indicator');
-    const oldIndicator = (_c = (_b = this.getActiveTab()) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.tab__indicator');
-    if (oldIndicator != null && newIndicator != null) {
-      flipAnimate(newIndicator, oldIndicator);
+    getActiveTab() {
+        return this.getAllTabs().find((el) => el.active);
     }
-    if (tab !== this.activeTab && !tab.disabled) {
-      const previousTab = this.activeTab;
-      this.activeTab = tab;
-      // Sync tabs and panels
-      this.getAllTabs().map((el) => (el.active = el === this.activeTab));
-      this.getAllPanels().map((el) => { var _a; return (el.active = el.name === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)); });
-      if (['top', 'bottom'].includes(this.placement)) {
-        scroll.scrollIntoView(this.activeTab, this.nav, 'horizontal');
-      }
-      // Emit events
-      if (emitEvents) {
-        if (previousTab != null) {
-          this.sixTabHide.emit({ name: previousTab.panel });
+    calculateRightControlVisibility() {
+        var _a, _b, _c;
+        if (this.nav == null) {
+            return false;
         }
-        this.sixTabShow.emit({ name: this.activeTab.panel });
-      }
+        return Math.abs((_a = this.nav) === null || _a === void 0 ? void 0 : _a.scrollLeft) + ((_b = this.nav) === null || _b === void 0 ? void 0 : _b.clientWidth) < ((_c = this.nav) === null || _c === void 0 ? void 0 : _c.scrollWidth) - 1;
+    }
+    calculateLeftControlVisibility() {
+        var _a;
+        if (this.nav == null) {
+            return false;
+        }
+        return Math.abs((_a = this.nav) === null || _a === void 0 ? void 0 : _a.scrollLeft) > 0;
+    }
+    updateScrollControls() {
+        if (this.nav == null)
+            return;
+        this.hasRightControl = this.noScrollControls
+            ? false
+            : ['top', 'bottom'].includes(this.placement) && this.calculateRightControlVisibility();
+        this.hasLeftControl = this.noScrollControls
+            ? false
+            : ['top', 'bottom'].includes(this.placement) && this.calculateLeftControlVisibility();
+    }
+    setActiveTab(tab, emitEvents = true) {
+        var _a, _b, _c;
+        if (this.nav == null)
+            return;
+        const newIndicator = (_a = tab === null || tab === void 0 ? void 0 : tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab__indicator');
+        const oldIndicator = (_c = (_b = this.getActiveTab()) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.tab__indicator');
+        if (oldIndicator != null && newIndicator != null) {
+            flipAnimate(newIndicator, oldIndicator);
+        }
+        if (tab !== this.activeTab && !tab.disabled) {
+            const previousTab = this.activeTab;
+            this.activeTab = tab;
+            // Sync tabs and panels
+            this.getAllTabs().map((el) => (el.active = el === this.activeTab));
+            this.getAllPanels().map((el) => { var _a; return (el.active = el.name === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)); });
+            if (['top', 'bottom'].includes(this.placement)) {
+                scroll.scrollIntoView(this.activeTab, this.nav, 'horizontal');
+            }
+            // Emit events
+            if (emitEvents) {
+                if (previousTab != null) {
+                    this.sixTabHide.emit({ name: previousTab.panel });
+                }
+                this.sixTabShow.emit({ name: this.activeTab.panel });
+            }
+        }
+    }
+    setAriaLabels() {
+        const tabs = this.getAllTabs();
+        const panels = this.getAllPanels();
+        // Link each tab with its corresponding panel
+        tabs.map((tab) => {
+            var _a, _b;
+            const panel = panels.find((el) => el.name === tab.panel);
+            if (panel != null) {
+                tab.setAttribute('aria-controls', (_a = panel.getAttribute('id')) !== null && _a !== void 0 ? _a : '');
+                panel.setAttribute('aria-labelledby', (_b = tab.getAttribute('id')) !== null && _b !== void 0 ? _b : '');
+            }
+        });
+    }
+    render() {
+        return (index.h("div", { key: '50cbef0781a3cb02c56dd3e912f82889b5da1937', part: "base", ref: (el) => (this.tabGroup = el), class: {
+                'tab-group': true,
+                // Placements
+                'tab-group--top': this.placement === 'top',
+                'tab-group--bottom': this.placement === 'bottom',
+                'tab-group--left': this.placement === 'left',
+                'tab-group--right': this.placement === 'right',
+                'tab-group--has-scroll-controls': this.hasRightControl || this.hasLeftControl,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("div", { key: '6262c15276def35075129c8f1431094dbecc7ecf', class: "tab-group__nav-container" }, this.hasLeftControl && (index.h("six-icon-button", { key: '9ca0654f604fd2c5c2a38fe3036d95746f7ec1e0', class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })), index.h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, index.h("div", { key: '288b14b0bbc790f1ae54e2a26693e9b103002715', ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, index.h("slot", { key: '249ef2f5d67dd3abf35b07028c9d2fe3798ef1ea', name: "nav" }))), this.hasRightControl && (index.h("six-icon-button", { key: '7cd9a161b9c5cfe8470c2c8311e1767b48ce61ed', class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), index.h("div", { key: 'f2f82d9a7730f577fe4ed4a77a98929487f88dec', ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, index.h("slot", { key: 'ca9dfe2b30a558eb1b95a20aee81978b00b9be2d' }))));
     }
-  }
-  setAriaLabels() {
-    const tabs = this.getAllTabs();
-    const panels = this.getAllPanels();
-    // Link each tab with its corresponding panel
-    tabs.map((tab) => {
-      var _a, _b;
-      const panel = panels.find((el) => el.name === tab.panel);
-      if (panel != null) {
-        tab.setAttribute('aria-controls', (_a = panel.getAttribute('id')) !== null && _a !== void 0 ? _a : '');
-        panel.setAttribute('aria-labelledby', (_b = tab.getAttribute('id')) !== null && _b !== void 0 ? _b : '');
-      }
-    });
-  }
-  render() {
-    return (index.h("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
-        'tab-group': true,
-        // Placements
-        'tab-group--top': this.placement === 'top',
-        'tab-group--bottom': this.placement === 'bottom',
-        'tab-group--left': this.placement === 'left',
-        'tab-group--right': this.placement === 'right',
-        'tab-group--has-scroll-controls': this.hasScrollControls,
-      }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("div", { class: "tab-group__nav-container" }, this.hasScrollControls && (index.h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })), index.h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, index.h("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, index.h("slot", { name: "nav" }))), this.hasScrollControls && (index.h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), index.h("div", { ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "noScrollControls": ["handleNoScrollControlsChange"]
-  }; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "noScrollControls": ["handleNoScrollControlsChange"]
+    }; }
 };
 SixTabGroup.style = sixTabGroupCss;
 
 exports.six_tab_group = SixTabGroup;
+//# sourceMappingURL=six-tab-group.entry.cjs.js.map
 
 //# sourceMappingURL=six-tab-group.cjs.entry.js.map

package/dist/cjs/six-tab-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-tab-group.entry.cjs.js","mappings":";;;;;;;AAAA;;;;;;;;;;;SAWgB,WAAW,CACzB,OAAgB,EAChB,WAAoB,EACpB,UAAoC;EAClC,QAAQ,EAAE,GAAG;EACb,MAAM,EAAE,MAAM;EACd,IAAI,EAAE,MAAM;CACb;EAED,MAAM,YAAY,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC;EACzD,MAAM,cAAc,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;EAEvD,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC;EACvD,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC;EACrD,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;EACzD,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;EAE3D,OAAO,CAAC,OAAO,CACb;IACE;MACE,eAAe,EAAE,UAAU;MAC3B,SAAS,EAAE,aAAa,MAAM,OAAO,MAAM,aAAa,MAAM,KAAK,MAAM,GAAG;KAC7E;IACD;MACE,eAAe,EAAE,UAAU;MAC3B,SAAS,EAAE,MAAM;KAClB;GACF,EACD,OAAO,CACR,CAAC;AACJ;;ACzCA,MAAM,cAAc,GAAG,sxDAAsxD;;MCiChyD,WAAW;;;;;IAqGd,gBAAW,GAAG,CAAC,KAAiB;MACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;MAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;MACtC,MAAM,QAAQ,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC,eAAe,CAAC,CAAC;;MAG/C,IAAI,QAAQ,KAAK,IAAI,CAAC,IAAI,EAAE;QAC1B,OAAO,KAAK,CAAC;OACd;MAED,IAAI,GAAG,IAAI,IAAI,EAAE;QACf,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;OACxB;KACF,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB;MAC3C,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;QAAE,OAAO;MAE7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;MAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;MACtC,MAAM,QAAQ,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC,eAAe,CAAC,CAAC;;MAG/C,IAAI,QAAQ,KAAK,IAAI,CAAC,IAAI,EAAE;QAC1B,OAAO,KAAK,CAAC;OACd;;MAGD,IAAI,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QAC1F,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAkC,CAAC;QAE7D,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE;UAC5D,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;UAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;UAEnC,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;YACxB,KAAK,GAAG,CAAC,CAAC;WACX;eAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YAC9B,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;WACzB;eAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACpC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;WAChC;eAAM,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YACrC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;WAC9C;UAED,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;UAC9C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;UAE/B,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAC9CA,qBAAc,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;WACrD;UAED,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;OACF;KACF,CAAC;IAEM,qBAAgB,GAAG;MACzB,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;QAAE,OAAO;MAE7B,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;QAChD,QAAQ,EAAE,QAAQ;OACnB,CAAC,CAAC;KACJ,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;QAAE,OAAO;MAE7B,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;QAChD,QAAQ,EAAE,QAAQ;OACnB,CAAC,CAAC;KACJ,CAAC;6BAnK2B,KAAK;qBAGuB,KAAK;4BAGnC,KAAK;;EAGhC,4BAA4B;IAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAQD,gBAAgB;IACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;MAAE,OAAO;;IAGtD,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ;MAC1D,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE;QACpC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACtE,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;OACvC;KACF,CAAC,CAAC;IACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAC5E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtC,qBAAqB,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;;IAGzD,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS;MACrD,IACE,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ;;QACtB,OAAO,CAAC,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,QAAQ,CAAC,MAAA,QAAQ,CAAC,aAAa,mCAAI,EAAE,CAAC,CAAC;OACrF,CAAC,EACF;QACA,UAAU,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;OACxC;KACF,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;GAChG;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;MAC7G,OAAO;KACR;IACD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IACnC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GACzC;;EAID,MAAM,IAAI,CAAC,KAAa;IACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAElD,IAAI,GAAG,IAAI,IAAI,EAAE;MACf,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;KACxB;GACF;EAEO,UAAU,CAAC,eAAe,GAAG,KAAK;;IACxC,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,IAAI,IAAI,IAAI,IAAI;MAAE,OAAO,EAAE,CAAC;IAE5B,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAW;MACrD,OAAO,eAAe;UAClB,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS;UACtC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,IAAI,CAAE,EAAwB,CAAC,QAAQ,CAAC;KACnF,CAAwB,CAAC;GAC3B;EAEO,YAAY;;IAClB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,IAAI,IAAI,IAAI,IAAI;MAAE,OAAO,EAAE,CAAC;IAC5B,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAW,KAAK,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,eAAe,CAEvG,CAAC;GACH;EAEO,YAAY;IAClB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC;GAClD;EA6EO,oBAAoB;IAC1B,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;MAAE,OAAO;IAE7B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB;QAC1C,KAAK;QACL,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC;GAC/F;EAEO,YAAY,CAAC,GAAsB,EAAE,UAAU,GAAG,IAAI;;IAC5D,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;MAAE,OAAO;IAE7B,MAAM,YAAY,GAAG,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvE,MAAM,YAAY,GAAG,MAAA,MAAA,IAAI,CAAC,YAAY,EAAE,0CAAE,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAEvF,IAAI,YAAY,IAAI,IAAI,IAAI,YAAY,IAAI,IAAI,EAAE;MAChD,WAAW,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;KACzC;IAED,IAAI,GAAG,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE;MAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;MACnC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;;MAGrB,IAAI,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,MAAM,GAAG,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;MACnE,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,eAAK,QAAC,EAAE,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,MAAK,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAA,EAAC,EAAA,CAAC,CAAC;MAEjF,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;QAC9CA,qBAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;OACxD;;MAGD,IAAI,UAAU,EAAE;QACd,IAAI,WAAW,IAAI,IAAI,EAAE;UACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;SACnD;QAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC;OACtD;KACF;GACF;EAEO,aAAa;IACnB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;;IAGnC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG;;MACX,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;MACzD,IAAI,KAAK,IAAI,IAAI,EAAE;QACjB,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,MAAA,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC,CAAC;QAClE,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAA,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC,CAAC;OACrE;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACEC,iBACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EACjC,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;;QAGjB,gBAAgB,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;QAC1C,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;QAChD,iBAAiB,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM;QAC5C,kBAAkB,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;QAE9C,gCAAgC,EAAE,IAAI,CAAC,iBAAiB;OACzD,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,IAE7BA,iBAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,iBAAiB,KACrBA,6BACE,KAAK,EAAC,yDAAyD,EAC/D,WAAW,EAAC,oBAAoB,EAChC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,EACDA,iBAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,gBAAgB,IAC5EA,iBAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,IACpFA,kBAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF,EACL,IAAI,CAAC,iBAAiB,KACrBA,6BACE,KAAK,EAAC,0DAA0D,EAChE,WAAW,EAAC,oBAAoB,EAChC,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAC/B,CACH,CACG,EAENA,iBAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB,IACrEA,qBAAQ,CACJ,CACF,EACN;GACH;;;;;;;;;;","names":["scrollIntoView","h"],"sources":["src/utils/animation.ts","src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["/**\n * Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n *\n * @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n *\n * @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n *\n */\nexport function flipAnimate(\n  element: Element,\n  fromElement: Element,\n  options: KeyframeAnimationOptions = {\n    duration: 150,\n    easing: 'ease',\n    fill: 'both',\n  }\n) {\n  const dimensionsTo = fromElement.getBoundingClientRect();\n  const dimensionsFrom = element.getBoundingClientRect();\n\n  const deltaX = dimensionsTo.left - dimensionsFrom.left;\n  const deltaY = dimensionsTo.top - dimensionsFrom.top;\n  const deltaW = dimensionsTo.width / dimensionsFrom.width;\n  const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n  element.animate(\n    [\n      {\n        transformOrigin: 'top left',\n        transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n      },\n      {\n        transformOrigin: 'top left',\n        transform: 'none',\n      },\n    ],\n    options\n  );\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n  display: block;\n}\n\n.tab-group {\n  display: flex;\n  border: solid 1px transparent;\n  border-radius: 0;\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n  }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n  position: relative;\n  padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n  left: 0;\n}\n\n.tab-group__scroll-button--right {\n  right: 0;\n}\n\n// TOP\n.tab-group--top {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group__body {\n    order: 2;\n  }\n}\n\n// Bottom\n.tab-group--bottom {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group__body {\n    order: 1;\n  }\n}\n\n// Left\n\n.tab-group--left {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n}\n\n// Right\n.tab-group--right {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { flipAnimate } from '../../utils/animation';\n\nexport interface SixTabShowPayload {\n  name: string;\n}\n\nexport interface SixTabHidePayload {\n  name: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n *\n * @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n */\n@Component({\n  tag: 'six-tab-group',\n  styleUrl: 'six-tab-group.scss',\n  shadow: true,\n})\nexport class SixTabGroup {\n  private activeTab?: HTMLSixTabElement;\n  private body?: HTMLElement;\n  private mutationObserver?: MutationObserver;\n  private nav?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private tabGroup?: HTMLElement;\n  private tabs?: HTMLElement;\n\n  @Element() host!: HTMLSixTabGroupElement;\n\n  @State() hasScrollControls = false;\n\n  /** The placement of the tabs. */\n  @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  /** Disables the scroll arrows that appear when tabs overflow. */\n  @Prop() noScrollControls = false;\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n  /** Emitted when a tab is hidden. */\n  @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n  componentDidLoad() {\n    if (this.tabGroup == null || this.nav == null) return;\n\n    // Set initial tab state when the tabs first become visible\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    // Update aria labels if the DOM changes\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n    });\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {\n      return;\n    }\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  }\n\n  private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n    const slot = this.tabs?.querySelector('slot');\n    if (slot == null) return [];\n\n    return [...slot.assignedElements()].filter((el: Element) => {\n      return includeDisabled\n        ? el.tagName.toLowerCase() === 'six-tab'\n        : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n    }) as [HTMLSixTabElement];\n  }\n\n  private getAllPanels(): HTMLSixTabPanelElement[] {\n    const slot = this.body?.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n      HTMLSixTabPanelElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.nav == null) return;\n\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    // Move focus left or right\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const activeEl = document.activeElement as HTMLSixTabElement;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (event.key === 'ArrowLeft') {\n          index = Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n\n        tabs[index].setFocus({ preventScroll: true });\n        this.setActiveTab(tabs[index]);\n\n        if (['top', 'bottom'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal');\n        }\n\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleScrollLeft = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft - this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private handleScrollRight = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft + this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private updateScrollControls() {\n    if (this.nav == null) return;\n\n    this.hasScrollControls = this.noScrollControls\n      ? false\n      : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n  }\n\n  private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n    if (this.nav == null) return;\n\n    const newIndicator = tab?.shadowRoot?.querySelector('.tab__indicator');\n    const oldIndicator = this.getActiveTab()?.shadowRoot?.querySelector('.tab__indicator');\n\n    if (oldIndicator != null && newIndicator != null) {\n      flipAnimate(newIndicator, oldIndicator);\n    }\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n\n      if (['top', 'bottom'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab != null) {\n          this.sixTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.sixTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel != null) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        ref={(el) => (this.tabGroup = el)}\n        class={{\n          'tab-group': true,\n\n          // Placements\n          'tab-group--top': this.placement === 'top',\n          'tab-group--bottom': this.placement === 'bottom',\n          'tab-group--left': this.placement === 'left',\n          'tab-group--right': this.placement === 'right',\n\n          'tab-group--has-scroll-controls': this.hasScrollControls,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <div class=\"tab-group__nav-container\">\n          {this.hasScrollControls && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_left\"\n              onClick={this.handleScrollLeft}\n            />\n          )}\n          <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n            <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n              <slot name=\"nav\" />\n            </div>\n          </div>\n          {this.hasScrollControls && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_right\"\n              onClick={this.handleScrollRight}\n            />\n          )}\n        </div>\n\n        <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-tab-group.entry.cjs.js","mappings":"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","names":["scrollIntoView","h"],"sources":["src/utils/animation.ts","src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["/**\n * Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n *\n * @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n *\n * @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n *\n */\nexport function flipAnimate(\n  element: Element,\n  fromElement: Element,\n  options: KeyframeAnimationOptions = {\n    duration: 150,\n    easing: 'ease',\n    fill: 'both',\n  }\n) {\n  const dimensionsTo = fromElement.getBoundingClientRect();\n  const dimensionsFrom = element.getBoundingClientRect();\n\n  const deltaX = dimensionsTo.left - dimensionsFrom.left;\n  const deltaY = dimensionsTo.top - dimensionsFrom.top;\n  const deltaW = dimensionsTo.width / dimensionsFrom.width;\n  const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n  element.animate(\n    [\n      {\n        transformOrigin: 'top left',\n        transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n      },\n      {\n        transformOrigin: 'top left',\n        transform: 'none',\n      },\n    ],\n    options\n  );\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n  display: block;\n}\n\n.tab-group {\n  display: flex;\n  border: solid 1px transparent;\n  border-radius: 0;\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n  }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n  position: relative;\n  padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n  left: 0;\n}\n\n.tab-group__scroll-button--right {\n  right: 0;\n}\n\n// TOP\n.tab-group--top {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group__body {\n    order: 2;\n  }\n}\n\n// Bottom\n.tab-group--bottom {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group__body {\n    order: 1;\n  }\n}\n\n// Left\n\n.tab-group--left {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n}\n\n// Right\n.tab-group--right {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { flipAnimate } from '../../utils/animation';\n\nexport interface SixTabShowPayload {\n  name: string;\n}\n\nexport interface SixTabHidePayload {\n  name: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n *\n * @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n */\n@Component({\n  tag: 'six-tab-group',\n  styleUrl: 'six-tab-group.scss',\n  shadow: true,\n})\nexport class SixTabGroup {\n  private activeTab?: HTMLSixTabElement;\n  private body?: HTMLElement;\n  private mutationObserver?: MutationObserver;\n  private nav?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private tabGroup?: HTMLElement;\n  private tabs?: HTMLElement;\n\n  @Element() host!: HTMLSixTabGroupElement;\n\n  @State() hasLeftControl = false;\n  @State() hasRightControl = false;\n\n  /** The placement of the tabs. */\n  @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  /** Disables the scroll arrows that appear when tabs overflow. */\n  @Prop() noScrollControls = false;\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n  /** Emitted when a tab is hidden. */\n  @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n  componentDidLoad() {\n    if (this.tabGroup == null || this.nav == null) return;\n\n    // Set initial tab state when the tabs first become visible\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    this.nav.addEventListener('scroll', () => {\n      if (this.nav == null) {\n        return;\n      }\n      this.hasRightControl = this.calculateRightControlVisibility();\n\n      this.hasLeftControl = this.calculateLeftControlVisibility();\n    });\n\n    // Update aria labels if the DOM changes\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n    });\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {\n      return;\n    }\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  }\n\n  private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n    const slot = this.tabs?.querySelector('slot');\n    if (slot == null) return [];\n\n    return [...slot.assignedElements()].filter((el: Element) => {\n      return includeDisabled\n        ? el.tagName.toLowerCase() === 'six-tab'\n        : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n    }) as [HTMLSixTabElement];\n  }\n\n  private getAllPanels(): HTMLSixTabPanelElement[] {\n    const slot = this.body?.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n      HTMLSixTabPanelElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.nav == null) return;\n\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    // Move focus left or right\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const activeEl = document.activeElement as HTMLSixTabElement;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (event.key === 'ArrowLeft') {\n          index = Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n\n        tabs[index].setFocus({ preventScroll: true });\n        this.setActiveTab(tabs[index]);\n\n        if (['top', 'bottom'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal');\n        }\n\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleScrollLeft = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft - this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private handleScrollRight = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft + this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private calculateRightControlVisibility() {\n    if (this.nav == null) {\n      return false;\n    }\n    return Math.abs(this.nav?.scrollLeft) + this.nav?.clientWidth < this.nav?.scrollWidth - 1;\n  }\n\n  private calculateLeftControlVisibility() {\n    if (this.nav == null) {\n      return false;\n    }\n    return Math.abs(this.nav?.scrollLeft) > 0;\n  }\n\n  private updateScrollControls() {\n    if (this.nav == null) return;\n\n    this.hasRightControl = this.noScrollControls\n      ? false\n      : ['top', 'bottom'].includes(this.placement) && this.calculateRightControlVisibility();\n\n    this.hasLeftControl = this.noScrollControls\n      ? false\n      : ['top', 'bottom'].includes(this.placement) && this.calculateLeftControlVisibility();\n  }\n\n  private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n    if (this.nav == null) return;\n\n    const newIndicator = tab?.shadowRoot?.querySelector('.tab__indicator');\n    const oldIndicator = this.getActiveTab()?.shadowRoot?.querySelector('.tab__indicator');\n\n    if (oldIndicator != null && newIndicator != null) {\n      flipAnimate(newIndicator, oldIndicator);\n    }\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n\n      if (['top', 'bottom'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab != null) {\n          this.sixTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.sixTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel != null) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        ref={(el) => (this.tabGroup = el)}\n        class={{\n          'tab-group': true,\n\n          // Placements\n          'tab-group--top': this.placement === 'top',\n          'tab-group--bottom': this.placement === 'bottom',\n          'tab-group--left': this.placement === 'left',\n          'tab-group--right': this.placement === 'right',\n\n          'tab-group--has-scroll-controls': this.hasRightControl || this.hasLeftControl,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <div class=\"tab-group__nav-container\">\n          {this.hasLeftControl && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_left\"\n              onClick={this.handleScrollLeft}\n            />\n          )}\n          <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n            <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n              <slot name=\"nav\" />\n            </div>\n          </div>\n          {this.hasRightControl && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_right\"\n              onClick={this.handleScrollRight}\n            />\n          )}\n        </div>\n\n        <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}