q2-tecton-elements 1.21.2 → 1.22.0

package/dist/components/q2-stepper.js

@@ -0,0 +1,252 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { d as addSmoothScrollPolyfill, o as overrideFocus, i as isEventFromElement, l as loc } from './index13.js';
+import { d as defineCustomElement$4 } from './index5.js';
+import { d as defineCustomElement$3 } from './index7.js';
+import { d as defineCustomElement$2 } from './index9.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}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3, #21acff)));--comp-bullet-font-size:var-list(var-prefixer(stepper-btn-label-font-size), 16px);--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-top-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-btn-label-font-size:var-list(var-prefixer(stepper-btn-label-font-size), 16px);--comp-btn-label-color:var(--tct-stepper-label-color, var(--t-stepper-label-color, var(--t-text, #4d4d4d)));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--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[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.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(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-icon:before,[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border);border-color:var(--comp-active-color)}.step-bubble{background:var(--comp-bullet-bg)}hr{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
+
+addSmoothScrollPolyfill();
+const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.scheduledAfterRender = [];
+    ////////// EVENT HANDLERS ////////
+    this.onSlotChange = () => {
+      this.checkForPanes();
+      this.checkScrollState();
+    };
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth',
+      });
+    };
+    this.onStepClick = (event, selectedStep) => {
+      event.stopPropagation();
+      const { currentStep, stepCount, lastEnabledStep } = this;
+      if (selectedStep > lastEnabledStep || selectedStep === currentStep)
+        return;
+      this.change.emit({
+        selectedStep,
+        lastEnabledStep,
+        currentStep,
+        stepCount,
+      });
+    };
+    this.onStepKeyDown = (event, stepNumber) => {
+      const { lastEnabledStep, stepCount } = this;
+      const { key } = event;
+      let selectedStep;
+      switch (key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          selectedStep = Math.max(stepNumber - 1, 0);
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          selectedStep = Math.min(stepNumber + 1, stepCount);
+          break;
+        case 'Home':
+          event.preventDefault();
+          selectedStep = 1;
+          break;
+        case 'End':
+          event.preventDefault();
+          selectedStep = lastEnabledStep;
+          break;
+      }
+      if (!selectedStep)
+        return;
+      this.focusStep(selectedStep, true);
+    };
+    this.checkForPanes = () => {
+      const { allPanes } = this;
+      if (!allPanes.length)
+        return;
+      this.stepCount = allPanes.length;
+    };
+    this.checkScrollState = () => {
+      if (!this.listElement)
+        return;
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
+    };
+    this.currentStep = 1;
+    this.stepCount = undefined;
+    this.lastEnabledStep = undefined;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentWillLoad() {
+    if (!this.lastEnabledStep)
+      this.lastEnabledStep = this.currentStep || 1;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+    this.checkForPanes();
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
+    overrideFocus(this.hostElement);
+    setTimeout(() => this.showStep(this.currentStep || 1), 0);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  ////////// WATCHER METHODS ////////
+  currentStepChanged(stepNumber) {
+    this.showStep(stepNumber);
+  }
+  ////////// HOST EVENTS ////////
+  defaultChangeHandler(event) {
+    const { hostElement } = this;
+    if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {
+      this.currentStep = event.detail.selectedStep;
+    }
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.focusStep(this.currentStep, true, true);
+  }
+  statusChangeHandler(event) {
+    const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);
+    if (index > -1) {
+      this.allPanes[index].status = event.detail.status;
+      this.renderStepBtn(index);
+    }
+  }
+  ////////// GETTER METHODS ////////
+  get allPanes() {
+    return this.hostElement.querySelectorAll('q2-stepper-pane');
+  }
+  ////////// HELPER METHODS ////////
+  showStep(stepNumber) {
+    if (stepNumber > this.lastEnabledStep) {
+      const { currentStep, stepCount } = this;
+      this.lastEnabledStep = stepNumber;
+      this.change.emit({
+        selectedStep: null,
+        lastEnabledStep: stepNumber,
+        currentStep,
+        stepCount,
+      });
+    }
+    this.scheduledAfterRender.push(this.resizeIframe);
+    this.showStepPane(stepNumber);
+    this.focusStep(stepNumber, this.scrollEnabled);
+  }
+  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);
+  }
+  showStepPane(stepNumber) {
+    this.allPanes.forEach((pane, index) => {
+      pane.isActive = stepNumber === index + 1;
+    });
+  }
+  focusStep(stepNumber, scrollIntoView, forceFocus) {
+    var _a;
+    const stepListItem = this.listElement.children[stepNumber - 1];
+    const isActive = document.activeElement === this.hostElement;
+    if (!stepListItem)
+      return;
+    if (isActive || forceFocus) {
+      (_a = stepListItem.firstElementChild) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    if (scrollIntoView) {
+      const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth',
+      });
+    }
+  }
+  ////////// RENDER METHODS ////////
+  renderStepBtn(stepIndex) {
+    var _a;
+    const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
+    const { id, label, description, status } = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : {};
+    const stepNumber = stepIndex + 1;
+    const isCurrentStep = stepNumber === currentStep;
+    const labelId = label && `label-${id}`;
+    const descriptionId = label && description && `description-${id}`;
+    const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);
+    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 isLocked = status === 'locked';
+    const disabled = isLocked || stepNumber > lastEnabledStep;
+    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-controls": id, "aria-disabled": disabled ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", { class: "step-label", id: labelId }, loc(label))), label && description && (h("div", { class: "step-description", id: descriptionId }, loc(description))))), stepIndex ? h("hr", null) : ''));
+  }
+  render() {
+    const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
+    const containerClasses = ['step-container'];
+    if (scrollEnabled)
+      containerClasses.push('has-scroll');
+    return (h(Fragment, null, h("div", { class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, null, h("div", { class: "gradient-left", hidden: !showScrollLeft }), h("div", { class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { type: "chevron-left" })), h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { type: "chevron-right" })))), h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", null, h("slot", { onSlotchange: () => this.onSlotChange() }))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "currentStep": ["currentStepChanged"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-stepper", {
+    "currentStep": [1538, "current-step"],
+    "stepCount": [1026, "step-count"],
+    "lastEnabledStep": [1026, "last-enabled-step"],
+    "scrollEnabled": [32],
+    "showScrollLeft": [32],
+    "showScrollRight": [32]
+  }, [[0, "change", "defaultChangeHandler"], [0, "focus", "delegateFocus"], [0, "statusChange", "statusChangeHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-stepper", "q2-btn", "q2-icon", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-stepper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Stepper$1);
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Stepper = Q2Stepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Stepper, defineCustomElement };

package/dist/components/q2-tab-container.d.ts

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

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

@@ -0,0 +1,288 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { d as addSmoothScrollPolyfill, c as createGuid, l as loc, i as isEventFromElement, o as overrideFocus } from './index13.js';
+import { d as defineCustomElement$5 } from './index4.js';
+import { d as defineCustomElement$4 } from './index5.js';
+import { d as defineCustomElement$3 } from './index7.js';
+import { d as defineCustomElement$2 } from './index9.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}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";
+
+addSmoothScrollPolyfill();
+const Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.settled = createEvent(this, "settled", 7);
+    this.guid = createGuid();
+    this.scheduledAfterRender = [];
+    this.lastScrolled = new Date(null).getTime();
+    ///////// Actions /////////
+    this.updateTabData = () => {
+      this.updateTabPaneProps();
+      this.setTabs();
+    };
+    this.updateTabPaneProps = () => {
+      this.tabPanes.forEach((tab, index) => {
+        tab.selected = tab.value === this.selectedTabValue;
+        tab.guid = this.guid;
+        tab.index = index;
+      });
+    };
+    this.setTabs = () => {
+      this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription }) => ({
+        label: (label && loc(label)) || '',
+        value,
+        badgeCount,
+        badgeDescription,
+      }));
+    };
+    this.onTabClick = (event) => {
+      const targetValue = event.target.closest('button[role="tab"]')
+        .dataset.value;
+      const isAlreadySelected = this.value === targetValue;
+      if (isAlreadySelected)
+        return;
+      this.change.emit({
+        value: targetValue,
+      });
+    };
+    this.onTabKeyDown = (event) => {
+      const value = event.target.dataset.value;
+      switch (event.key) {
+        case 'ArrowRight':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'next');
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'prev');
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'first');
+          break;
+        case 'End':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'last');
+          break;
+        case 'Space':
+        case 'Enter':
+          event.preventDefault();
+          this.change.emit({ value });
+          break;
+      }
+    };
+    this.moveToAdjacentTab = (value, direction) => {
+      const index = this.tabs.map(({ value }) => value).indexOf(value);
+      let newIndex;
+      switch (direction) {
+        case 'next':
+          newIndex = Math.min(index + 1, this.tabs.length - 1);
+          break;
+        case 'prev':
+          newIndex = Math.max(index - 1, 0);
+          break;
+        case 'first':
+          newIndex = 0;
+          break;
+        case 'last':
+          newIndex = this.tabs.length - 1;
+          break;
+      }
+      if (index === newIndex)
+        return;
+      this.moveFocus(newIndex, false);
+    };
+    this.moveFocus = (index, preventScroll = true) => {
+      const focusedValue = this.tabs[index].value;
+      const focusedTab = this.listElement.querySelector(`[data-value="${focusedValue}"]`);
+      focusedTab.focus({ preventScroll });
+      const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth',
+      });
+      return focusedTab;
+    };
+    this.checkScrollState = () => {
+      if (!this.listElement)
+        return;
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
+    };
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth',
+      });
+    };
+    this.onSlotChange = () => {
+      this.checkScrollState();
+    };
+    this.value = undefined;
+    this.type = undefined;
+    this.name = undefined;
+    this.color = undefined;
+    this.noPrint = false;
+    this.hasLeft = false;
+    this.hasRight = false;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
+    this.tabs = undefined;
+  }
+  resizeIframe() {
+    var _a, _b;
+    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  get tabPanes() {
+    const tabPanes = this.hostElement.querySelectorAll('q2-tab-pane, tecton-tab-pane');
+    if (tabPanes.length === 0) {
+      return [];
+    }
+    return Array.from(tabPanes).filter(pane => pane.name === this.name);
+  }
+  get selectedTabValue() {
+    return this.value || this.tabPanes[0].value || '';
+  }
+  get tabList() {
+    return this.hostElement.shadowRoot.querySelector('.tab-list');
+  }
+  ///////// Default Handler /////////
+  defaultChangeHandler(event) {
+    if (event.target === this.hostElement && !this.hostElement.onchange) {
+      this.value = event.detail.value;
+    }
+  }
+  onResize() {
+    this.checkScrollState();
+  }
+  onFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
+    this.moveFocus(index);
+  }
+  onBadge() {
+    this.setTabs();
+  }
+  ///////// Lifecycle Hooks /////////
+  componentWillLoad() {
+    const observer = new MutationObserver(this.updateTabData);
+    observer.observe(this.hostElement, { childList: true, attributes: true });
+    this.mutationObserver = observer;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+    this.updateTabData();
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+    this.settled.emit();
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
+    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();
+    });
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+    this.mutationObserver.disconnect();
+    this.resizeObserver = null;
+    this.mutationObserver = null;
+  }
+  ///////// Observers /////////
+  valueObserver() {
+    this.updateTabData();
+    this.scheduledAfterRender.push(this.resizeIframe);
+    const index = this.tabs.findIndex(el => el.value === this.value);
+    if (index > -1) {
+      this.scheduledAfterRender.push(() => this.moveFocus(index, false));
+    }
+  }
+  nameObserver() {
+    this.updateTabData();
+  }
+  ///////// View Methods /////////
+  render() {
+    return (h(Fragment, null, h("div", { class: "tab-container" }, this.scrollEnabled && (h(Fragment, null, h("div", { class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { type: "chevron-left" })), h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { type: "chevron-right" })))), h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.onSlotChange() }))));
+  }
+  generateTab(tab, index) {
+    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' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected))));
+  }
+  generateTabWithBadge(tab, isSelected) {
+    return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${tab.badgeDescription || loc('tecton.element.tab.pane.new')}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: isSelected ? 'primary' : undefined })));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "value": ["valueObserver"],
+    "name": ["nameObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-tab-container", {
+    "value": [1537],
+    "type": [513],
+    "name": [513],
+    "color": [513],
+    "noPrint": [516, "no-print"],
+    "hasLeft": [32],
+    "hasRight": [32],
+    "scrollEnabled": [32],
+    "showScrollLeft": [32],
+    "showScrollRight": [32],
+    "tabs": [32]
+  }, [[0, "change", "defaultChangeHandler"], [9, "resize", "onResize"], [0, "focus", "onFocus"], [0, "badge", "onBadge"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-tab-container", "q2-badge", "q2-btn", "q2-icon", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-tab-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2TabContainer$1);
+      }
+      break;
+    case "q2-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2TabContainer = Q2TabContainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2TabContainer, defineCustomElement };

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

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

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

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
+
+const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.badge = createEvent(this, "badge", 7);
+    this.value = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.selected = undefined;
+    this.badgeCount = undefined;
+    this.badgeDescription = undefined;
+    this.index = undefined;
+    this.guid = undefined;
+  }
+  badgeObserver() {
+    this.badge.emit();
+  }
+  render() {
+    return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", null)));
+  }
+  static get watchers() { return {
+    "badgeCount": ["badgeObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-tab-pane", {
+    "value": [513],
+    "label": [513],
+    "name": [513],
+    "selected": [516],
+    "badgeCount": [514, "badge-count"],
+    "badgeDescription": [513, "badge-description"],
+    "index": [2],
+    "guid": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-tab-pane"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-tab-pane":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2TabPane$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2TabPane = Q2TabPane$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2TabPane, defineCustomElement };

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

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