@expressivecss/expressive 0.15.0 → 0.16.0

package/src/sass/components/forms/_input-fields.scss

@@ -3,15 +3,14 @@
 // Text fields.
 //
 // Anatomy is the HTML. .field is the container. The <label> after the
-// control is the floating label. A leading <i> (or .prefix) is the
-// leading icon; .suffix (or a second / trailing <i>) is the trailing
-// icon. Icons come before the control in the documented markup, so
+// control is the floating label. A .prefix icon is the leading icon and a
+// .suffix icon the trailing one. Icons come before the control in the documented markup, so
 // trailing cannot be selected with :last-child — that left .suffix
 // in flow above the well. <small> is supporting text. .outlined is
 // the outlined variant; the default is filled.
 //
 // Tokens follow https://m3.material.io/components/text-fields/specs
-//   filled     surface-variant well, 1rem corners, 1dp/2dp bottom indicator
+//   filled     surface-container-highest well, 1rem corners, 1dp/2dp bottom indicator
 //   outlined   1dp/2dp outline, 1rem corners
 //   height     56dp
 //   label      body-large rest, body-small floated
@@ -25,20 +24,21 @@
   color: var(--md-sys-color-on-surface-variant);
 }
 
-$_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=month]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.expressive-textarea";
-
-#{$_text-inputs} {
+// :is() takes its most specific argument, (0,1,0) for each one here, so every
+// input keeps the (0,2,1) a per-type :not(.browser-default) list gave it.
+input:is(:not([type]), [type=text], [type=password], [type=email], [type=url], [type=time], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=tel], [type=number], [type=search]):not(.browser-default),
+textarea.expressive-textarea {
   outline: none;
   color: var(--md-sys-color-on-surface);
   width: 100%;
-  height: 56px;
+  height: rem(56px);
   background-color: transparent;
   @include typescale("body-large");
 }
 
 // A .field is full of spans that are not the floating label: supporting text,
-// the character counter, the file path, the select caret, and - since field
-// icons stopped being <i> - the leading and trailing icons. Every rule that
+// the character counter, the file path, the select caret, and the leading and
+// trailing icons. Every rule that
 // styles "the label, or the span standing in for it" has to exclude all of
 // them, and there are five such rules. They were five hand-copied lists that
 // had already drifted (.file-path was in two of them), and adding .prefix /
@@ -47,31 +47,55 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
 // pointer-events: none.
 $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix, .suffix, .chip";
 
+// The label, or the span standing in for it, floats while the control is
+// focused or holds a value. Nested under the control, so & is the control.
+$_floated: '&:focus + label, &:not([placeholder=" "]) + label, &:not(:placeholder-shown) + label, &:focus + span:not(#{$_not-label}), &:not([placeholder=" "]) + span:not(#{$_not-label}), &:not(:placeholder-shown) + span:not(#{$_not-label})';
+
 .field {
   --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-container-highest);
   --md-comp-filled-text-field-container-shape: 1rem;
   --md-comp-filled-text-field-caret-color: var(--md-sys-color-primary);
   --input-color: var(--md-comp-filled-text-field-caret-color);
 
