@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/forms/_radio-buttons.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A <label> wrapping <input type="radio"> is the
 // control. The label text is a sibling of the input — no extra class, no
-// required <span>. input + span still works (legacy).
+// required <span>.
 //
 // Tokens follow https://m3.material.io/components/radio-button/specs
 //   icon           20dp ring, 2dp stroke, on-surface-variant
@@ -16,20 +16,16 @@
 //
 // .with-gap is a no-op: the selected state is always the ring + inner.
 
+@mixin _ring($color, $state) {
+  @include state-layer-ring(var(--md-comp-radio-button-state-layer-size), var(--md-comp-radio-button-icon-size), $color, $state);
+}
+
 label:has(> [type="radio"]),
 .radio {
   --md-comp-radio-button-icon-size: 20px;
   --md-comp-radio-button-state-layer-size: 40px;
 
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 48px;
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
-  color: var(--md-sys-color-on-surface);
-  @include typescale("body-large");
+  @include selection-control-label;
 }
 
 // A row of radios is a group of controls, not navigation - see rule 4 in
@@ -47,9 +43,7 @@ label:has(> [type="radio"]),
   display: inline-flex;
 }
 
-// Paint the radio on the input. A following span (legacy) hides this
-// control and draws the same anatomy. Nested :has() is invalid, so
-// do not write :has(:not(:has(+ span))).
+// Paint the radio on the input.
 label:has(> [type="radio"]) > [type="radio"],
 .radio > [type="radio"] {
   appearance: none;
@@ -63,7 +57,7 @@ label:has(> [type="radio"]) > [type="radio"],
   border-radius: 50%;
   background-color: transparent;
   cursor: pointer;
-  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
+  transition: border-color var(--md-sys-motion-duration-short4) ease, background-color var(--md-sys-motion-duration-short4) ease, box-shadow var(--md-sys-motion-duration-short4) ease;
 
   &:checked {
     border-color: var(--md-sys-color-primary);
@@ -75,31 +69,15 @@ label:has(> [type="radio"]) > [type="radio"],
   }
 
   &:hover {
-    @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-on-surface),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-on-surface), "hover");
   }
 
   &:checked:hover {
-    @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-primary),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-primary), "hover");
   }
 
-  &:focus-visible,
-  &.tabbed:focus {
-    @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-primary),
-    "focus"
-  );
+  &:focus-visible {
+    @include _ring(var(--md-sys-color-primary), "focus");
     outline: none;
   }
 
@@ -117,17 +95,6 @@ label:has(> [type="radio"]) > [type="radio"],
       transparent 5.5px
     );
   }
-
-  &:has(+ span) {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    border: 0;
-    background: none;
-    box-shadow: none;
-    pointer-events: none;
-  }
 }
 
 label:has(> [type="radio"]:disabled),
@@ -136,87 +103,33 @@ label:has(> [type="radio"]:disabled),
   cursor: default;
 }
 
