q2-tecton-elements 1.21.2 → 1.22.0

package/dist/components/q2-stepper-pane.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2StepperPane extends Components.Q2StepperPane, HTMLElement {}
+export const Q2StepperPane: {
+  prototype: Q2StepperPane;
+  new (): Q2StepperPane;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-stepper-pane.js

@@ -0,0 +1,92 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { c as createGuid, n as nextPaint, l as loc } from './index13.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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:block;position:relative}";
+
+const Q2StepperPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.statusChange = createEvent(this, "statusChange", 7);
+    this.activeChange = createEvent(this, "activeChange", 7);
+    this.label = undefined;
+    this.description = undefined;
+    this.isActive = undefined;
+    this.showWithChildren = undefined;
+    this.status = undefined;
+    this.isChildActive = false;
+  }
+  /// LifeCycle Hooks ///
+  connectedCallback() {
+    if (!this.hostElement.id)
+      this.hostElement.id = `step-${createGuid()}`;
+  }
+  componentWillLoad() {
+    this.checkForActiveChildren();
+  }
+  /// Watchers and Listeners ///
+  statusChanged(status) {
+    this.statusChange.emit({
+      status,
+      isActive: !!this.isActive,
+      id: this.hostElement.id,
+      host: this.hostElement,
+    });
+  }
+  isActiveChanged(isActive) {
+    this.activeChange.emit({
+      status: this.status || '',
+      isActive,
+      id: this.hostElement.id,
+      host: this.hostElement,
+    });
+  }
+  checkForActiveChildren() {
+    if (!this.showWithChildren)
+      return;
+    nextPaint(() => {
+      setTimeout(() => {
+        this.isChildActive = !!this.hostElement.querySelector("[slot='children'] > q2-stepper-pane[is-active]");
+      });
+    });
+  }
+  /// DOM ///
+  render() {
+    const { label, description, isActive } = this;
+    return (h(Fragment, null, h("div", { role: "tabpanel", "aria-label": label && loc(label), "aria-description": description && loc(description), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", null)), h("slot", { name: "children" })));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "status": ["statusChanged"],
+    "isActive": ["isActiveChanged"],
+    "showWithChildren": ["checkForActiveChildren"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-stepper-pane", {
+    "label": [513],
+    "description": [513],
+    "isActive": [516, "is-active"],
+    "showWithChildren": [516, "show-with-children"],
+    "status": [513],
+    "isChildActive": [32]
+  }, [[0, "activeChange", "checkForActiveChildren"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-stepper-pane"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-stepper-pane":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2StepperPane$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2StepperPane = Q2StepperPane$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2StepperPane, defineCustomElement };

package/dist/components/q2-stepper-vertical.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2StepperVertical extends Components.Q2StepperVertical, HTMLElement {}
+export const Q2StepperVertical: {
+  prototype: Q2StepperVertical;
+  new (): Q2StepperVertical;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,311 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { o as overrideFocus, c as createGuid, i as isEventFromElement, l as loc } from './index13.js';
+import { d as defineCustomElement$2 } from './index7.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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(\n      var-prefixer(advanced-stepper-child-btn-label-font-size),\n      --app-font-size-small,\n      12px\n  )}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, #0079c1)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #c30000)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--t-primary, #0079c1);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, #c30000);--comp-active-color:var(--const-stoplight-alert, #c30000)}.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);line-height:0}.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-fill:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--t-primary, #0079c1);color:var(--t-base, #ffffff);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-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 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, #ffffff)}.spacer{height:0;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.has-sibling{height:var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px)))}.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}";
+
+const Q2AdvancedStepper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    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);
+    };
+    this.currentStepId = undefined;
+    this.structuredPanes = [];
+  }
+  /// 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');
+          this.resizeIframe();
+        }, { 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-filled';
+    else if (status === 'error')
+      statusIcon = 'warning-filled';
+    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)))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
+  }
+  renderSpacer(pane, stepLabel, isExpanded, isLastStep) {
+    const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;
+    const spacerClasses = ['spacer'];
+    if (!isLastStep)
+      spacerClasses.push('has-sibling');
+    return (shouldRender && (h("div", { class: spacerClasses.join(' ') }, !!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-filled';
+    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))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "currentStepId": ["currentStepChanged"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-stepper-vertical", {
+    "currentStepId": [1537, "current-step-id"],
+    "structuredPanes": [32]
+  }, [[0, "change", "defaultChangeHandler"], [0, "focus", "delegateFocus"], [0, "statusChange", "statusChangeHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-stepper-vertical", "q2-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-stepper-vertical":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2AdvancedStepper);
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2StepperVertical = Q2AdvancedStepper;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2StepperVertical, defineCustomElement };

package/dist/components/q2-stepper.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Stepper extends Components.Q2Stepper, HTMLElement {}
+export const Q2Stepper: {
+  prototype: Q2Stepper;
+  new (): Q2Stepper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;