text: import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a0f9580d.js';
  import { f as focusVisible } from './focus-visible-a2e80220.js';
  import { s as scrollIntoView, g as getOffset } from './scroll-39592922.js';
  
  const tabGroupCss = ":host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:inherit;box-sizing:inherit}:host{--tabs-border-color:var(--sl-color-gray-200);display:block}.tab-group{display:-ms-flexbox;display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:-ms-flexbox;display:flex;position:relative}.tab-group .tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;transition:var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease}.tab-group:not(.focus-visible) ::slotted(sl-tab){--focus-ring:none}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--sl-spacing-x-large)}.tab-group__scroll-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--sl-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{-ms-flex-direction:column;flex-direction:column}.tab-group--top .tab-group__nav-container{-ms-flex-order:1;order:1}.tab-group--top .tab-group__nav{display:-ms-flexbox;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{-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-ms-flex-direction:row;flex-direction:row;border-bottom:solid 2px var(--tabs-border-color)}.tab-group--top .tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid 2px var(--sl-color-primary-500)}.tab-group--top .tab-group__body{-ms-flex-order:2;order:2}.tab-group--bottom{-ms-flex-direction:column;flex-direction:column}.tab-group--bottom .tab-group__nav-container{-ms-flex-order:2;order:2}.tab-group--bottom .tab-group__nav{display:-ms-flexbox;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{-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-ms-flex-direction:row;flex-direction:row;border-top:solid 2px var(--tabs-border-color)}.tab-group--bottom .tab-group__active-tab-indicator{top:calc(-1 * 2px);border-top:solid 2px var(--sl-color-primary-500)}.tab-group--bottom .tab-group__body{-ms-flex-order:1;order:1}.tab-group--left{-ms-flex-direction:row;flex-direction:row}.tab-group--left .tab-group__nav-container{-ms-flex-order:1;order:1}.tab-group--left .tab-group__tabs{-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-direction:column;flex-direction:column;border-right:solid 2px var(--tabs-border-color)}.tab-group--left .tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid 2px var(--sl-color-primary-500)}.tab-group--left .tab-group__body{-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-order:2;order:2}.tab-group--right{-ms-flex-direction:row;flex-direction:row}.tab-group--right .tab-group__nav-container{-ms-flex-order:2;order:2}.tab-group--right .tab-group__tabs{-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-direction:column;flex-direction:column;border-left:solid 2px var(--tabs-border-color)}.tab-group--right .tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid 2px var(--sl-color-primary-500)}.tab-group--right .tab-group__body{-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-order:1;order:1}";
  
  const TabGroup = class {
    constructor(hostRef) {
      registerInstance(this, hostRef);
      this.slTabShow = createEvent(this, "sl-tab-show", 7);
      this.slTabHide = createEvent(this, "sl-tab-hide", 7);
      this.hasScrollControls = false;
      /** The placement of the tabs. */
      this.placement = 'top';
      /** Disables the scroll arrows that appear when tabs overflow. */
      this.noScrollControls = false;
    }
    handlePlacementChange() {
      this.syncActiveTabIndicator();
    }
    handleNoScrollControlsChange() {
      this.updateScrollControls();
    }
    connectedCallback() {
      this.handleClick = this.handleClick.bind(this);
      this.handleKeyDown = this.handleKeyDown.bind(this);
      this.handleScrollLeft = this.handleScrollLeft.bind(this);
      this.handleScrollRight = this.handleScrollRight.bind(this);
    }
    componentDidLoad() {
      // 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);
      focusVisible.observe(this.tabGroup);
      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 => {
          return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName);
        })) {
          setTimeout(() => this.setAriaLabels());
        }
      });
      this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
    }
    disconnectedCallback() {
      this.mutationObserver.disconnect();
      focusVisible.unobserve(this.tabGroup);
      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) {
        this.setActiveTab(tab);
      }
    }
    getAllTabs(includeDisabled = false) {
      const slot = this.tabs.querySelector('slot');
      return [...slot.assignedElements()].filter((el) => {
        return includeDisabled
          ? el.tagName.toLowerCase() === 'sl-tab'
          : el.tagName.toLowerCase() === 'sl-tab' && !el.disabled;
      });
    }
    getAllPanels() {
      const slot = this.body.querySelector('slot');
      return [...slot.assignedElements()].filter((el) => el.tagName.toLowerCase() === 'sl-tab-panel');
    }
    getActiveTab() {
      return this.getAllTabs().find(el => el.active);
    }
    handleClick(event) {
      const target = event.target;
      const tab = target.closest('sl-tab');
      const tabGroup = tab.closest('sl-tab-group');
      // Ensure the target tab is in this tab group
      if (tabGroup !== this.host) {
        return false;
      }
      if (tab) {
        this.setActiveTab(tab);
      }
    }
    handleKeyDown(event) {
      const target = event.target;
      const tab = target.closest('sl-tab');
      const tabGroup = tab.closest('sl-tab-group');
      // Ensure the target tab is in this tab group
      if (tabGroup !== this.host) {
        return false;
      }
      // Activate a tab
      if (['Enter', ' '].includes(event.key)) {
        if (tab) {
          this.setActiveTab(tab);
          event.preventDefault();
        }
      }
      // Move focus left or right
      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
        const activeEl = document.activeElement;
        if (activeEl && activeEl.tagName.toLowerCase() === 'sl-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 });
          if (['top', 'bottom'].includes(this.placement)) {
            scrollIntoView(tabs[index], this.nav, 'horizontal');
          }
          event.preventDefault();
        }
      }
    }
    handleScrollLeft() {
      this.nav.scroll({
        left: this.nav.scrollLeft - this.nav.clientWidth,
        behavior: 'smooth'
      });
    }
    handleScrollRight() {
      this.nav.scroll({
        left: this.nav.scrollLeft + this.nav.clientWidth,
        behavior: 'smooth'
      });
    }
    updateScrollControls() {
      if (this.noScrollControls) {
        this.hasScrollControls = false;
      }
      else {
        this.hasScrollControls =
          ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
      }
    }
    setActiveTab(tab, emitEvents = true) {
      if (tab && 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 => (el.active = el.name === this.activeTab.panel));
        this.syncActiveTabIndicator();
        if (['top', 'bottom'].includes(this.placement)) {
          scrollIntoView(this.activeTab, this.nav, 'horizontal');
        }
        // Emit events
        if (emitEvents) {
          if (previousTab) {
            this.slTabHide.emit({ name: previousTab.panel });
          }
          this.slTabShow.emit({ name: this.activeTab.panel });
        }
      }
    }
    setAriaLabels() {
      const tabs = this.getAllTabs();
      const panels = this.getAllPanels();
      // Link each tab with its corresponding panel
      tabs.map(tab => {
        const panel = panels.find(el => el.name === tab.panel);
        if (panel) {
          tab.setAttribute('aria-controls', panel.getAttribute('id'));
          panel.setAttribute('aria-labelledby', tab.getAttribute('id'));
        }
      });
    }
    syncActiveTabIndicator() {
      const tab = this.getActiveTab();
      const width = tab.clientWidth;
      const height = tab.clientHeight;
      const offset = getOffset(tab, this.nav);
      const offsetTop = offset.top + this.nav.scrollTop;
      const offsetLeft = offset.left + this.nav.scrollLeft;
      switch (this.placement) {
        case 'top':
        case 'bottom':
          this.activeTabIndicator.style.width = `${width}px`;
          this.activeTabIndicator.style.height = null;
          this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
          break;
        case 'left':
        case 'right':
          this.activeTabIndicator.style.width = null;
          this.activeTabIndicator.style.height = `${height}px`;
          this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
          break;
      }
    }
    render() {
      return (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 }, h("div", { class: "tab-group__nav-container" }, this.hasScrollControls && (h("sl-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron-left", onClick: this.handleScrollLeft })), h("div", { ref: el => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav", tabindex: "-1" }, h("div", { ref: el => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("div", { ref: el => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "tab-group__active-tab-indicator" }), h("slot", { name: "nav" }))), this.hasScrollControls && (h("sl-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron-right", onClick: this.handleScrollRight }))), h("div", { ref: el => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", null))));
    }
    get host() { return getElement(this); }
    static get watchers() { return {
      "placement": ["handlePlacementChange"],
      "noScrollControls": ["handleNoScrollControlsChange"]
    }; }
  };
  TabGroup.style = tabGroupCss;
  
  export { TabGroup as sl_tab_group };
  