@enact/limestone 1.9.3 → 1.10.0

package/Input/InputField.module.css

@@ -1,4 +1,5 @@
-.input {
+.input,
+.marqueeText {
   font-weight: var(--primitive-font-weight-regular);
   font-size: var(--primitive-font-size-60);
   font-style: normal;
@@ -14,67 +15,87 @@
   text-indent: 0.2em;
   max-width: 100%;
 }
-:global(.enact-locale-non-latin) .input {
+:global(.enact-locale-non-latin) .input,
+:global(.enact-locale-non-latin) .marqueeText {
   font-family: "Limestone";
 }
-:global(.enact-locale-non-latin) .input {
+:global(.enact-locale-non-latin) .input,
+:global(.enact-locale-non-latin) .marqueeText {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-light);
   font-size: var(--primitive-font-size-54);
   font-style: normal;
 }
-:global(.enact-locale-km) .input {
+:global(.enact-locale-km) .input,
+:global(.enact-locale-km) .marqueeText {
   line-height: 1.7em;
 }
-:global(.enact-locale-si) .input {
+:global(.enact-locale-si) .input,
+:global(.enact-locale-si) .marqueeText {
   line-height: 1.7em;
 }
-:global(.enact-locale-th) .input {
+:global(.enact-locale-th) .input,
+:global(.enact-locale-th) .marqueeText {
   line-height: 1.7em;
 }
-:global(.enact-locale-vi) .input {
+:global(.enact-locale-vi) .input,
+:global(.enact-locale-vi) .marqueeText {
   line-height: 1.7em;
 }
-.input a:link {
+.input a:link,
+.marqueeText a:link {
   color: inherit;
   text-decoration: none;
 }
-.input a:visited {
+.input a:visited,
+.marqueeText a:visited {
   color: inherit;
   text-decoration: none;
 }
-.input a:hover {
+.input a:hover,
+.marqueeText a:hover {
   color: inherit;
   text-decoration: none;
 }
-.input a:active {
+.input a:active,
+.marqueeText a:active {
   color: inherit;
   text-decoration: none;
 }
-.input[type=number] {
+.input[type=number],
+.marqueeText[type=number] {
   appearance: textfield;
 }
 .input[type=number]::-webkit-inner-spin-button,
-.input[type=number]::-webkit-outer-spin-button {
+.marqueeText[type=number]::-webkit-inner-spin-button,
+.input[type=number]::-webkit-outer-spin-button,
+.marqueeText[type=number]::-webkit-outer-spin-button {
   appearance: none;
 }
-.input[type=number]:hover {
+.input[type=number]:hover,
+.marqueeText[type=number]:hover {
   appearance: none;
 }
-.input[placeholder] {
+.input[placeholder],
+.marqueeText[placeholder] {
   text-overflow: ellipsis;
 }
 :global(.spotlight-input-key) .input:global(.spottable):focus,
-:global(.spotlight-input-mouse) .input:global(.spottable):focus {
+:global(.spotlight-input-key) .marqueeText:global(.spottable):focus,
+:global(.spotlight-input-mouse) .input:global(.spottable):focus,
+:global(.spotlight-input-mouse) .marqueeText:global(.spottable):focus {
   cursor: text;
 }
-:global(.spotlight-input-touch) .input:global(.spottable):active {
+:global(.spotlight-input-touch) .input:global(.spottable):active,
+:global(.spotlight-input-touch) .marqueeText:global(.spottable):active {
   cursor: text;
 }
-.input[disabled] {
+.input[disabled],
+.marqueeText[disabled] {
   cursor: default;
 }
-:global(.enact-locale-right-to-left) .input {
+:global(.enact-locale-right-to-left) .input,
+:global(.enact-locale-right-to-left) .marqueeText {
   text-align: right;
 }
 .inputField {
@@ -112,7 +133,8 @@
   border-radius: var(--semantic-radius-button);
 }
 .inputField .input,
-.inputField .inputHighlight {
+.inputField .inputHighlight,
+.inputField .marqueeText {
   font-size: var(--primitive-font-size-78);
   font-weight: var(--primitive-font-weight-semibold);
   height: 3.5rem;
@@ -131,6 +153,10 @@
 .inputField .input.passwordtel {
   -webkit-text-security: disc;
 }
+.inputField .marqueeText.passwordtel {
+  letter-spacing: var(--primitive-spacing-30);
+  -webkit-text-security: disc;
+}
 .inputField .inputHighlight {
   position: absolute;
   top: 0;
@@ -141,22 +167,42 @@
   opacity: 0;
   z-index: -1;
 }
+.inputField .inputWrapper {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+.inputField .marqueeText {
+  position: absolute;
+  pointer-events: none;
+  display: flex;
+}
+.inputField .marqueeTextInner {
+  visibility: hidden;
+}
+.inputField .marqueeTextAnimate,
+.inputField .marqueeTextWillAnimate {
+  visibility: visible;
+}
 .inputField.large {
   padding: 0 var(--primitive-spacing-30);
   width: 32.5rem;
 }
-.inputField.large.hasIconBefore .input,
-.inputField.large.hasIconAfter .input {
+.inputField.large.hasIconBefore .inputWrapper,
+.inputField.large.hasIconAfter .inputWrapper {
   max-width: 28.875rem;
 }
-.inputField.large.hasIconBefore.inputField.large.hasIconAfter .input {
+.inputField.large.hasIconBefore.inputField.large.hasIconAfter .inputWrapper {
   max-width: 26.5rem;
 }
 .inputField.small {
   height: 2.75rem;
   width: 25rem;
 }
-.inputField.small .input {
+.inputField.small .input,
+.inputField.small .marqueeText {
   font-size: var(--primitive-font-size-60);
   height: 2.75rem;
   line-height: 2.75rem;
@@ -165,11 +211,11 @@
   line-height: 2.75rem;
   height: 2.75rem;
 }
-.inputField.small.hasIconBefore .input,
-.inputField.small.hasIconAfter .input {
+.inputField.small.hasIconBefore .inputWrapper,
+.inputField.small.hasIconAfter .inputWrapper {
   max-width: 20.625rem;
 }
-.inputField.small.hasIconBefore.inputField.small.hasIconAfter .input {
+.inputField.small.hasIconBefore.inputField.small.hasIconAfter .inputWrapper {
   max-width: 18.25rem;
 }
 .inputField.multiline {
@@ -207,6 +253,9 @@
 .inputField:global(.neutral) .input:focus-within::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+.inputField:global(.neutral) .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
+}
 .inputField:global(.neutral).invalid input {
   color: #ff0000;
 }
@@ -231,6 +280,18 @@
 :global(.spotlight-input-mouse) .inputField:global(.neutral):global(.spottable):focus .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-key) .inputField:global(.neutral):global(.spottable):focus .marqueeText.placeholderText,
+:global(.spotlight-input-mouse) .inputField:global(.neutral):global(.spottable):focus .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-key) .inputField:global(.neutral):global(.spottable):focus .marqueeTextInner,
+:global(.spotlight-input-mouse) .inputField:global(.neutral):global(.spottable):focus .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-key) .inputField:global(.neutral):global(.spottable):focus.hasMarquee:not(.active) .input,
+:global(.spotlight-input-mouse) .inputField:global(.neutral):global(.spottable):focus.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-touch) .inputField:global(.neutral):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -242,6 +303,15 @@
 :global(.spotlight-input-touch) .inputField:global(.neutral):global(.spottable):active .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-touch) .inputField:global(.neutral):global(.spottable):active .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-touch) .inputField:global(.neutral):global(.spottable):active .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-touch) .inputField:global(.neutral):global(.spottable):active.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-key) :global(.noAnimation) .inputField:global(.neutral):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .inputField:global(.neutral):global(.spottable):focus .bg {
   box-shadow: none;
@@ -265,7 +335,8 @@
   opacity: 0.585;
   opacity: 0.3;
 }
-.inputField:global(.neutral)[disabled] .input {
+.inputField:global(.neutral)[disabled] .input,
+.inputField:global(.neutral)[disabled] .marqueeText {
   color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
 }
 :global(.spotlight-input-key) .inputField:global(.neutral)[disabled]:global(.spottable):focus .bg,
@@ -274,14 +345,17 @@
   filter: unset;
 }
 :global(.spotlight-input-key) .inputField:global(.neutral)[disabled]:global(.spottable):focus .input,
-:global(.spotlight-input-mouse) .inputField:global(.neutral)[disabled]:global(.spottable):focus .input {
+:global(.spotlight-input-mouse) .inputField:global(.neutral)[disabled]:global(.spottable):focus .input,
+:global(.spotlight-input-key) .inputField:global(.neutral)[disabled]:global(.spottable):focus .marqueeText,
+:global(.spotlight-input-mouse) .inputField:global(.neutral)[disabled]:global(.spottable):focus .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.spotlight-input-touch) .inputField:global(.neutral)[disabled]:global(.spottable):active .bg {
   background-color: var(--semantic-color-surface-default-disabled-focused);
   filter: unset;
 }
-:global(.spotlight-input-touch) .inputField:global(.neutral)[disabled]:global(.spottable):active .input {
+:global(.spotlight-input-touch) .inputField:global(.neutral)[disabled]:global(.spottable):active .input,
+:global(.spotlight-input-touch) .inputField:global(.neutral)[disabled]:global(.spottable):active .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast) {
@@ -304,6 +378,9 @@
 :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast) .input:focus-within::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast) .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
+}
 :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast).invalid input {
   color: #ff0000;
 }
@@ -328,6 +405,18 @@
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus .marqueeText.placeholderText,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus .marqueeTextInner,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus.hasMarquee:not(.active) .input,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -339,6 +428,15 @@
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):active .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):active .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):active .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):active.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
   box-shadow: none;
@@ -362,7 +460,8 @@
   opacity: 0.585;
   opacity: 0.3;
 }
-:global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled] .input {
+:global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled] .input,
+:global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled] .marqueeText {
   color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .bg,
@@ -371,14 +470,17 @@
   filter: unset;
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .input,
-:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .input {
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .input,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .marqueeText,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .bg {
   background-color: var(--semantic-color-surface-default-disabled-focused);
   filter: unset;
 }
-:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .input {
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .input,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .inputField:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 .inputField:global(.light) {
@@ -401,6 +503,9 @@
 .inputField:global(.light) .input:focus-within::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+.inputField:global(.light) .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
+}
 .inputField:global(.light).invalid input {
   color: #ff0000;
 }
@@ -425,6 +530,18 @@
 :global(.spotlight-input-mouse) .inputField:global(.light):global(.spottable):focus .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-key) .inputField:global(.light):global(.spottable):focus .marqueeText.placeholderText,
+:global(.spotlight-input-mouse) .inputField:global(.light):global(.spottable):focus .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-key) .inputField:global(.light):global(.spottable):focus .marqueeTextInner,
+:global(.spotlight-input-mouse) .inputField:global(.light):global(.spottable):focus .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-key) .inputField:global(.light):global(.spottable):focus.hasMarquee:not(.active) .input,
+:global(.spotlight-input-mouse) .inputField:global(.light):global(.spottable):focus.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-touch) .inputField:global(.light):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -436,6 +553,15 @@
 :global(.spotlight-input-touch) .inputField:global(.light):global(.spottable):active .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-touch) .inputField:global(.light):global(.spottable):active .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-touch) .inputField:global(.light):global(.spottable):active .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-touch) .inputField:global(.light):global(.spottable):active.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-key) :global(.noAnimation) .inputField:global(.light):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .inputField:global(.light):global(.spottable):focus .bg {
   box-shadow: none;
@@ -459,7 +585,8 @@
   opacity: 0.585;
   opacity: 0.3;
 }
-.inputField:global(.light)[disabled] .input {
+.inputField:global(.light)[disabled] .input,
+.inputField:global(.light)[disabled] .marqueeText {
   color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
 }
 :global(.spotlight-input-key) .inputField:global(.light)[disabled]:global(.spottable):focus .bg,
@@ -468,14 +595,17 @@
   filter: unset;
 }
 :global(.spotlight-input-key) .inputField:global(.light)[disabled]:global(.spottable):focus .input,
-:global(.spotlight-input-mouse) .inputField:global(.light)[disabled]:global(.spottable):focus .input {
+:global(.spotlight-input-mouse) .inputField:global(.light)[disabled]:global(.spottable):focus .input,
+:global(.spotlight-input-key) .inputField:global(.light)[disabled]:global(.spottable):focus .marqueeText,
+:global(.spotlight-input-mouse) .inputField:global(.light)[disabled]:global(.spottable):focus .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.spotlight-input-touch) .inputField:global(.light)[disabled]:global(.spottable):active .bg {
   background-color: var(--semantic-color-surface-default-disabled-focused);
   filter: unset;
 }
-:global(.spotlight-input-touch) .inputField:global(.light)[disabled]:global(.spottable):active .input {
+:global(.spotlight-input-touch) .inputField:global(.light)[disabled]:global(.spottable):active .input,
+:global(.spotlight-input-touch) .inputField:global(.light)[disabled]:global(.spottable):active .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 .inputField:global(.game) {
@@ -501,6 +631,9 @@
 .inputField:global(.game) .input:focus-within::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+.inputField:global(.game) .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
+}
 .inputField:global(.game).invalid input {
   color: #ff0000;
 }
@@ -525,6 +658,18 @@
 :global(.spotlight-input-mouse) .inputField:global(.game):global(.spottable):focus .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-key) .inputField:global(.game):global(.spottable):focus .marqueeText.placeholderText,
+:global(.spotlight-input-mouse) .inputField:global(.game):global(.spottable):focus .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-key) .inputField:global(.game):global(.spottable):focus .marqueeTextInner,
+:global(.spotlight-input-mouse) .inputField:global(.game):global(.spottable):focus .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-key) .inputField:global(.game):global(.spottable):focus.hasMarquee:not(.active) .input,
+:global(.spotlight-input-mouse) .inputField:global(.game):global(.spottable):focus.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-touch) .inputField:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -536,6 +681,15 @@
 :global(.spotlight-input-touch) .inputField:global(.game):global(.spottable):active .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-touch) .inputField:global(.game):global(.spottable):active .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-touch) .inputField:global(.game):global(.spottable):active .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-touch) .inputField:global(.game):global(.spottable):active.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-key) :global(.noAnimation) .inputField:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .inputField:global(.game):global(.spottable):focus .bg {
   box-shadow: none;
@@ -559,7 +713,8 @@
   opacity: 0.585;
   opacity: 0.3;
 }
