@getflip/swirl-components 0.0.0-beta-20260114160010

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+
+const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
+
+const SwirlTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.removeTag = index.createEvent(this, "remove", 7);
+        this.iconPosition = "start";
+        this.intent = "default";
+        this.size = "m";
+        this.removalButtonLabel = "Remove";
+        this.variant = "default";
+        this.onRemove = (event) => {
+            this.removeTag?.emit(event);
+        };
+    }
+    componentDidLoad() {
+        this.forceIconProps();
+    }
+    componentWillLoad() {
+        this.forceVariant();
+    }
+    componentDidRender() {
+        this.forceIconProps();
+    }
+    forceIconProps() {
+        const icon = this.iconEl?.children[0];
+        icon?.setAttribute("size", "16");
+    }
+    forceVariant() {
+        if (Boolean(this.bordered)) {
+            console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.');
+            this.variant = "outline";
+        }
+    }
+    render() {
+        const className = index$1.classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, { "tag--hide-label": this.hideLabel });
+        return (index.h(index.Host, { key: 'a3ade00e730b9c5a0bf70ce18555894162efcdb9' }, index.h("span", { key: '9adecf537f7923514ec8eca45badc8560a1448b8', class: className, part: "tag" }, this.icon && (index.h("span", { key: '0adc214659f1680182981e70724fcbc1782f01d0', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (index.h("span", { class: "tag__label" }, this.label)) : (index.h("swirl-visually-hidden", null, this.label)), this.removable && (index.h("button", { key: 'e1981afdf9819c222ca92f08fdf57cdd7e4f3f26', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { key: '6b06d0db7dcd182742f5399cd20d2d7532b9ff0c', size: 16 }))))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlTag.style = swirlTagCss;
+
+exports.swirl_tag = SwirlTag;

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

@@ -0,0 +1,177 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
+require('./utils-UfZG-xPD.js');
+
+const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
+
+const SwirlTextInput = 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.valueChange = index.createEvent(this, "valueChange", 7);
+        this.autoComplete = "on";
+        this.characterCounterLabel = "Used characters";
+        this.clearButtonLabel = "Clear input";
+        this.fontSize = "default";
+        this.passwordToggleLabel = "Toggle password display";
+        this.rows = 1;
+        this.type = "text";
+        this.iconSize = 24;
+        this.showPassword = false;
+        this.mediaQueryUnsubscribe = () => { };
+        this.handleClearClick = () => {
+            this.inputEl.value = "";
+            this.value = "";
+            this.valueChange.emit("");
+            this.inputEl.focus();
+            this.clear.emit();
+        };
+        this.onChange = (event) => {
+            const el = event.target;
+            this.value = el.value;
+        };
+        this.onBlur = (event) => {
+            this.inputBlur.emit(event);
+        };
+        this.onFocus = (event) => {
+            this.inputFocus.emit(event);
+            this.handleAutoSelect(event);
+        };
+        this.onInput = (event) => {
+            this.onChange(event);
+        };
+        this.onKeyPress = (event) => {
+            if (this.type !== "number") {
+                return;
+            }
+            if (["+", "-", "e"].includes(event.key)) {
+                event.preventDefault();
+            }
+        };
+        this.decreaseValue = () => {
+            if (this.type !== "number") {
+                return;
+            }
+            const step = this.step || 1;
+            let currentValue = this.inputEl.valueAsNumber;
+            if (isNaN(this.inputEl.valueAsNumber)) {
+                currentValue = this.min !== undefined ? this.min + 1 : 1;
+            }
+            this.value = String(Math.max(this.min || -Infinity, currentValue - step));
+            this.valueChange.emit(this.value);
+        };
+        this.increaseValue = () => {
+            if (this.type !== "number") {
+                return;
+            }
+            const step = this.step || 1;
+            let currentValue = this.inputEl.valueAsNumber;
+            if (isNaN(this.inputEl.valueAsNumber)) {
+                currentValue = this.min !== undefined ? this.min - 1 : -1;
+            }
+            this.value = String(Math.min(this.max || Infinity, currentValue + step));
+            this.valueChange.emit(this.value);
+        };
+        this.togglePassword = () => {
+            if (this.type !== "password") {
+                return;
+            }
+            this.showPassword = !this.showPassword;
+        };
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.updateIconSize(isDesktop);
+        });
+        // see https://stackoverflow.com/a/27314017
+        if (this.autoFocus) {
+            setTimeout(() => {
+                this.inputEl.focus();
+            });
+        }
+    }
+    componentDidRender() {
+        this.adjustInputSize();
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    async blurInput() {
+        this.inputEl.blur();
+    }
+    async focusInput() {
+        this.inputEl.focus();
+    }
+    watchValue(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.valueChange.emit(newValue);
+        }
+    }
+    updateIconSize(smallIcon) {
+        this.iconSize = smallIcon ? 20 : 24;
+    }
+    adjustInputSize() {
+        if (this.rows > 1 || this.autoGrow) {
+            this.inputEl.style.width = "";
+            this.inputEl.style.height = "";
+            this.inputEl.style.height = Boolean(this.inputEl.scrollHeight)
+                ? this.inputEl.scrollHeight / 16 + "rem"
+                : "";
+        }
+        if (this.rows === 1 && !this.autoGrow) {
+            this.inputEl.style.height = "";
+            this.inputEl.style.width = "";
+            if (this.suffixLabel &&
+                this.type !== "password" &&
+                !this.disableDynamicWidth &&
+                !Boolean(this.placeholder)) {
+                this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem";
+            }
+        }
+    }
+    handleAutoSelect(event) {
+        if (!(this.autoSelect || this.readonly)) {
+            return;
+        }
+        event.target.select();
+    }
+    render() {
+        const Tag = this.rows === 1 && !this.autoGrow ? "input" : "textarea";
+        const ariaInvalid = this.invalid === true || this.invalid === false
+            ? String(this.invalid)
+            : undefined;
+        const showStepper = this.type === "number" && !this.disabled && !this.readonly;
+        const showPasswordToggle = this.type === "password" && !this.disabled;
+        const showClearButton = this.clearable &&
+            !this.disabled &&
+            !this.readonly &&
+            Boolean(this.value) &&
+            !showPasswordToggle &&
+            !showStepper;
+        const characterCount = this.value?.length ?? 0;
+        const showCharacterCounter = this.showCharacterCounter &&
+            (!this.showCharacterCounterNearLimit ||
+                characterCount >= this.maxLength * 0.8);
+        const type = this.type === "password" && this.showPassword ? "text" : this.type;
+        const className = index$1.classnames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
+            "text-input--auto-grow": this.autoGrow,
+            "text-input--clearable": showClearButton,
+            "text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
+            "text-input--has-suffix": Boolean(this.suffixLabel),
+            "text-input--inline": this.inline,
+            "text-input--show-password": this.type === "password" && this.showPassword,
+        });
+        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"]
+    }; }
+};
+SwirlTextInput.style = swirlTextInputCss;
+
+exports.swirl_text_input = SwirlTextInput;