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

package/dist/collection/components/six-tab-group/six-tab-group.js

@@ -19,6 +19,12 @@ import { flipAnimate } from "../../utils/animation";
  */
 export class SixTabGroup {
     constructor() {
+        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');
@@ -84,9 +90,6 @@ export class SixTabGroup {
                 behavior: 'smooth',
             });
         };
-        this.hasScrollControls = false;
-        this.placement = 'top';
-        this.noScrollControls = false;
     }
     handleNoScrollControlsChange() {
         this.updateScrollControls();
@@ -106,6 +109,13 @@ export class SixTabGroup {
         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) => {
@@ -153,12 +163,29 @@ export class SixTabGroup {
     getActiveTab() {
         return this.getAllTabs().find((el) => el.active);
     }
+    calculateRightControlVisibility() {
+        var _a, _b, _c;
+        if (this.nav == null) {
+            return false;
+        }
+        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.hasScrollControls = this.noScrollControls
+        this.hasRightControl = this.noScrollControls
+            ? false
+            : ['top', 'bottom'].includes(this.placement) && this.calculateRightControlVisibility();
+        this.hasLeftControl = this.noScrollControls
             ? false
-            : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+            : ['top', 'bottom'].includes(this.placement) && this.calculateLeftControlVisibility();
     }
     setActiveTab(tab, emitEvents = true) {
         var _a, _b, _c;
@@ -201,15 +228,15 @@ export class SixTabGroup {
         });
     }
     render() {
-        return (h("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
+        return (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.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("slot", { name: "nav" }))), 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", null))));
+                'tab-group--has-scroll-controls': this.hasRightControl || this.hasLeftControl,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '6262c15276def35075129c8f1431094dbecc7ecf', class: "tab-group__nav-container" }, this.hasLeftControl && (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 })), h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, h("div", { key: '288b14b0bbc790f1ae54e2a26693e9b103002715', ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { key: '249ef2f5d67dd3abf35b07028c9d2fe3798ef1ea', name: "nav" }))), this.hasRightControl && (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 }))), h("div", { key: 'f2f82d9a7730f577fe4ed4a77a98929487f88dec', ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", { key: 'ca9dfe2b30a558eb1b95a20aee81978b00b9be2d' }))));
     }
     static get is() { return "six-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -239,6 +266,8 @@ export class SixTabGroup {
                     "tags": [],
                     "text": "The placement of the tabs."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -257,6 +286,8 @@ export class SixTabGroup {
                     "tags": [],
                     "text": "Disables the scroll arrows that appear when tabs overflow."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "no-scroll-controls",
                 "reflect": false,
                 "defaultValue": "false"
@@ -265,7 +296,8 @@ export class SixTabGroup {
     }
     static get states() {
         return {
-            "hasScrollControls": {}
+            "hasLeftControl": {},
+            "hasRightControl": {}
         };
     }
     static get events() {

package/dist/collection/components/six-tab-group/six-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-tab-group.js","sourceRoot":"","sources":["../../../src/components/six-tab-group/six-tab-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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.js","sourceRoot":"","sources":["../../../src/components/six-tab-group/six-tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAUpD;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,WAAW;IALxB;QAgBW,mBAAc,GAAG,KAAK,CAAC;QACvB,oBAAe,GAAG,KAAK,CAAC;QAEjC,iCAAiC;QACzB,cAAS,GAAwC,KAAK,CAAC;QAE/D,iEAAiE;QACzD,qBAAgB,GAAG,KAAK,CAAC;QA6FzB,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACtC,MAAM,QAAQ,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC,eAAe,CAAC,CAAC;YAE/C,6CAA6C;YAC7C,IAAI,QAAQ,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC3B,OAAO,KAAK,CAAC;YACf,CAAC;YAED,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;gBAChB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;gBAAE,OAAO;YAE7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACtC,MAAM,QAAQ,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC,eAAe,CAAC,CAAC;YAE/C,6CAA6C;YAC7C,IAAI,QAAQ,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC3B,OAAO,KAAK,CAAC;YACf,CAAC;YAED,2BAA2B;YAC3B,IAAI,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC3F,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAkC,CAAC;gBAE7D,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE,CAAC;oBAC7D,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;oBAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;oBAEnC,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;wBACzB,KAAK,GAAG,CAAC,CAAC;oBACZ,CAAC;yBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;wBAC/B,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;oBAC1B,CAAC;yBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;wBACrC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;oBACjC,CAAC;yBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;wBACtC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;oBAC/C,CAAC;oBAED,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;oBAC9C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;oBAE/B,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;wBAC/C,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;oBACtD,CAAC;oBAED,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;gBAAE,OAAO;YAE7B,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;gBACd,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;gBAChD,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;gBAAE,OAAO;YAE7B,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;gBACd,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;gBAChD,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;KA4HH;IA/RC,4BAA4B;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAQD,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;YAAE,OAAO;QAEtD,2DAA2D;QAC3D,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YAC9D,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC;gBACrC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;gBACtE,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACxC,CAAC;QACH,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QAC5E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtC,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QAEzD,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACvC,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,+BAA+B,EAAE,CAAC;YAE9D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,8BAA8B,EAAE,CAAC;QAC9D,CAAC,CAAC,CAAC;QAEH,wCAAwC;QACxC,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YACzD,IACE,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;;gBAC1B,OAAO,CAAC,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,QAAQ,CAAC,MAAA,QAAQ,CAAC,aAAa,mCAAI,EAAE,CAAC,CAAC;YACtF,CAAC,CAAC,EACF,CAAC;gBACD,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YACzC,CAAC;QACH,CAAC,CAAC,CAAC;QACH,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;IACjG,CAAC;IAED,oBAAoB;QAClB,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,CAAC;YAC9G,OAAO;QACT,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1C,CAAC;IAED,qCAAqC;IAErC,KAAK,CAAC,IAAI,CAAC,KAAa;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAElD,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,eAAe,GAAG,KAAK;;QACxC,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAC9C,IAAI,IAAI,IAAI,IAAI;YAAE,OAAO,EAAE,CAAC;QAE5B,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAW,EAAE,EAAE;YACzD,OAAO,eAAe;gBACpB,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS;gBACxC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,IAAI,CAAE,EAAwB,CAAC,QAAQ,CAAC;QACpF,CAAC,CAAwB,CAAC;IAC5B,CAAC;IAEO,YAAY;;QAClB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAC9C,IAAI,IAAI,IAAI,IAAI;YAAE,OAAO,EAAE,CAAC;QAC5B,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAW,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,eAAe,CAEvG,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IACnD,CAAC;IA6EO,+BAA+B;;QACrC,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC;QACf,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC,MAAA,IAAI,CAAC,GAAG,0CAAE,UAAU,CAAC,IAAG,MAAA,IAAI,CAAC,GAAG,0CAAE,WAAW,CAAA,GAAG,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,WAAW,IAAG,CAAC,CAAC;IAC5F,CAAC;IAEO,8BAA8B;;QACpC,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC;QACf,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC,MAAA,IAAI,CAAC,GAAG,0CAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5C,CAAC;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;YAAE,OAAO;QAE7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB;YAC1C,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,+BAA+B,EAAE,CAAC;QAEzF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB;YACzC,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,8BAA8B,EAAE,CAAC;IAC1F,CAAC;IAEO,YAAY,CAAC,GAAsB,EAAE,UAAU,GAAG,IAAI;;QAC5D,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI;YAAE,OAAO;QAE7B,MAAM,YAAY,GAAG,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACvE,MAAM,YAAY,GAAG,MAAA,MAAA,IAAI,CAAC,YAAY,EAAE,0CAAE,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAEvF,IAAI,YAAY,IAAI,IAAI,IAAI,YAAY,IAAI,IAAI,EAAE,CAAC;YACjD,WAAW,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,GAAG,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;YAC5C,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;YACnC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;YAErB,uBAAuB;YACvB,IAAI,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;YACnE,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,WAAC,OAAA,CAAC,EAAE,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,MAAK,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAA,CAAC,CAAA,EAAA,CAAC,CAAC;YAEjF,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBAC/C,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;YACzD,CAAC;YAED,cAAc;YACd,IAAI,UAAU,EAAE,CAAC;gBACf,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;oBACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;gBACpD,CAAC;gBAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC;YACvD,CAAC;QACH,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAEnC,6CAA6C;QAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;;YACf,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;YACzD,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;gBAClB,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,MAAA,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC,CAAC;gBAClE,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAA,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC,CAAC;YACtE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EACjC,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBAEjB,aAAa;gBACb,gBAAgB,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;gBAC1C,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;gBAChD,iBAAiB,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM;gBAC5C,kBAAkB,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;gBAE9C,gCAAgC,EAAE,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,cAAc;aAC9E,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;YAE7B,4DAAK,KAAK,EAAC,0BAA0B;gBAClC,IAAI,CAAC,cAAc,IAAI,CACtB,wEACE,KAAK,EAAC,yDAAyD,EAC/D,WAAW,EAAC,oBAAoB,EAChC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH;gBACD,WAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,gBAAgB;oBAC5E,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS;wBACpF,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF;gBACL,IAAI,CAAC,eAAe,IAAI,CACvB,wEACE,KAAK,EAAC,0DAA0D,EAChE,WAAW,EAAC,oBAAoB,EAChC,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAC/B,CACH,CACG;YAEN,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB;gBACrE,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/six-tab-panel/six-tab-panel.js

@@ -13,13 +13,15 @@ let id = 0;
 export class SixTabPanel {
     constructor() {
         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))));
+        h(Host, { key: 'ff4e7fdca87a73712855e445caee1d203ab9f9c6', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: '9e507234ff4b8adb8118ac0f337ed539fae4013b', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '6f05062bdd32c2e1e7fa085a8d27326b1de7c1ff' }))));
     }
     static get is() { return "six-tab-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -49,6 +51,8 @@ export class SixTabPanel {
                     "tags": [],
                     "text": "The tab panel's name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
@@ -67,6 +71,8 @@ export class SixTabPanel {
                     "tags": [],
                     "text": "When true, the tab panel will be shown."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"

package/dist/collection/components/six-tab-panel/six-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-tab-panel.js","sourceRoot":"","sources":["../../../src/components/six-tab-panel/six-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;GASG;AAOH,MAAM,OAAO,WAAW;;QACd,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;oBAK3B,EAAE;sBAGiB,KAAK;;IAEvC,MAAM;QACJ,OAAO;QACL,uGAAuG;QACvG,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;YAC5F,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;gBAE3C,eAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\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 - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab-panel',\n  styleUrl: 'six-tab-panel.scss',\n  shadow: true,\n})\nexport class SixTabPanel {\n  private componentId = `tab-panel-${++id}`;\n\n  @Element() host!: HTMLSixTabPanelElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab panel will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n        <div\n          part=\"base\"\n          class=\"tab-panel\"\n          role=\"tabpanel\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-hidden={this.active ? 'false' : 'true'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-tab-panel.js","sourceRoot":"","sources":["../../../src/components/six-tab-panel/six-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;GASG;AAOH,MAAM,OAAO,WAAW;IALxB;QAMU,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;QAI1C,4BAA4B;QACpB,SAAI,GAAG,EAAE,CAAC;QAElB,8CAA8C;QACrB,WAAM,GAAG,KAAK,CAAC;KAkBzC;IAhBC,MAAM;QACJ,OAAO;QACL,uGAAuG;QACvG,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;YAC5F,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;gBAE3C,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\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 - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab-panel',\n  styleUrl: 'six-tab-panel.scss',\n  shadow: true,\n})\nexport class SixTabPanel {\n  private componentId = `tab-panel-${++id}`;\n\n  @Element() host!: HTMLSixTabPanelElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab panel will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n        <div\n          part=\"base\"\n          class=\"tab-panel\"\n          role=\"tabpanel\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-hidden={this.active ? 'false' : 'true'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-tag/six-tag.js

@@ -15,6 +15,14 @@ import { debounce } from "../../utils/execution-control";
  */
 export class SixTag {
     constructor() {
+        /** The tag's type. */
+        this.type = 'primary';
+        /** The tag's size. */
+        this.size = 'medium';
+        /** Set to true to draw a pill-style tag with rounded edges. */
+        this.pill = false;
+        /** Set to true to make the tag clearable. */
+        this.clearable = false;
         this.resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));
         this.updateTooltip = () => {
             if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {
@@ -25,10 +33,6 @@ export class SixTag {
         this.handleClearClick = () => {
             this.sixClear.emit();
         };
-        this.type = 'primary';
-        this.size = 'medium';
-        this.pill = false;
-        this.clearable = false;
     }
     connectedCallback() {
         if (this.contentElement != null) {
@@ -44,7 +48,7 @@ export class SixTag {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h("span", { part: "base", class: {
+        return (h("span", { key: '24e012cb7d7021978a0ea7e8bafd4e943d8055fa', part: "base", class: {
                 tag: true,
                 // Types
                 'tag--primary': this.type === 'primary',
@@ -61,7 +65,7 @@ export class SixTag {
                 // Modifers
                 'tag--pill': this.pill,
                 'tag--clear': this.clearable,
-            } }, h("six-tooltip", { ref: (el) => (this.tooltipElement = el) }, h("span", { ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+            } }, h("six-tooltip", { key: '7238c4a9ddb30537cbb3999992b7df5be5e44dad', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '05a31ceb658536854ab68494c3b45d30c1e5690f', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '94ac8357a7e8fa4d681d5f3b6c986ef7c388320c', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: 'f191392816c57d663bd527df4fa00eccaa6dc545', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
     }
     static get is() { return "six-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +95,8 @@ export class SixTag {
                     "tags": [],
                     "text": "The tag's type."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'primary'"
@@ -109,6 +115,8 @@ export class SixTag {
                     "tags": [],
                     "text": "The tag's size."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
@@ -127,6 +135,8 @@ export class SixTag {
                     "tags": [],
                     "text": "Set to true to draw a pill-style tag with rounded edges."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "pill",
                 "reflect": true,
                 "defaultValue": "false"
@@ -145,6 +155,8 @@ export class SixTag {
                     "tags": [],
                     "text": "Set to true to make the tag clearable."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "clearable",
                 "reflect": true,
                 "defaultValue": "false"

package/dist/collection/components/six-tag/six-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-tag.js","sourceRoot":"","sources":["../../../src/components/six-tag/six-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\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 - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  private contentSlotElement: HTMLSlotElement | undefined;\n  private tooltipElement: HTMLSixTooltipElement | undefined;\n  private contentElement: HTMLElement | undefined;\n  private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n  connectedCallback() {\n    if (this.contentElement != null) {\n      this.resizeObserver.observe(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.contentElement != null) {\n      this.resizeObserver.observe(this.contentElement);\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  private updateTooltip = () => {\n    if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n      this.tooltipElement.content = getTextContent(this.contentSlotElement);\n      this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n    }\n  };\n\n  private handleClearClick = () => {\n    this.sixClear.emit();\n  };\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n          <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n            <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n          </span>\n        </six-tooltip>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-tag.js","sourceRoot":"","sources":["../../../src/components/six-tag/six-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\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 - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  private contentSlotElement: HTMLSlotElement | undefined;\n  private tooltipElement: HTMLSixTooltipElement | undefined;\n  private contentElement: HTMLElement | undefined;\n  private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n  connectedCallback() {\n    if (this.contentElement != null) {\n      this.resizeObserver.observe(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.contentElement != null) {\n      this.resizeObserver.observe(this.contentElement);\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  private updateTooltip = () => {\n    if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n      this.tooltipElement.content = getTextContent(this.contentSlotElement);\n      this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n    }\n  };\n\n  private handleClearClick = () => {\n    this.sixClear.emit();\n  };\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n          <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n            <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n          </span>\n        </six-tooltip>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-textarea/six-textarea.css

@@ -86,7 +86,11 @@
   color: var(--six-input-label-color);
 }
 
+/**
+ * @prop --height: The textarea height.
+ */
 :host {
+  --height: 100%;
   display: block;
 }
 
@@ -135,6 +139,7 @@
 
 .textarea__control {
   flex: 1 1 auto;
+  height: calc(var(--height) - 2 * var(--six-border-width));
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;