@getflip/swirl-components 0.10.0 → 0.12.0

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

@@ -1,71 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-72831c5f.js');
-const index$1 = require('./index-b8470262.js');
-const utils = require('./utils-6b8d45f4.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const flipSelectCss = ".sc-flip-select-h{display:block;width:100%}.sc-flip-select-h *.sc-flip-select{box-sizing:border-box}.select.sc-flip-select{position:relative;display:flex;width:100%}.select--disabled.sc-flip-select .select__label.sc-flip-select{color:var(--s-text-disabled)}.select--disabled.sc-flip-select .select__indicator.sc-flip-select{color:var(--s-icon-disabled)}.select__label.sc-flip-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-flip-select:focus{outline:none}.select__indicator.sc-flip-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}";
-
-const FlipSelect = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChange = index.createEvent(this, "valueChange", 7);
-    this.options = [];
-    this.select = (event) => {
-      this.value = event.detail;
-      this.valueChange.emit(this.value);
-      if (!this.multiSelect) {
-        this.popover.close();
-      }
-    };
-    this.onSlotChange = () => {
-      this.updateOptions();
-    };
-    this.onOpen = () => {
-      this.open = true;
-    };
-    this.onClose = () => {
-      this.open = false;
-    };
-    this.onKeyDown = (event) => {
-      if (event.code === "Space" || event.code === "Enter") {
-        event.preventDefault();
-        this.popover.open();
-      }
-    };
-  }
-  componentWillLoad() {
-    queueMicrotask(() => {
-      this.updateOptions();
-    });
-  }
-  onWindowFocusIn(event) {
-    if (event.target === this.el.querySelector("input")) {
-      event.stopImmediatePropagation();
-    }
-  }
-  updateOptions() {
-    this.options = utils.querySelectorAllDeep(this.el, "flip-option-list-item");
-  }
-  render() {
-    const label = Boolean(this.value)
-      ? this.value
-        .map((value) => { var _a; return (_a = this.options.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label; })
-        .join(", ")
-      : "";
-    const ariaInvalid = this.invalid === true || this.invalid === false
-      ? String(this.invalid)
-      : undefined;
-    const className = index$1.classnames("select", {
-      "select--disabled": this.disabled,
-    });
-    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.h("input", { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: true, type: "text", value: label }), index.h("span", { class: "select__indicator" }, this.open ? (index.h("flip-icon-expand-less", null)) : (index.h("flip-icon-expand-more", null))), index.h("flip-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: false, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (el) => (this.popover = el), trigger: "trigger", useContainerWidth: "flip-form-control" }, index.h("flip-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, index.h("slot", { onSlotchange: this.onSlotChange }))))));
-  }
-  get el() { return index.getElement(this); }
-};
-FlipSelect.style = flipSelectCss;
-
-exports.flip_select = FlipSelect;

package/dist/cjs/flip-stack.cjs.entry.js

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-72831c5f.js');
-const index$1 = require('./index-b8470262.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const flipStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-horizontal{flex-direction:row}.stack--wrap{flex-wrap:wrap}";
-
-const FlipStack = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.align = "start";
-    this.as = "div";
-    this.justify = "start";
-    this.orientation = "vertical";
-    this.spacing = "0";
-    this.wrap = false;
-  }
-  render() {
-    const Tag = this.as;
-    const className = index$1.classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
-    return (index.h(index.Host, null, index.h(Tag, { class: className, style: { gap: `var(--s-space-${this.spacing})` } }, index.h("slot", null))));
-  }
-};
-FlipStack.style = flipStackCss;
-
-exports.flip_stack = FlipStack;

package/dist/cjs/flip-switch.cjs.entry.js