-.inputField:global(.game)[disabled] .input {
+.inputField:global(.game)[disabled] .input,
+.inputField:global(.game)[disabled] .marqueeText {
   color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
 }
 :global(.spotlight-input-key) .inputField:global(.game)[disabled]:global(.spottable):focus .bg,
@@ -568,14 +723,17 @@
   filter: unset;
 }
 :global(.spotlight-input-key) .inputField:global(.game)[disabled]:global(.spottable):focus .input,
-:global(.spotlight-input-mouse) .inputField:global(.game)[disabled]:global(.spottable):focus .input {
+:global(.spotlight-input-mouse) .inputField:global(.game)[disabled]:global(.spottable):focus .input,
+:global(.spotlight-input-key) .inputField:global(.game)[disabled]:global(.spottable):focus .marqueeText,
+:global(.spotlight-input-mouse) .inputField:global(.game)[disabled]:global(.spottable):focus .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.spotlight-input-touch) .inputField:global(.game)[disabled]:global(.spottable):active .bg {
   background-color: var(--semantic-color-surface-default-disabled-focused);
   filter: unset;
 }
-:global(.spotlight-input-touch) .inputField:global(.game)[disabled]:global(.spottable):active .input {
+:global(.spotlight-input-touch) .inputField:global(.game)[disabled]:global(.spottable):active .input,
+:global(.spotlight-input-touch) .inputField:global(.game)[disabled]:global(.spottable):active .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.green) .inputField:global(.game) {
@@ -600,6 +758,9 @@
 :global(.green) .inputField:global(.game) .input:focus-within::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.green) .inputField:global(.game) .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
