@getflip/swirl-components 0.399.1 → 0.401.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-29T09:56:18",
+  "timestamp": "2025-11-03T10:46:54",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.0",
@@ -61026,6 +61026,20 @@
       ],
       "methods": [],
       "events": [
+        {
+          "event": "clear",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
         {
           "event": "inputBlur",
           "detail": "FocusEvent",

package/dist/cjs/swirl-popover_2.cjs.entry.js

@@ -50,9 +50,16 @@ const SwirlPopover = class {
             const offsetOptions = typeof this.offset === "number"
                 ? { mainAxis: this.offset, crossAxis: 0 }
                 : { mainAxis: this.offset[0], crossAxis: this.offset[1] };
+            const shiftPaddingX = utils.getPixelsFromRemToken("--s-space-16");
+            const shiftWithPadding = floatingUi_dom_browser_min.k({
+                padding: {
+                    left: shiftPaddingX,
+                    right: shiftPaddingX,
+                },
+            });
             const middleware = this.enableFlip
-                ? [floatingUi_dom_browser_min.D(offsetOptions), floatingUi_dom_browser_min.k(), floatingUi_dom_browser_min.b()]
-                : [floatingUi_dom_browser_min.D(offsetOptions), floatingUi_dom_browser_min.k()];
+                ? [floatingUi_dom_browser_min.D(offsetOptions), shiftWithPadding, floatingUi_dom_browser_min.b()]
+                : [floatingUi_dom_browser_min.D(offsetOptions), shiftWithPadding];
             this.position = await floatingUi_dom_browser_min.P(this.triggerEl, this.contentContainer, {
                 middleware,
                 placement: this.placement,
@@ -268,14 +275,14 @@ const SwirlPopover = class {
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (index.h(index.Host, { key: '455e31122faf8e5766c7c3f505ea50f4837e5d2f', style: { display: this.active ? "inline-flex" : "none" } }, index.h("div", { key: 'b9e370e001eadee537375c65c006da022e926f8f', class: className, onKeyDown: this.onKeydown }, index.h("div", { key: '5bf0a111ae45a0b78cb5b1fd182f6e6cae4ef918', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (index.h(index.Host, { key: 'cae2c409308bf89dc66f2b89456568046aaded46', style: { display: this.active ? "inline-flex" : "none" } }, index.h("div", { key: 'db3717521769c75c2653098cbb625224dbb2eb55', class: className, onKeyDown: this.onKeydown }, index.h("div", { key: '3aab5c2bb11f1beea924f3c7de4e65a1fc8eb1d7', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-            }, tabindex: "-1" }, index.h("span", { key: '2f4351d341b6b052136d50955c113dc8749da370', class: "popover__handle" }), index.h("div", { key: '9076bbc0a9b87ead06ff6782553fe338a5fabf8e', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, index.h("span", { key: '8e448d47cb436bf6480559afc079eb6bce38fe12', class: "popover__handle" }), index.h("div", { key: '86c8939a2de68df053efacb31bdc97707007259f', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, index.h("slot", { key: 'f0311a5c9c70f7c7012d24dcd54a12155bf4c9c0' }))), this.active && (index.h("div", { key: '03b8839d5ef459920dde306baeeb71e3932b1c84', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, index.h("slot", { key: 'a5cd47d451b4cd8874b3f76a2dcab3818d71ab1c' }))), this.active && (index.h("div", { key: '05fbf70a43239cca62a57ca654aa78c3914069da', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-search.cjs.entry.js

@@ -10,6 +10,7 @@ const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-sea
 const SwirlSearch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.clear = index.createEvent(this, "clear", 7);
         this.inputBlur = index.createEvent(this, "inputBlur", 7);
         this.inputFocus = index.createEvent(this, "inputFocus", 7);
         this.inputInput = index.createEvent(this, "inputInput", 7);
@@ -19,10 +20,11 @@ const SwirlSearch = class {
         this.variant = "filled";
         this.clearable = true;
         this.mediaQueryUnsubscribe = () => { };
-        this.clear = () => {
+        this.handleClear = () => {
             this.input.value = "";
             this.input.focus();
             this.valueChange.emit("");
+            this.clear.emit();
         };
         this.onBlur = (event) => {
             this.inputBlur.emit(event);
@@ -68,7 +70,7 @@ const SwirlSearch = class {
         const className = index$1.classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (index.h(index.Host, { key: 'a20b59680e46d8c0db48dc4e4219c9880660d693' }, index.h("span", { key: '3227a1ae642458cd4d011a6f51e7146ed60e9d90', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: '6c7977231b43a3fa04eac25a7b0f6d786cc908bd', "aria-hidden": "true", class: "search__icon" }), index.h("input", { key: '773474215fde7a49dea748501fd74e99b25934bb', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (index.h("button", { key: '24eefaf684a49e976232cb422b3f6fba2fc368cd', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, index.h("swirl-icon-cancel", { key: '10c3dda4135ef1555935ee8d4a2dd17fa42d52de' }))))));
+        return (index.h(index.Host, { key: '7ed53e6408ea37542f8750b1514bb06b571ee922' }, index.h("span", { key: '2ceb66246fc660fc747525126fccf360afe4e6bb', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: 'f5fd26fccfb0e7f50b089ed91d5c6e352e257b02', "aria-hidden": "true", class: "search__icon" }), index.h("input", { key: '4d5b4f292822f95acd1a22807746fe60becab707', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (index.h("button", { key: '528cc7c7324c3077b076b112a018a6475bc145de', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, index.h("swirl-icon-cancel", { key: '51dd9c1df7cfafb2b00b9dced88650734bf64fca' }))))));
     }
 };
 SwirlSearch.style = swirlSearchCss;

package/dist/cjs/swirl-text-input.cjs.entry.js

@@ -135,7 +135,7 @@ const SwirlTextInput = class {
         }
     }
     handleAutoSelect(event) {
-        if (!this.autoSelect) {
+        if (!(this.autoSelect || this.readonly)) {
             return;
         }
         event.target.select();
@@ -166,7 +166,7 @@ const SwirlTextInput = class {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (index.h(index.Host, { key: '288582bcca41f2ae8cf3c904ed02fcb0a976be7b' }, index.h("div", { key: '817b0708b7bebf147ded143b4f0dea6206959d49', class: className }, this.prefixLabel && (index.h("span", { key: '1e1bd63e29fb41cdc58237b78e55b6744bb28cda', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '731a75748b874b5414668e4c4d412fa078b54b3e', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '2ac53e8616fba0f233c51e95b7a0686d03dc552c', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: '48f457dfb8c41726623a34b68ba5f7622705145f', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: '5f853517b77fcb680f985c5a4624732026c7d39a', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: 'a11670fac677c71297420e1ab2b7ce23dfe99671', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: 'e098155b27a7d5dd49019b2c1956b0b94e0c3035', class: "text-input__stepper" }, index.h("button", { key: '008c30c8f3bc1d7b4227db185b367d0216c051da', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: '656e442c33bd16d69057fb59158d0900e8640b2c', size: this.iconSize })), index.h("button", { key: 'f1123bb4c9440e71727846782135c31a912cebf5', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: 'bbd40a1605fa6b3757d308fd5fca6ef5cd133b59', size: this.iconSize })))), showCharacterCounter && (index.h("span", { key: '98b9121e7b79872e05cd4d4d1c956405118ba0b8', class: "text-input__character-counter", "aria-live": "polite" }, index.h("swirl-visually-hidden", { key: '339c0dd5c187d8e7818ae3dc4a75a878b3f81f6c' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (index.h(index.Host, { key: 'f822fb9a0003530bed7e53b2a6395fa0ead91d6c' }, index.h("div", { key: 'b8a048e87b0a8366b0243a8da2f80fd3571fbd6b', class: className }, this.prefixLabel && (index.h("span", { key: '20636fdec405901ebd416fce525a9c89b1ed9dbe', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '8b192a2783028e0eb1fb5703026daccef7170808', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '7b05575e9fc5f5f362f9aa23784177f16eb92660', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: '860576e47f0e34aed31a0c53a6d7d8fa4e57557b', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: '763a1558a792a017ba4a947bf7bd47220f88ee0c', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: '584dd45c5dedb11cf9c7348a49b1ca15f959742c', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: 'fbad244a2f8584c0003f581f66dc26bb9cb1f04c', class: "text-input__stepper" }, index.h("button", { key: '921cd8c3e64560ba46a7a06fd5147e132dd7bed4', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: 'df8eeb01df755b56dc0a465a02a1d76dbecafe59', size: this.iconSize })), index.h("button", { key: 'fee840a7e4a142f468292a9a69e8958869673e87', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: 'e9af53254c8f1d68c121eb8634444b410a4cb1e3', size: this.iconSize })))), showCharacterCounter && (index.h("span", { key: '88dd11daf949bcb20d1a18bd77ab64a76000b30b', class: "text-input__character-counter", "aria-live": "polite" }, index.h("swirl-visually-hidden", { key: 'f55d1fa26b458ff6b09e80f79f32b25236cc6d5f' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get watchers() { return {
         "value": ["watchValue"]

package/dist/collection/components/swirl-popover/swirl-popover.js

@@ -2,7 +2,7 @@ import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/
 import { h, Host, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import classnames from "classnames";
-import { getActiveElement, isMobileViewport, querySelectorAllDeep, } from "../../utils";
+import { getActiveElement, getPixelsFromRemToken, isMobileViewport, querySelectorAllDeep, } from "../../utils";
 /**
  * @slot slot - The popover content.
  */
@@ -45,9 +45,16 @@ export class SwirlPopover {
             const offsetOptions = typeof this.offset === "number"
                 ? { mainAxis: this.offset, crossAxis: 0 }
                 : { mainAxis: this.offset[0], crossAxis: this.offset[1] };
+            const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
+            const shiftWithPadding = shift({
+                padding: {
+                    left: shiftPaddingX,
+                    right: shiftPaddingX,
+                },
+            });
             const middleware = this.enableFlip
-                ? [offset(offsetOptions), shift(), flip()]
-                : [offset(offsetOptions), shift()];
+                ? [offset(offsetOptions), shiftWithPadding, flip()]
+                : [offset(offsetOptions), shiftWithPadding];
             this.position = await computePosition(this.triggerEl, this.contentContainer, {
                 middleware,
                 placement: this.placement,
@@ -263,14 +270,14 @@ export class SwirlPopover {
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (h(Host, { key: '455e31122faf8e5766c7c3f505ea50f4837e5d2f', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: 'b9e370e001eadee537375c65c006da022e926f8f', class: className, onKeyDown: this.onKeydown }, h("div", { key: '5bf0a111ae45a0b78cb5b1fd182f6e6cae4ef918', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (h(Host, { key: 'cae2c409308bf89dc66f2b89456568046aaded46', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: 'db3717521769c75c2653098cbb625224dbb2eb55', class: className, onKeyDown: this.onKeydown }, h("div", { key: '3aab5c2bb11f1beea924f3c7de4e65a1fc8eb1d7', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-            }, tabindex: "-1" }, h("span", { key: '2f4351d341b6b052136d50955c113dc8749da370', class: "popover__handle" }), h("div", { key: '9076bbc0a9b87ead06ff6782553fe338a5fabf8e', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, h("span", { key: '8e448d47cb436bf6480559afc079eb6bce38fe12', class: "popover__handle" }), h("div", { key: '86c8939a2de68df053efacb31bdc97707007259f', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: 'f0311a5c9c70f7c7012d24dcd54a12155bf4c9c0' }))), this.active && (h("div", { key: '03b8839d5ef459920dde306baeeb71e3932b1c84', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: 'a5cd47d451b4cd8874b3f76a2dcab3818d71ab1c' }))), this.active && (h("div", { key: '05fbf70a43239cca62a57ca654aa78c3914069da', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,10 +8,11 @@ export class SwirlSearch {
         this.variant = "filled";
         this.clearable = true;
         this.mediaQueryUnsubscribe = () => { };
-        this.clear = () => {
+        this.handleClear = () => {
             this.input.value = "";
             this.input.focus();
             this.valueChange.emit("");
+            this.clear.emit();
         };
         this.onBlur = (event) => {
             this.inputBlur.emit(event);
@@ -57,7 +58,7 @@ export class SwirlSearch {
         const className = classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (h(Host, { key: 'a20b59680e46d8c0db48dc4e4219c9880660d693' }, h("span", { key: '3227a1ae642458cd4d011a6f51e7146ed60e9d90', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: '6c7977231b43a3fa04eac25a7b0f6d786cc908bd', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '773474215fde7a49dea748501fd74e99b25934bb', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: '24eefaf684a49e976232cb422b3f6fba2fc368cd', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '10c3dda4135ef1555935ee8d4a2dd17fa42d52de' }))))));
+        return (h(Host, { key: '7ed53e6408ea37542f8750b1514bb06b571ee922' }, h("span", { key: '2ceb66246fc660fc747525126fccf360afe4e6bb', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'f5fd26fccfb0e7f50b089ed91d5c6e352e257b02', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '4d5b4f292822f95acd1a22807746fe60becab707', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: '528cc7c7324c3077b076b112a018a6475bc145de', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, h("swirl-icon-cancel", { key: '51dd9c1df7cfafb2b00b9dced88650734bf64fca' }))))));
     }
     static get is() { return "swirl-search"; }
     static get encapsulation() { return "scoped"; }
@@ -277,6 +278,21 @@ export class SwirlSearch {
     }
     static get events() {
         return [{
+                "method": "clear",
+                "name": "clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "inputBlur",
                 "name": "inputBlur",
                 "bubbles": true,

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -124,7 +124,7 @@ export class SwirlTextInput {
         }
     }
     handleAutoSelect(event) {
-        if (!this.autoSelect) {
+        if (!(this.autoSelect || this.readonly)) {
             return;
         }
         event.target.select();
@@ -155,7 +155,7 @@ export class SwirlTextInput {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (h(Host, { key: '288582bcca41f2ae8cf3c904ed02fcb0a976be7b' }, h("div", { key: '817b0708b7bebf147ded143b4f0dea6206959d49', class: className }, this.prefixLabel && (h("span", { key: '1e1bd63e29fb41cdc58237b78e55b6744bb28cda', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '731a75748b874b5414668e4c4d412fa078b54b3e', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2ac53e8616fba0f233c51e95b7a0686d03dc552c', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '48f457dfb8c41726623a34b68ba5f7622705145f', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '5f853517b77fcb680f985c5a4624732026c7d39a', size: this.iconSize }))), showPasswordToggle && (h("button", { key: 'a11670fac677c71297420e1ab2b7ce23dfe99671', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'e098155b27a7d5dd49019b2c1956b0b94e0c3035', class: "text-input__stepper" }, h("button", { key: '008c30c8f3bc1d7b4227db185b367d0216c051da', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '656e442c33bd16d69057fb59158d0900e8640b2c', size: this.iconSize })), h("button", { key: 'f1123bb4c9440e71727846782135c31a912cebf5', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'bbd40a1605fa6b3757d308fd5fca6ef5cd133b59', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '98b9121e7b79872e05cd4d4d1c956405118ba0b8', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '339c0dd5c187d8e7818ae3dc4a75a878b3f81f6c' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (h(Host, { key: 'f822fb9a0003530bed7e53b2a6395fa0ead91d6c' }, h("div", { key: 'b8a048e87b0a8366b0243a8da2f80fd3571fbd6b', class: className }, this.prefixLabel && (h("span", { key: '20636fdec405901ebd416fce525a9c89b1ed9dbe', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '8b192a2783028e0eb1fb5703026daccef7170808', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '7b05575e9fc5f5f362f9aa23784177f16eb92660', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '860576e47f0e34aed31a0c53a6d7d8fa4e57557b', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '763a1558a792a017ba4a947bf7bd47220f88ee0c', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '584dd45c5dedb11cf9c7348a49b1ca15f959742c', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'fbad244a2f8584c0003f581f66dc26bb9cb1f04c', class: "text-input__stepper" }, h("button", { key: '921cd8c3e64560ba46a7a06fd5147e132dd7bed4', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: 'df8eeb01df755b56dc0a465a02a1d76dbecafe59', size: this.iconSize })), h("button", { key: 'fee840a7e4a142f468292a9a69e8958869673e87', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'e9af53254c8f1d68c121eb8634444b410a4cb1e3', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '88dd11daf949bcb20d1a18bd77ab64a76000b30b', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'f55d1fa26b458ff6b09e80f79f32b25236cc6d5f' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get is() { return "swirl-text-input"; }
     static get encapsulation() { return "scoped"; }