@@ -1,93 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-72831c5f.js');
-const index$1 = require('./index-b8470262.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const flipSwitchCss = ".sc-flip-switch-h{display:inline-flex}.sc-flip-switch-h *.sc-flip-switch{box-sizing:border-box}.switch.sc-flip-switch{display:inline-flex;align-items:center;touch-action:none}.switch.sc-flip-switch:focus-within .switch__control.sc-flip-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.switch--size-m.sc-flip-switch .switch__control.sc-flip-switch{width:2.75rem;height:1.5rem;border-radius:calc(1.5rem / 2)}.switch--size-m.sc-flip-switch .switch__thumb.sc-flip-switch{width:1.25rem;height:1.25rem}.switch--on.switch--size-m.sc-flip-switch .switch__thumb.sc-flip-switch{left:calc(100% - 1.25rem - var(--s-space-2))}.switch--on.sc-flip-switch .switch__control.sc-flip-switch{background-color:var(--s-interactive-primary-default)}.switch--on.sc-flip-switch .switch__thumb.sc-flip-switch{left:calc(100% - 0.875rem - var(--s-space-2))}.switch--disabled.sc-flip-switch .switch__control.sc-flip-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-flip-switch .switch__thumb.sc-flip-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-flip-switch .switch__label.sc-flip-switch{color:var(--s-text-disabled)}.switch__control.sc-flip-switch{position:relative;width:1.875rem;height:1.125rem;flex-shrink:0;border-radius:calc(1.125rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-flip-switch{transition:none}}.switch__thumb.sc-flip-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:0.875rem;height:0.875rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-flip-switch{transition:none}}.switch__label.sc-flip-switch{position:relative;z-index:1;margin-left:var(--s-space-12);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base)}";
-
-const FlipSwitch = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChange = index.createEvent(this, "valueChange", 7);
-    this.checked = false;
-    this.disabled = false;
-    this.size = "m";
-    this.dragging = false;
-    this.recentlyDragged = false;
-    this.onChange = () => {
-      if (this.dragging) {
-        return;
-      }
-      if (this.recentlyDragged) {
-        this.recentlyDragged = false;
-        return;
-      }
-      this.checked = !this.checked;
-      this.valueChange.emit(this.checked);
-    };
-    this.onStartDrag = () => {
-      if (this.disabled) {
-        return;
-      }
-      this.dragging = true;
-      this.thumb.style.transition = "none";
-    };
-    this.onEndDrag = () => {
-      if (this.disabled) {
-        return;
-      }
-      if (this.recentlyDragged) {
-        const controlBonds = this.control.getBoundingClientRect();
-        const thumbBounds = this.thumb.getBoundingClientRect();
-        const on = this.thumb.offsetLeft + thumbBounds.width / 2 > controlBonds.width / 2;
-        if (this.checked !== on) {
-          this.checked = on;
-          this.valueChange.emit(on);
-        }
-      }
-      this.thumb.style.left = "";
-      this.thumb.style.transition = "";
-      this.dragging = false;
-      setTimeout(() => {
-        this.recentlyDragged = false;
-      });
-    };
-    this.onDrag = (event) => {
-      if (!this.dragging) {
-        return;
-      }
-      this.recentlyDragged = true;
-      const controlBonds = this.control.getBoundingClientRect();
-      const thumbBounds = this.thumb.getBoundingClientRect();
-      let pos = Math.round(event.offsetX - thumbBounds.width / 2);
-      if (pos < 0) {
-        pos = 0;
-      }
-      if (pos > Math.round(controlBonds.width - thumbBounds.width)) {
-        pos = Math.round(controlBonds.width - thumbBounds.width);
-      }
-      this.thumb.style.left = `${pos}px`;
-    };
-  }
-  onWindowPointerUp() {
-    this.onEndDrag();
-  }
-  render() {
-    const off = !this.checked;
-    const on = this.checked;
-    const ariaCheckedLabel = on ? "true" : "false";
-    const className = index$1.classnames("switch", `switch--size-${this.size}`, {
-      "switch--off": off,
-      "switch--on": on,
-      "switch--disabled": this.disabled,
-    });
-    return (index.h(index.Host, null, index.h("label", { class: className, htmlFor: this.inputId }, index.h("span", { class: "switch__control", onPointerDown: this.onStartDrag, onPointerMove: this.onDrag, onPointerUp: this.onEndDrag, ref: (el) => (this.control = el) }, index.h("flip-visually-hidden", null, index.h("input", { "aria-checked": ariaCheckedLabel, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, role: "switch", type: "checkbox", value: this.value })), index.h("span", { "aria-hidden": "true", class: "switch__thumb", ref: (el) => (this.thumb = el) })), this.label && index.h("span", { class: "switch__label" }, this.label))));
-  }
-  get el() { return index.getElement(this); }
-};
-FlipSwitch.style = flipSwitchCss;
-
-exports.flip_switch = FlipSwitch;

