@neo-ui-kit/react 1.0.0 → 1.0.1

package/dist/components/controls/InputBase/styles.css

@@ -1,379 +1,379 @@
-/* Shared foundation of every text-like control: TextField, NumberField, TextArea, Select, Autocomplete. */
-
-/* Field frame: label, control, description or error. */
-.ad-field {
-  display: grid;
-  gap: calc(var(--ad-space-1) * 1.5);
-  min-width: 0;
-  color: var(--ad-text);
-  font-size: var(--ad-size-font);
-}
-.ad-field-label {
-  display: inline-flex;
-  gap: 0.2em;
-  font-size: var(--ad-font-size-label);
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: var(--ad-neutral-200);
-}
-.ad-field-required {
-  color: var(--ad-pink);
-}
-.ad-field-message {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.35em;
-  color: var(--ad-muted);
-  font-size: var(--ad-font-size-caption);
-  line-height: 1.4;
-}
-.ad-field-message[data-error] {
-  color: var(--ad-secondary);
-}
-.ad-field-message > .ad-icon {
-  --ad-icon-size: 1.15em;
-  flex: none;
-  margin-top: 0.05em;
-}
-
-/* Control box. */
-.ad-input-base {
-  --ad-input-accent: var(--ad-pink);
-  --ad-input-icon: calc(var(--ad-size-font) * 1.45);
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: calc(var(--ad-size-gap) * 0.75);
-  min-width: 0;
-  width: 100%;
-  min-height: var(--ad-size-h);
-  padding-inline: var(--ad-size-pad-x);
-  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.18);
-  border-radius: var(--ad-size-radius);
-  background: var(--ad-surface-input);
-  box-shadow: var(--ad-shadow-input);
-  font-size: var(--ad-size-font);
-  color: var(--ad-text);
-  cursor: text;
-  transition:
-    border-color 0.18s,
-    box-shadow 0.18s,
-    background 0.18s;
-}
-.ad-input-base:hover:not([data-disabled]) {
-  border-color: rgb(from var(--ad-secondary) r g b / 0.42);
-}
-.ad-input-base:focus-within {
-  border-color: var(--ad-input-accent);
-  box-shadow:
-    0 0 0 0.1875rem rgb(from var(--ad-primary) r g b / 0.14),
-    0 0 1rem rgb(from var(--ad-primary) r g b / 0.15),
-    inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.13);
-}
-/* Fluent-style accent line that grows from the centre on focus. */
-.ad-input-base::after {
-  content: "";
-  position: absolute;
-  inset: auto 0.5rem -0.0625rem;
-  height: 0.125rem;
-  border-radius: 999rem;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--ad-input-accent),
-    transparent
-  );
-  box-shadow: 0 0 0.5rem var(--ad-red);
-  transform: scaleX(0);
-  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
-  pointer-events: none;
-}
-.ad-input-base:focus-within::after {
-  transform: scaleX(1);
-}
-.ad-input-base[data-invalid] {
-  --ad-input-accent: var(--ad-secondary);
-  border-color: rgb(from var(--ad-primary) r g b / 0.61);
-}
-.ad-input-base[data-disabled] {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-.ad-input-base[data-readonly] {
-  border-style: dashed;
-  border-color: rgb(from var(--ad-secondary) r g b / 0.4);
-  background: var(--ad-neutral-900);
-  box-shadow: none;
-}
-
-/* Variants. */
-.ad-input-base[data-ad-variant="filled"] {
-  border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.4);
-  border-end-start-radius: 0.25rem;
-  border-end-end-radius: 0.25rem;
-  background: linear-gradient(180deg, var(--ad-neutral-800), var(--ad-neutral-850));
-  box-shadow: inset 0 0.0625rem 0 #ffffff10;
-}
-.ad-input-base[data-ad-variant="filled"]:hover:not([data-disabled]) {
-  background: linear-gradient(180deg, var(--ad-primary-800), var(--ad-neutral-800));
-  border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.66);
-}
-.ad-input-base[data-ad-variant="underlined"] {
-  padding-inline: 0.125rem;
-  border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.42);
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-}
-.ad-input-base[data-ad-variant="underlined"]:hover:not([data-disabled]) {
-  border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.77);
-}
-.ad-input-base:is(
-    [data-ad-variant="filled"],
-    [data-ad-variant="underlined"]
-  ):focus-within {
-  border-color: transparent;
-  border-bottom-color: var(--ad-input-accent);
-  box-shadow: none;
-}
-.ad-input-base[data-ad-variant="underlined"]::after {
-  inset-inline: 0;
-}
-
-/* Content. */
-.ad-input-base[data-multiline] {
-  align-items: flex-start;
-  padding-block: calc(var(--ad-size-pad-x) * 0.75);
-}
-.ad-input-base-content {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  align-self: stretch;
-}
-.ad-input-base input,
-.ad-input-base textarea,
-.ad-input-base button.ad-input-control {
-  flex: 1;
-  min-width: 0;
-  width: 100%;
-  min-height: calc(var(--ad-size-h) - 0.125rem);
-  padding: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-}
-.ad-input-base input::placeholder,
-.ad-input-base textarea::placeholder {
-  color: var(--ad-neutral-500);
-  opacity: 1;
-}
-.ad-input-base textarea {
-  min-height: 4lh;
-  resize: vertical;
-  line-height: 1.5;
-}
-.ad-input-base input[type="number"] {
-  appearance: textfield;
-  -moz-appearance: textfield;
-}
-.ad-input-base input::-webkit-inner-spin-button,
-.ad-input-base input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.ad-input-base button.ad-input-control {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.ad-input-base button.ad-input-control:disabled {
-  cursor: not-allowed;
-}
-
-/* Adornments: icons follow the field size, buttons inside a field are flat. */
-.ad-input-adornment {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.125rem;
-  flex: none;
-  color: var(--ad-muted);
-}
-.ad-input-base[data-multiline] .ad-input-adornment {
-  min-height: calc(var(--ad-size-h) - 0.125rem - var(--ad-size-pad-x) * 1.5);
-}
-.ad-input-adornment > .ad-icon,
-.ad-input-adornment .ad-icon-button > .ad-icon {
-  --ad-icon-size: var(--ad-input-icon);
-  width: var(--ad-icon-size);
-  height: var(--ad-icon-size);
-}
-.ad-input-base:focus-within .ad-input-adornment[data-position="start"] {
-  color: var(--ad-input-accent);
-}
-.ad-input-adornment .ad-icon-button {
-  --ad-size-h: calc(var(--ad-input-icon) + 0.5rem);
-  width: var(--ad-size-h);
-  min-width: var(--ad-size-h);
-  height: var(--ad-size-h);
-  border: 0;
-  border-radius: 999rem;
-  background: transparent;
-  box-shadow: none;
-  color: var(--ad-muted);
-  animation: none;
-  transform: none;
-  filter: none;
-}
-.ad-input-adornment .ad-icon-button::before,
-.ad-input-adornment .ad-icon-button::after {
-  display: none;
-}
-.ad-input-adornment .ad-icon-button > .ad-icon {
-  filter: none;
-}
+/* Shared foundation of every text-like control: TextField, NumberField, TextArea, Select, Autocomplete. */
+
+/* Field frame: label, control, description or error. */
+.ad-field {
+  display: grid;
+  gap: calc(var(--ad-space-1) * 1.5);
+  min-width: 0;
+  color: var(--ad-text);
+  font-size: var(--ad-size-font);
+}
+.ad-field-label {
+  display: inline-flex;
+  gap: 0.2em;
+  font-size: var(--ad-font-size-label);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--ad-neutral-200);
+}
+.ad-field-required {
+  color: var(--ad-pink);
+}
+.ad-field-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.35em;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  line-height: 1.4;
+}
+.ad-field-message[data-error] {
+  color: var(--ad-secondary);
+}
+.ad-field-message > .ad-icon {
+  --ad-icon-size: 1.15em;
+  flex: none;
+  margin-top: 0.05em;
+}
+
+/* Control box. */
+.ad-input-base {
+  --ad-input-accent: var(--ad-pink);
+  --ad-input-icon: calc(var(--ad-size-font) * 1.45);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ad-size-gap) * 0.75);
+  min-width: 0;
+  width: 100%;
+  min-height: var(--ad-size-h);
+  padding-inline: var(--ad-size-pad-x);
+  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.18);
+  border-radius: var(--ad-size-radius);
+  background: var(--ad-surface-input);
+  box-shadow: var(--ad-shadow-input);
+  font-size: var(--ad-size-font);
+  color: var(--ad-text);
+  cursor: text;
+  transition:
+    border-color 0.18s,
+    box-shadow 0.18s,
+    background 0.18s;
+}
+.ad-input-base:hover:not([data-disabled]) {
+  border-color: rgb(from var(--ad-secondary) r g b / 0.42);
+}
+.ad-input-base:focus-within {
+  border-color: var(--ad-input-accent);
+  box-shadow:
+    0 0 0 0.1875rem rgb(from var(--ad-primary) r g b / 0.14),
+    0 0 1rem rgb(from var(--ad-primary) r g b / 0.15),
+    inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.13);
+}
+/* Fluent-style accent line that grows from the centre on focus. */
+.ad-input-base::after {
+  content: "";
+  position: absolute;
+  inset: auto 0.5rem -0.0625rem;
+  height: 0.125rem;
+  border-radius: 999rem;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ad-input-accent),
+    transparent
+  );
+  box-shadow: 0 0 0.5rem var(--ad-red);
+  transform: scaleX(0);
+  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
+  pointer-events: none;
+}
+.ad-input-base:focus-within::after {
+  transform: scaleX(1);
+}
+.ad-input-base[data-invalid] {
+  --ad-input-accent: var(--ad-secondary);
+  border-color: rgb(from var(--ad-primary) r g b / 0.61);
+}
+.ad-input-base[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.ad-input-base[data-readonly] {
+  border-style: dashed;
+  border-color: rgb(from var(--ad-secondary) r g b / 0.4);
+  background: var(--ad-neutral-900);
+  box-shadow: none;
+}
+
+/* Variants. */
+.ad-input-base[data-ad-variant="filled"] {
+  border-color: transparent;
+  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.4);
+  border-end-start-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  background: linear-gradient(180deg, var(--ad-neutral-800), var(--ad-neutral-850));
+  box-shadow: inset 0 0.0625rem 0 #ffffff10;
+}
+.ad-input-base[data-ad-variant="filled"]:hover:not([data-disabled]) {
+  background: linear-gradient(180deg, var(--ad-primary-800), var(--ad-neutral-800));
+  border-color: transparent;
+  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.66);
+}
+.ad-input-base[data-ad-variant="underlined"] {
+  padding-inline: 0.125rem;
+  border-color: transparent;
+  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.42);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.ad-input-base[data-ad-variant="underlined"]:hover:not([data-disabled]) {
+  border-color: transparent;
+  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.77);
+}
+.ad-input-base:is(
+    [data-ad-variant="filled"],
+    [data-ad-variant="underlined"]
+  ):focus-within {
+  border-color: transparent;
+  border-bottom-color: var(--ad-input-accent);
+  box-shadow: none;
+}
+.ad-input-base[data-ad-variant="underlined"]::after {
+  inset-inline: 0;
+}
+
+/* Content. */
+.ad-input-base[data-multiline] {
+  align-items: flex-start;
+  padding-block: calc(var(--ad-size-pad-x) * 0.75);
+}
+.ad-input-base-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  align-self: stretch;
+}
+.ad-input-base input,
+.ad-input-base textarea,
+.ad-input-base button.ad-input-control {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  min-height: calc(var(--ad-size-h) - 0.125rem);
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.ad-input-base input::placeholder,
+.ad-input-base textarea::placeholder {
+  color: var(--ad-neutral-500);
+  opacity: 1;
+}
+.ad-input-base textarea {
+  min-height: 4lh;
+  resize: vertical;
+  line-height: 1.5;
+}
+.ad-input-base input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.ad-input-base input::-webkit-inner-spin-button,
+.ad-input-base input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.ad-input-base button.ad-input-control {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.ad-input-base button.ad-input-control:disabled {
+  cursor: not-allowed;
+}
+
+/* Adornments: icons follow the field size, buttons inside a field are flat. */
+.ad-input-adornment {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  flex: none;
+  color: var(--ad-muted);
+}
+.ad-input-base[data-multiline] .ad-input-adornment {
+  min-height: calc(var(--ad-size-h) - 0.125rem - var(--ad-size-pad-x) * 1.5);
+}
+.ad-input-adornment > .ad-icon,
+.ad-input-adornment .ad-icon-button > .ad-icon {
+  --ad-icon-size: var(--ad-input-icon);
+  width: var(--ad-icon-size);
+  height: var(--ad-icon-size);
+}
+.ad-input-base:focus-within .ad-input-adornment[data-position="start"] {
+  color: var(--ad-input-accent);
+}
+.ad-input-adornment .ad-icon-button {
+  --ad-size-h: calc(var(--ad-input-icon) + 0.5rem);
+  width: var(--ad-size-h);
+  min-width: var(--ad-size-h);
+  height: var(--ad-size-h);
+  border: 0;
+  border-radius: 999rem;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ad-muted);
+  animation: none;
+  transform: none;
+  filter: none;
+}
+.ad-input-adornment .ad-icon-button::before,
+.ad-input-adornment .ad-icon-button::after {
+  display: none;
+}
+.ad-input-adornment .ad-icon-button > .ad-icon {
+  filter: none;
+}
 .ad-input-adornment .ad-icon-button:hover:not(:disabled) {
   background: rgb(from var(--ad-primary) r g b / 0.08);
   color: var(--ad-text);
-  transform: none;
-  box-shadow: none;
-}
+  transform: none;
+  box-shadow: none;
+}
 .ad-input-adornment .ad-icon-button:active:not(:disabled) {
   background: rgb(from var(--ad-primary) r g b / 0.14);
-  transform: scale(0.94);
-}
-.ad-input-adornment .ad-icon-button:disabled {
-  opacity: 0.35;
-  filter: none;
-}
-.ad-input-adornment .ad-icon-button:focus-visible {
-  outline: 0.125rem solid var(--ad-input-accent);
-  outline-offset: 0;
-}
-/* The box shows focus for the whole field, so the inner control draws no ring of its own. */
-.ad-input-base :is(input, textarea, button.ad-input-control):focus-visible {
-  outline: 0;
-}
-/* A field that turns invalid gives one short shake. */
-.ad-input-base[data-invalid] {
-  animation: ad-field-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
-}
-@keyframes ad-field-shake {
-  20%,
-  60% {
-    transform: translateX(-0.25rem);
-  }
-  40%,
-  80% {
-    transform: translateX(0.25rem);
-  }
-}
-/* Focus lights the label and slides the placeholder aside. */
-.ad-field-label {
-  transition:
-    color 0.25s,
-    text-shadow 0.25s;
-}
-.ad-field:focus-within .ad-field-label {
-  color: var(--ad-pink);
-  text-shadow: 0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4);
-}
-.ad-input-base input::placeholder,
-.ad-input-base textarea::placeholder {
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
-}
-.ad-input-base:focus-within input::placeholder,
-.ad-input-base:focus-within textarea::placeholder {
-  opacity: 0.45;
-  transform: translateX(0.35rem);
-}
-.ad-input-adornment[data-position="start"] > .ad-icon {
-  transition:
-    transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1),
-    color 0.25s;
-}
-.ad-input-base:focus-within
-  .ad-input-adornment[data-position="start"]
-  > .ad-icon {
-  transform: scale(1.12);
-}
-
-/* Floating label (labelPlacement="floating"): rests inside the box like a placeholder,
-   then shrinks and rises to the top edge on focus or once there is a value. */
-.ad-input-base-content {
-  position: relative;
-}
-.ad-input-base[data-floating] {
-  --ad-float-h: calc(var(--ad-size-h) + 0.75rem);
-  min-height: var(--ad-float-h);
-}
-.ad-input-label {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--ad-neutral-400);
-  font-size: var(--ad-size-font);
-  transform-origin: left center;
-  translate: 0 -50%;
-  pointer-events: none;
-  transition:
-    top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
-    translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
-    scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
-    color 0.25s,
-    text-shadow 0.25s,
-    letter-spacing 0.3s;
-}
-.ad-input-base[data-floating]:is(:focus-within, [data-filled]) .ad-input-label {
-  top: 0.45rem;
-  translate: 0 0;
-  scale: 0.76;
-  letter-spacing: 0.03em;
-}
-.ad-input-base[data-floating]:focus-within .ad-input-label {
-  color: var(--ad-pink);
-  text-shadow: 0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4);
-}
-.ad-input-base[data-floating][data-filled]:not(:focus-within) .ad-input-label {
-  color: var(--ad-neutral-300);
-}
-/* The text sits under the raised label. */
-.ad-input-base[data-floating] :is(input, button.ad-input-control) {
-  min-height: calc(var(--ad-float-h) - 0.125rem);
-  padding-top: 1rem;
-}
-/* While the label rests in its place the placeholder stays hidden, as in Material. */
-.ad-input-base[data-floating]:not(:focus-within):not([data-filled])
-  :is(input, textarea)::placeholder {
-  opacity: 0;
-}
-.ad-input-base[data-floating]:not(:focus-within):not([data-filled])
-  .ad-select-control {
-  color: transparent;
-}
-/* Multiline: the label rests on the first line and rises above it. */
-.ad-input-base[data-floating][data-multiline] .ad-input-label {
-  top: calc(1rem + 0.75em);
-}
-.ad-input-base[data-floating][data-multiline]:is(:focus-within, [data-filled])
-  .ad-input-label {
-  top: -0.05rem;
-  translate: 0 0;
-}
-.ad-input-base[data-floating][data-multiline] textarea {
-  padding-top: 1rem;
-}
+  transform: scale(0.94);
+}
+.ad-input-adornment .ad-icon-button:disabled {
+  opacity: 0.35;
+  filter: none;
+}
+.ad-input-adornment .ad-icon-button:focus-visible {
+  outline: 0.125rem solid var(--ad-input-accent);
+  outline-offset: 0;
+}
+/* The box shows focus for the whole field, so the inner control draws no ring of its own. */
+.ad-input-base :is(input, textarea, button.ad-input-control):focus-visible {
+  outline: 0;
+}
+/* A field that turns invalid gives one short shake. */
+.ad-input-base[data-invalid] {
+  animation: ad-field-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+@keyframes ad-field-shake {
+  20%,
+  60% {
+    transform: translateX(-0.25rem);
+  }
+  40%,
+  80% {
+    transform: translateX(0.25rem);
+  }
+}
+/* Focus lights the label and slides the placeholder aside. */
+.ad-field-label {
+  transition:
+    color 0.25s,
+    text-shadow 0.25s;
+}
+.ad-field:focus-within .ad-field-label {
+  color: var(--ad-pink);
+  text-shadow: 0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4);
+}
+.ad-input-base input::placeholder,
+.ad-input-base textarea::placeholder {
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
+}
+.ad-input-base:focus-within input::placeholder,
+.ad-input-base:focus-within textarea::placeholder {
+  opacity: 0.45;
+  transform: translateX(0.35rem);
+}
+.ad-input-adornment[data-position="start"] > .ad-icon {
+  transition:
+    transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1),
+    color 0.25s;
+}
+.ad-input-base:focus-within
+  .ad-input-adornment[data-position="start"]
+  > .ad-icon {
+  transform: scale(1.12);
+}
+
+/* Floating label (labelPlacement="floating"): rests inside the box like a placeholder,
+   then shrinks and rises to the top edge on focus or once there is a value. */
+.ad-input-base-content {
+  position: relative;
+}
+.ad-input-base[data-floating] {
+  --ad-float-h: calc(var(--ad-size-h) + 0.75rem);
+  min-height: var(--ad-float-h);
+}
+.ad-input-label {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ad-neutral-400);
+  font-size: var(--ad-size-font);
+  transform-origin: left center;
+  translate: 0 -50%;
+  pointer-events: none;
+  transition:
+    top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    color 0.25s,
+    text-shadow 0.25s,
+    letter-spacing 0.3s;
+}
+.ad-input-base[data-floating]:is(:focus-within, [data-filled]) .ad-input-label {
+  top: 0.45rem;
+  translate: 0 0;
+  scale: 0.76;
+  letter-spacing: 0.03em;
+}
+.ad-input-base[data-floating]:focus-within .ad-input-label {
+  color: var(--ad-pink);
+  text-shadow: 0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4);
+}
+.ad-input-base[data-floating][data-filled]:not(:focus-within) .ad-input-label {
+  color: var(--ad-neutral-300);
+}
+/* The text sits under the raised label. */
+.ad-input-base[data-floating] :is(input, button.ad-input-control) {
+  min-height: calc(var(--ad-float-h) - 0.125rem);
+  padding-top: 1rem;
+}
+/* While the label rests in its place the placeholder stays hidden, as in Material. */
+.ad-input-base[data-floating]:not(:focus-within):not([data-filled])
+  :is(input, textarea)::placeholder {
+  opacity: 0;
+}
+.ad-input-base[data-floating]:not(:focus-within):not([data-filled])
+  .ad-select-control {
+  color: transparent;
+}
+/* Multiline: the label rests on the first line and rises above it. */
+.ad-input-base[data-floating][data-multiline] .ad-input-label {
+  top: calc(1rem + 0.75em);
+}
+.ad-input-base[data-floating][data-multiline]:is(:focus-within, [data-filled])
+  .ad-input-label {
+  top: -0.05rem;
+  translate: 0 0;
+}
+.ad-input-base[data-floating][data-multiline] textarea {
+  padding-top: 1rem;
+}