+}
 :global(.green) .inputField:global(.game).invalid input {
   color: #ff0000;
 }
@@ -624,6 +785,18 @@
 :global(.spotlight-input-mouse) :global(.green) .inputField:global(.game):global(.spottable):focus .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-key) :global(.green) .inputField:global(.game):global(.spottable):focus .marqueeText.placeholderText,
+:global(.spotlight-input-mouse) :global(.green) .inputField:global(.game):global(.spottable):focus .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-key) :global(.green) .inputField:global(.game):global(.spottable):focus .marqueeTextInner,
+:global(.spotlight-input-mouse) :global(.green) .inputField:global(.game):global(.spottable):focus .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-key) :global(.green) .inputField:global(.game):global(.spottable):focus.hasMarquee:not(.active) .input,
+:global(.spotlight-input-mouse) :global(.green) .inputField:global(.game):global(.spottable):focus.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-touch) :global(.green) .inputField:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -635,6 +808,15 @@
 :global(.spotlight-input-touch) :global(.green) .inputField:global(.game):global(.spottable):active .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-touch) :global(.green) .inputField:global(.game):global(.spottable):active .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-touch) :global(.green) .inputField:global(.game):global(.spottable):active .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-touch) :global(.green) .inputField:global(.game):global(.spottable):active.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-key) :global(.noAnimation) :global(.green) .inputField:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .inputField:global(.game):global(.spottable):focus .bg {
   box-shadow: none;
@@ -658,7 +840,8 @@
   opacity: 0.585;
   opacity: 0.3;
 }