-// Legacy: input + span draws the same 20/10 anatomy.
-[type="radio"] + span {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  min-height: 48px;
-  padding-left: 32px;
-  cursor: pointer;
-  user-select: none;
-}
-
-[type="radio"] + span::before,
-[type="radio"] + span::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-  margin-top: -10px;
-  border-radius: 50%;
-}
-
-[type="radio"] + span::before {
-  border: 2px solid var(--md-sys-color-on-surface-variant);
-  transition: border-color .2s ease, box-shadow .2s ease;
-}
-
-[type="radio"] + span::after {
-  background-color: var(--md-sys-color-primary);
-  transform: scale(0);
-  transition: transform .2s ease;
-}
-
-[type="radio"]:checked + span::before {
-  border-color: var(--md-sys-color-primary);
-}
-
-[type="radio"]:checked + span::after {
-  transform: scale(0.5);
-}
-
-[type="radio"]:hover + span::before {
-  @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-on-surface),
-    "hover"
-  );
-}
-
-[type="radio"]:checked:hover + span::before {
-  @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-primary),
-    "hover"
-  );
-}
-
-[type="radio"]:focus-visible + span::before,
-[type="radio"].tabbed:focus + span::before {
-  @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-primary),
-    "focus"
-  );
-}
-
-[type="radio"]:disabled + span {
-  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-  cursor: default;
-}
-
-[type="radio"]:disabled + span::before {
-  border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-  box-shadow: none;
-}
+// Forced colors drop the gradient dot and the box-shadow focus ring.
+@media (forced-colors: active) {
+  label:has(> [type="radio"]) > [type="radio"],
+  .radio > [type="radio"] {
+    &:focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+
+    &:checked {
+      forced-color-adjust: none;
+      border-color: Highlight;
+      background-image: radial-gradient(circle at center, Highlight 0 5px, transparent 5.5px);
+    }
+
+    &:disabled {
+      border-color: GrayText;
+    }
+
+    &:disabled:checked {
+      background-image: radial-gradient(circle at center, GrayText 0 5px, transparent 5.5px);
+    }
+  }
 
-[type="radio"]:disabled:checked + span::after {
-  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  // Forced colors repaint the dimmed label as CanvasText, like an enabled one.
+  label:has(> [type="radio"]:disabled),
+  .radio:has([type="radio"]:disabled) {
+    color: GrayText;
+  }
 }

package/src/sass/components/forms/_rating.scss

@@ -31,37 +31,7 @@ $_rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
 }
 
 fieldset.rating {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  border: 0;
-
-  > legend {
-    margin-block-end: 4px;
-    padding: 0;
-    color: var(--md-sys-color-on-surface-variant);
-    @include typescale("body-medium");
-  }
-
-  > label {
-    display: inline-flex;
-    gap: 0;
-    min-height: 0;
-    padding: 4px;
-    border-radius: 50%;
-    cursor: pointer;
-
-    &:has(> input:focus-visible) {
-      @include focus-ring;
-    }
-
-    &:has(> input:disabled) {
-      opacity: 0.38;
-      cursor: default;
-    }
-  }
+  @include choice-fieldset(50%, "input");
 
   > label > [type="radio"] {
     flex: none;
@@ -74,7 +44,7 @@ fieldset.rating {
     box-shadow: none;
     mask: $_rating-star center / 100% no-repeat;
     outline: 0;
-    transition: background-color 0.15s ease-out;
+    transition: background-color var(--md-sys-motion-duration-short3) ease-out;
 
     // The base radio draws its dot in :checked, :hover and the disabled
     // states, some at a higher weight; the star mask would show it.

package/src/sass/components/forms/_select.scss

@@ -15,7 +15,6 @@
 //   selected item  tertiary-container + trailing check
 //   optgroup       on-surface-variant, outline-variant rule
 //
-$_select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
 $_select-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
 
 // Native / no-js / .browser-default: a 56dp field, not a 3rem box.
@@ -26,7 +25,7 @@ select {
 
   box-sizing: border-box;
   width: 100%;
-  height: 56px;
+  height: rem(56px);
   margin: 0;
   padding: 16px 12px;
   border: 1px solid var(--md-sys-color-outline);
@@ -72,30 +71,26 @@ select.browser-default {
   // open list read as one shape.
   --md-comp-filled-select-container-shape: 1rem;
   --md-comp-menu-container-shape: 1rem;
-  --md-comp-filled-select-trailing-icon-size: 24px;
+  --md-comp-filled-select-trailing-icon-size: #{rem(24px)};
   --md-comp-filled-select-trailing-icon-color: var(--md-sys-color-on-surface-variant);
-  --md-comp-menu-item-leading-image-size: 40px;
+  --md-comp-menu-item-leading-image-size: #{rem(40px)};
 
   position: relative;
   border-radius: var(--md-comp-filled-select-container-shape);
 
   > input.menu-trigger {
     border-radius: inherit;
-  }
-
-  > input.menu-trigger {
-    padding-inline-end: 52px;
+    padding-inline-end: calc(28px + #{rem(24px)});
   }
 
   // Trailing expand icon. Empty .caret is the hook; the glyph is a mask.
-  // `left: auto` beats `.field > span { left: 16px }` if that rule ever
-  // matches again — left + width would otherwise ignore inset-inline-end
-  // and pin the chevron over the value.
+  // `inset-inline-start: auto` beats `.field > span { inset-inline-start:
+  // 16px }` if that rule ever matches again — a start inset + width would
+  // otherwise ignore inset-inline-end and pin the chevron over the value.
   .caret {
     position: absolute;
-    inset-block-start: 16px;
+    inset-block-start: rem(16px);
     inset-inline-start: auto;
-    left: auto;
     inset-inline-end: 12px;
     z-index: 1;
     width: var(--md-comp-filled-select-trailing-icon-size);
@@ -103,8 +98,9 @@ select.browser-default {
     margin: 0;
     pointer-events: none;
     background-color: var(--md-comp-filled-select-trailing-icon-color);
-    mask: $_select-chevron center / 24px no-repeat;
-    transition: transform 0.2s ease;
+    mask: $caret-down center / 100% no-repeat;
+    @include forced-colors-fill;
+    transition: transform var(--md-sys-motion-duration-short4) ease;
   }
 
   &:has(> input[aria-expanded="true"]) .caret,
@@ -147,15 +143,15 @@ select.browser-default {
     transform: none;
     margin: 0;
     padding: 8px 16px 0;
-    padding-inline-end: 52px;
+    padding-inline-end: calc(28px + #{rem(24px)});
     overflow-wrap: anywhere;
     pointer-events: auto;
     @include typescale("body-small");
     line-height: normal;
   }
 
-  &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix, > .prefix) > label {
-    padding-left: 52px;
+  &:has(> .prefix) > label {
+    padding-inline-start: calc(28px + #{rem(24px)});
   }
 
   &.disabled > label {
@@ -167,6 +163,8 @@ select.browser-default {
     height: auto;
     min-height: calc(var(--md-sys-typescale-body-large-line-height) + 8px);
     padding-block: 0 7px;
+    // Narrower than its value at large text sizes; the menu shows it whole.
+    text-overflow: ellipsis;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
   }
@@ -202,19 +200,20 @@ menu[role="listbox"] > li:not(.optgroup, .divider) {
 menu[role="listbox"] > li.selected:not(.disabled, .optgroup) {
   background-color: var(--md-comp-menu-item-selected-container-color, var(--md-sys-color-tertiary-container));
   color: var(--md-comp-menu-item-selected-label-text-color, var(--md-sys-color-on-tertiary-container));
-  border-radius: var(--md-comp-menu-item-selected-container-shape, 12px);
+  border-radius: var(--md-comp-menu-item-selected-container-shape, var(--md-sys-shape-corner-medium));
 }
 
 // Single-select: trailing check. Multi-select already has a leading checkbox.
 menu[role="listbox"]:not(.multiple-select-menu) > li.selected:not(.disabled, .optgroup)::after {
   content: "";
   flex: 0 0 20px;
-  width: 20px;
-  height: 20px;
+  width: rem(20px);
+  height: rem(20px);
   margin-inline-start: auto;
   margin-inline-end: 8px;
   background-color: var(--md-comp-menu-item-selected-leading-icon-color, var(--md-sys-color-on-tertiary-container));
-  mask: $_select-check center / 20px no-repeat;
+  mask: $_select-check center / 100% no-repeat;
+  @include forced-colors-fill;
 }
 
 menu[role="listbox"] li img {
@@ -224,7 +223,7 @@ menu[role="listbox"] li img {
   height: var(--md-comp-menu-item-leading-image-size);
   margin: 4px 12px;
   object-fit: cover;
-  border-radius: 4px;
+  border-radius: var(--md-sys-shape-corner-extra-small);
   order: 1;
   margin-inline-start: auto;
 
@@ -252,8 +251,185 @@ menu[role="listbox"] li.optgroup-option {
   padding-inline-start: 1rem;
 }
 
+.select-search-popup {
+  position: absolute;
+  inset: auto;
+  margin: 0;
+  padding: 8px;
+  max-height: min(24rem, calc(100dvh - 2rem));
+  overflow: hidden;
+  border-radius: var(--md-sys-shape-corner-large);
+  background: var(--md-sys-color-surface-container-low);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("2");
+
+  &:popover-open { display: flex; flex-direction: column; }
+
+  > input {
+    flex: none;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: rem(48px);
+    padding: 8px;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: var(--md-sys-shape-corner-small);
+    @include typescale("body-large");
+
+    &:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: -2px;
+    }
+  }
+
+  > [role="status"] {
+    flex: none;
+    overflow-wrap: anywhere;
+    @include typescale("body-medium");
+  }
+
+  > menu {
+    display: block;
+    position: static;
+    flex: 1;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 1;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  > menu > li[hidden] { display: none; }
+
+  > ul[role="tree"] {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select-search-popup { transition: none !important; }
+}
+
+// Tree select. TreeSelect puts a ul[role="tree"] inside the Menu surface,
+// one list below the rows Menu styles, and nests each branch's rows in a
+// ul[role="group"] inside its treeitem. The row is the treeitem's label span:
+// painting the <li> would fill the branch's whole subtree. A branch row leads
+// with the chevron .tree uses, a leaf lines its text up after it, and each
+// level hangs a guide line from its parent's chevron, as in .tree.
+ul[role="tree"] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  ul[role="group"] {
+    margin: 0;
+    margin-inline-start: calc(var(--md-comp-menu-item-leading-space) + 10px);
+    padding: 0;
+    padding-inline-start: 4px;
+    border-inline-start: 1px solid var(--md-sys-color-outline-variant);
+    list-style: none;
+  }
+
+  li[role="treeitem"] {
+    display: block;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    outline: none;
+
+    &[hidden] { display: none; }
+
+    > span {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      box-sizing: border-box;
+      min-height: var(--md-comp-menu-item-container-height);
+      padding-block: 8px;
+      padding-inline: calc(var(--md-comp-menu-item-leading-space) + 28px) var(--md-comp-menu-item-trailing-space);
+      border-radius: var(--md-comp-menu-item-container-shape);
+      color: var(--md-comp-menu-item-label-text-color);
+      @include typescale("label-large");
+    }
+
+    > span:hover {
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "hover");
+    }
+
+    &:focus-visible > span {
+      background-color: state-layer(var(--md-comp-menu-item-label-text-color), "focus");
+
+      // Forced colors drop the focus fill, and the row has no outline of its own.
+      @media (forced-colors: active) {
+        outline: 2px solid CanvasText;
+        outline-offset: -2px;
+      }
+    }
+
+    &[aria-expanded] > span {
+      padding-inline-start: var(--md-comp-menu-item-leading-space);
+
+      &::before {
+        @include tree-chevron;
+        @include forced-colors-fill;
+      }
+    }
+
+    // A closed branch points to the end edge, which is the left in RTL.
+    &[aria-expanded="false"]:dir(rtl) > span::before {
+      transform: rotate(90deg);
+    }
+
+    &[aria-expanded="true"] > span::before {
+      transform: none;
+    }
+
+    &[aria-selected="true"] > span {
+      background-color: var(--md-comp-menu-item-selected-container-color);
+      color: var(--md-comp-menu-item-selected-label-text-color);
+      @include forced-colors-selected;
+    }
+
+    // The chosen row is where the popup opens, so it shows focus too: the
+    // focus layer over the selected fill. In forced colors its Highlight
+    // outline takes the label's own outline, so focus rings the row itself;
+    // a chosen row is always a leaf, whose <li> is just its label.
+    &[aria-selected="true"]:focus-visible {
+      > span {
+        background-color: state-layer(
+          var(--md-comp-menu-item-selected-label-text-color),
+          "focus",
+          var(--md-comp-menu-item-selected-container-color)
+        );
+      }
+
+      @media (forced-colors: active) {
+        outline: 2px solid CanvasText;
+      }
+    }
+
+    // A disabled row takes no clicks: they reach its group, and TreeSelect
+    // ignores a click that lands on no row's label.
+    &.disabled {
+      cursor: default;
+      pointer-events: none;
+
+      > span {
+        background: none;
+        color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+      }
+    }
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .field:has(> .hide-select) .caret {
     transition: none;
   }
+
+  ul[role="tree"] li[role="treeitem"] > span::before {
+    transition: none;
+  }
 }