q2-tecton-elements 1.72.0 → 1.73.1

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: '4b3787554c37521bc3467345cdd1d733cffba3a5' }, h("div", { key: '696caa142cffecf1e0d62afafd826dce37f75512', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: 'f8b493ec8f7da09fad48f9fa30f0e9be7fbaedf4', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '44e0ad4b7825ac319dd4277ccb93d4dd66acef12', 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.js

@@ -186,9 +186,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '1614590b2058a69ebaee5a59455ec5c8bfa30bde', class: "wrapper" }, h("header", { key: 'e52e3037b59ac3443e812299114850dd6ed8810b', class: hasHeader ? 'has-header' : '' }, h("div", { key: '2066c8ff48cb4c6445068207533b3b6b808e9dd7', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'a159d8b6bc29e10711b603aef2ce6c1419f4b7ae', class: "title" }, loc(this.label)), h("div", { key: '829f24123711551a6e3792cb66a2759386d6bec8', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '22c2518c55bf5f6160917beea8ab2c523bf76169', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '950c09ccfad31453393a52cd21321338d53ac03b', 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: 'a962ea4f0f5c0ba761d3c3eafd31a16f0338c8da', type: "chevron-up" })))), h("div", { key: '45a1762386b7bf88fcaa50c18c1ac059b93d2e59', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '5adb22a7e6cf098fa3cf2325c945c6aa1c20b2d5', class: "wrapper" }, h("header", { key: 'c04df6d07756c27374e4be85ad88848a0c1ac897', class: hasHeader ? 'has-header' : '' }, h("div", { key: '8cd09e8bf367a7510b91106b8ebd4f419faff861', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '195e1523e68c83e294bd92d617b8c4d44e679494', class: "title" }, loc(this.label)), h("div", { key: 'e493986ee113d44bf74b11116003939f3db24bd7', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '44f2dc2ca76acfd800a1435608a75bf6e3258d37', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'b2602555b9282c8149780f65d2fbaa65febc1f50', 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: '62728524b58cf5cf7aa2531df1218d3bf0b40b0a', type: "chevron-up" })))), h("div", { key: '13ef854a01937880007fb4021b1528c1b83fe937', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '80508c39608fa4bf3d6f1911ff592f04e5115014', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'c88062ea0a59b62143e22c8492a8d06826a27a83', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '866d8b0301a9c5979f5b3bd31086d25f73373709', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '36c97155aa106dc1587537066e031c7d6c032295', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -410,8 +410,12 @@ export class Q2Select {
         this.inputKeydownHandler(event);
     }
     popoverStateChanged({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        if (this.open === open)
+            return;
+        this.open = open;
+        if (open)
+            return;
+        this.focusInput();
     }
     handleTctClick() {
         const { name, version } = getBrowserInfo();
@@ -846,7 +850,7 @@ export class Q2Select {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (h("click-elsewhere", { key: '5c9a6d681aedcebfbadd6b1249f7bcd96c27809c', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (h("click-elsewhere", { key: 'c5ee7401b7dc4350fb01992e9a8a76e6700cb63c', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }
@@ -956,9 +960,9 @@ export class Q2Select {
                 "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 field's `<label>` element from view."
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -1019,6 +1023,9 @@ export class Q2Select {
                 "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-stepper/q2-stepper.js

@@ -295,7 +295,7 @@ export class Q2Stepper {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: 'cd7a09546e4b74cf98f5e27dbcf0efce71e02781' }, h("div", { key: 'aaa383584217da20fdd01174f4b136dfef0128b7', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '6f7f38d768b274409606132cc62d36d48812f50c' }, h("div", { key: '98e26550803496a0edd0e7415b4ec9e16b501722', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '58102ecd26dd3f6b36d530f36ecc109b287b4faa', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'a475ba4a846ea5cf93a5ca46422a5473e0d266bd', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'b040f724a926e5c07a81438e3586e0eb7a3c063b', type: "chevron-left" })), h("q2-btn", { key: '119dbcd49ce282cbccd58be097f8833e22df4fb4', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'c656a9493134eb6a4ea0a008ee94829fc708ecfe', type: "chevron-right" })))), h("ul", { key: '09e1472989c7c2e6c40504072bca2790865e013a', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '0b25c172d585892aa9e286dac6080ce2bbb80e1a', role: "list" }, h("slot", { key: '507375368c8e89a94f8af0a44bf4951fd14d7466', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '423f7d50f787abf21c14730ae9cd50cd3638b17b' }, h("div", { key: '2ffacd2f9792075956748eb6960975d9aeda28ad', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'da90a671295ce6702c3bc6f1ab71f671cda2c9c8' }, h("div", { key: '319c4a75dfafd7b03d3f7f13156f24bd1ca7b0c3', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '80a08dc979685d94f6cfe20d66787d06e7d46014', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '43a71cb3212ddbe37c6e7d7051850efd49ced456', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '19ee5abc690bba84016fb8c692a74b5c233aa426', type: "chevron-left" })), h("q2-btn", { key: 'f26bc502269a5d60308aba041a6d9a75efcf2573', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '7f35a54468433010427213e18d213b1c227413a6', type: "chevron-right" })))), h("ul", { key: '0bc4eed617263c7e4a6138c3a884f6a1b8bc2ca6', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '87945c612fcaa70164faa50d78bb63c9b290e3f2', role: "list" }, h("slot", { key: '4b55529f41b4731dc1424c8be4fcd941ff2c2f33', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,7 +73,7 @@ export class Q2StepperPane {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (h(Host, { key: '7acf643f717380c37eb25334534afbca81ac8ab6', role: "listitem" }, h(Fragment, { key: '0241a9ad68973eea81c961070d6171dab3241f79' }, h("div", { key: '6678cb4a7e65a3a4341ff552682c1011c588108b', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '0f8d339f894bdaa55bd5bdf94b1220da7a083dde' })), h("div", { key: '51e3934ad791e45486360ab8c6509b68e3a15d9d', hidden: true }, h("span", { key: '96fe08c826d87f86559fe2dbb586914b4065eb40', id: "pane-label" }, h("slot", { key: 'b4cab1594ae047f032fbaa67f75167e31cc4cdf7', name: "label", onSlotchange: () => this.contentChange.emit() }, label && loc(label))), h("slot", { key: '473cf6b9bc3ef5995d11e46502db1321d59baa5e', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '76cb24680ed1ec8a49956f888accf3fd07da7fa0', name: "children" }))));
+        return (h(Host, { key: '3929b6bdb716394892be2bcdd933864e43f0204e', role: "listitem" }, h(Fragment, { key: 'd913741a6b71aebef92be14fd7ee541a3d5568da' }, h("div", { key: '038d29ac861f70ad15350da7733b39eece30e538', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '56f4c0d9edfe134886d46367f2c801348267b53d' })), h("div", { key: '88bf8a9e1a6124c39d9ac4ee8906f61ac026966a', hidden: true }, h("span", { key: 'db485a5e84ab67fe714f0861fcd05c4b0bd7722f', id: "pane-label" }, h("slot", { key: '940a9a3a8543fd4c64425db2b7ea7b9cf079c947', name: "label", onSlotchange: () => this.contentChange.emit() }, label && loc(label))), h("slot", { key: '74a78697ed1aa85fca66743023d303c7abea0116', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '4fb660b547a2da7dca37de9106b20b93b72aaf83', name: "children" }))));
     }
     static get is() { return "q2-stepper-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -325,7 +325,7 @@ export class Q2StepperVertical {
         return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, label && (h(Fragment, null, h("span", { class: "sr-only", id: positionId }, positionLabel), h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { "aria-hidden": "true", type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(stepLabel) }), description && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) }))))), this.renderSpacer(pane, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: '9d40414e7b510493b0236568c4d6231eeacdbd80' }, h("ul", { key: 'b3a444833439d59be874a2bf04833f8df0ff107f', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '34f3841d0eb0c5fe96670ac3d5e87244682ace74', role: "list" }, h("slot", { key: 'e224e413162cb28eab4ec0e8b51367ed3b83fa0b' }))));
+        return (h(Fragment, { key: 'd2e82613e91ef3acf210781f807807b0fba8e7fc' }, h("ul", { key: '1ad1e36d0fca4b0c1cf793de43d9ea9ccb76974f', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: 'ee710c6cb41011be7a8223ec817563cfeaeb6b71', role: "list" }, h("slot", { key: '0d1f6f53b73f72f163fc219de8db9736f669720d' }))));
     }
     static get is() { return "q2-stepper-vertical"; }
     static get encapsulation() { return "shadow"; }

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

@@ -84,7 +84,7 @@ export class Q2Surface {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '8dd96991bc74e2157dc256f21eb4953eaeffdd46' }, h("div", { key: 'a5b315fd3e6dd999cd704b3fd2c9de5ffb139033', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: '4897bfe06a95bf14eddf2bb964bf4a27ed96798a' }))));
+        return (h(Host, { key: 'fba508447ca646c22aa4a14872d78e02294a2fa1' }, h("div", { key: '46ac755e4c071b2345be0ba4272f283ac2758a82', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: '699fdd1427248cdff8ecf1b3b1ca1d4a892dd763' }))));
     }
     static get is() { return "q2-surface"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-surface/test/q2-surface-test.vr.js

@@ -105,8 +105,8 @@ const VARIANTS = [
         html: `<q2-surface border="default" inset="normal" radius="2">
             <p>Body copy above the action group.</p>
             <q2-action-group>
-                <q2-btn intent="workflow-primary">Confirm</q2-btn>
-                <q2-btn intent="workflow-secondary">Cancel</q2-btn>
+                <q2-btn intent="primary">Confirm</q2-btn>
+                <q2-btn intent="secondary">Cancel</q2-btn>
             </q2-action-group>
         </q2-surface>`,
         states: ['resting'],

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

@@ -335,7 +335,7 @@ export class Q2TabContainer {
     }
     render() {
         const isVertical = this.computedOrientation === 'vertical';
-        return (h(Fragment, { key: '684e234955e0d7f9b929a1e80e323ba62db4d066' }, h("div", { key: '92ea060ada2cc956817f4eb9cb97d0f110c5032a', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'b43a4ff0510de5adfefde8f5184ab5f3f1d95563' }, h("div", { key: '3daed974f567574741534b4c39c6fa0ddb1c7f58', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: '36266d6970a75fff03e538c12951a530220b2756', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: '7c5b35fee0bbd981520f55fe99fc53143be7376c', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '0759d5d77d603074acc21bd9a29e4db50f0474a2', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: '419c43832886d9aae9b63eba545ffb8122f862b6', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: '4148a86411c5859b0253da31439ff90ad78490b3', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: 'fdd72d9ba1d932497b5d7cd9e14d926fe1e92f72', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: 'e9d90030fcc43f17a43aa2e4a306e3489b4c4110', class: "tab-content" }, h("slot", { key: '130ddf5f14ec801e09471b9cf4ab080e4bf5fc27', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '37c84e750a2494ea2b4302fd99e0cebc443d58ce' }, h("div", { key: '249effad5ab4e880c2c203ac0e4024557c310679', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '10a7d53d5bde829e5897722cd924d40ce90a0b82' }, h("div", { key: 'b2acc786c41a9d1a8d3e951fdc36ecea3a304664', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: 'fa70173c7d845f88417c6b6b6d54884ead80f34f', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: 'd953c160ff42503dce5bb7c60d8234bdd9196d73', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '3980ef873b5d7ae6c50eb868455839344dda9701', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: 'a3b1f46355ab1de2f73ac7529b734b684194093f', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: 'a2ec50ff7e0cce3716ba890c626fa56e62ecddbb', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: 'e42bbb379d396a25b3af96985504a8f4bae1bba0', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '7d1f6ac5262cccb0b7087b3d93f33e46390814af', class: "tab-content" }, h("slot", { key: 'fa341fadca5ba04fe21ef7186cc0e15b5c7357db', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '2ff20db182ab3bf252df52bbcb7be2b39893d17c', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '871922c3065609934e6a6a8c62000c84551a612a' })));
+        return (h("div", { key: '1a957a6a6fb4dee7e420d46ad5f576b5b25008c4', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '9c9dc847674f0a829feb822808f7e3dac9ac3263' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -132,11 +132,14 @@ export class Q2Tag {
         this.dropdownBtn.focus();
     }
     popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        var _a;
+        if (this.open === open)
+            return;
+        this.open = open;
         if (open)
             return;
         this.optionList.setActiveElement(null);
+        (_a = this.dropdownBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -194,7 +197,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: 'da6dc23ff4f250b18242a49db02eccc16210b043' }, h("click-elsewhere", { key: 'ee1da442ffd5aa53e55ae95f95b3ac51e2f5c71e', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '578989b60b19f6f5e01c1cbc49a83e87fc74c5a9', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'd21abcd1fe11241e14b4f411d9559c12c139c18a', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'd46ec7dad47e40cec883205d6fb2424abcdd1038' })))))));
+        return (h(Host, { key: 'a46abe562647fe64e55427bcc8284bbfc5f01e3f' }, h("click-elsewhere", { key: '667e76295c30be78462ee67128a8fb2c38c01285', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '805e64b738fc5a0b1a73968636a8843af33834ef', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '1d037878cfcf4785439edb9a5693d4dba700e947', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '1039cd355f5b1a7ec7cab1eca80479042060fef4' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -277,7 +277,7 @@ export class Q2Textarea {
         ]))));
     }
     render() {
-        return (h("div", { key: '9b3eb74c84edd99af52a0ec71ba8b2fd8adbd1f2', class: this.wrapperClasses }, renderLabel(this), h("div", { key: 'a00772502ea6c1fde5af5bf4c12f0606a629252a', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: '21a303feabd0c8fc09d9cc7f0de8b9b50081a56a', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '58b5be24312fe523d09efe176b1ecf42b884166a', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     static get is() { return "q2-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -364,9 +364,9 @@ export class Q2Textarea {
                 "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 field's `<label>` element from view."
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -427,6 +427,9 @@ export class Q2Textarea {
                 "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-tooltip/test/q2-tooltip-test.vr.js

@@ -1,7 +1,7 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
 import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
-const TRIGGER = `<q2-btn intent="workflow-primary"><span>Trigger</span></q2-btn>`;
+const TRIGGER = `<q2-btn intent="primary"><span>Trigger</span></q2-btn>`;
 // Pad the wrapper so the tooltip has room to render in any direction without clipping.
 const wrap = (inner) => `<div style="padding: 80px; display: inline-block;">${inner}</div>`;
 // Use `immediate` so hover doesn't have to wait through the 1s delay before the

package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js

@@ -51,9 +51,9 @@ export class TectonTabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6c0524ab1981900cc7a37803fd9426c6397049c4', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '10cc2712e1ccefa6a9bb3b657830636da4d81980' }, h("slot", { key: 'cde7112d4035c6f118e9c50b0fe5d9d91c70ee7d', name: "loading-wrapper" }), h("iframe", { key: '851972991feb3b8f6c7f569e92ff2e624d94e221', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (h("div", { key: '313fa13779cd8ecb5439b1a96cb7aaf17f6c871b', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '5207414b205d1e9a25fb1455ca21ff7cc913a5fd' }, h("slot", { key: 'd883e909e38981f315bc1cab9ef57957a616c0d5', name: "loading-wrapper" }), h("iframe", { key: '2f0233d04d3c5be619cb54bfe637252a7ef42d77', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), h("div", { key: '741c6f2c89dc15493f165428929f589425aa4d75', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '17100ec2dc0ea2d1e27628d36e9e6e1139f293a9' }))));
+        }))) : (''))), h("div", { key: 'ae5ee8d5a5a7d1b798f4111b33120d301b86a16b', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'cb1057d2b6cb467a25da1577610bfcc5b6300047' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/chart-keyboard.js

@@ -0,0 +1,76 @@
+import { loc } from "./index";
+/** Localized feedback shared by chart keyboard controls. */
+export function chartPointDescription(name, value, index, count) {
+    return loc('tecton.element.chart.pointDescription', [loc(name) || '', value, `${index + 1}`, `${count}`]);
+}
+/** Coordinates keyboard exploration with ECharts emphasis without changing chart data. */
+export function createChartKeyboardNavigation(options) {
+    let index = null;
+    let focused = false;
+    const clear = () => {
+        var _a;
+        if (index !== null) {
+            (_a = options.getChart()) === null || _a === void 0 ? void 0 : _a.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index });
+        }
+        index = null;
+        options.onChange(null);
+    };
+    const select = (next) => {
+        var _a;
+        if (!options.getData()[next] || next === index)
+            return;
+        clear();
+        index = next;
+        (_a = options.getChart()) === null || _a === void 0 ? void 0 : _a.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index });
+        options.onChange(index);
+    };
+    const order = () => { var _a, _b; return (_b = (_a = options.getOrder) === null || _a === void 0 ? void 0 : _a.call(options)) !== null && _b !== void 0 ? _b : options.getData().map((_, i) => i); };
+    return {
+        onFocus: () => {
+            focused = true;
+            select(order()[0]);
+        },
+        onBlur: () => {
+            focused = false;
+            clear();
+        },
+        onKeyDown: (event) => {
+            if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
+            const indices = order();
+            if (!indices.length)
+                return;
+            const position = index === null ? -1 : indices.indexOf(index);
+            let next;
+            switch (event.key) {
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    next = Math.min(position + 1, indices.length - 1);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    next = Math.max(position - 1, 0);
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = indices.length - 1;
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    clear();
+                    return;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            select(indices[next]);
+        },
+        refresh: () => {
+            clear();
+            if (focused)
+                select(order()[0]);
+        },
+    };
+}

package/dist/collection/utils/date-picker/date-picker-helpers.js

@@ -0,0 +1,239 @@
+import { addDays, format as formatDate, formatISO, isAfter, isBefore, isSameDay, isValid as isValidDate, } from "date-fns";
+import { loc } from "../index";
+const defaultDisplayFormat = 'MM/DD/YYYY';
+const supportedDisplayFormats = [
+    defaultDisplayFormat,
+    'DD/MM/YYYY',
+    'MM-DD-YYYY',
+    'DD-MM-YYYY',
+    'YYYY-MM-DD',
+];
+const defaultDatePickerStringKeys = {
+    'Choose a date': 'tecton.element.datePicker.calendarLabel',
+    'Dates are shown in your local time zone.': 'tecton.element.datePicker.disclaimer.localTimeZone',
+};
+const isoDatePattern = /^\d{4}-\d{2}-\d{2}$/;
+const isoLikeDatePattern = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:T.*)?$/;
+const slashDatePattern = /^(\d{1,2})\/(\d{1,2})\/(\d{2}|\d{4})$/;
+/** Determines a year for a month and day when typeable input omits the year. */
+export function buildInputDate(input, assume) {
+    const [month, day, year] = input.split('/');
+    if (!month)
+        return;
+    if (!day)
+        return new Date(new Date().getFullYear(), Number(month) - 1, 1);
+    if (Number(day) <= 0)
+        return;
+    const selectedYear = (year === null || year === void 0 ? void 0 : year.length) === 4 ? Number(year) : Number(assumeYear(month, day, assume));
+    const date = new Date(selectedYear, Number(month) - 1, Number(day));
+    return isValidDate(date) ? date : undefined;
+}
+/** Formats a valid date as an ISO calendar date. */
+export function formatDateISO(value) {
+    if (!isValidDate(value))
+        return;
+    return formatISO(value, { representation: 'date' });
+}
+/** Formats a date for an accessible day label. */
+export function formatDateFull(value) {
+    if (!isValidDate(value))
+        return;
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        weekday: 'long',
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    }).format(value);
+}
+/** Returns localized abbreviated day names beginning with Sunday. */
+export function getDays() {
+    return [
+        loc('tecton.element.calendar.days.short.Sunday'),
+        loc('tecton.element.calendar.days.short.Monday'),
+        loc('tecton.element.calendar.days.short.Tuesday'),
+        loc('tecton.element.calendar.days.short.Wednesday'),
+        loc('tecton.element.calendar.days.short.Thursday'),
+        loc('tecton.element.calendar.days.short.Friday'),
+        loc('tecton.element.calendar.days.short.Saturday'),
+    ];
+}
+/** Returns localized full day names beginning with Sunday. */
+export function getDaysOfWeek() {
+    return [
+        loc('tecton.element.calendar.days.Sunday'),
+        loc('tecton.element.calendar.days.Monday'),
+        loc('tecton.element.calendar.days.Tuesday'),
+        loc('tecton.element.calendar.days.Wednesday'),
+        loc('tecton.element.calendar.days.Thursday'),
+        loc('tecton.element.calendar.days.Friday'),
+        loc('tecton.element.calendar.days.Saturday'),
+    ];
+}
+/** Parses the date picker's public ISO-only value contract. */
+export function parseDatePickerValue(value) {
+    if (!value || !isoDatePattern.test(value))
+        return;
+    const [year, month, day] = value.split('-').map(Number);
+    return dateFromParts(year, month, day);
+}
+/** Normalizes a legacy string or Moment-like value for the date picker's ISO-only calendar. */
+export function normalizeDatePickerValue(value) {
+    if (!value)
+        return;
+    let date;
+    if (value instanceof Date) {
+        date = value;
+    }
+    else if (isMomentLike(value)) {
+        try {
+            date = value.toDate();
+        }
+        catch (_a) {
+            return;
+        }
+    }
+    else {
+        const input = value.trim();
+        if (!input)
+            return;
+        date = parseDatePickerValue(input);
+        if (!date) {
+            const isoLikeParts = input.match(isoLikeDatePattern);
+            const slashParts = input.match(slashDatePattern);
+            if (isoLikeParts) {
+                date = dateFromParts(Number(isoLikeParts[1]), Number(isoLikeParts[2]), Number(isoLikeParts[3]));
+            }
+            else if (slashParts) {
+                const parsedYear = Number(slashParts[3]);
+                const year = parsedYear < 100 ? (parsedYear >= 69 ? 1900 : 2000) + parsedYear : parsedYear;
+                date = dateFromParts(year, Number(slashParts[1]), Number(slashParts[2]));
+            }
+            else {
+                const parsedDate = new Date(input);
+                date = isValidDate(parsedDate)
+                    ? dateFromParts(parsedDate.getFullYear(), parsedDate.getMonth() + 1, parsedDate.getDate())
+                    : undefined;
+            }
+        }
+    }
+    return formatDateISO(date);
+}
+/** Returns the month and year used to initialize the date picker grid. */
+export function setupMonthYear(value = new Date()) {
+    return {
+        monthIndex: value.getMonth(),
+        selectedYear: value.getFullYear(),
+    };
+}
+/** Returns the enabled day indexes represented by a calendar checksum. */
+export function getValidDaysOfWeek(checksum = 127) {
+    const validDays = [];
+    for (let day = 0; day < 7; day++) {
+        if (checksum & (1 << day))
+            validDays.push(day);
+    }
+    return checksum > 0 ? validDays : [];
+}
+/** Determines whether a date satisfies the configured bounds and cutoff. */
+export function baseValidation(dateValidators, now, newDate) {
+    const isNewDateBeforeStartDate = isAfter(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.startDate, newDate);
+    const isNewDateAfterEndDate = isBefore(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate, newDate);
+    const isNowAfterCutoffTime = isSameDay(now, newDate) && isAfter(now, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.cutOffTime);
+    return !(isNewDateBeforeStartDate || isNowAfterCutoffTime || isNewDateAfterEndDate);
+}
+/** Determines whether a date's weekday is enabled. */
+export function validateAgainstChecksum(validDaysOfWeek, date) {
+    return validDaysOfWeek.includes(date.getDay());
+}
+/** Determines whether a date is absent from a blacklist. */
+export function validateAgainstBlacklist(invalidDates, date) {
+    return !validateAgainstWhitelist(invalidDates, date);
+}
+/** Determines whether a date is present in a whitelist. */
+export function validateAgainstWhitelist(validDates, date) {
+    return validDates.some(validDate => isSameDay(validDate, date));
+}
+function assumeYear(month, day, assume) {
+    const monthDay = `${month.padStart(2, '0')}/${day.padStart(2, '0')}`;
+    const now = new Date();
+    const currentMonthDay = `${now.getMonth() + 1}`.padStart(2, '0') + `/${now.getDate()}`.padStart(2, '0');
+    let year = now.getFullYear();
+    if (assume === 'future' && currentMonthDay > monthDay)
+        year++;
+    if (assume === 'past' && currentMonthDay < monthDay)
+        year--;
+    return `${year}`;
+}
+function parseDatePickerValues(values) {
+    return (values || []).map(parseDatePickerValue).filter((date) => !!date);
+}
+function dateFromParts(year, month, day) {
+    const date = new Date(0);
+    date.setFullYear(year, month - 1, day);
+    date.setHours(0, 0, 0, 0);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
+        return;
+    return date;
+}
+function isMomentLike(value) {
+    return typeof value !== 'string' && typeof (value === null || value === void 0 ? void 0 : value.toDate) === 'function';
+}
+/** Formats a date using one of the date picker's supported numeric display formats. */
+export function formatDisplayDate(date, displayFormat) {
+    const separator = displayFormat.includes('-') ? '-' : '/';
+    const month = `${date.getMonth() + 1}`.padStart(2, '0');
+    const day = `${date.getDate()}`.padStart(2, '0');
+    const year = `${date.getFullYear()}`;
+    const dateParts = displayFormat.startsWith('YYYY')
+        ? [year, month, day]
+        : displayFormat.startsWith('DD')
+            ? [day, month, year]
+            : [month, day, year];
+    return dateParts.join(separator);
+}
+/** Formats a date using the legacy Moment-style tokens accepted by q2-calendar. */
+export function formatLegacyDisplayDate(date, displayFormat) {
+    const dateFnsFormat = displayFormat
+        .replace(/[d]/g, 'E')
+        .replace(/[D]/g, 'd')
+        .replace(/[Y]/g, 'y')
+        .replace(/[l]/g, 'P')
+        .replace(/[W]/g, 'I');
+    return formatDate(date, dateFnsFormat);
+}
+/** Determines whether a date satisfies every configured selection constraint. */
+export function isDateSelectable(date, constraints) {
+    const cutoffTime = new Date(constraints.cutoffTime || '');
+    const withinBounds = baseValidation({
+        startDate: parseDatePickerValue(constraints.startDate),
+        endDate: parseDatePickerValue(constraints.endDate),
+        cutOffTime: isValidDate(cutoffTime) ? cutoffTime : undefined,
+    }, new Date(), date);
+    const validDates = parseDatePickerValues(constraints.validDates);
+    const matchesAllowedDates = (validDates === null || validDates === void 0 ? void 0 : validDates.length)
+        ? validateAgainstWhitelist(validDates, date)
+        : validateAgainstChecksum(getValidDaysOfWeek(constraints.daysOfWeekChecksum), date);
+    return (withinBounds &&
+        matchesAllowedDates &&
+        validateAgainstBlacklist(parseDatePickerValues(constraints.invalidDates), date));
+}
+/** Determines whether every date in an inclusive range is selectable. */
+export function isRangeSelectable(start, end, constraints) {
+    for (let date = start; date.getTime() <= end.getTime(); date = addDays(date, 1)) {
+        if (!isDateSelectable(date, constraints))
+            return false;
+    }
+    return true;
+}
+/** Resolves a date-picker localization key or mapped default string. */
+export function localizeDatePickerString(value, substitutions = {}) {
+    if (!value)
+        return '';
+    return loc(defaultDatePickerStringKeys[value] || value, substitutions);
+}
+/** Returns a supported display format, falling back to the date-picker default. */
+export function normalizeDisplayFormat(displayFormat) {
+    const normalizedFormat = displayFormat === null || displayFormat === void 0 ? void 0 : displayFormat.toUpperCase();
+    return supportedDisplayFormats.includes(normalizedFormat) ? normalizedFormat : defaultDisplayFormat;
+}

package/dist/collection/utils/date-picker/date-picker-types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/index.js

@@ -336,7 +336,7 @@ export const resizeIframe = () => {
 // Handling color attribute (deprecated)
 export const handleColor = (target) => {
     if (!target.intent && ['primary', 'secondary'].includes(target.color)) {
-        target.intent = `workflow-${target.color}`;
+        target.intent = target.color;
         target.color = undefined;
     }
 };