-:global(.green) .inputField:global(.game)[disabled] .input {
+:global(.green) .inputField:global(.game)[disabled] .input,
+:global(.green) .inputField:global(.game)[disabled] .marqueeText {
   color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
 }
 :global(.spotlight-input-key) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):focus .bg,
@@ -667,14 +850,17 @@
   filter: unset;
 }
 :global(.spotlight-input-key) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):focus .input,
-:global(.spotlight-input-mouse) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):focus .input {
+:global(.spotlight-input-mouse) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):focus .input,
+:global(.spotlight-input-key) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):focus .marqueeText,
+:global(.spotlight-input-mouse) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):focus .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.spotlight-input-touch) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):active .bg {
   background-color: var(--semantic-color-surface-default-disabled-focused);
   filter: unset;
 }
-:global(.spotlight-input-touch) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):active .input {
+:global(.spotlight-input-touch) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):active .input,
+:global(.spotlight-input-touch) :global(.green) .inputField:global(.game)[disabled]:global(.spottable):active .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.orange) .inputField:global(.game) {
@@ -699,6 +885,9 @@
 :global(.orange) .inputField:global(.game) .input:focus-within::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.orange) .inputField:global(.game) .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
+}
 :global(.orange) .inputField:global(.game).invalid input {
   color: #ff0000;
 }