package/dist/cjs/flip-tab.cjs.entry.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-72831c5f.js');
-const index$1 = require('./index-b8470262.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const flipTabCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}";
-
-const FlipTab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    const className = index$1.classnames("tab", { "tab--active": this.active });
-    return (index.h(index.Host, { "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, index.h("div", { class: className }, index.h("slot", null))));
-  }
-};
-FlipTab.style = flipTabCss;
-
-exports.flip_tab = FlipTab;

package/dist/cjs/flip-tabs.cjs.entry.js

@@ -1,88 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-72831c5f.js');
-const index$1 = require('./index-b8470262.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const flipTabsCss = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tabs__tab.sc-flip-tabs{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(.tabs__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__tab--active.sc-flip-tabs:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
-
-const FlipTabs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabActivated = index.createEvent(this, "tabActivated", 7);
-    this.tabs = [];
-    this.onKeyDown = (event) => {
-      if (event.code === "ArrowLeft") {
-        event.preventDefault();
-        this.activatePreviousTab();
-      }
-      else if (event.code === "ArrowRight") {
-        event.preventDefault();
-        this.activateNextTab();
-      }
-    };
-  }
-  componentWillLoad() {
-    this.collectTabs();
-  }
-  /**
-   * Activate a tab.
-   * @param tabId
-   */
-  async activateTab(tabId) {
-    if (this.activeTab === tabId) {
-      return;
-    }
-    this.activeTab = tabId;
-    this.tabs.forEach((tab) => (tab.active = false));
-    const tab = this.tabs.find((tab) => tab.tabId === tabId);
-    if (!Boolean(tab)) {
-      return;
-    }
-    tab.active = true;
-    this.tabActivated.emit(tab);
-  }
-  activateNextTab() {
-    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
-    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
-    this.activateTab(this.tabs[nextIndex].tabId);
-    requestAnimationFrame(() => {
-      var _a;
-      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
-    });
-  }
-  activatePreviousTab() {
-    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
-    const previousIndex = Math.max(0, currentIndex - 1);
-    this.activateTab(this.tabs[previousIndex].tabId);
-    requestAnimationFrame(() => {
-      var _a;
-      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
-    });
-  }
-  collectTabs() {
-    this.tabs = Array.from(this.el.querySelectorAll("flip-tab"));
-    if (this.tabs.length === 0) {
-      return;
-    }
-    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
-    this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "tabs" }, index.h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
-      const isActive = tab.tabId === this.activeTab;
-      const className = index$1.classnames("tabs__tab", {
-        "tabs__tab--active": isActive,
-      });
-      return (index.h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId,
-        // eslint-disable-next-line react/jsx-no-bind
-        onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, index.h("span", { class: "tabs__tab-label" }, tab.label)));
-    })), index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-};
-FlipTabs.style = flipTabsCss;
-
-exports.flip_tabs = FlipTabs;

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

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-72831c5f.js');
-const index$1 = require('./index-b8470262.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const flipTagCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tag{display:inline-flex;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
-
-const FlipTag = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.remove = index.createEvent(this, "remove", 7);
-    this.intent = "default";
-    this.removalButtonLabel = "Remove";
-    this.onRemove = (event) => {
-      var _a;
-      (_a = this.remove) === null || _a === void 0 ? void 0 : _a.emit(event);
-    };
-  }
-  render() {
-    const className = index$1.classnames("tag", `tag--intent-${this.intent}`);
-    return (index.h(index.Host, null, index.h("span", { class: className }, this.label, this.removable && (index.h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, type: "button" }, index.h("flip-icon-close", { size: 16 }))))));
-  }
-};
-FlipTag.style = flipTagCss;
-
-exports.flip_tag = FlipTag;

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

