q2-tecton-elements 1.71.4 → 1.73.0

package/dist/collection/components/q2-radio-group/q2-radio-group.css

@@ -97,12 +97,18 @@ button {
  * @prop --tct-radio-group-border-radius: (<length-percentage>) Controls the corner radius of the radio options container.
  * @prop --tct-radio-group-border-width: (<length>+) Controls the border width of the radio options container.
  * @prop --tct-radio-group-error-border-color: (<color>) Controls the border color of the radio options container in the error state.
- * @prop --tct-radio-group-tile-gap: (<length-percentage>) Controls the gap between radio tiles in the tile layout.
+ * @prop --tct-radio-group-horizontal-gap: (<length-percentage>) Controls the gap between horizontal non-tile radio options.
+ * @prop --tct-radio-group-justify-content: (<custom-ident>) Controls how non-tile radio options are aligned along the layout direction.
+ * @prop --tct-radio-group-separator-color: (<color>) Controls the color of separators between vertical non-tile radio options.
+ * @prop --tct-radio-group-separator-width?: (<length>) Controls the optional thickness of separators between vertical non-tile radio options.
+ * @prop --tct-radio-group-tile-border-color: (<color>) Controls the border color around the tiled radio group.
+ * @prop --tct-radio-group-tile-border-radius: (<length-percentage>) Controls the corner radius of the tiled radio group.
  * @prop --tct-radio-group-label-column-gap: (<length-percentage>) Controls the column gap between the radio-group label text and trailing icon.
  * @prop --tct-radio-group-label-font-color?: (<color>) Controls the optional text color of the radio-group label.
  * @prop --tct-radio-group-label-font-size?: (<length-percentage>) Controls the optional font size of the radio-group label.
  * @prop --tct-radio-group-label-font-weight: (<number>) Controls the font weight of the radio-group label.
  * @prop --tct-radio-group-label-letter-spacing?: (<length>) Controls the optional letter spacing of the radio-group label.
+ * @prop --tct-radio-group-label-line-height?: (<length-percentage>) Controls the optional line height of the radio-group label.
  * @prop --tct-radio-group-label-text-transform?: (<custom-ident>) Controls the optional text transform of the radio-group label.
  * @prop --tct-radio-group-label-optional-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
  * @prop --tct-radio-group-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
@@ -132,6 +138,7 @@ fieldset {
   font-weight: var(--tct-radio-group-label-font-weight, 600);
   text-transform: var(--tct-radio-group-label-text-transform, none);
   letter-spacing: var(--tct-radio-group-label-letter-spacing, inherit);
+  line-height: var(--tct-radio-group-label-line-height, inherit);
 }
 .label-row q2-icon {
   grid-area: icon;
@@ -185,6 +192,29 @@ legend.sr-only {
 :host([has-error=false]) .options-container {
   border-color: transparent;
 }
+.options-container.horizontal, .options-container.vertical {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: var(--tct-radio-group-justify-content, start);
+}
+.options-container.horizontal {
+  flex-direction: row;
+  column-gap: var(--tct-radio-group-horizontal-gap, var(--app-scale-4x, 20px));
+}
+.options-container.vertical {
+  flex-direction: column;
+}
+.options-container.vertical ::slotted(q2-radio:not(:first-child)) {
+  position: relative;
+}
+.options-container.vertical ::slotted(q2-radio:not(:first-child))::before {
+  border-block-start: var(--tct-radio-group-separator-width, 0) solid var(--tct-radio-group-separator-color, var(--t-gray-12, #d9d9d9));
+  content: "";
+  inset-block-start: calc(var(--tct-radio-group-separator-width, 0) / -2);
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+}
 
 .tile-container.left {
   justify-content: start;
@@ -193,6 +223,13 @@ legend.sr-only {
   justify-content: end;
 }
 .tile-container .options-container {
-  gap: var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));
+  border-color: var(--tct-radio-group-tile-border-color, var(--t-gray-13, #e6e6e6));
+  border-radius: var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px));
+  flex-grow: 0;
+  flex-wrap: nowrap;
   justify-content: inherit;
+  overflow: visible;
+}
+:host([has-error]) .tile-container .options-container {
+  border-color: var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a));
 }

package/dist/collection/components/q2-radio-group/q2-radio-group.js

@@ -12,11 +12,22 @@ export class Q2RadioGroup {
         // #region Own Properties
         this._id = `radio-group-${createGuid()}`;
         // #endregion
+        // #region State Properties
+        this.responsiveOrientation = 'vertical';
+        // #endregion
         // #region Public Property API
         /** Determines if all radios in the group are put into a `disabled` state. */
         this.disabled = false;
         /** Determines if the component should display in an errant state. */
         this.hasError = false;
+        /** The layout direction of radio options when `tileLayout` is not enabled. */
+        this.orientation = 'vertical';
+        /**
+         * The width, in pixels, below which a horizontal non-tile layout displays vertically.
+         *
+         * @info The component determines this based on its own width, not the browser window.
+         */
+        this.orientationThreshold = 440;
         /** Provides alignment direction for tile-style radio group. */
         this.tileAlignment = 'center';
         this.checkedRadioExists = () => {
@@ -32,6 +43,10 @@ export class Q2RadioGroup {
                     this.radioElements[0].tabIndex = 0;
             }
         };
+        this.handleResize = (event) => {
+            const width = event.detail.entries[0].contentRect.width;
+            this.responsiveOrientation = width < this.orientationThreshold ? 'vertical' : 'horizontal';
+        };
         this.onInnerRadioChange = (event) => {
             event.stopImmediatePropagation();
             if (this.readonly)
@@ -156,6 +171,9 @@ export class Q2RadioGroup {
     }
     // #endregion
     // #region Local Methods
+    get computedOrientation() {
+        return this.orientation === 'horizontal' ? this.responsiveOrientation : 'vertical';
+    }
     get inputId() {
         return this._id;
     }
@@ -169,7 +187,7 @@ export class Q2RadioGroup {
             return (h("div", { class: `tile-container ${alignment}` }, h("div", { class: "options-container" }, h("slot", null))));
         }
         else {
-            return (h("div", { class: "options-container" }, h("slot", null)));
+            return (h("div", { class: `options-container ${this.computedOrientation}` }, h("slot", null)));
         }
     }
     // #endregion
@@ -178,7 +196,7 @@ export class Q2RadioGroup {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = (showLabel && !this.hideLabel) || hasError;
-        return (h(Fragment, { key: '9aadfcdafda1190aac1d1d23f02d73d9d0982cfb' }, showLabelRow && (h("div", { key: '80ffd1095a810f95e89b839bd4c9e9b10b10c56a', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '82663c3dc58235e5a15c6a96d61c0f899e51b34c', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: '75aab19da924c83a43c311c8718213e554e1e41d', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'df81b71c57ac1c2b7812b1e12dc4f85b95563895', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: 'c3aff2496cb12cfaa774aac545f399508f0a679c', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: '0503a52d9cb4715cba418f445b708ad650aa5f1f' }, showLabelRow && (h("div", { key: '7236b03ea65a44bbfacf57944370236c9653d69c', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: 'fbede7f7cfbd2c0fe8364a77966009a2e14ede37', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: 'b7d7456a6fd1e673d5799748a727db2babc3d2bf', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'cba87bdefb32eaa0cd6cc1760d874fd622146b5e', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: 'c4ff0e86435564ece7e468ecd7b0e373ae9fc078', class: "sr-only" }, renderLabel(this)), h("q2-resize-observer", { key: 'f3bfe6941b46da58433ed959017a4383c07ce16d', onTctResize: this.handleResize, disabled: this.tileLayout || this.orientation !== 'horizontal' }, this.inputDom()))));
     }
     static get is() { return "q2-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -247,9 +265,9 @@ export class Q2RadioGroup {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
-                    "text": "Hide's the group's `<label>` element from view."
+                    "text": "Hides the group's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -268,6 +286,9 @@ export class Q2RadioGroup {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],
@@ -316,6 +337,49 @@ export class Q2RadioGroup {
                 "reflect": true,
                 "attribute": "optional"
             },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The layout direction of radio options when `tileLayout` is not enabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "orientationThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "The component determines this based on its own width, not the browser window."
+                        }],
+                    "text": "The width, in pixels, below which a horizontal non-tile layout displays vertically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation-threshold",
+                "defaultValue": "440"
+            },
             "readonly": {
                 "type": "boolean",
                 "mutable": false,
@@ -417,6 +481,11 @@ export class Q2RadioGroup {
             }
         };
     }
+    static get states() {
+        return {
+            "responsiveOrientation": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "change",

package/dist/collection/components/q2-radio-group/test/q2-radio-group-test.vr.js

@@ -42,11 +42,38 @@ const VARIANTS = [
         html: `<q2-radio-group label="Hidden" name="g1" hide-label>${RADIOS}</q2-radio-group>`,
         states: ['resting'],
     },
+    {
+        name: 'horizontal',
+        html: `<q2-radio-group label="Group" name="g1" orientation="horizontal">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'horizontal-centered',
+        html: `<q2-radio-group label="Group" name="g1" orientation="horizontal" style="--tct-radio-group-horizontal-gap: 20px; --tct-radio-group-justify-content: center">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'horizontal-mobile',
+        html: `<q2-radio-group label="Group" name="g1" orientation="horizontal">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+        viewport: { width: 375, height: 600 },
+    },
+    {
+        name: 'vertical-with-separators',
+        html: `<q2-radio-group label="Group" name="g1" style="--tct-radio-group-separator-width: 4px; --tct-radio-min-height: 48px">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
     {
         name: 'tile-layout',
-        html: `<q2-radio-group label="Group" name="g1" tile-layout>${RADIOS}</q2-radio-group>`,
+        html: `<q2-radio-group label="Group" name="g1" tile-layout value="2">${RADIOS}</q2-radio-group>`,
         states: ['resting', 'hover', 'focus'],
     },
+    {
+        name: 'tile-layout-focus-last',
+        html: `<q2-radio-group label="Group" name="g1" tile-layout value="2">${RADIOS}</q2-radio-group>`,
+        states: ['focus'],
+        focusSteps: 2,
+    },
     {
         name: 'tile-layout-left',
         html: `<q2-radio-group label="Group" name="g1" tile-layout tile-alignment="left">${RADIOS}</q2-radio-group>`,
@@ -63,15 +90,24 @@ const VARIANTS = [
         states: ['resting'],
     },
 ];
+const waitForRadioGroup = async (page) => {
+    await page.locator('q2-radio-group[stencil-hydrated]').waitFor();
+    await expect(page.locator('q2-radio[stencil-hydrated]')).toHaveCount(3);
+    await page.evaluate(() => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))));
+};
 const restingCase = (variant, theme) => {
     test(`q2-radio-group--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        if (variant.viewport)
+            await page.setViewportSize(variant.viewport);
         await setupPage(page, variant.html, { theme });
+        await waitForRadioGroup(page);
         await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--resting--${theme}.png`);
     });
 };
 const hoverCase = (variant, theme) => {
     test(`q2-radio-group--${variant.name}--hover — ${theme}`, async ({ page }) => {
         await setupPage(page, variant.html, { theme });
+        await waitForRadioGroup(page);
         // Hover the first radio (a tile when tile-layout is active).
         await page.locator('q2-radio').first().hover();
         await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--hover--${theme}.png`);
@@ -79,8 +115,13 @@ const hoverCase = (variant, theme) => {
 };
 const focusCase = (variant, theme) => {
     test(`q2-radio-group--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        var _a;
         await setupPage(page, variant.html, { theme });
+        await waitForRadioGroup(page);
         await page.keyboard.press('Tab');
+        for (let step = 0; step < ((_a = variant.focusSteps) !== null && _a !== void 0 ? _a : 0); step++) {
+            await page.keyboard.press('ArrowRight');
+        }
         await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--focus--${theme}.png`);
     });
 };
@@ -102,6 +143,7 @@ test.describe(`q2-radio-group — scaled font size × themes`, () => {
     for (const theme of THEMES) {
         test(`q2-radio-group--optional--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
             await setupPage(page, OPTIONAL_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await waitForRadioGroup(page);
             await expect(page).toHaveScreenshot(`q2-radio-group--optional--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
         });
     }

package/dist/collection/components/q2-relative-time/q2-relative-time.js

@@ -74,7 +74,7 @@ export class Q2RelativeTime {
             return;
         }
         const message = intlFormatDistance(new Date(dateObject), new Date(baseDateObject), {
-            locale,
+            locale: locale || document.documentElement.lang || 'en-US',
             localeMatcher: 'best fit',
             numeric: handleNumeric,
             style: messageFormat,
@@ -153,7 +153,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '48a6ad8165ea3380500edb280142a47e0a7a6848' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'c6d24ac6d794284c3f0ea654f1999ff6e201f8b1' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-resize-observer/q2-resize-observer.js

@@ -76,7 +76,7 @@ export class Q2ResizeObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'f5cc2cee6e979f047d3854d243ec3560ae5cb35d', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'cd3c22934ee46501f6ab1dc317ab702ba97150f3', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-resize-observer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-search/q2-search.css

@@ -147,6 +147,7 @@ button {
 }
 
 /**
+ * @prop --tct-search-icon-size: (<length>) Controls the size of search input icons, including slotted icons and clear.
  * @prop --tct-search-margin?: (<length-percentage>+) Controls the margin of the component host as a shorthand. Overrides --tct-search-margin-top and --tct-search-margin-bottom when set.
  * @prop --tct-search-margin-top: (<length-percentage>) Controls the top margin of the component host.
  * @prop --tct-search-margin-bottom: (<length-percentage>) Controls the bottom margin of the component host.
@@ -187,6 +188,7 @@ button {
 }
 
 .q2-search-input {
+  --tct-input-icon-size: var(--tct-search-icon-size, var(--const-px-18, 18px));
   margin: 0;
   --tct-input-min-height: var(--tct-search-input-min-height, initial);
   --tct-input-max-height: var(--tct-search-input-max-height, none);

package/dist/collection/components/q2-search/q2-search.js

@@ -45,7 +45,7 @@ export class Q2Search {
         /**
          * Hides the field's `<label>` element from view.
          * @warning
-         * Only use when a visible label is impractical.
+         * Hides the label visually. `label` text is still required for screenreader compliance.
          */
         this.hideLabel = false;
         /**
@@ -771,7 +771,7 @@ export class Q2Search {
         return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, h("slot", null)), showEmpty && this.renderEmpty(), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" })), this.loading && (h("div", { class: "loading-overlay", "aria-hidden": "true" }, h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (h(Fragment, { key: '78ce7b735d59271600debb18ab2f0f5cf315e465' }, h("div", { key: 'd3e9a713581842cc62969a0df9556733edf6e378', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '6912af1d8f31af8de7c7ffb28786756819c57afc', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '95a5397765aab6d3279b3d81cc31215f235aefc2', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
+        return (h(Fragment, { key: '282a0d7a6fc3199a2ae52a9a6f1c3ace8b58c00d' }, h("div", { key: 'b45c3a05cfb004bf7dfbf266af0e983c9740f7e6', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '603d6b423bd6e2a6f3b90b85f13e744d157c7c61', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '267c12c340e038bb5d10133d59955b4067699fbf', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
                 [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }, this.renderCustomDisplay()), this.renderOptionsDropdown())));
     }
@@ -882,7 +882,7 @@ export class Q2Search {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
                     "text": "Hides the field's `<label>` element from view."
                 },
@@ -923,6 +923,9 @@ export class Q2Search {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],

package/dist/collection/components/q2-section/q2-section.css

@@ -104,6 +104,7 @@ button {
  * @prop --tct-section-header-min-height: (<length>) Controls the minimum height of the section header when a header is present.
  * @prop --tct-section-title-margin?: (<length-percentage>+) Controls the optional outer margin of the section title.
  * @prop --tct-section-title-font-size: (<length-percentage>) Controls the font size of the section title.
+ * @prop --tct-section-icon-size: (<length>) Controls the size of the section expand/collapse icon.
  * @prop --tct-section-title-font-weight: (<number>) Controls the font weight of the section title.
  * @prop --tct-section-title-text-transform?: (<custom-ident>) Controls the optional text transform of the section title.
  * @prop --tct-section-title-letter-spacing?: (<length>) Controls the optional letter spacing of the section title.
@@ -182,6 +183,7 @@ header.has-header {
 }
 
 q2-icon {
+  --tct-icon-size: var(--tct-section-icon-size, var(--const-px-18, 18px));
   transition: transform var(--comp-tween);
 }
 :host(:not([expanded])) q2-icon, :host([expanded=false]) q2-icon {

package/dist/collection/components/q2-section/q2-section.js

@@ -1,5 +1,5 @@
 import { h, } from "@stencil/core";
-import { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from "../../utils/index";
+import { hasSlotContent, isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
 /**
  * @name Section
@@ -40,9 +40,9 @@ export class Q2Section {
             });
         };
         this.onHeaderSlotChange = () => {
-            const hasSlotContent = !!this.hostElement.querySelector('[slot="q2-section-header"]');
-            if (this.hasYieldedHeader !== hasSlotContent) {
-                this.hasYieldedHeader = !!hasSlotContent;
+            const hasHeader = hasSlotContent(this.hostElement, 'q2-section-header');
+            if (this.hasYieldedHeader !== hasHeader) {
+                this.hasYieldedHeader = hasHeader;
             }
         };
         this.onTransitionEnd = () => {
@@ -186,9 +186,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '5dbed551d8571ef48b81fe7fc40b0c56db2d685a', class: "wrapper" }, h("header", { key: 'dfc3bc20a49856a2fcdee6b5cae1626e32ff5416', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'b9073b701f1006f8048cac33b4cae9e44888c8e2', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'd701205c1808c6eaf2b7f3739c7488d934cf1cc0', class: "title" }, loc(this.label)), h("div", { key: '5428fcecafd6e84a884783c0cc1223cb91160f69', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'f7d873afc6f319c259e11db10e7cf2d3010ca3c6', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '6143342070b00156a36db039dee5e19a1a6cbe2f', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '297304e09f1b60c2a3e4d8146ff7b75f14d64e5c', type: "chevron-up" })))), h("div", { key: '3a78d8a8ffde28f5e006fd988f6d01463758c4c1', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '671c4611adeaff5c3e53d05a43955851d682c792', class: "wrapper" }, h("header", { key: 'fb724579804c9c3dd4da39bbc45d6df5cfad3815', class: hasHeader ? 'has-header' : '' }, h("div", { key: '76ad513b058264c1dbbeac7732120fea97586e1f', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '6717219e621e8b605e4cbc7fa4f1f84bd4b1f20a', class: "title" }, loc(this.label)), h("div", { key: '61acf1ce4b3281aed6f35571a62f4da58d692d10', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'acd5b6f6337700edf60fd03ce3d35a634eb2f97c', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '02543820b86cf3d8fd103e0384d283e130fc2212', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: 'fc7484a585f815948d1bed037948f21e777336f5', type: "chevron-up" })))), h("div", { key: 'f57ce6b9a2e8f8ca589274d496362f106148b499', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '0c7019101641ae7d05772a9ec4e8c16ca40e1112', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '49a17e0cd8279255eec0dc2d7344dc0fa260dc46', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: 'e1473a0a5f86918df19119a62f99918e8f2203f2', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f4f92ebdb06b45be6d70759b6b59caf31f816b04', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-select/q2-select.css

@@ -147,6 +147,7 @@ button {
 }
 
 /**
+ * @prop --tct-select-icon-size: (<length>) Controls the size of the select chevron and clear icons.
  * @prop --tct-select-margin: (<length-percentage>+) Controls the outer margin of the select host.
  * @prop --tct-select-margin-top: (<length-percentage>) Controls the top margin of the select host when --tct-select-margin is not set.
  * @prop --tct-select-margin-bottom: (<length-percentage>) Controls the bottom margin of the select host when --tct-select-margin is not set.
@@ -176,6 +177,8 @@ button {
 
 .q2-select-input {
   margin: 0;
+  letter-spacing: inherit;
+  --tct-input-icon-size: var(--tct-select-icon-size, var(--const-px-18, 18px));
   --tct-input-min-height: var(--tct-select-input-min-height, var(--t-select-input-min-height));
   --tct-input-max-height: var(--tct-select-input-max-height, var(--t-select-input-max-height, none));
 }