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

package/dist/cjs/q2-pagination.cjs.entry.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c2e53804.js');
+const index$1 = require('./index-773c3eec.js');
+
+const stylesCss = "*{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{text-align:right;display:block}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
+
+const Q2Pagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "change", 7);
+    this.handlePageChange = (page) => {
+      const { totalPages, inputField } = this;
+      if (page < 1) {
+        page = 1;
+      }
+      else if (page > totalPages) {
+        page = totalPages;
+      }
+      if (inputField.value !== `${page}`)
+        inputField.value = `${page}`;
+      if (!this.hostElement.onchange) {
+        this.page = page;
+      }
+      this.change.emit({ value: page });
+    };
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentDidLoad() {
+    if (this.recordsOnly || this.pagesOnly)
+      return;
+    this.containerWidth = this.containerElement.clientWidth;
+    this.resizeObserver = new ResizeObserver(() => this.checkSize());
+    this.resizeObserver.observe(this.hostElement);
+    index$1.overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  onHostElementFocus(event) {
+    var _a;
+    if (!index$1.isEventFromElement(event, this.hostElement))
+      return;
+    const { isFullViewHidden, containerElement, inputField } = this;
+    if (isFullViewHidden) {
+      (_a = containerElement.querySelector('q2-btn:not([disabled])')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    else {
+      inputField.focus();
+    }
+  }
+  get isFullViewHidden() {
+    return this.isSmall || this.recordsOnly || this.pagesOnly;
+  }
+  get pageWithDefault() {
+    return this.page || 1;
+  }
+  get perPageWithDefault() {
+    return this.perPage || 10;
+  }
+  get totalWithDefault() {
+    return this.total || 0;
+  }
+  get recordTypeWithDefault() {
+    return this.recordType || index$1.loc('tecton.element.pagination.defaultRecordType');
+  }
+  get currentRange() {
+    const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;
+    const start = (page - 1) * perPage + 1;
+    const end = Math.min(page * perPage, total);
+    return `${start} - ${end}`;
+  }
+  get totalPages() {
+    const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;
+    if (pagesOnly && pages && !isNaN(parseInt(`${pages}`)))
+      return pages;
+    return Math.ceil(total / perPage);
+  }
+  checkSize() {
+    const { hostElement, containerElement } = this;
+    const isOverflowing = this.containerWidth > hostElement.clientWidth;
+    this.isSmall = isOverflowing;
+    if (isOverflowing)
+      return;
+    index$1.nextPaint(() => {
+      const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
+      if (containerWidthHasNotChanged)
+        return;
+      this.containerWidth = containerElement.clientWidth;
+      this.checkSize();
+    });
+  }
+  ////////// OBSERVERS //////////
+  render() {
+    const { pagesOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange } = this;
+    const onFirstPage = page === 1;
+    const onLastPage = page === totalPages;
+    return (index.h("nav", { class: "container", ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { class: "description", "test-id": "description" }, pagesOnly
+      ? index$1.loc('tecton.element.pagination.pages', {
+        current: page,
+        total: totalPages
+      })
+      : index$1.loc('tecton.element.pagination.description', {
+        range: currentRange,
+        recordType: recordType.toLowerCase(),
+        total: total.toLocaleString()
+      })), index.h("div", { class: "btn-group" }, index.h("q2-btn", { label: "tecton.element.pagination.goToFirstPage", disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { type: "chevron-double-left" })), index.h("q2-btn", { label: index$1.loc('tecton.element.pagination.goToPage', [page - 1]), disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { type: "chevron-left" }))), index.h("div", { class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, index.h("span", { "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [
+        totalPages.toLocaleString()
+      ])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), index.h("span", { "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { class: "btn-group" }, index.h("q2-btn", { label: index$1.loc('tecton.element.pagination.goToPage', [page + 1]), disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { type: "chevron-right" })), index.h("q2-btn", { label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { type: "chevron-double-right" })))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+Q2Pagination.style = stylesCss;
+
+exports.q2_pagination = Q2Pagination;

package/dist/cjs/q2-pill.cjs.entry.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c2e53804.js');
+const index$1 = require('./index-773c3eec.js');
+
+const stylesCss = "*{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:inline-block;position:relative}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--compt-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--t-primary-l5, #61c4ff);--comp-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #61c4ff);--comp-btn-color:var(--t-secondary-text, #000000);--comp-active-btn-border-color:var(--t-secondary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-secondary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #21acff)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #61c4ff);--comp-btn-color:var(--t-tertiary-text, #000000);--comp-active-btn-border-color:var(--t-tertiary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-tertiary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #21acff)}q2-option-list{position:absolute;left:0}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-gray-9, #999999)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc( var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-size-1x, 5px))) + var(--comp-close-size) )}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0;stroke:var(--comp-btn-color);--tct-icon-stroke-primary:var(--comp-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}";
+
+const Q2Pill = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "change", 7);
+    this.selectedOptions = [];
+    this.scheduledAfterRender = [];
+    /// Helpers
+    this.determineHasOptions = () => {
+      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+      this.hasOptions = hasOptions;
+    };
+    this.clearSelectedOptions = () => {
+      this.selectedOptions = [];
+      this.active = false;
+      this.open = false;
+      this.primaryBtn.focus();
+      this.change.emit({ value: null, values: [], active: false });
+    };
+    /// Event Handlers ///
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      if (this.disabled)
+        return;
+      if (this.hasOptions) {
+        this.optionList.toggle();
+      }
+      else {
+        const { value, label } = this;
+        const isActive = (this.active = !this.active);
+        const values = isActive ? [{ value, display: label }] : [];
+        this.selectedOptions = values;
+        this.change.emit({
+          value: value,
+          values,
+          active: isActive
+        });
+      }
+    };
+    this.handleKeydown = (event) => {
+      if (!this.hasOptions || this.disabled)
+        return;
+      this.optionList.handleExternalKeydown(event);
+    };
+    this.handleChange = event => {
+      if (!this.hasOptions)
+        return;
+      const { value, values } = event.detail;
+      const isActive = !!values.length;
+      if (!this.hostElement.onchange) {
+        this.selectedOptions = values;
+        this.active = isActive;
+      }
+      this.change.emit({ value: value, values, active: isActive });
+    };
+    this.handleFocusout = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (Array.from(this.hostElement.children).includes(relatedTarget))
+        return;
+      if (relatedTarget && !(event.relatedTarget instanceof HTMLElement))
+        return;
+      if (relatedTarget && relatedTarget.closest('.btn-height-wrapper'))
+        return;
+      this.optionList.open = false;
+    };
+    this.handleWrapperClick = () => {
+      this.primaryBtn.focus();
+      this.primaryBtn.click();
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    const observer = new MutationObserver(this.determineHasOptions);
+    observer.observe(this.hostElement, { childList: true, attributes: true });
+    this.mutationObserver = observer;
+  }
+  componentDidLoad() {
+    index$1.overrideFocus(this.hostElement);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  /// Getters ///
+  get buttonContent() {
+    const { label, selectedOptions, hasOptions } = this;
+    if (!hasOptions || selectedOptions.length === 0)
+      return label;
+    else if (selectedOptions.length === 1)
+      return selectedOptions[0].display;
+    return index$1.loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!index$1.isEventFromElement(event, this.hostElement))
+      return;
+    this.primaryBtn.focus();
+  }
+  optionListStateEvent({ detail: { open } }) {
+    this.open = open;
+    if (!open)
+      this.primaryBtn.focus();
+  }
+  /// DOM ///
+  generateIcon() {
+    const { hasOptions, active } = this;
+    const isButton = hasOptions && active;
+    const TagName = isButton ? 'button' : 'div';
+    const iconName = isButton || !hasOptions ? 'close' : 'chevron-down';
+    return (index.h(TagName, { class: "btn-close", onClick: isButton && this.clearSelectedOptions, disabled: isButton && this.disabled, "aria-label": isButton && index$1.loc('tecton.element.pill.clearSelection'), type: isButton && 'button' }, index.h("q2-icon", { type: iconName })));
+  }
+  render() {
+    const { hasOptions, active, open } = this;
+    let wrapperClassNames = ['btn-wrapper'];
+    if (hasOptions || active)
+      wrapperClassNames.push('has-icon');
+    if (hasOptions)
+      wrapperClassNames.push('has-options');
+    return (index.h(index.Fragment, null, index.h("div", { class: wrapperClassNames.join(' ') }, index.h("div", { class: "btn-height-wrapper", onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": hasOptions && open ? 'true' : 'false' }, this.buttonContent, !hasOptions && active && (index.h("span", { class: "sr" }, "(", index$1.loc('tecton.element.pill.active'), ")")))), this.generateIcon()), this.hasOptions && (index.h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, multiple: this.multiple, onFocusout: this.handleFocusout, selectedOptions: this.selectedOptions }, index.h("slot", null)))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+Q2Pill.style = stylesCss;
+
+exports.q2_pill = Q2Pill;

package/dist/cjs/q2-radio-group.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:0;margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, transparent, white)}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}.flexed.right{justify-content:right}";
 
@@ -16,13 +16,16 @@ const Q2RadioGroup = class {
     this.hasError = false;
     this.id = `radio-group-${index$1.createGuid()}`;
     this.onMutationObserved = () => {
-      this.valueUpdated();
+      this.valueUpdated(this.value);
       this.nameUpdated();
       this.disabledUpdated();
+      this.readonlyUpdated();
       this.tileLayoutUpdated();
     };
     this.onInnerRadioChange = (event) => {
       event.stopImmediatePropagation();
+      if (this.readonly)
+        return;
       this.change.emit({ value: event.detail.value });
     };
   }
@@ -30,17 +33,19 @@ const Q2RadioGroup = class {
     return Array.from(this.hostElement.querySelectorAll('q2-radio'));
   }
   /////// LIFECYCLE HOOK ///////
+  componentWillLoad() {
+    this.onMutationObserved();
+  }
   componentDidLoad() {
     const observer = new MutationObserver(this.onMutationObserved);
     observer.observe(this.hostElement, { childList: true });
     this.mutationObserver = observer;
-    this.onMutationObserved();
     index$1.overrideFocus(this.hostElement);
   }
   /////// OBSERVERS ///////
-  valueUpdated() {
+  valueUpdated(newVal) {
     this.radioElements.forEach(radio => {
-      radio.checked = this.value === radio.value;
+      radio.checked = newVal === radio.value;
     });
   }
   nameUpdated() {
@@ -53,6 +58,10 @@ const Q2RadioGroup = class {
       radio.groupDisabled = this.disabled;
     });
   }
+  readonlyUpdated() {
+    const readonly = this.readonly;
+    this.radioElements.forEach(radio => (radio.groupReadonly = readonly));
+  }
   tileLayoutUpdated() {
     this.radioElements.forEach(radio => {
       radio.groupTileLayout = this.tilelayout;
@@ -76,11 +85,15 @@ const Q2RadioGroup = class {
     const currentValue = event.target.getAttribute('value') || this.value;
     let index = this.radioElements.findIndex(el => el === event.target || el.getAttribute('value') === currentValue);
     let sign = 0;
-    if (['ArrowLeft', 'Left', 'ArrowUp', 'Up'].includes(event.key)) {
-      sign = -1;
-    }
-    else if (['ArrowRight', 'Right', 'ArrowDown', 'Down'].includes(event.key)) {
-      sign = 1;
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        sign = -1;
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        sign = 1;
+        break;
     }
     if (index === -1 || sign === 0) {
       return;
@@ -88,11 +101,25 @@ const Q2RadioGroup = class {
     index += sign;
     index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);
     event.preventDefault();
-    this.value = this.radioElements[index].value;
+    if (!this.readonly) {
+      this.value = this.radioElements[index].value;
+    }
     this.radioElements[index].dispatchEvent(new FocusEvent('focus'));
   }
+  labelDOM() {
+    const { label, optional, readonly } = this;
+    let helpText = '';
+    if (readonly) {
+      helpText = index.h("span", { class: "optional-tag" }, index$1.loc('tecton.element.input.readonly'));
+    }
+    else if (optional) {
+      helpText = index.h("span", { class: "optional-tag" }, index$1.loc('tecton.element.input.optional'));
+    }
+    return (index.h(index.Fragment, null, label && index$1.loc(label), !!helpText && index.h("span", { class: "optional-tag" }, helpText)));
+  }
   render() {
-    return (index.h("div", null, this.label || this.optional ? (index.h("div", { class: "group-legend" }, this.label && index$1.loc(this.label), this.optional ? (index.h("span", { class: "optional-tag" }, index$1.loc('tecton.element.input.optional'))) : (''))) : (''), index.h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}` }, this.label || this.optional ? (index.h("legend", { class: "sr-only" }, this.label && index$1.loc(this.label), this.optional ? (index.h("span", { class: "optional-tag" }, index$1.loc('tecton.element.input.optional'))) : (''))) : (''), this.hasError ? (index.h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, index.h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
+    const showLabel = this.label || this.optional || this.readonly;
+    return (index.h("div", null, showLabel && index.h("div", { class: "group-legend" }, this.labelDOM()), index.h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}` }, showLabel && index.h("legend", { class: "sr-only" }, this.labelDOM()), this.hasError ? (index.h("div", { class: `error-icon-container ${!showLabel && 'no-label'}` }, index.h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
   }
   inputDom() {
     if (this.tilelayout) {
@@ -111,6 +138,7 @@ const Q2RadioGroup = class {
     "value": ["valueUpdated"],
     "name": ["nameUpdated"],
     "disabled": ["disabledUpdated"],
+    "readonly": ["readonlyUpdated"],
     "tilelayout": ["tileLayoutUpdated"]
   }; }
 };

package/dist/cjs/q2-radio.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{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{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));display:block}:host .radio-container{margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}:host .radio-container label[for]{font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1, 5px))}:host .radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}:host .radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}:host .radio-container input:focus+label svg{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}:host .radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}:host .radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}:host .radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}:host .radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}:host .radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}:host .radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));cursor:pointer;display:block;padding:1rem;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}:host .radio-tile input:focus+label{border-color:#0079c1;box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}:host .radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));box-shadow:inset 0 0 0 2px #ffffff}:host .radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid #0079c1;border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}:host input:disabled+label{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 
@@ -14,11 +14,19 @@ const Q2Radio = class {
     this.disabled = false;
     this.checked = false;
     this.groupDisabled = false;
+    this.groupReadonly = false;
     this.groupTileLayout = false;
     this.id = `radio-${index$1.createGuid()}`;
+    this.isLoaded = false;
     this.inputChange = (event) => {
       event.stopPropagation();
-      this.change.emit({ value: this.value });
+      if (this.groupReadonly) {
+        event.preventDefault();
+        return false;
+      }
+      if (event.target instanceof HTMLInputElement) {
+        this.checked = event.target.checked;
+      }
     };
   }
   ////////// LIFECYCLE HOOKS ////////
@@ -26,12 +34,20 @@ const Q2Radio = class {
     index$1.handleAriaLabel(this);
   }
   componentDidLoad() {
+    this.isLoaded = true;
     index$1.overrideFocus(this.hostElement);
   }
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     index$1.handleAriaLabel(this);
   }
+  checkedObserver() {
+    if (!this.isLoaded)
+      return;
+    if (!this.checked)
+      return;
+    this.change.emit({ value: this.value });
+  }
   /////// HOST ELEMENT EVENTS ///////
   onHostClick(event) {
     if (this.disabled) {
@@ -48,7 +64,8 @@ const Q2Radio = class {
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
-    "ariaLabel": ["ariaLabelObserver"]
+    "ariaLabel": ["ariaLabelObserver"],
+    "checked": ["checkedObserver"]
   }; }
 };
 Q2Radio.style = stylesCss;

package/dist/cjs/q2-section.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{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}@keyframes expandVertical{0%{height:0}}@keyframes collapseVertical{100%{height:0}}:host{display:block;background-color:var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));color:var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, 3px));margin:var(--tct-scale-3, var(--app-scale-3, 15px))}@media screen and (max-width: 767px){:host{margin:var(--tct-scale-3, var(--app-scale-3, 15px)) 0}}.q2-section-wrapper{display:block;padding:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}.q2-section-wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, inherit)}.q2-section-header{padding:0 var(--tct-scale-3, var(--app-scale-3, 15px));display:flex}.has-header .q2-section-header{min-height:44px}.q2-section-header-content{flex:1 1 100%;min-width:0;align-self:center}.collapsible .q2-section-header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.toggle-icon{transition:transform var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}.collapsed .toggle-icon{transform:rotate(180deg)}.q2-section-content-wrapper{height:auto}.q2-section-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-3, var(--app-scale-3, 15px))}.q2-section-content:focus{box-shadow:none}.expanded.animate .q2-section-content-wrapper{animation:expandVertical var(--tct-tween-2, var(--app-tween-2, 0.4s ease)) forwards}.collapsed .q2-section-content-wrapper{height:0;animation:collapseVertical 0s forwards;animation-duration:0;padding-top:0;visibility:hidden;overflow:hidden}.collapsed.animate .q2-section-content-wrapper{animation:collapseVertical var(--tct-tween-1, var(--app-tween-1, 0.2s ease)) forwards}.animate .q2-section-content-wrapper{overflow:hidden}";
 

