q2-tecton-elements 1.13.0-alpha.0 → 1.13.0

package/dist/collection/components/q2-stepper-vertical/index.js

@@ -0,0 +1,346 @@
+import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment, } from '@stencil/core';
+import { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';
+export class Q2AdvancedStepper {
+  constructor() {
+    this.structuredPanes = [];
+    this.scheduledAfterRender = [];
+    this.determinePaneChanges = (mutations) => {
+      mutations.forEach(mutation => {
+        var _a, _b;
+        if (mutation.type !== 'childList')
+          return;
+        if (!mutation.addedNodes.length && !mutation.removedNodes.length)
+          return;
+        if (((_a = mutation.addedNodes[0]) === null || _a === void 0 ? void 0 : _a.nodeType) !== Node.ELEMENT_NODE &&
+          ((_b = mutation.removedNodes[0]) === null || _b === void 0 ? void 0 : _b.nodeType) !== Node.ELEMENT_NODE)
+          return;
+        this.buildPaneList();
+      });
+    };
+    this.buildPaneList = () => {
+      const { allRootPanes } = this;
+      if (!allRootPanes.length)
+        return;
+      this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {
+        var _a, _b;
+        const children = Array.from((_b = (_a = pane.querySelector('[slot=children]')) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : [])
+          .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')
+          .map(this.extractDetails);
+        accum.push(Object.assign(Object.assign({}, this.extractDetails(pane)), { children }));
+        return accum;
+      }, []);
+    };
+    /// Event Handlers ///
+    this.onStepClick = (event, stepId) => {
+      event.stopPropagation();
+      const { currentStepId } = this;
+      if (stepId === currentStepId)
+        return;
+      const selectedStep = this.allPanes.find(pane => pane.id === stepId);
+      this.change.emit({
+        selectedStep,
+        selectedStepId: stepId,
+        currentStepId,
+      });
+    };
+    this.onStepKeyDown = (event, stepId) => {
+      const { key } = event;
+      let selectedStepId;
+      switch (key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          event.preventDefault();
+          selectedStepId = this.getStepId(stepId, 'prev');
+          break;
+        case 'ArrowDown':
+        case 'ArrowRight':
+          event.preventDefault();
+          selectedStepId = this.getStepId(stepId, 'next');
+          break;
+        case 'Home':
+          event.preventDefault();
+          selectedStepId = this.getStepId(stepId, 'first');
+          break;
+        case 'End':
+          event.preventDefault();
+          selectedStepId = this.getStepId(stepId, 'last');
+          break;
+      }
+      if (!selectedStepId)
+        return;
+      this.focusStepBtn(selectedStepId, true);
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    this.setDefaultPane();
+    this.buildPaneList();
+    const observer = new MutationObserver(this.determinePaneChanges);
+    const observerOptions = {
+      childList: true,
+    };
+    observer.observe(this.hostElement, observerOptions);
+    this.allRootPanes.forEach(pane => {
+      const childrenSlot = pane.querySelector('[slot=children]');
+      if (childrenSlot)
+        observer.observe(childrenSlot, observerOptions);
+    });
+    this.mutationObserver = observer;
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+    setTimeout(() => this.showStep(this.currentStepId), 0);
+  }
+  componentWillUpdate() {
+    this.expandedStepChildrenList = null;
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+    this.openCurrentStepChildren();
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  /// Getters ///
+  get allRootPanes() {
+    return Array.from(this.hostElement.querySelectorAll(':scope > q2-stepper-pane'));
+  }
+  get allPanes() {
+    return Array.from(this.hostElement.querySelectorAll('q2-stepper-pane'));
+  }
+  /// Helpers ///
+  setDefaultPane() {
+    if (this.currentStepId)
+      return;
+    const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');
+    if (!firstEnabledStep)
+      return;
+    if (!firstEnabledStep.id)
+      firstEnabledStep.id = `step-${createGuid()}`;
+    this.currentStepId = firstEnabledStep.id;
+  }
+  getStepId(currentStepId, goTo) {
+    const allEnabledStepBtns = Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])'));
+    const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('aria-controls') === currentStepId);
+    let nextStepIndex;
+    switch (goTo) {
+      case 'prev':
+        nextStepIndex = Math.max(currentStepIndex - 1, 0);
+        break;
+      case 'next':
+        nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);
+        break;
+      case 'first':
+        nextStepIndex = 0;
+        break;
+      case 'last':
+        nextStepIndex = allEnabledStepBtns.length - 1;
+        break;
+    }
+    return allEnabledStepBtns[nextStepIndex].getAttribute('aria-controls');
+  }
+  showStep(stepId) {
+    this.scheduledAfterRender.push(this.resizeIframe);
+    this.showStepPane(stepId);
+    this.focusStepBtn(stepId);
+  }
+  extractDetails(pane) {
+    const { label, description, status } = pane;
+    if (!pane.id)
+      pane.id = `step-${createGuid()}`;
+    return {
+      id: pane.id,
+      label,
+      description,
+      status,
+    };
+  }
+  resizeIframe() {
+    var _a, _b;
+    return (_b = (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  openCurrentStepChildren() {
+    const { expandedStepChildrenList } = this;
+    const allSpacers = this.hostElement.shadowRoot.querySelectorAll('.spacer');
+    allSpacers.forEach(spacer => {
+      if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {
+        spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;
+        if (spacer.classList.contains('is-open'))
+          return;
+        spacer.classList.add('is-opening');
+        spacer.addEventListener('transitionend', () => {
+          spacer.classList.remove('is-opening');
+          spacer.classList.add('is-open');
+        }, { once: true });
+      }
+      else {
+        spacer.removeAttribute('style');
+        spacer.classList.remove('is-open', 'is-opening');
+      }
+    });
+  }
+  showStepPane(stepId) {
+    this.allPanes.forEach(pane => {
+      if (pane.isActive || pane.id === stepId) {
+        pane.isActive = stepId === pane.id;
+      }
+    });
+  }
+  focusStepBtn(stepId, forceFocus) {
+    const stepBtn = this.hostElement.shadowRoot.querySelector(`button[aria-controls="${stepId}"]`);
+    const isComponentActive = document.activeElement === this.hostElement;
+    if (!stepBtn)
+      return;
+    if (isComponentActive || forceFocus) {
+      stepBtn.focus();
+    }
+  }
+  /// Listeners ///
+  defaultChangeHandler(event) {
+    const { hostElement } = this;
+    if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {
+      this.currentStepId = event.detail.selectedStepId;
+    }
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.focusStepBtn(this.currentStepId, true);
+  }
+  statusChangeHandler() {
+    this.buildPaneList();
+  }
+  /// Watchers ///
+  currentStepChanged(stepId) {
+    this.showStep(stepId);
+  }
+  /// DOM ///
+  renderStepBtn(pane, index) {
+    const { currentStepId, structuredPanes } = this;
+    const isLastStep = index === structuredPanes.length - 1;
+    const { id, label, description, status } = pane;
+    const stepNumber = index + 1;
+    const isCurrentStep = id === currentStepId;
+    const labelId = label && `label-${id}`;
+    const isLocked = status === 'locked';
+    const stepLabel = label && loc(label);
+    const descriptionId = label && description && `description-${id}`;
+    const btnLabel = !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);
+    let statusIcon;
+    if (status === 'complete')
+      statusIcon = 'success';
+    else if (status === 'error')
+      statusIcon = 'warning';
+    const stepClasses = ['step-btn'];
+    if (status)
+      stepClasses.push(`status-${status}`);
+    const childIds = pane.children.map(child => child.id);
+    const isExpanded = isCurrentStep || childIds.includes(currentStepId);
+    return (h("li", { role: "presentation" },
+      h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, "aria-controls": id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) },
+        statusIcon ? (h("div", { class: "step-icon" },
+          h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)),
+        label && (h("div", null,
+          h("div", { class: "step-label", id: labelId }, stepLabel),
+          description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))),
+      ((isLastStep && !!pane.children.length) || !isLastStep) && (h("div", { class: "spacer" }, !!pane.children.length && (h("ul", { ref: el => isExpanded && (this.expandedStepChildrenList = el), "aria-hidden": `${!isExpanded}` }, pane.children.map((child, index, children) => this.renderChildStepBtn(child, index, children.length, stepLabel))))))));
+  }
+  renderChildStepBtn(pane, index, children, parentLabel) {
+    const { currentStepId } = this;
+    const { id, label, status } = pane;
+    const stepNumber = index + 1;
+    const labelId = label && `label-${id}`;
+    const isCurrentStep = id === currentStepId;
+    const isLocked = status === 'locked';
+    const btnLabel = !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);
+    let statusIcon;
+    if (status === 'error')
+      statusIcon = 'warning';
+    const stepClasses = ['step-child-btn'];
+    if (status)
+      stepClasses.push(`status-${status}`);
+    return (h("li", { role: "presentation" },
+      h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-controls": id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) },
+        statusIcon && (h("div", { class: "step-child-icon" },
+          h("q2-icon", { type: statusIcon }))),
+        label && (h("div", { class: "step-child-label", id: labelId }, loc(label))))));
+  }
+  render() {
+    return (h(Fragment, null,
+      h("ul", { role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))),
+      h("div", null,
+        h("slot", null))));
+  }
+  static get is() { return "q2-stepper-vertical"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "currentStepId": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-step-id",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "structuredPanes": {}
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "currentStepId",
+      "methodName": "currentStepChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "defaultChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "statusChange",
+      "method": "statusChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/q2-stepper-vertical/styles.css

@@ -0,0 +1,273 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+:host {
+  display: grid;
+  grid-template-columns: var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px)) 1fr;
+  gap: var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px));
+}
+
+.step-label,
+.step-child-label {
+  color: var(--comp-btn-label-color);
+  font-size: var(--comp-btn-label-font-size);
+  font-weight: var(--comp-label-font-weight, 400);
+  height: 1.5em;
+}
+
+.step-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+[aria-selected=true] .step-label {
+  font-weight: var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600));
+}
+[aria-describedby] .step-label {
+  -webkit-line-clamp: 1;
+}
+
+.step-child-label {
+  grid-area: content;
+  color: var(--comp-btn-label-color);
+}
+
+.step-description {
+  color: var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
+  font-size: var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px)));
+  padding-bottom: 0.2em;
+}
+
+ul {
+  --comp-top-btn-icon-size: var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px));
+  --comp-btn-icon-size: var(--comp-top-btn-icon-size);
+  --comp-btn-content-gap: var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px)));
+  --comp-btn-label-font-size: var-list(var-prefixer(advanced-stepper-btn-label-font-size), 16px);
+  --comp-btn-label-color: var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d)));
+  --comp-tween: var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease)));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+ul ul {
+  --comp-btn-icon-size: var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px));
+  --comp-btn-content-gap: var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px)));
+  --comp-btn-label-font-size: var-list(
+      var-prefixer(advanced-stepper-child-btn-label-font-size),
+      --app-font-size-small,
+      12px
+  );
+}
+ul ul[aria-hidden=true] {
+  display: none;
+}
+
+.step-btn,
+.step-child-btn {
+  display: grid;
+  grid-template-columns: var(--comp-btn-icon-size) 1fr;
+  gap: var(--comp-btn-content-gap);
+  text-align: var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start));
+  grid-template-areas: "icon content";
+  align-items: center;
+  width: 100%;
+  position: relative;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+  transition-property: box-shadow;
+  outline: none;
+}
+.step-btn[aria-disabled],
+.step-child-btn[aria-disabled] {
+  cursor: default;
+  --comp-label-font-weight: 300;
+  --comp-btn-label-color: var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
+}
+.step-btn[aria-selected=true],
+.step-child-btn[aria-selected=true] {
+  --comp-label-font-weight: 600;
+}
+
+.step-btn {
+  min-height: var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px));
+  font-size: var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px));
+  --comp-active-color: var(--t-primary);
+}
+.step-btn.status-complete {
+  --comp-active-color: var(--const-stoplight-success);
+}
+.step-btn.status-error {
+  --comp-active-color: var(--const-stoplight-alert);
+}
+.step-btn.status-locked {
+  cursor: not-allowed;
+}
+
+.step-child-btn {
+  --comp-active-color: var(--t-primary);
+  min-height: var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px));
+  padding-left: var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px)));
+  font-size: var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px));
+  border-left-width: var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px));
+  border-left-style: var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid));
+  border-left-color: transparent;
+}
+.step-child-btn[aria-selected=true] {
+  --comp-btn-label-color: var(--comp-active-color);
+  border-left-color: var(--comp-active-color);
+}
+.step-child-btn.status-error {
+  --comp-btn-label-color: var(--const-stoplight-alert);
+  --comp-active-color: var(--const-stoplight-alert);
+}
+.step-child-btn.status-locked {
+  cursor: not-allowed;
+}
+
+.step-content {
+  grid-area: content;
+}
+
+.step-icon,
+.step-bubble,
+.step-child-icon {
+  grid-area: icon;
+  width: var(--comp-btn-icon-size);
+  height: var(--comp-btn-icon-size);
+}
+.step-icon q2-icon,
+.step-bubble q2-icon,
+.step-child-icon q2-icon {
+  width: var(--comp-btn-icon-size);
+  height: var(--comp-btn-icon-size);
+  --tct-icon-stroke-primary: var(--comp-active-color);
+}
+
+.step-icon,
+.step-bubble {
+  background: var(--t-primary);
+  color: var(--t-base);
+  border-radius: 50%;
+}
+.status-complete .step-icon, .status-error .step-icon,
+.status-complete .step-bubble,
+.status-error .step-bubble {
+  background: var(--comp-active-color);
+}
+.step-icon q2-icon,
+.step-bubble q2-icon {
+  --tct-icon-stroke-secondary: var(--t-base);
+}
+.status-locked .step-icon,
+.status-locked .step-bubble {
+  background: var(--t-gray-12);
+  color: var(--t-text);
+}
+[aria-selected=true] .step-icon,
+[aria-selected=true] .step-bubble {
+  box-shadow: 0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-active-color);
+}
+
+.step-bubble {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 0;
+}
+
+.step-child-icon q2-icon {
+  --tct-icon-stroke-primary: var(--comp-active-color);
+  --tct-icon-stroke-secondary: var(--comp-active-color);
+}
+[aria-selected=true] .step-child-icon q2-icon {
+  fill: var(--comp-active-color);
+  --tct-icon-stroke-secondary: var(--t-base);
+}
+
+.spacer {
+  height: var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px)));
+  border-left-width: var(--tct-advanced-stepper-child-border-width, var(--t-advanced-stepper-child-border-width, 1px));
+  border-left-style: var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid));
+  border-left-color: var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9)));
+  overflow: hidden;
+  margin-left: calc(var(--comp-top-btn-icon-size) / 2);
+  transition: height var(--comp-tween);
+}
+.spacer ul {
+  opacity: 0;
+  transition: opacity var(--comp-tween);
+}
+.spacer.is-opening ul, .spacer.is-open ul {
+  display: block;
+  opacity: 1 !important;
+}
+.spacer.is-open {
+  overflow: visible;
+}