@@ -1,132 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-72831c5f.js');
-const index$1 = require('./index-b8470262.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const flipTextInputCss = ".sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-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)}.text-input--clearable.sc-flip-text-input,.text-input--type-number.sc-flip-text-input,.text-input--type-password.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-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-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-flip-text-input input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-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-flip-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-flip-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-flip-text-input:focus-visible,.text-input__password-toggle.sc-flip-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-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-flip-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-flip-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-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}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
-
-const FlipTextInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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.clearButtonLabel = "Clear input";
-    this.rows = 1;
-    this.passwordToggleLabel = "Toggle password display";
-    this.type = "text";
-    this.showPassword = false;
-    this.clear = () => {
-      this.inputEl.value = "";
-      this.value = "";
-      this.valueChange.emit("");
-      this.inputEl.focus();
-    };
-    this.onChange = (event) => {
-      const el = event.target;
-      this.value = el.value;
-      this.valueChange.emit(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;
-    };
-  }
-  componentDidRender() {
-    this.adjustInputSize();
-  }
-  adjustInputSize() {
-    if (this.rows > 1) {
-      this.inputEl.style.width = "";
-      this.inputEl.style.height = "";
-      this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem";
-    }
-    if (this.rows === 1) {
-      this.inputEl.style.height = "";
-      this.inputEl.style.width = "";
-      if (this.type !== "password" && !this.disableDynamicWidth) {
-        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem";
-      }
-    }
-  }
-  handleAutoSelect(event) {
-    if (!this.autoSelect) {
-      return;
-    }
-    event.target.select();
-  }
-  render() {
-    var _a;
-    const Tag = this.rows === 1 ? "input" : "textarea";
-    const ariaInvalid = this.invalid === true || this.invalid === false
-      ? String(this.invalid)
-      : undefined;
-    const showStepper = this.type === "number" && !this.disabled;
-    const showPasswordToggle = this.type === "password" && !this.disabled;
-    const showClearButton = this.clearable &&
-      !this.disabled &&
-      Boolean(this.value) &&
-      !showPasswordToggle &&
-      !showStepper &&
-      !this.showCharacterCounter;
-    const type = this.type === "password" && this.showPassword ? "text" : this.type;
-    const className = index$1.classnames("text-input", `text-input--type-${this.type}`, {
-      "text-input--clearable": this.clearable,
-      "text-input--disabled": this.disabled,
-      "text-input--disable-dynamic-width": this.disableDynamicWidth,
-      "text-input--show-password": this.type === "password" && this.showPassword,
-    });
-    return (index.h(index.Host, null, index.h("div", { class: className }, this.prefixLabel && (index.h("span", { class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { "aria-autocomplete": this.flipAriaAutocomplete, "aria-controls": this.flipAriaControls, "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.flipAriaExpanded, "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, ref: (el) => (this.inputEl = el), required: this.required, role: this.flipRole, rows: this.rows > 1 ? this.rows : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" }, index.h("flip-icon-cancel", null))), showPasswordToggle && (index.h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("flip-icon-visibility-off", null)) : (index.h("flip-icon-visibility", null)))), showStepper && (index.h("span", { class: "text-input__stepper" }, index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("flip-icon-expand-less", null)), index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("flip-icon-expand-more", null)))), this.showCharacterCounter && (index.h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
-  }
-};
-FlipTextInput.style = flipTextInputCss;
-
-exports.flip_text_input = FlipTextInput;