package/dist/cjs/q2-select.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
-const stylesCss = "*{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3, 15px)))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
+const stylesCss = "*{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);height:44px;width:calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 15px));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
 
 const Q2Select = class {
   constructor(hostRef) {
@@ -14,6 +14,7 @@ const Q2Select = class {
     this.input = index.createEvent(this, "input", 7);
     this.selectedOptions = [];
     this.disabled = false;
+    this.readonly = false;
     this.multiple = false;
     this.minRows = 3;
     this.searchable = false;
@@ -107,9 +108,10 @@ const Q2Select = class {
       event.stopPropagation();
       const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
       const { key, shiftKey } = event;
-      if (multiSelectHeader &&
-        multiSelectHeader.contains(event.target) &&
-        [' ', 'Enter'].includes(key))
+      if (this.readonly ||
+        (multiSelectHeader &&
+          multiSelectHeader.contains(event.target) &&
+          [' ', 'Enter'].includes(key)))
         return;
       switch (key) {
         case ' ':
@@ -425,12 +427,16 @@ const Q2Select = class {
     activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
   }
   openDropdownWithoutActiveElement() {
+    if (this.readonly)
+      return;
     this.activeIndex = undefined;
     this.setActiveOption();
     this.dropdownOpen = true;
     this.scheduledAfterRender.push(this.resizeIframe);
   }
   openDropdownWithActiveElement(activeIndex) {
+    if (this.readonly)
+      return;
     this.activeIndex = activeIndex;
     this.dropdownOpen = true;
     this.setActiveOption();
@@ -540,6 +546,8 @@ const Q2Select = class {
     });
   }
   onHostElementChange(event) {
+    if (this.readonly)
+      return;
     if (event.target === this.hostElement && !this.hostElement.onchange) {
       if (this.multiple) {
         this.selectedOptions = event.detail.selectedOptions;
@@ -601,7 +609,7 @@ const Q2Select = class {
         this.errors.length > 0 &&
         this.errors.map(error => index$1.loc(error))) ||
         (this.invalid && ['tecton.element.select.invalid']) ||
-        [], disabled: this.disabled, optional: this.optional, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }), index.h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, index.h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
+        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }), index.h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, index.h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
   }
   optionsDropdown() {
     const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';

package/dist/cjs/q2-stepper-pane.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{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:block;position:relative}";
 

package/dist/cjs/q2-stepper.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c2e53804.js');
-const index = require('./index-a55d3c34.js');
+const index = require('./index-773c3eec.js');
 
-const stylesCss = "*{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: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-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--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)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--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-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}.step-btn[aria-disabled]{cursor:default}.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-gray12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[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)}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;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}[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)));display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;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 right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));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{left:0}.btn-right{right:0}";
+const stylesCss = "*{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: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-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--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)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--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-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}.step-btn[aria-disabled]{cursor:default}.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-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[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)}hr{width:calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );top:calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));left:calc(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 right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));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{left:0}.btn-right{right:0}";
 
 index.addSmoothScrollPolyfill();
 const Q2Stepper = class {

package/dist/cjs/q2-tab-container.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c2e53804.js');
-const index = require('./index-a55d3c34.js');
+const index = require('./index-773c3eec.js');
 
 const stylesCss = "*{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:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 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-2, 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-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 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-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 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-2, 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 right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));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{left:0}.btn-right{right:0}";
 
@@ -176,6 +176,9 @@ const Q2TabContainer = class {
     index.overrideFocus(this.hostElement);
     const index$1 = 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$1, 0));
       this.value = tab.dataset.value;
       tab.blur();
@@ -184,6 +187,7 @@ const Q2TabContainer = class {
   disconnectedCallback() {
     this.resizeObserver.disconnect();
     this.mutationObserver.disconnect();
+    this.resizeObserver = null;
     this.mutationObserver = null;
   }
   ///////// Observers /////////