package/dist/collection/components/q2-tab-container/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Event, State, Listen, Watch, h, Fragment } from '@stencil/core';
+import { Component, Prop, Element, Event, State, Listen, Watch, h, Fragment, } from '@stencil/core';
 import { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';
 addSmoothScrollPolyfill();
 export class Q2TabContainer {
@@ -27,7 +27,7 @@ export class Q2TabContainer {
     this.setTabs = () => {
       this.tabs = this.tabPanes.map(({ label, value }) => ({
         label: (label && loc(label)) || '',
-        value
+        value,
       }));
     };
     this.onTabClick = (event) => {
@@ -35,7 +35,7 @@ export class Q2TabContainer {
       if (isAlreadySelected)
         return;
       this.change.emit({
-        value: event.target.dataset.value
+        value: event.target.dataset.value,
       });
     };
     this.onTabKeyDown = (event) => {
@@ -65,7 +65,7 @@ export class Q2TabContainer {
       }
     };
     this.moveToAdjacentTab = (value, direction) => {
-      let index = this.tabs.map(({ value }) => value).indexOf(value);
+      const index = this.tabs.map(({ value }) => value).indexOf(value);
       let newIndex;
       switch (direction) {
         case 'next':
@@ -92,7 +92,7 @@ export class Q2TabContainer {
       const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
       this.listElement.scrollTo({
         left,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
       return focusedTab;
     };
@@ -108,7 +108,7 @@ export class Q2TabContainer {
       const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
       this.listElement.scrollBy({
         left: direction === 'left' ? -scrollAmount : scrollAmount,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     };
     this.onSlotChange = () => {
@@ -166,6 +166,9 @@ export class Q2TabContainer {
     overrideFocus(this.hostElement);
     const index = this.tabs.findIndex(el => el.value === this.value);
     this.scheduledAfterRender.push(() => {
+      const hasTabs = this.tabs.length > 0;
+      if (!hasTabs)
+        return;
       const tab = this.moveFocus(Math.max(index, 0));
       this.value = tab.dataset.value;
       tab.blur();
@@ -174,6 +177,7 @@ export class Q2TabContainer {
   disconnectedCallback() {
     this.resizeObserver.disconnect();
     this.mutationObserver.disconnect();
+    this.resizeObserver = null;
     this.mutationObserver = null;
   }
   ///////// Observers /////////
@@ -207,7 +211,7 @@ export class Q2TabContainer {
     const { label, value } = tab;
     const isSelected = this.selectedTabValue === value;
     return (h("li", { role: "presentation" },
-      h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : undefined, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
+      h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
   }
   static get is() { return "q2-tab-container"; }
   static get encapsulation() { return "shadow"; }