@orangelogic/design-system 2.78.0 → 2.79.0-ci.2

package/library/components/input.js

@@ -1,6 +1,6 @@
 import { n as d, C as rt } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as ut } from "../chunks/component.styles.DMSLciL5.js";
-import { f as ot } from "../chunks/form-control.styles.CUGhvlfT.js";
+import { c as ut } from "../chunks/component.styles.CRO4Odto.js";
+import { f as ot } from "../chunks/form-control.styles.CaGWmeAS.js";
 import { c as lt } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as ht } from "../chunks/default-value.COZopaet.js";
 import { F as pt } from "../chunks/form.DgwYWi0O.js";
@@ -22,8 +22,8 @@ function Z(a) {
   var t;
   return typeof a == "object" && a != null && (a == null || (t = a.constructor) == null ? void 0 : t.name) === "Object";
 }
-function X(a, t) {
-  return Array.isArray(t) ? X(a, (e, i) => t.includes(i)) : Object.entries(a).reduce((e, i) => {
+function W(a, t) {
+  return Array.isArray(t) ? W(a, (e, i) => t.includes(i)) : Object.entries(a).reduce((e, i) => {
     let [s, n] = i;
     return t(n, s) && (e[s] = n), e;
   }, {});
@@ -142,7 +142,7 @@ function I(a) {
     if (t) {
       const i = t.mask;
       return {
-        ...X(t, (s, n) => !n.startsWith("_")),
+        ...W(t, (s, n) => !n.startsWith("_")),
         mask: t.constructor,
         _mask: i,
         ...e
@@ -201,7 +201,7 @@ class K {
   /** */
 }
 f.MaskElement = K;
-const W = 90, vt = 89;
+const X = 90, vt = 89;
 class L extends K {
   /** HTMLElement to use mask on */
   constructor(t) {
@@ -220,9 +220,9 @@ class L extends K {
     this.input.addEventListener("keydown", this._onKeydown), this.input.addEventListener("input", this._onInput), this.input.addEventListener("beforeinput", this._onBeforeinput), this.input.addEventListener("compositionend", this._onCompositionEnd), this.input.addEventListener("drop", t.drop), this.input.addEventListener("click", t.click), this.input.addEventListener("focus", t.focus), this.input.addEventListener("blur", t.commit), this._handlers = t;
   }
   _onKeydown(t) {
-    if (this._handlers.redo && (t.keyCode === W && t.shiftKey && (t.metaKey || t.ctrlKey) || t.keyCode === vt && t.ctrlKey))
+    if (this._handlers.redo && (t.keyCode === X && t.shiftKey && (t.metaKey || t.ctrlKey) || t.keyCode === vt && t.ctrlKey))
       return t.preventDefault(), this._handlers.redo(t);
-    if (this._handlers.undo && t.keyCode === W && (t.metaKey || t.ctrlKey))
+    if (this._handlers.undo && t.keyCode === X && (t.metaKey || t.ctrlKey))
       return t.preventDefault(), this._handlers.undo(t);
     t.isComposing || this._handlers.selectionChange(t);
   }
@@ -2397,545 +2397,7 @@ class Bt {
     return this.host.autoGrowMirror ? (this.host.autoGrowMirror.textContent = t || " ", Math.ceil(this.host.autoGrowMirror.getBoundingClientRect().width)) : 0;
   }
 }
-const St = ft`
-  :host {
-    display: block;
-    line-height: normal;
-  }
-
-  :host([data-user-invalid])::part(base) {
-    border-color: var(--cx-input-invalid-border-color);
-  }
-
-  :host([data-user-invalid]:focus-within)::part(base) {
-    border-color: var(--cx-input-invalid-border-color);
-    box-shadow: var(--cx-input-invalid-shadow);
-  }
-
-  .input {
-    flex: 1 1 auto;
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: start;
-    position: relative;
-    width: 100%;
-    font-family: var(--cx-input-font-family);
-    font-weight: var(--cx-input-font-weight);
-    letter-spacing: var(--cx-input-letter-spacing);
-    vertical-align: middle;
-    overflow: hidden;
-    cursor: text;
-    transition:
-      var(--cx-transition-fast) color,
-      var(--cx-transition-fast) border,
-      var(--cx-transition-fast) box-shadow,
-      var(--cx-transition-fast) background-color;
-  }
-
-  .input--auto-grow {
-    flex: 0 1 auto;
-    width: auto;
-    max-width: 100%;
-  }
-
-  /* Standard inputs */
-  .input--standard {
-    background-color: var(--cx-input-background-color);
-    border: solid var(--cx-input-border-width) var(--cx-input-border-color);
-  }
-
-  .input--standard:hover:not(.input--disabled) {
-    background-color: var(--cx-input-background-color-hover);
-    border-color: var(--cx-input-border-color-hover);
-  }
-
-  .input--standard.input--focused:not(.input--disabled) {
-    background-color: var(--cx-input-background-color-focus);
-    border-color: var(--cx-input-border-color-focus);
-  }
-
-  .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--cx-input-color-focus);
-  }
-
-  .input--standard.input--disabled {
-    background-color: var(--cx-input-background-color-disabled);
-    border-color: var(--cx-input-border-color-disabled);
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .input--standard.input--disabled .input__control {
-    color: var(--cx-input-color-disabled);
-  }
-
-  .input--standard.input--disabled .input__control::placeholder {
-    color: var(--cx-input-placeholder-color-disabled);
-  }
-
-  /* Filled inputs */
-  .input--filled {
-    border: none;
-    background-color: var(--cx-input-filled-background-color);
-    color: var(--cx-input-color);
-  }
-
-  .input--filled:hover:not(.input--disabled) {
-    background-color: var(--cx-input-filled-background-color-hover);
-  }
-
-  .input--filled.input--focused:not(.input--disabled) {
-    background-color: var(--cx-input-filled-background-color-focus);
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .input--filled.input--disabled {
-    background-color: var(--cx-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .input__control {
-    font: inherit;
-    min-width: 0;
-    color: var(--cx-input-color);
-    border: none;
-    background: inherit;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    cursor: inherit;
-    -webkit-appearance: none;
-    line-height: var(--cx-line-height-medium);
-  }
-
-  .input__auto-grow-mirror {
-    position: absolute;
-    visibility: hidden;
-    white-space: pre;
-    pointer-events: none;
-    box-sizing: border-box;
-    font: inherit;
-    letter-spacing: inherit;
-    line-height: var(--cx-line-height-medium);
-    padding: 0;
-    margin: 0;
-    border: 0;
-  }
-
-  .form-control--has-label .input__control,
-  .form-control--has-label .input__auto-grow-mirror {
-    padding-top: var(--cx-spacing-x-small);
-    padding-bottom: var(--cx-spacing-2x-small);
-  }
-
-  .input__control::-webkit-search-decoration,
-  .input__control::-webkit-search-cancel-button,
-  .input__control::-webkit-search-results-button,
-  .input__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  .input__control:-webkit-autofill,
-  .input__control:-webkit-autofill:hover,
-  .input__control:-webkit-autofill:focus,
-  .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--cx-input-height-large)
-      var(--cx-input-background-color-hover) inset !important;
-    -webkit-text-fill-color: var(--cx-color-primary-500);
-    caret-color: var(--cx-input-color);
-  }
-
-  .input--filled .input__control:-webkit-autofill,
-  .input--filled .input__control:-webkit-autofill:hover,
-  .input--filled .input__control:-webkit-autofill:focus,
-  .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--cx-input-height-large)
-      var(--cx-input-filled-background-color) inset !important;
-  }
-
-  .input__control::placeholder {
-    color: var(--cx-input-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .input:hover:not(.input--disabled) .input__control {
-    color: var(--cx-input-color-hover);
-  }
-
-  .input__control:focus {
-    outline: none;
-  }
-
-  .input__prefix,
-  .input__suffix {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    cursor: default;
-  }
-
-  .input__prefix ::slotted(cx-icon),
-  .input__suffix ::slotted(cx-icon) {
-    color: var(--cx-input-icon-color);
-  }
-
-  .input__character-count {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: var(--cx-input-suffix-color, var(--cx-input-color));
-    font-size: var(--cx-input-font-size);
-    font-weight: var(--cx-input-font-weight);
-    letter-spacing: var(--cx-input-letter-spacing);
-    line-height: var(--cx-input-line-height);
-    padding-inline-end: var(--cx-spacing-x-small);
-    padding-top: var(--cx-spacing-2x-small);
-    white-space: nowrap;
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .input--small {
-    border-radius: var(--cx-input-border-radius-small);
-    font-size: var(--cx-input-font-size-small);
-    min-height: var(--cx-input-height-small);
-  }
-
-  .input--small .input__control,
-  .input--small .input__auto-grow-mirror {
-    padding-left: var(--cx-input-spacing-small);
-    padding-right: var(--cx-input-spacing-small);
-  }
-
-  .input--small .input__clear,
-  .input--small .input__password-toggle {
-    width: calc(1em + var(--cx-spacing-x-small) * 2);
-  }
-
-  .input--small .input__prefix ::slotted(*) {
-    margin-inline-start: var(--cx-spacing-x-small);
-  }
-
-  .input--small .input__suffix ::slotted(*) {
-    margin-inline-end: var(--cx-spacing-x-small);
-  }
-
-  .input--small .input__control--file {
-    gap: calc(var(--cx-input-spacing-small) / 2);
-    padding-top: var(--cx-spacing-x-small);
-    padding-bottom: var(--cx-spacing-x-small);
-  }
-
-  .input--medium {
-    border-radius: var(--cx-input-border-radius-medium);
-    font-size: var(--cx-input-font-size-small);
-    min-height: var(--cx-input-height-medium);
-  }
-
-  .input--medium .input__control,
-  .input--medium .input__auto-grow-mirror {
-    padding-left: var(--cx-input-spacing-medium);
-    padding-right: var(--cx-input-spacing-medium);
-  }
-
-  .input--medium .input__clear,
-  .input--medium .input__password-toggle {
-    width: calc(1em + var(--cx-spacing-x-small) * 2);
-  }
-
-  .input--medium .input__prefix ::slotted(*) {
-    margin-inline-start: var(--cx-spacing-x-small);
-  }
-
-  .input--medium .input__suffix ::slotted(*) {
-    margin-inline-end: var(--cx-spacing-x-small);
-  }
-
-  .input--medium .input__control--file {
-    gap: calc(var(--cx-input-spacing-medium) / 2);
-  }
-
-  .input--large {
-    border-radius: var(--cx-input-border-radius-large);
-    font-size: var(--cx-input-font-size-small);
-    min-height: var(--cx-input-height-large);
-  }
-
-  .input--large .input__control,
-  .input--large .input__auto-grow-mirror {
-    padding-left: var(--cx-input-spacing-large);
-    padding-right: var(--cx-input-spacing-large);
-  }
-
-  .input--large .input__clear,
-  .input--large .input__password-toggle {
-    width: calc(1em + var(--cx-input-spacing-small) * 2);
-  }
-
-  .input--large .input__prefix ::slotted(*) {
-    margin-inline-start: var(--cx-input-spacing-small);
-  }
-
-  .input--large .input__suffix ::slotted(*) {
-    margin-inline-end: var(--cx-input-spacing-small);
-  }
-
-  .input--large .input__control--file {
-    gap: calc(var(--cx-input-spacing-large) / 2);
-  }
-
-  .input--button-only {
-    padding: 0;
-    border: 0;
-    align-items: center;
-  }
-
-  .input--button-only .input__control--file {
-    padding: 0;
-    border: 0;
-  }
-
-  .input--button-only .input-container {
-    display: none;
-  }
-
-  /*
-   * Pill modifier
-   */
-
-  .input--pill.input--small {
-    border-radius: var(--cx-input-height-small);
-  }
-
-  .input--pill.input--medium {
-    border-radius: var(--cx-input-height-medium);
-  }
-
-  .input--pill.input--large {
-    border-radius: var(--cx-input-height-large);
-  }
-
-  /*
-   * Clearable + Password Toggle
-   */
-
-  .input__clear,
-  .input__password-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: inherit;
-    color: var(--cx-input-icon-color);
-    border: none;
-    background: none;
-    padding: 0;
-    transition: var(--cx-transition-fast) color;
-    cursor: pointer;
-  }
-
-  .input__clear:hover,
-  .input__password-toggle:hover {
-    color: var(--cx-input-icon-color-hover);
-  }
-
-  .input__clear:focus,
-  .input__password-toggle:focus {
-    outline: none;
-  }
-
-  /* Don't show the browser's password toggle in Edge */
-  ::-ms-reveal {
-    display: none;
-  }
-
-  /* Hide the built-in number spinner */
-  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
-  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-
-  .input--no-spin-buttons input[type='number'] {
-    -moz-appearance: textfield;
-  }
-
-  input[type='file'] {
-    display: none;
-  }
-
-  /*
-   * Adapt label to be inside input
-   */
-
-  .input-container {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-    width: 0;
-  }
-
-  .input-container--auto-grow {
-    flex: 0 1 auto;
-    width: auto;
-  }
-
-  .input__control--auto-grow {
-    min-width: var(--cx-input-auto-grow-min-width, 0);
-    max-width: 100%;
-  }
-
-  .form-control__label {
-    position: relative;
-    -webkit-transition: transform 0.2s ease-in-out;
-    -moz-transition: transform 0.2s ease-in-out;
-    transition: transform 0.2s ease-in-out;
-    pointer-events: none;
-    width: fit-content;
-    line-height: 1; /* use line-height: 1 for easier transform calculation */
-    text-transform: var(--cx-input-label-text-transform, none);
-  }
-
-  /* when empty with no placeholder (initial state), transform label to vertical center
-    = (input height - label height) / 2
-  */
-  .form-control--has-label .input--small .form-control__label {
-    padding: 0 var(--cx-input-spacing-small);
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-small) +
-              1.25rem - var(--cx-input-font-size-small)
-          ) /
-          2
-      )
-    );
-    margin: 0;
-  }
-
-  .form-control--has-label .input--medium .form-control__label {
-    padding: 0 var(--cx-input-spacing-medium);
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-medium) +
-              1rem - var(--cx-input-font-size-medium)
-          ) /
-          2
-      )
-    );
-    margin: 0;
-  }
-
-  .form-control--has-label .input--large .form-control__label {
-    padding: 0 var(--cx-input-spacing-large);
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-large) +
-              1rem - var(--cx-input-font-size-large)
-          ) /
-          2
-      )
-    );
-    margin: 0;
-  }
-
-  /* Increase input height if there's a label */
-  .form-control--has-label .input--small,
-  .form-control--file .input--small {
-    min-height: calc(var(--cx-input-height-small) + 1rem);
-  }
-  .form-control--has-label .input--medium,
-  .form-control--file .input--medium {
-    min-height: calc(var(--cx-input-height-medium) + 1rem);
-  }
-  .form-control--has-label .input--large,
-  .form-control--file .input--large {
-    min-height: calc(var(--cx-input-height-large) + 1rem);
-  }
-
-  /* When focused or not empty, transform label to top
-    Instead of 0, use var(--cx-spacing-2x-small) to have a distance from top
-  */
-  .form-control--has-label .input--focused .form-control__label,
-  .form-control--has-label .input--has-placeholder .form-control__label,
-  .form-control--has-label .input:not(.input--empty) .form-control__label {
-    transform: translateY(
-      calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small))
-    ); /* distance from top */
-  }
-
-  .input__control--file {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-block: 0;
-    text-align: start !important;
-    width: 100%;
-    height: 100%;
-  }
-
-  .input__control--file span {
-    flex: 1 1 auto;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  /*
-   * Input groups support a variety of input types (e.g. inputs with tooltips, inputs as dropdown triggers, etc.).
-   * This means inputs aren't always direct descendants of the input group, thus we can't target them with the
-   * ::slotted selector. To work around this, the input group component does some magic to add these special classes to
-   * inputs and we style them here instead.
-   */
-
-  :host(
-      [data-cx-input-group__input--first]:not(
-        [data-cx-input-group__input--last]
-      )
-    )
-    .input {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-cx-input-group__input--inner]) .input {
-    border-radius: 0;
-  }
-
-  :host(
-      [data-cx-input-group__input--last]:not(
-        [data-cx-input-group__input--first]
-      )
-    )
-    .input {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  /* All except the first */
-  :host([data-cx-input-group__input]:not([data-cx-input-group__input--first])) {
-    margin-inline-start: calc(-1 * var(--cx-input-border-width));
-  }
-
-  /* Bump hovered, focused, and checked inputs up so their focus ring isn't clipped */
-  :host([data-cx-input-group__input--hover]) {
-    z-index: 1;
-  }
-
-  /* Focus and checked are always on top */
-  :host([data-cx-input-group__input--focus]),
-  :host([data-cx-input-group__input][checked]) {
-    z-index: 2;
-  }
-`;
+const St = ft`:host{line-height:normal;display:block}:host([data-user-invalid])::part(base){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(base){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.input{width:100%;font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;cursor:text;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;flex:auto;justify-content:start;align-items:stretch;display:inline-flex;position:relative;overflow:hidden}.input--auto-grow{flex:0 auto;width:auto;max-width:100%}.input--standard{background-color:var(--cx-input-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.input--standard:hover:not(.input--disabled){background-color:var(--cx-input-background-color-hover);border-color:var(--cx-input-border-color-hover)}.input--standard.input--focused:not(.input--disabled){background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus)}.input--standard.input--focused:not(.input--disabled) .input__control{color:var(--cx-input-color-focus)}.input--standard.input--disabled{background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);opacity:.5;cursor:default}.input--standard.input--disabled .input__control{color:var(--cx-input-color-disabled)}.input--standard.input--disabled .input__control::placeholder{color:var(--cx-input-placeholder-color-disabled)}.input--filled{background-color:var(--cx-input-filled-background-color);color:var(--cx-input-color);border:none}.input--filled:hover:not(.input--disabled){background-color:var(--cx-input-filled-background-color-hover)}.input--filled.input--focused:not(.input--disabled){background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.input--filled.input--disabled{background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.input__control{font:inherit;min-width:0;color:var(--cx-input-color);background:inherit;box-shadow:none;cursor:inherit;-webkit-appearance:none;line-height:var(--cx-line-height-medium);border:none;margin:0;padding:0}.input__auto-grow-mirror{visibility:hidden;white-space:pre;pointer-events:none;box-sizing:border-box;font:inherit;letter-spacing:inherit;line-height:var(--cx-line-height-medium);border:0;margin:0;padding:0;position:absolute}.form-control--has-label .input__control,.form-control--has-label .input__auto-grow-mirror{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-2x-small)}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{-webkit-text-fill-color:var(--cx-color-primary-500);caret-color:var(--cx-input-color);box-shadow:0 0 0 var(--cx-input-height-large) var(--cx-input-background-color-hover) inset!important}.input--filled .input__control:-webkit-autofill,.input--filled .input__control:-webkit-autofill:hover,.input--filled .input__control:-webkit-autofill:focus,.input--filled .input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--cx-input-height-large) var(--cx-input-filled-background-color) inset!important}.input__control::placeholder{color:var(--cx-input-placeholder-color);-webkit-user-select:none;user-select:none}.input:hover:not(.input--disabled) .input__control{color:var(--cx-input-color-hover)}.input__control:focus{outline:none}.input__prefix,.input__suffix{cursor:default;flex:none;align-items:center;display:inline-flex}.input__prefix ::slotted(cx-icon),.input__suffix ::slotted(cx-icon){color:var(--cx-input-icon-color)}.input__character-count{color:var(--cx-input-suffix-color,var(--cx-input-color));font-size:var(--cx-input-font-size);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);line-height:var(--cx-input-line-height);padding-inline-end:var(--cx-spacing-x-small);padding-top:var(--cx-spacing-2x-small);white-space:nowrap;justify-content:flex-end;align-items:center;display:flex}.input--small{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-small)}.input--small .input__control,.input--small .input__auto-grow-mirror{padding-left:var(--cx-input-spacing-small);padding-right:var(--cx-input-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{width:calc(1em + var(--cx-spacing-x-small) * 2)}.input--small .input__prefix ::slotted(*){margin-inline-start:var(--cx-spacing-x-small)}.input--small .input__suffix ::slotted(*){margin-inline-end:var(--cx-spacing-x-small)}.input--small .input__control--file{gap:calc(var(--cx-input-spacing-small) / 2);padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-x-small)}.input--medium{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-medium)}.input--medium .input__control,.input--medium .input__auto-grow-mirror{padding-left:var(--cx-input-spacing-medium);padding-right:var(--cx-input-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{width:calc(1em + var(--cx-spacing-x-small) * 2)}.input--medium .input__prefix ::slotted(*){margin-inline-start:var(--cx-spacing-x-small)}.input--medium .input__suffix ::slotted(*){margin-inline-end:var(--cx-spacing-x-small)}.input--medium .input__control--file{gap:calc(var(--cx-input-spacing-medium) / 2)}.input--large{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-large)}.input--large .input__control,.input--large .input__auto-grow-mirror{padding-left:var(--cx-input-spacing-large);padding-right:var(--cx-input-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{width:calc(1em + var(--cx-input-spacing-small) * 2)}.input--large .input__prefix ::slotted(*){margin-inline-start:var(--cx-input-spacing-small)}.input--large .input__suffix ::slotted(*){margin-inline-end:var(--cx-input-spacing-small)}.input--large .input__control--file{gap:calc(var(--cx-input-spacing-large) / 2)}.input--button-only{border:0;align-items:center;padding:0}.input--button-only .input__control--file{border:0;padding:0}.input--button-only .input-container{display:none}.input--pill.input--small{border-radius:var(--cx-input-height-small)}.input--pill.input--medium{border-radius:var(--cx-input-height-medium)}.input--pill.input--large{border-radius:var(--cx-input-height-large)}.input__clear,.input__password-toggle{font-size:inherit;color:var(--cx-input-icon-color);transition:var(--cx-transition-fast) color;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.input__clear:hover,.input__password-toggle:hover{color:var(--cx-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}::-ms-reveal{display:none}.input--no-spin-buttons input[type=number]::-webkit-outer-spin-button,.input--no-spin-buttons input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;display:none}.input--no-spin-buttons input[type=number]{-moz-appearance:textfield}input[type=file]{display:none}.input-container{flex-direction:column;flex:1;justify-content:center;width:0;display:inline-flex;position:relative}.input-container--auto-grow{flex:0 auto;width:auto}.input__control--auto-grow{min-width:var(--cx-input-auto-grow-min-width,0);max-width:100%}.form-control__label{pointer-events:none;width:fit-content;text-transform:var(--cx-input-label-text-transform,none);line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.form-control--has-label .input--small .form-control__label{padding:0 var(--cx-input-spacing-small);transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-font-size-small) ) / 2));margin:0}.form-control--has-label .input--medium .form-control__label{padding:0 var(--cx-input-spacing-medium);transform:translateY(calc(( var(--cx-input-height-medium) + 1rem - var(--cx-input-font-size-medium) ) / 2));margin:0}.form-control--has-label .input--large .form-control__label{padding:0 var(--cx-input-spacing-large);transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-font-size-large) ) / 2));margin:0}.form-control--has-label .input--small,.form-control--file .input--small{min-height:calc(var(--cx-input-height-small) + 1rem)}.form-control--has-label .input--medium,.form-control--file .input--medium{min-height:calc(var(--cx-input-height-medium) + 1rem)}.form-control--has-label .input--large,.form-control--file .input--large{min-height:calc(var(--cx-input-height-large) + 1rem)}.form-control--has-label .input--focused .form-control__label,.form-control--has-label .input--has-placeholder .form-control__label,.form-control--has-label .input:not(.input--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}.input__control--file{flex-direction:row;align-items:center;width:100%;height:100%;margin-block:0;display:flex;text-align:start!important}.input__control--file span{text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}:host([data-cx-input-group__input--first]:not([data-cx-input-group__input--last])) .input{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-input-group__input--inner]) .input{border-radius:0}:host([data-cx-input-group__input--last]:not([data-cx-input-group__input--first])) .input{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-input-group__input]:not([data-cx-input-group__input--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-input-group__input--hover]){z-index:1}:host([data-cx-input-group__input--focus]),:host([data-cx-input-group__input][checked]){z-index:2}`;
 var It = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, st = (a) => {
   throw TypeError(a);
 }, h = (a, t, e, i) => {
@@ -3134,10 +2596,7 @@ let o = class extends rt {
   }
   render() {
     const a = this.hasSlotController.test("label"), t = this.hasSlotController.test("help-text"), e = this.label ? !0 : !!a, i = this.helpText ? !0 : !!t, n = this.clearable && !this.disabled && !this.readonly && (typeof this.value == "number" || this.value.length > 0), r = this.autoGrow && this.type !== "file", u = typeof this.fileResultLabel == "function" ? this.fileResultLabel(Mt(this, H, nt)) : this.fileResultLabel;
-    return E`
-      <div
-        part="form-control"
-        class=${S({
+    return E`<div part="form-control" class=${S({
       "form-control": !0,
       "form-control--file": this.type === "file",
       "form-control--has-help-text": i,
@@ -3145,12 +2604,7 @@ let o = class extends rt {
       "form-control--large": this.size === "large",
       "form-control--medium": this.size === "medium",
       "form-control--small": this.size === "small"
-    })}
-      >
-        <div part="form-control-input" class="form-control-input">
-          <div
-            part="base"
-            class=${S({
+    })}><div part="form-control-input" class="form-control-input"><div part="base" class=${S({
       input: !0,
       "input--auto-grow": r,
       "input--button-only": this.buttonOnly,
@@ -3166,176 +2620,28 @@ let o = class extends rt {
       "input--pill": this.pill,
       "input--small": this.size === "small",
       "input--standard": !this.filled
-    })}
-          >
-            <span part="prefix" class="input__prefix">
-              <slot name="prefix"></slot>
-            </span>
-
-            <span
-              class=${S({
+    })}><span part="prefix" class="input__prefix"><slot name="prefix"></slot></span><span class=${S({
       "input-container": !0,
       "input-container--auto-grow": r
-    })}
-              @mousedown=${this.handleContainerMouseDown}
-            >
-              <label
-                part="form-control-label"
-                class=${S({
+    })} @mousedown=${this.handleContainerMouseDown}><label part="form-control-label" class=${S({
       "form-control__label": !0,
       "form-control__label--empty": !this.value
-    })}
-                for="input"
-                aria-hidden=${e ? "false" : "true"}
-              >
-                <slot name="label" part="label">${this.label}</slot>
-              </label>
-              <input
-                part="input"
-                id="input"
-                class=${S({
+    })} for="input" aria-hidden=${e ? "false" : "true"}><slot name="label" part="label">${this.label}</slot></label><input part="input" id="input" class=${S({
       input__control: !0,
       "input__control--auto-grow": r
-    })}
-                type=${this.type === "password" && this.passwordVisible ? "text" : this.type}
-                title=${this.title}
-                aria-label=${_(this.ariaLabel)}
-                name=${_(this.name)}
-                ?disabled=${this.disabled}
-                ?readonly=${this.readonly}
-                ?required=${this.required}
-                placeholder=${_(this.placeholder)}
-                minlength=${_(this.minlength)}
-                maxlength=${_(this.maxlength)}
-                min=${_(this.min)}
-                max=${_(this.max)}
-                step=${_(this.step)}
-                autocapitalize=${_(this.autocapitalize)}
-                autocomplete=${_(this.autocomplete)}
-                autocorrect=${_(this.autoCorrect)}
-                ?autofocus=${this.autoFocus}
-                spellcheck=${this.spellCheck}
-                pattern=${_(this.pattern)}
-                enterkeyhint=${_(this.enterKeyHint)}
-                inputmode=${_(this.inputMode)}
-                aria-describedby="help-text"
-                .value=${mt(this.value)}
-                @change=${this.handleChange}
-                @input=${this.handleInput}
-                @invalid=${this.handleInvalid}
-                @keydown=${this.handleKeyDown}
-                @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
-                accept=${_(this.accept)}
-                ?multiple=${this.multiple}
-              />
-              ${Y(
+    })} type=${this.type === "password" && this.passwordVisible ? "text" : this.type} title=${this.title} aria-label=${_(this.ariaLabel)} name=${_(this.name)} ?disabled=${this.disabled} ?readonly=${this.readonly} ?required=${this.required} placeholder=${_(this.placeholder)} minlength=${_(this.minlength)} maxlength=${_(this.maxlength)} min=${_(this.min)} max=${_(this.max)} step=${_(this.step)} autocapitalize=${_(this.autocapitalize)} autocomplete=${_(this.autocomplete)} autocorrect=${_(this.autoCorrect)} ?autofocus=${this.autoFocus} spellcheck=${this.spellCheck} pattern=${_(this.pattern)} enterkeyhint=${_(this.enterKeyHint)} inputmode=${_(this.inputMode)} aria-describedby="help-text" .value=${mt(this.value)} @change=${this.handleChange} @input=${this.handleInput} @invalid=${this.handleInvalid} @keydown=${this.handleKeyDown} @focus=${this.handleFocus} @blur=${this.handleBlur} accept=${_(this.accept)} ?multiple=${this.multiple}>${Y(
       r,
-      () => E`<span
-                    part="auto-grow-mirror"
-                    class="input__auto-grow-mirror"
-                    aria-hidden="true"
-                  ></span>`
+      () => E`<span part="auto-grow-mirror" class="input__auto-grow-mirror" aria-hidden="true"></span>`
     )}
-              ${this.type === "file" && !this.buttonOnly ? E`<div
-                    class="input__control input__control--file"
-                    part="file-control"
-                    @click=${this.handleFileButtonClick}
-                  >
-                    <slot name="file-button">
-                      <cx-button
-                        part="file-button"
-                        variant=${_(this.variant)}
-                        size=${_(this.size)}
-                        ?disabled=${this.disabled}
-                        >${this.fileButtonLabel}</cx-button
-                      >
-                    </slot>
-                    <span part="file-result">${u}</span>
-                  </div>` : ""}
-            </span>
-            ${this.type === "file" && this.buttonOnly ? E` <div
-                  class="input__control input__control--file"
-                  part="file-control"
-                  @click=${this.handleFileButtonClick}
-                >
-                  <slot name="file-button">
-                    <cx-button
-                      part="file-button"
-                      variant=${_(this.variant)}
-                      size=${_(this.size)}
-                      ?disabled=${this.disabled}
-                      >${this.fileButtonLabel}</cx-button
-                    >
-                  </slot>
-                </div>` : ""}
-            ${n ? E`
-                  <button
-                    part="clear-button"
-                    class="input__clear"
-                    type="button"
-                    aria-label=${this.localize.term("clearEntry")}
-                    @click=${this.handleClearClick}
-                    tabindex="-1"
-                  >
-                    <slot name="clear-icon">
-                      <cx-icon name="close"></cx-icon>
-                    </slot>
-                  </button>
-                ` : ""}
-            ${this.passwordToggle && !this.disabled ? E`
-                  <button
-                    part="password-toggle-button"
-                    class="input__password-toggle"
-                    type="button"
-                    aria-label=${this.localize.term(
+              ${this.type === "file" && !this.buttonOnly ? E`<div class="input__control input__control--file" part="file-control" @click=${this.handleFileButtonClick}><slot name="file-button"><cx-button part="file-button" variant=${_(this.variant)} size=${_(this.size)} ?disabled=${this.disabled}>${this.fileButtonLabel}</cx-button></slot><span part="file-result">${u}</span></div>` : ""}</span>${this.type === "file" && this.buttonOnly ? E`<div class="input__control input__control--file" part="file-control" @click=${this.handleFileButtonClick}><slot name="file-button"><cx-button part="file-button" variant=${_(this.variant)} size=${_(this.size)} ?disabled=${this.disabled}>${this.fileButtonLabel}</cx-button></slot></div>` : ""}
+            ${n ? E`<button part="clear-button" class="input__clear" type="button" aria-label=${this.localize.term("clearEntry")} @click=${this.handleClearClick} tabindex="-1"><slot name="clear-icon"><cx-icon name="close"></cx-icon></slot></button>` : ""}
+            ${this.passwordToggle && !this.disabled ? E`<button part="password-toggle-button" class="input__password-toggle" type="button" aria-label=${this.localize.term(
       this.passwordVisible ? "hidePassword" : "showPassword"
-    )}
-                    @click=${this.handlePasswordToggle}
-                    tabindex="-1"
-                  >
-                    ${this.passwordVisible ? E`
-                          <slot name="show-password-icon">
-                            <cx-icon
-                              name="visibility_off"
-                              library="system"
-                            ></cx-icon>
-                          </slot>
-                        ` : E`
-                          <slot name="hide-password-icon">
-                            <cx-icon
-                              name="visibility"
-                              library="system"
-                            ></cx-icon>
-                          </slot>
-                        `}
-                  </button>
-                ` : ""}
-
-            <span part="suffix" class="input__suffix">
-              <slot name="suffix"></slot>
-            </span>
-          </div>
-          ${Y(this.showLength, () => E`
-              <div part="character-count" class="input__character-count">
-                ${[
+    )} @click=${this.handlePasswordToggle} tabindex="-1">${this.passwordVisible ? E`<slot name="show-password-icon"><cx-icon name="visibility_off" library="system"></cx-icon></slot>` : E`<slot name="hide-password-icon"><cx-icon name="visibility" library="system"></cx-icon></slot>`}</button>` : ""}<span part="suffix" class="input__suffix"><slot name="suffix"></slot></span></div>${Y(this.showLength, () => E`<div part="character-count" class="input__character-count">${[
       this.minlength && `${this.minlength} /`,
       this.value.length,
       this.maxlength && `/ ${this.maxlength}`
-    ].filter(Boolean).join(" ")}
-              </div>
-            `)}
-        </div>
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${i ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </div>
-    `;
+    ].filter(Boolean).join(" ")}</div>`)}</div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${i ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
   }
 };
 H = /* @__PURE__ */ new WeakSet();