+  // Start and end clearance of the field's own input, label and icons, in
+  // physical terms keyed to the field's dir through :dir(). An input can carry
+  // its own dir ("auto" for mixed-language text, "ltr" for an email address on
+  // an RTL page), and logical properties would follow that, or a CSS-only
+  // `direction`, instead. A page that sets only `direction` renders as LTR.
+  --_field-start: 16px;
+  --_field-end: 16px;
+  // Clearance for a 24dp icon at a 12dp inset with 16dp after it: 52px at
+  // the default size. The icon is rem, so the clearance grows with it.
+  --_field-icon-clearance: calc(28px + #{rem(24px)});
+  // A small icon button, 8dp either side of its rem icon: 40px by default.
+  --_field-icon-button: calc(16px + #{rem(24px)});
+  --_field-left: var(--_field-start);
+  --_field-right: var(--_field-end);
+
+  &:dir(rtl) {
+    --_field-left: var(--_field-end);
+    --_field-right: var(--_field-start);
+  }
+
   position: relative;
   clear: both;
 
   // Checkboxes / radios inside a field (multi-select menu) are not text
   // fields — do not give them the 56dp well.
-  input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"]),
+  input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"], [type="color"]),
   textarea {
     box-sizing: border-box;
-    padding: 20px 16px 8px;
+    padding: rem(20px) 16px rem(8px);
     border: none;
     border-radius: var(--md-comp-filled-text-field-container-shape);
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
     background-color: var(--md-comp-filled-text-field-container-color);
     caret-color: var(--input-color);
 
-    &:focus:not([readonly]) {
+    &:focus {
       border-bottom-width: 2px;
       border-bottom-color: var(--input-color);
-      padding-bottom: 7px;
+      padding-bottom: calc(#{rem(8px)} - 1px);
     }
 
     &:disabled,
@@ -81,19 +105,14 @@ $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix,
       background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
     }
 
-    &:focus:not([readonly]) + label,
-    &:focus:not([readonly]) + span:not(#{$_not-label}) {
+    &:focus + label,
+    &:focus + span:not(#{$_not-label}) {
       color: var(--input-color);
     }
 
-    &:focus:not([readonly]) + label,
-    &:not([placeholder=" "]) + label,
-    &:not(:placeholder-shown) + label,
-    &:focus:not([readonly]) + span:not(#{$_not-label}),
-    &:not([placeholder=" "]) + span:not(#{$_not-label}),
-    &:not(:placeholder-shown) + span:not(#{$_not-label}) {
+    #{$_floated} {
       transform: scale(calc(12 / 16));
-      top: 8px;
+      top: rem(8px);
     }
 
     &:disabled + label,
@@ -133,6 +152,15 @@ $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix,
     user-select: none;
   }
 
+  // After the base rule, which ties it on specificity. Only the field's own
+  // control: an input nested deeper keeps 16px. Longhands, so a bad custom
+  // property costs one side rather than all four.
+  > :is(input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"], [type="color"]), textarea) {
+    padding-left: var(--_field-left);
+    padding-right: var(--_field-right);
+  }
+
+
   // :not(.button, .icon-button) - the file input's trigger is a <label> and is
   // a button, not this field's floating label.
   > label:not(.button, .icon-button),
@@ -140,13 +168,24 @@ $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix,
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
     position: absolute;
-    left: 16px;
-    top: 16px;
+    left: var(--_field-start);
+    top: rem(16px);
     cursor: text;
     transform-origin: top left;
     pointer-events: none;
     @include typescale("body-large");
-    transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out;
+    // left and right: the logical inset moves on `right` in a right-to-left field.
+    transition: left var(--md-sys-motion-duration-short4) ease-out, right var(--md-sys-motion-duration-short4) ease-out, top var(--md-sys-motion-duration-short4) ease-out, transform var(--md-sys-motion-duration-short4) ease-out, color var(--md-sys-motion-duration-short4) ease-out;
+
+    &:dir(rtl) {
+      left: auto;
+      right: var(--_field-start);
+      transform-origin: top right;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   > small,
@@ -159,114 +198,134 @@ $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix,
   }
 
   > .character-counter {
-    float: right;
     margin-top: 4px;
     padding: 0 16px;
     color: var(--md-sys-color-on-surface-variant);
     @include typescale("body-small");
   }
 
-  // Shared icon box. Position is set on the leading / trailing rules;
-  // a lone <i> matches several of the :is() items and must not pick
-  // a side here.
-  //
-  // The `i` rules are the legacy path and still work. They cannot be widened
-  // to the canonical <span class="material-symbols"> form, because they lean
-  // on :first-of-type / :last-of-type - which count elements of the same
-  // *type*, and a field is full of other spans (.supporting-text, .caret,
-  // .character-counter, .file-path). So the documented markup names the side
-  // explicitly with .prefix / .suffix, and those rules key on nothing else.
-  > i:is(.prefix, .suffix, :first-of-type, :last-of-type, :last-child),
+  // Shared icon box. Position is set on the leading / trailing rules. The
+  // side is named with .prefix / .suffix rather than taken from position:
+  // :first-of-type counts elements of the same *type*, and a field is full
+  // of other spans (.supporting-text, .caret, .character-counter, .file-path).
   > :is(.prefix, .suffix):not(.icon-button) {
     position: absolute;
-    top: 16px;
+    top: rem(16px);
     display: flex;
     align-items: center;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+    font-size: rem(24px);
+    width: rem(24px);
+    height: rem(24px);
+    line-height: rem(24px);
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
   }
 
-  > i:first-of-type:not(.suffix):not(:last-child),
-  > i.prefix,
+  // Physical sides, swapped by :dir(). The icon font sets direction: ltr on
+  // the icon itself, and Chromium maps an icon's own inset-inline-* through
+  // that, so a logical inset would stay on the left in a right-to-left page.
   > .prefix {
     left: 12px;
     pointer-events: none;
+
+    &:dir(rtl) {
+      left: auto;
+      right: 12px;
+    }
   }
 
-  > i.suffix,
-  > i:last-of-type:not(:first-of-type),
-  > i:last-child:not(:first-child):not(.prefix),
   > .suffix:not(.icon-button) {
     right: 12px;
     // Both icons inherited this from the floating-label rule until they were
     // excluded from it. .prefix restates it below; .suffix has to as well, or
     // the trailing icon swallows the click that should focus the input.
     pointer-events: none;
+
+    &:dir(rtl) {
+      right: auto;
+      left: 12px;
+    }
   }
 
   // A trailing icon button is a control, so it keeps its 40dp target and its
   // clicks. It centres on the same point as a 24dp trailing icon.
   > .icon-button.suffix {
     position: absolute;
-    top: 8px;
+    top: rem(8px);
     right: 4px;
     z-index: 1;
-  }
 
-  &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix, > .prefix) {
-    > :is(input, textarea) {
-      padding-left: 52px;
+    &:dir(rtl) {
+      right: auto;
+      left: 4px;
     }
+  }
+
+  // Number stepper: data-step="down" sits one button in from the end, before
+  // data-step="up". The Forms behavior does the stepping.
+  > .icon-button.suffix[data-step="down"] {
+    right: calc(8px + var(--_field-icon-button));
 
-    // The exclusion list is what stops this indenting things that are not the
-    // floating label. .prefix / .suffix joined it when field icons stopped
-    // being <i> and became spans - without them the leading icon was pushed
-    // to 52px, i.e. indented past its own padding.
-    > :is(
-      label,
-      span:not(#{$_not-label})
-    ) {
-      left: 52px;
+    &:dir(rtl) {
+      right: auto;
+      left: calc(8px + var(--_field-icon-button));
     }
   }
 
-  &:has(> i.suffix, > i:last-of-type:not(:first-of-type), > i:last-child:not(:first-child):not(.prefix), > .suffix) {
-    > :is(input, textarea) {
-      padding-right: 52px;
+  // The browser's spin buttons go when the field draws its own.
+  &:has(> [data-step]) > input[type="number"] {
+    appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      appearance: none;
+      margin: 0;
     }
   }
 
+  // The label reads --_field-start too, so it indents with the input.
+  &:has(> .prefix) {
+    --_field-start: var(--_field-icon-clearance);
+  }
+
+  &:has(> .suffix) {
+    --_field-end: var(--_field-icon-clearance);
+  }
+
+  // Two buttons, 4dp from the end and 4dp apart, then 8dp before the text.
+  &:has(> [data-step]) {
+    --_field-end: calc(16px + 2 * var(--_field-icon-button));
+  }
+
   &.outlined {
     > input,
     > textarea {
-      padding-top: 8px;
-      padding-bottom: 8px;
+      padding-top: rem(8px);
+      padding-bottom: rem(8px);
       background-color: transparent;
       border: 1px solid var(--md-sys-color-outline);
       border-radius: var(--md-comp-filled-text-field-container-shape);
 
-      &:focus:not([readonly]) {
+      &:focus {
         border-width: 2px;
         border-color: var(--input-color);
-        padding-top: 7px;
-        padding-bottom: 7px;
+        padding-top: calc(#{rem(8px)} - 1px);
+        padding-bottom: calc(#{rem(8px)} - 1px);
       }
 
-      &:focus:not([readonly]) + label,
-      &:not([placeholder=" "]) + label,
-      &:not(:placeholder-shown) + label,
-      &:focus:not([readonly]) + span:not(#{$_not-label}),
-      &:not([placeholder=" "]) + span:not(#{$_not-label}),
-      &:not(:placeholder-shown) + span:not(#{$_not-label}) {
-        top: -8px;
+      #{$_floated} {
+        top: rem(-8px);
         left: 16px;
         margin-left: -4px;
         padding: 0 4px;
-        background-color: var(--md-sys-color-background);
+        background-color: var(--md-sys-color-surface);
+
+        &:dir(rtl) {
+          left: auto;
+          right: 16px;
+          margin-left: 0;
+          margin-right: -4px;
+        }
       }
 
       &:disabled,
@@ -281,6 +340,16 @@ $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix,
         box-shadow: none;
       }
     }
+
+    // A textarea's text starts at the top instead of centering, so pad its
+    // first line to the input's 28px midline: border + padding + half of 24px.
+    > textarea.expressive-textarea {
+      padding-block: calc(#{rem(16px)} - 1px);
+
+      &:focus {
+        padding-block: calc(#{rem(16px)} - 2px);
+      }
+    }
   }
 }
 
@@ -294,12 +363,14 @@ textarea {
   background-color: transparent;
 
   &.expressive-textarea {
-    padding-top: 24px !important;
-    padding-bottom: 8px !important;
-    line-height: 24px;
+    // No !important: source order beats `.field textarea`, and the outlined
+    // and :focus rules outrank this one, as they must.
+    padding-top: rem(24px);
+    padding-bottom: rem(8px);
+    line-height: rem(24px);
     overflow-y: hidden;
     resize: none;
-    min-height: 56px;
+    min-height: rem(56px);
     box-sizing: border-box;
   }
 }
@@ -317,6 +388,45 @@ textarea {
       margin: 5px 15px;
     }
   }
+
+  // Not an option: role="none" keeps Menu's hover layer off it. The text sits
+  // in the <li> itself, since Menu gives a bare span a pointer cursor.
+  > li.autocomplete-no-results {
+    display: flex;
+    align-items: center;
+    min-height: var(--md-comp-menu-item-container-height);
+    padding-inline: var(--md-comp-menu-item-leading-space)
+      var(--md-comp-menu-item-trailing-space);
+    color: var(--md-comp-menu-supporting-text-color);
+    cursor: default;
+    @include typescale("label-large");
+  }
+
+  // Menu lets a press on a disabled row fall through to the list, which takes
+  // focus from the field. The row takes the press so Autocomplete can cancel it.
+  > li[role="option"][aria-disabled="true"] {
+    pointer-events: auto;
+    cursor: default;
+  }
+
+  // FormSelect's listbox rule makes a group's wrapper flex, which would
+  // shrink the group to its widest row.
+  > li[role="none"] > ul[role="group"] {
+    flex: 1 1 auto;
+  }
+
+  // Menu's .label heading reaches direct rows only. The heading takes the
+  // press, as a disabled row does, so Autocomplete can cancel it.
+  > li > ul[role="group"] > li.autocomplete-group-label {
+    display: flex;
+    align-items: center;
+    min-height: rem(32px);
+    padding: 0 8px;
+    pointer-events: auto;
+    cursor: default;
+    color: var(--md-comp-menu-supporting-text-color);
+    @include typescale("label-large");
+  }
 }
 
 // Datepicker paints its formatted date over the native value with ::after.
@@ -328,17 +438,17 @@ textarea {
   // icons, which come before it. Raise them inside the field's own stacking
   // context, so they do not also rise over the docked search view or a
   // sticky header. A docked calendar in the field has to escape it.
-  .field:has(> :is(.datepicker-date-input, .date-picker-date-input)) {
+  .field:has(> .datepicker-date-input) {
     &:not(:has(> .display-docked)) {
       isolation: isolate;
     }
 
-    > :is(i, .prefix, .suffix) {
+    > :is(.prefix, .suffix) {
       z-index: 1;
     }
   }
 
-  :is(.datepicker-date-input, .date-picker-date-input) {
+  .datepicker-date-input {
     position: relative;
     text-indent: -9999px;
 
@@ -351,11 +461,14 @@ textarea {
       text-indent: 0;
     }
 
-    &:focus-visible {
+    // A focused date input edits its native fields, so show them. WebKit 27
+    // stopped matching :focus-visible on a date input, even after Tab, and
+    // Chromium already matches it on every focus, mouse included.
+    &:focus {
       text-indent: 0;
     }
 
-    &:focus-visible:after {
+    &:focus:after {
       text-indent: -9999px;
     }
   }
@@ -397,8 +510,8 @@ textarea {
 // above, which would otherwise win on width, height and letter-spacing.
 input.otp:not(.browser-default) {
   --md-comp-otp-length: 6;
-  --md-comp-otp-cell-width: 48px;
-  --md-comp-otp-cell-height: 56px;
+  --md-comp-otp-cell-width: #{rem(48px)};
+  --md-comp-otp-cell-height: #{rem(56px)};
   --md-comp-otp-gap: 8px;
   --md-comp-otp-cell-color: var(--md-sys-color-surface-container-highest);
   --md-comp-otp-indicator-color: var(--md-sys-color-on-surface-variant);
@@ -425,7 +538,7 @@ input.otp:not(.browser-default) {
   // Digits read left to right in every script.
   direction: ltr;
   font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 24px;
+  font-size: rem(24px);
   font-variant-numeric: tabular-nums;
   letter-spacing: calc(var(--md-comp-otp-pitch) - 1ch);
   color: var(--md-sys-color-on-surface);
@@ -482,3 +595,54 @@ input.otp:not(.browser-default) {
     }
   }
 }
+
+// Color input. The native picker stays; the control is drawn as a 40px round
+// swatch of the chosen color with an outline, a 48px target and the shared
+// focus ring. Each engine's swatch is a private pseudo-element in its own rule.
+input[type="color"] {
+  --md-comp-color-input-size: #{rem(40px)};
+  --md-comp-color-input-outline-color: var(--md-sys-color-outline);
+
+  box-sizing: content-box;
+  inline-size: var(--md-comp-color-input-size);
+  block-size: var(--md-comp-color-input-size);
+  margin: 0;
+  padding: 4px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  vertical-align: middle;
+  appearance: none;
+  @include focus-visible;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: 1px solid var(--md-comp-color-input-outline-color);
+    border-radius: 50%;
+  }
+
+  &::-moz-color-swatch {
+    border: 1px solid var(--md-comp-color-input-outline-color);
+    border-radius: 50%;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.38;
+  }
+}
+
+// CharacterCounter appends the counter to the input's parent, which need not
+// be a .field, so this is not nested. Physical and swapped by :dir() like the
+// field's icons, so a page that sets only CSS `direction` keeps it on the right.
+.character-counter {
+  float: right;
+
+  &:dir(rtl) {
+    float: left;
+  }
+}