From 5301945bfa76ef8ea1f72a702bc819b57b30067a Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Thu, 16 Jan 2025 14:02:24 -0500
Subject: [PATCH] Filled inputs

---
 docs/docs/themes/matter.md             | 10 ++++++++++
 src/styles/themes/matter/overrides.css | 12 +++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/docs/docs/themes/matter.md b/docs/docs/themes/matter.md
index afc6528d1..e0d48a698 100644
--- a/docs/docs/themes/matter.md
+++ b/docs/docs/themes/matter.md
@@ -5,3 +5,13 @@ isPro: true
 tags: pro
 defaultPalette: mild
 ---
+
+## Floating labels
+
+This theme implements "floating labels" for `wa-input`, `wa-textarea`, `wa-select` (set the page theme to "{{ title }}" from the top right to preview the following examples).
+
+```html {.example}
+<wa-input label="What is your name?"></wa-input>
+<br>
+<wa-input label="What is your name?" appearance="filled"></wa-input>
+```
diff --git a/src/styles/themes/matter/overrides.css b/src/styles/themes/matter/overrides.css
index deaf3d5a7..b8eabf301 100644
--- a/src/styles/themes/matter/overrides.css
+++ b/src/styles/themes/matter/overrides.css
@@ -114,16 +114,18 @@
     }
 
     /* Different positioning and appearance for filled */
-    &:is([appearance~='filled'], .wa-filled) {
-      &::part(input) {
-        padding-block: calc(var(--wa-space) * 1.5) calc(var(--wa-space) * 0.5);
+    &:where([appearance~='filled'], .wa-filled)[label]:not([placeholder]) {
+      &::part(base) {
+        /* We want to move this down a bit to make space for the floating label */
+        translate: 0 0.3em;
       }
 
       &::part(label) {
-        background-color: var(--background-color);
+        /* In filled inputs, the floating label stays within the input */
+        background-color: transparent;
       }
 
-      &:focus::part(label) {
+      &:not(:state(blank):not(:focus, [placeholder]))::part(label) {
         top: 0;
       }
     }