@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

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

@@ -3,235 +3,235 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
-const scroll = require('./scroll-5b8676ba.js');
-const focusVisible = require('./focus-visible-b08d956f.js');
+const scroll = require('./scroll-76e6f5d7.js');
+const focusVisible = require('./focus-visible-0b352c74.js');
 
 const sixTabGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--tabs-border-color:var(--six-tab-border-color);display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group .tab-group__active-tab-indicator{position:absolute;transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease}.tab-group:not(.focus-visible) ::slotted(six-tab){--focus-ring:none}.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;border-bottom:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--top .tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.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;border-top:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--bottom .tab-group__active-tab-indicator{top:-2px;border-top:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.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;border-right:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--left .tab-group__active-tab-indicator{right:-2px;border-right:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.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;border-left:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--right .tab-group__active-tab-indicator{left:-2px;border-left:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";
 
-let 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.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);
-    this.syncActiveTabIndicator = this.syncActiveTabIndicator.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.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.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() === 'six-tab'
-        : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;
-    });
-  }
-  getAllPanels() {
-    const slot = this.body.querySelector('slot');
-    return [...slot.assignedElements()].filter((el) => el.tagName.toLowerCase() === 'six-tab-panel');
-  }
-  getActiveTab() {
-    return this.getAllTabs().find((el) => el.active);
-  }
-  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) {
-      this.setActiveTab(tab);
-    }
-  }
-  handleKeyDown(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;
-    }
-    // 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() === '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 });
-        if (['top', 'bottom'].includes(this.placement)) {
-          scroll.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() {
-    this.hasScrollControls = this.noScrollControls
-      ? false
-      : ['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)) {
-        scroll.scrollIntoView(this.activeTab, this.nav, 'horizontal');
-      }
-      // Emit events
-      if (emitEvents) {
-        if (previousTab) {
-          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) => {
-      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();
-    if (tab) {
-      this.activeTabIndicator.style.display = 'block';
-    }
-    else {
-      this.activeTabIndicator.style.display = 'none';
-      return;
-    }
-    const width = tab.clientWidth;
-    const height = tab.clientHeight;
-    const offset = scroll.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 (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("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "tab-group__active-tab-indicator" }), index.h("slot", { name: "nav", onSlotchange: this.syncActiveTabIndicator }))), 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", { onSlotchange: this.syncActiveTabIndicator }))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "placement": ["handlePlacementChange"],
-    "noScrollControls": ["handleNoScrollControlsChange"]
-  }; }
-};
+let 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.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);
+    this.syncActiveTabIndicator = this.syncActiveTabIndicator.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.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.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() === 'six-tab'
+        : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;
+    });
+  }
+  getAllPanels() {
+    const slot = this.body.querySelector('slot');
+    return [...slot.assignedElements()].filter((el) => el.tagName.toLowerCase() === 'six-tab-panel');
+  }
+  getActiveTab() {
+    return this.getAllTabs().find((el) => el.active);
+  }
+  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) {
+      this.setActiveTab(tab);
+    }
+  }
+  handleKeyDown(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;
+    }
+    // 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() === '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 });
+        if (['top', 'bottom'].includes(this.placement)) {
+          scroll.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() {
+    this.hasScrollControls = this.noScrollControls
+      ? false
+      : ['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)) {
+        scroll.scrollIntoView(this.activeTab, this.nav, 'horizontal');
+      }
+      // Emit events
+      if (emitEvents) {
+        if (previousTab) {
+          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) => {
+      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();
+    if (tab) {
+      this.activeTabIndicator.style.display = 'block';
+    }
+    else {
+      this.activeTabIndicator.style.display = 'none';
+      return;
+    }
+    const width = tab.clientWidth;
+    const height = tab.clientHeight;
+    const offset = scroll.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 (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("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "tab-group__active-tab-indicator" }), index.h("slot", { name: "nav", onSlotchange: this.syncActiveTabIndicator }))), 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", { onSlotchange: this.syncActiveTabIndicator }))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "placement": ["handlePlacementChange"],
+    "noScrollControls": ["handleNoScrollControlsChange"]
+  }; }
+};
 SixTabGroup.style = sixTabGroupCss;
 
 exports.six_tab_group = SixTabGroup;

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

@@ -6,23 +6,23 @@ const index = require('./index-341df120.js');
 
 const sixTabPanelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.tab-panel{border:solid 1px transparent;padding:20px 20px}";
 
-let id = 0;
-let SixTabPanel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.componentId = `tab-panel-${++id}`;
-    /** The tab panel's name. */
-    this.name = '';
-    /** When true, the tab panel will be shown. */
-    this.active = false;
-  }
-  render() {
-    return (
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    index.h(index.Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, index.h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
-};
+let id = 0;
+let SixTabPanel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.componentId = `tab-panel-${++id}`;
+    /** The tab panel's name. */
+    this.name = '';
+    /** When true, the tab panel will be shown. */
+    this.active = false;
+  }
+  render() {
+    return (
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    index.h(index.Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, index.h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
 SixTabPanel.style = sixTabPanelCss;
 
 exports.six_tab_panel = SixTabPanel;

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

@@ -6,48 +6,48 @@ const index = require('./index-341df120.js');
 
 const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";
 
-let id = 0;
-let SixTab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixClose = index.createEvent(this, "six-tab-close", 7);
-    this.componentId = `tab-${++id}`;
-    /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
-    this.panel = '';
-    /** Set to true to draw the tab in an active state. */
-    this.active = false;
-    /** When true, the tab will be rendered with a close icon. */
-    this.closable = false;
-    /** Set to true to draw the tab in a disabled state. */
-    this.disabled = false;
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-  }
-  /** Sets focus to the tab. */
-  async setFocus(options) {
-    this.tab.focus(options);
-  }
-  /** Removes focus from the tab. */
-  async removeFocus() {
-    this.tab.blur();
-  }
-  handleCloseClick() {
-    this.sixClose.emit();
-  }
-  render() {
-    return (
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    index.h(index.Host, { id: this.host.id || this.componentId }, index.h("div", { part: "base", ref: (el) => (this.tab = el), class: {
-        tab: true,
-        // States
-        'tab--active': this.active,
-        'tab--closable': this.closable,
-        'tab--disabled': this.disabled,
-      }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, index.h("slot", null), this.closable && (index.h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
-  }
-  get host() { return index.getElement(this); }
-};
+let id = 0;
+let SixTab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixClose = index.createEvent(this, "six-tab-close", 7);
+    this.componentId = `tab-${++id}`;
+    /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
+    this.panel = '';
+    /** Set to true to draw the tab in an active state. */
+    this.active = false;
+    /** When true, the tab will be rendered with a close icon. */
+    this.closable = false;
+    /** Set to true to draw the tab in a disabled state. */
+    this.disabled = false;
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+  }
+  /** Sets focus to the tab. */
+  async setFocus(options) {
+    this.tab.focus(options);
+  }
+  /** Removes focus from the tab. */
+  async removeFocus() {
+    this.tab.blur();
+  }
+  handleCloseClick() {
+    this.sixClose.emit();
+  }
+  render() {
+    return (
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    index.h(index.Host, { id: this.host.id || this.componentId }, index.h("div", { part: "base", ref: (el) => (this.tab = el), class: {
+        tab: true,
+        // States
+        'tab--active': this.active,
+        'tab--closable': this.closable,
+        'tab--disabled': this.disabled,
+      }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, index.h("slot", null), this.closable && (index.h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
+  }
+  get host() { return index.getElement(this); }
+};
 SixTab.style = sixTabCss;
 
 exports.six_tab = SixTab;