@enact/limestone 1.3.0 → 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;
@@ -12,68 +13,89 @@
   text-overflow: ellipsis;
   flex-grow: 1;
   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: 1.125rem;
+  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 {
@@ -85,7 +107,6 @@
   vertical-align: middle;
   align-items: center;
   height: 3.5rem;
-  width: 32.5rem;
 }
 .inputField .iconBefore {
   margin-left: 0;
@@ -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,14 +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 .inputWrapper,
+.inputField.large.hasIconAfter .inputWrapper {
+  max-width: 28.875rem;
+}
+.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;
@@ -157,6 +211,13 @@
   line-height: 2.75rem;
   height: 2.75rem;
 }
+.inputField.small.hasIconBefore .inputWrapper,
+.inputField.small.hasIconAfter .inputWrapper {
+  max-width: 20.625rem;
+}
+.inputField.small.hasIconBefore.inputField.small.hasIconAfter .inputWrapper {
+  max-width: 18.25rem;
+}
 .inputField.multiline {
   display: block;
   padding: 0.5rem 0.75rem;
@@ -192,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;
 }
@@ -216,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);
 }
@@ -227,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;
@@ -250,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,
@@ -259,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) {
@@ -289,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;
 }
@@ -313,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);
 }
@@ -324,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;
@@ -347,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,
@@ -356,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) {
@@ -386,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;
 }
@@ -410,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);
 }
@@ -421,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;
@@ -444,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,
@@ -453,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) {
@@ -486,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;
 }
@@ -510,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);
 }
@@ -521,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;
@@ -544,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,
@@ -553,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) {
@@ -585,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;
 }
@@ -609,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);
 }
@@ -620,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;
@@ -643,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,
@@ -652,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) {
@@ -684,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;
 }
@@ -708,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);
 }
@@ -719,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;
@@ -742,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,
@@ -751,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;
   }