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

package/dist/esm/six-sidebar.entry.js

@@ -0,0 +1,178 @@
+import { r as registerInstance, c as createEvent, h } from './index-a2605a62.js';
+import { s as scrollIntoView } from './scroll-99b214c2.js';
+
+const sixSidebarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{box-shadow:var(--six-elevation-1dp)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";
+
+const isSidebarItemGroup = (node) => node.tagName.toLowerCase() === 'six-sidebar-item-group';
+let SixSidebar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixShow = createEvent(this, "six-sidebar-show", 7);
+    this.sixAfterShow = createEvent(this, "six-sidebar-after-show", 7);
+    this.sixHide = createEvent(this, "six-sidebar-hide", 7);
+    this.sixAfterHide = createEvent(this, "six-sidebar-after-hide", 7);
+    this.sixInitialFocus = createEvent(this, "six-sidebar-initial-focus", 7);
+    this.willShow = false;
+    this.willHide = false;
+    this.isVisible = false;
+    /** Sidebar position */
+    this.position = 'left';
+    /** Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** Sidebar width */
+    this.width = '16rem';
+    /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/
+    this.toggled = false;
+    this.handleTransitionEnd = (event) => {
+      const target = event.target;
+      // Ensure we only emit one event when the target element is no longer visible
+      if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {
+        this.resetTransitionVariables();
+      }
+    };
+    this.closeSiblingDetailsOnShow = (event) => {
+      const clickedMenuItem = event.target;
+      scrollIntoView(clickedMenuItem, this.sidebar);
+      const closeAllSiblingsBySiblingProperty = (getSibling) => {
+        let node = clickedMenuItem;
+        while (getSibling(node) !== null) {
+          node = getSibling(node);
+          if (isSidebarItemGroup(node)) {
+            node.shadowRoot.querySelector('six-details').open = false;
+          }
+        }
+      };
+      // close all previous siblings
+      closeAllSiblingsBySiblingProperty((node) => node.previousElementSibling);
+      // close all further siblings
+      closeAllSiblingsBySiblingProperty((node) => node.nextElementSibling);
+    };
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  componentWillLoad() {
+    // Show on init if open
+    if (this.open) {
+      void this.show();
+      // if the sidebar is open by default we need to manually reset the
+      // transition variables since there will be no transition event
+      this.resetTransitionVariables();
+    }
+  }
+  componentDidRender() {
+    this.setupTogglableMenuItems();
+  }
+  disconnectedCallback() {
+    this.sidebar.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+  }
+  setupTogglableMenuItems() {
+    if (!this.toggled) {
+      return;
+    }
+    this.markAllMenuItemsAsSelectableEmpty();
+    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+  }
+  markAllMenuItemsAsSelectableEmpty() {
+    // when you have a toggled menu you also want to close other menu items when you click on an item without children
+    // nice benefit this item will then also be highlighted
+    const slot = this.sidebar.querySelector('slot');
+    const nodes = slot.assignedElements();
+    // since we don't just want to make the top level empty menuItems selectable in toggled mode,
+    // but also nested items we need to traverse the whole menu item tree
+    const menuItems = [];
+    while (nodes.length > 0) {
+      const node = nodes.pop();
+      // collect six-details in the current shadowDOM
+      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');
+      menuItems.push(...menuItemsForCurrentNode);
+      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too
+      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);
+      nodes.push(...newItemGroups);
+    }
+    menuItems.forEach((details) => (details.selectableEmpty = true));
+  }
+  /** Toggles whether the sidebar should be shown or hidden */
+  async toggle() {
+    if (this.willShow || this.willHide) {
+      return;
+    }
+    if (this.open) {
+      await this.hide();
+    }
+    else {
+      await this.show();
+    }
+  }
+  /** Shows the sidebar */
+  async show() {
+    if (this.willShow) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.willShow = true;
+    this.isVisible = true;
+    this.open = true;
+  }
+  /** Hides the sidebar */
+  async hide() {
+    if (this.willHide) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.willHide = true;
+    this.open = false;
+  }
+  /** Allows to select a menu item programmatically by index */
+  async selectItemByIndex(index) {
+    const slot = this.sidebar.querySelector('slot');
+    const menuItemsOnRootLevel = slot
+      .assignedElements()
+      .map((el) => el.shadowRoot.querySelector('six-details'));
+    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {
+      console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`);
+      return;
+    }
+    await menuItemsOnRootLevel[index].show();
+  }
+  /** Allows to select a menu item programmatically by name */
+  async selectItemByName(value) {
+    const slot = this.sidebar.querySelector('slot');
+    const sidebarItemGroups = slot.assignedElements();
+    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === value);
+    const selectedItem = sidebarItemGroups[indexOfSelectedElement].shadowRoot.querySelector('six-details');
+    await selectedItem.show();
+  }
+  resetTransitionVariables() {
+    this.isVisible = this.open;
+    this.willShow = false;
+    this.willHide = false;
+    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+  }
+  render() {
+    return (h("host", { class: "six-sidebar" }, h("div", { class: {
+        sidebar__container: true,
+        'sidebar--visible': this.isVisible,
+        'sidebar--open': this.open,
+        'sidebar--left': this.position === 'left',
+        'sidebar--right': this.position === 'right',
+      }, style: {
+        width: this.width,
+        [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
+      }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
+SixSidebar.style = sixSidebarCss;
+
+export { SixSidebar as six_sidebar };

package/dist/esm/six-spinner.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h } from './index-a2605a62.js';
+
+const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";
+
+let SixSpinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
+    this.six = false;
+  }
+  renderSIXLogo() {
+    return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })))));
+  }
+  renderSimple() {
+    return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
+  }
+  render() {
+    return this.six ? this.renderSIXLogo() : this.renderSimple();
+  }
+};
+SixSpinner.style = sixSpinnerCss;
+
+export { SixSpinner as six_spinner };

package/dist/esm/six-switch.entry.js

@@ -0,0 +1,107 @@
+import { r as registerInstance, c as createEvent, h } from './index-a2605a62.js';
+
+const sixSwitchCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--height:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}";
+
+let id = 0;
+let SixSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixBlur = createEvent(this, "six-switch-blur", 7);
+    this.sixChange = createEvent(this, "six-switch-change", 7);
+    this.sixFocus = createEvent(this, "six-switch-focus", 7);
+    this.switchId = `switch-${++id}`;
+    this.labelId = `switch-label-${id}`;
+    this.hasFocus = false;
+    /** Set to true to disable the switch. */
+    this.disabled = false;
+    /** Set to true to make the switch a required field. */
+    this.required = false;
+    /** Set to true to draw the switch in a checked state. */
+    this.checked = false;
+    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+    this.invalid = false;
+    /** default value the switch will be reverted to when reset is executed */
+    this.defaultValue = '';
+  }
+  handleCheckedChange() {
+    this.input.checked = this.checked;
+    this.sixChange.emit(this.checked);
+  }
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+  componentWillLoad() {
+    this.defaultValue = this.value;
+  }
+  /** Sets focus on the switch. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  async removeFocus() {
+    this.input.blur();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.input.validity.valid;
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.value = this.defaultValue;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  handleClick() {
+    this.checked = this.input.checked;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit(this.checked);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleKeyDown(event) {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.checked = false;
+    }
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.checked = true;
+    }
+  }
+  handleMouseDown(event) {
+    // Prevent clicks on the label from briefly blurring the input
+    event.preventDefault();
+    this.input.focus();
+  }
+  render() {
+    return (h("label", { part: "base", htmlFor: this.switchId, class: {
+        switch: true,
+        'switch--checked': this.checked,
+        'switch--disabled': this.disabled,
+        'switch--focused': this.hasFocus,
+      }, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "switch__control" }, h("span", { part: "thumb", class: "switch__thumb" }), h("input", { ref: (el) => (this.input = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { part: "label", id: this.labelId, class: "switch__label" }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "checked": ["handleCheckedChange"]
+  }; }
+};
+SixSwitch.style = sixSwitchCss;
+
+export { SixSwitch as six_switch };

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

@@ -0,0 +1,233 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
+import { s as scrollIntoView, g as getOffset } from './scroll-99b214c2.js';
+import { f as focusVisible } from './focus-visible-4b7946aa.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) {
+    registerInstance(this, hostRef);
+    this.sixTabShow = createEvent(this, "six-tab-show", 7);
+    this.sixTabHide = 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.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() === '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)) {
+          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)) {
+        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 = 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("six-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" }, 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", onSlotchange: this.syncActiveTabIndicator }))), this.hasScrollControls && (h("six-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", { onSlotchange: this.syncActiveTabIndicator }))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "placement": ["handlePlacementChange"],
+    "noScrollControls": ["handleNoScrollControlsChange"]
+  }; }
+};
+SixTabGroup.style = sixTabGroupCss;
+
+export { SixTabGroup as six_tab_group };

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

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a2605a62.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) {
+    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
+    h(Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+SixTabPanel.style = sixTabPanelCss;
+
+export { SixTabPanel as six_tab_panel };

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

@@ -0,0 +1,49 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2605a62.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) {
+    registerInstance(this, hostRef);
+    this.sixClose = 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
+    h(Host, { id: this.host.id || this.componentId }, 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' }, h("slot", null), this.closable && (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 getElement(this); }
+};
+SixTab.style = sixTabCss;
+
+export { SixTab as six_tab };