@@ -723,6 +912,18 @@
 :global(.spotlight-input-mouse) :global(.orange) .inputField:global(.game):global(.spottable):focus .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-key) :global(.orange) .inputField:global(.game):global(.spottable):focus .marqueeText.placeholderText,
+:global(.spotlight-input-mouse) :global(.orange) .inputField:global(.game):global(.spottable):focus .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-key) :global(.orange) .inputField:global(.game):global(.spottable):focus .marqueeTextInner,
+:global(.spotlight-input-mouse) :global(.orange) .inputField:global(.game):global(.spottable):focus .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-key) :global(.orange) .inputField:global(.game):global(.spottable):focus.hasMarquee:not(.active) .input,
+:global(.spotlight-input-mouse) :global(.orange) .inputField:global(.game):global(.spottable):focus.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-touch) :global(.orange) .inputField:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -734,6 +935,15 @@
 :global(.spotlight-input-touch) :global(.orange) .inputField:global(.game):global(.spottable):active .input::placeholder {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+:global(.spotlight-input-touch) :global(.orange) .inputField:global(.game):global(.spottable):active .marqueeText.placeholderText {
+  color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
+}
+:global(.spotlight-input-touch) :global(.orange) .inputField:global(.game):global(.spottable):active .marqueeTextInner {
+  visibility: visible;
+}
+:global(.spotlight-input-touch) :global(.orange) .inputField:global(.game):global(.spottable):active.hasMarquee:not(.active) .input {
+  opacity: 0;
+}
 :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .inputField:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .inputField:global(.game):global(.spottable):focus .bg {
   box-shadow: none;
@@ -757,7 +967,8 @@
   opacity: 0.585;
   opacity: 0.3;
 }
-:global(.orange) .inputField:global(.game)[disabled] .input {
+:global(.orange) .inputField:global(.game)[disabled] .input,
+:global(.orange) .inputField:global(.game)[disabled] .marqueeText {
   color: color(from var(--semantic-color-on-surface-input-field) srgb r g b / 0.4);
 }
 :global(.spotlight-input-key) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):focus .bg,
@@ -766,13 +977,19 @@
   filter: unset;
 }
 :global(.spotlight-input-key) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):focus .input,
-:global(.spotlight-input-mouse) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):focus .input {
+:global(.spotlight-input-mouse) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):focus .input,
+:global(.spotlight-input-key) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):focus .marqueeText,
+:global(.spotlight-input-mouse) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):focus .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
 :global(.spotlight-input-touch) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):active .bg {
   background-color: var(--semantic-color-surface-default-disabled-focused);
   filter: unset;
 }
-:global(.spotlight-input-touch) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):active .input {
+:global(.spotlight-input-touch) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):active .input,
+:global(.spotlight-input-touch) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):active .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
+.inputField.active .marqueeText {
+  display: none;
+}

package/Input/InputFieldDecoratorIcon.js

@@ -49,6 +49,7 @@ var InputDecoratorIconBase = exports.InputDecoratorIconBase = (0, _kind["default
       rest = _objectWithoutProperties(_ref, _excluded);
     delete rest.position;
     return children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], _objectSpread(_objectSpread({}, rest), {}, {
+      "data-input-icon": true,
       children: children
     })) : null;
   }