@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/src/sass/components/_chips.scss

@@ -1,5 +1,10 @@
 @use "../abstracts" as *;
 
+// A chip is written with the element that says what it is: <span> for a
+// display or input chip, <button> for assist / suggestion, and
+// <input type="checkbox"> + <label> for filter. The class styles all three
+// elements, so everything below has to survive on any of them - hence the
+// resets.
 .chip {
   --font-size: 14px;
   --font-size-icon: 18px;
@@ -13,20 +18,66 @@
   margin: 0;
   height: 32px;
   padding-left: var(--padding);
-  padding-right: var(--padding);  
+  padding-right: var(--padding);
   font-size: var(--font-size);
-  font-weight: 500;    
+  font-weight: 500;
   border-radius: 8px;
   align-items: center;
   user-select: none;
   vertical-align: top;
 
-  &:focus,
+  // Button and label defaults that would otherwise show through.
+  appearance: none;
+  border: 0;
+  font-family: inherit;
+  text-align: inherit;
+
+  // Selected. `.active` is the pre-0.8.0 name and still works; `:focus` used
+  // to stand in for selection here, which meant a chip could not show focus
+  // and selection as the different things they are.
+  &.selected,
   &.active {
-    outline: none;
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
   }
+
+  @include focus-visible();
+}
+
+// Interactive chips only. A display chip is a <span> and is not a control.
+:is(button, label).chip {
+  cursor: pointer;
+
+  &:hover {
+    background-color: color-mix(
+      in oklab,
+      var(--md-sys-color-on-surface-variant) state-opacity("hover"),
+      var(--md-sys-color-surface-container-low)
+    );
+  }
+}
+
+// Filter chip. The checkbox carries the state and the form value; the label is
+// the chip. Kept focusable rather than `display: none` so it stays reachable.
+.chip-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.chip-input:checked + .chip {
+  background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+.chip-input:focus-visible + .chip {
+  @include focus-ring();
 }
 
 .chip.outlined {
@@ -49,6 +100,7 @@
   color: var(--md-sys-color-on-surface-variant);
 }
 
+// The delete affordance is a real <button>, so it needs the button reset too.
 .chip .close {
   border-radius: 50%;
   height: 24px;
@@ -58,10 +110,17 @@
   justify-content: center;
   align-content: center;
   cursor: pointer;
+  appearance: none;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+
+  @include focus-visible();
 }
 
 .chip .close:hover {
-  background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) 8%, transparent);
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) state-opacity("hover"), transparent);
 }
 
 //--------------------------

package/src/sass/components/_datepicker.scss

@@ -1,6 +1,6 @@
 @use "../abstracts" as *;
 
-.datepicker-container {
+:is(.datepicker-container, .date-picker-container) {
   display: flex;
   flex-direction: column;
   max-width: 325px;
@@ -8,7 +8,7 @@
   background-color: var(--md-sys-color-surface);
 }
 
-.datepicker-controls {
+:is(.datepicker-controls, .date-picker-controls) {
   display: flex;
   justify-content: space-between;
   width: 280px;
@@ -86,7 +86,7 @@
 
 
 /* Date Display */
-.datepicker-date-display {
+:is(.datepicker-date-display, .date-picker-date-display) {
   flex: 1 auto;
   // @removed since v2.2.1-dev regarding Material M3 standards
   // background-color: var(--md-sys-color-primary);
@@ -118,11 +118,11 @@
 
 
 /* Calendar */
-.datepicker-calendar-container {
+:is(.datepicker-calendar-container, .date-picker-calendar-container) {
   flex: 2.5 auto;
 }
 
-.datepicker-table {
+:is(.datepicker-table, .date-picker-table) {
   width: 280px;
   font-size: 1rem;
   margin: 0 auto;
@@ -145,7 +145,7 @@
     color: var(--md-sys-color-on-surface-variant);
   }
 
-  .datepicker-day {
+  :is(.datepicker-day, .date-picker-day) {
     padding: 0;
     color: var(--md-sys-color-on-background);
     // border-radius: 50%;
@@ -162,17 +162,17 @@
 }
 
 // @todo
-.datepicker-day.has-event {}
+:is(.datepicker-day, .date-picker-day).has-event {}
 // @todo
-.datepicker-day.is-inrange {}
+:is(.datepicker-day, .date-picker-day).is-inrange {}
 // @todo
-.datepicker-day.is-startrange {}
+:is(.datepicker-day, .date-picker-day).is-startrange {}
 // @todo
-.datepicker-day.is-endrange {}
+:is(.datepicker-day, .date-picker-day).is-endrange {}
 
-.datepicker-day.is-daterange-start,
-.datepicker-day.is-daterange-end,
-.datepicker-day.is-daterange {
+:is(.datepicker-day, .date-picker-day).is-daterange-start,
+:is(.datepicker-day, .date-picker-day).is-daterange-end,
+:is(.datepicker-day, .date-picker-day).is-daterange {
   position: relative;
 
   &:before {
@@ -186,20 +186,20 @@
   }
 }
 
-.datepicker-day.is-daterange-start:before,
-.datepicker-day.is-daterange-end:before {
+:is(.datepicker-day, .date-picker-day).is-daterange-start:before,
+:is(.datepicker-day, .date-picker-day).is-daterange-end:before {
   width: 50%;
 }
 
-.datepicker-day.is-daterange-start:before {
+:is(.datepicker-day, .date-picker-day).is-daterange-start:before {
   left: 50%;
 }
 
-.datepicker-day.is-daterange .datepicker-day-button:before {
+:is(.datepicker-day, .date-picker-day).is-daterange :is(.datepicker-day-button, .date-picker-day-button):before {
   background-color: var(--md-sys-color-primary-container);
 }
 
-.datepicker-day-button {
+:is(.datepicker-day-button, .date-picker-day-button) {
   background-color: transparent;
   border: none;
   line-height: 34px;
@@ -239,7 +239,7 @@
 }
 
 /* Footer */
-.datepicker-footer {
+:is(.datepicker-footer, .date-picker-footer) {
   width: 280px;
   margin: 0 auto;
   padding-bottom: 5px;
@@ -247,15 +247,15 @@
   justify-content: space-between;
 }
 
-.datepicker-cancel,
-.datepicker-clear,
-.datepicker-today,
-.datepicker-done {
+:is(.datepicker-cancel, .date-picker-cancel),
+:is(.datepicker-clear, .date-picker-clear),
+:is(.datepicker-today, .date-picker-today),
+:is(.datepicker-done, .date-picker-done) {
   color: var(--md-sys-color-primary);
   padding: 0 1rem;
 }
 
-.datepicker-clear {
+:is(.datepicker-clear, .date-picker-clear) {
   color: var(--md-sys-color-error);
 }
 

package/src/sass/components/_dialog.scss

@@ -39,7 +39,7 @@ dialog {
   @include z-depth("3");
 
   &::backdrop {
-    background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+    background-color: var(--md-comp-scrim-color);
     backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
   }
 }
@@ -59,7 +59,7 @@ dialog[open] {
 }
 
 // Optional leading icon (M3 basic dialog).
-dialog > i:first-child {
+dialog > #{$icon}:first-child {
   flex: 0 0 auto;
   align-self: center;
   margin: 24px 24px 0;
@@ -78,7 +78,7 @@ dialog > :is(h1, h2, h3, h4, h5, h6) {
   @include typescale("headline-small");
 }
 
-dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) {
+dialog > #{$icon}:first-child + :is(h1, h2, h3, h4, h5, h6) {
   padding-top: 16px;
   text-align: center;
 }
@@ -98,7 +98,7 @@ dialog > p {
   @include typescale("body-medium");
 }
 
-dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) + p {
+dialog > #{$icon}:first-child + :is(h1, h2, h3, h4, h5, h6) + p {
   text-align: center;
 }
 
@@ -150,11 +150,12 @@ dialog:not(
     .right-sheet,
     .left,
     .left-sheet,
-    .sidenav,
-    .sidenav-overlay
+    .floating-sheet,
+    :is(.sidenav, .navigation-drawer),
+    :is(.sidenav-overlay, .navigation-drawer-overlay)
   )
   > :is(form, nav):last-child
-  > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled) {
+  > :is(button, a.button):not(.tonal, .outlined, .elevated, .filled, .icon-button) {
   @include btn-flat;
 }
 
@@ -215,7 +216,12 @@ dialog.max {
   }
 
   // Close is a 48dp icon button. 4dp bar inset + 12dp to the glyph = 16dp.
-  > header > :is(button, a):has(> i:only-child) {
+  // `:only-child` counts elements, not text nodes, so `<button><span icon/>
+  // Save</button>` reads as icon-only and would be squeezed into the 48dp
+  // circle. CSS cannot see the text node; `.button` is the author's opt-out,
+  // and sends such an action to the general button rules instead. Same
+  // escape hatch the app bar already has.
+  > header > :is(button, a):not(.button, .icon-button):has(> #{$icon}:only-child) {
     display: inline-flex;
     flex: 0 0 48px;
     align-items: center;
@@ -231,7 +237,7 @@ dialog.max {
     color: var(--md-sys-color-on-surface-variant);
     box-shadow: none;
 
-    > i {
+    > #{$icon} {
       font-size: 24px;
       width: 24px;
       height: 24px;
@@ -239,7 +245,7 @@ dialog.max {
     }
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
     &:focus-visible {
@@ -249,7 +255,7 @@ dialog.max {
   }
 
   // Confirming action in the header is a text button, not an icon.
-  > header :is(button, a.button):not(:has(> i:only-child)) {
+  > header :is(button, a.button):not(:has(> #{$icon}:only-child)) {
     @include btn-flat;
     width: auto;
     min-width: 0;

package/src/sass/components/_drag-handle.scss

@@ -0,0 +1,130 @@
+@use "../abstracts" as *;
+
+// Drag handles.
+//
+// Anatomy is the HTML. A .drag-handle is the handle, and which element it is
+// says what it is: a <span aria-hidden="true"> when it is only an affordance -
+// the usual case - and a <button> with a name when something is genuinely wired
+// to it. semantics.json enforces exactly that split, which is what lets the
+// interactive states below key off `button` and be right every time.
+//
+// **Nothing here drags.** The handle is CSS; the dragging is the page's, and so
+// is the keyboard path to whatever the drag achieves. A handle that answers
+// only a pointer puts its outcome out of reach of everyone not using one, so
+// the framework ships no reordering behaviour to hang off this and the docs say
+// plainly that a drag-only reorder is unreachable. The decorative spelling is
+// the default; the button spelling has to earn its name.
+//
+// M3 Expressive tokenised the *vertical* handle - the one sitting in the gutter
+// between two panes, Compose's VerticalDragHandle: a 4x48dp bar in a 24dp
+// container that swells to 12x52dp on a medium corner while it is held. That is
+// md.comp.drag-handle and it is what this partial draws.
+//
+// The bottom sheet's grabber is a different component with a different token
+// set - md.comp.sheet-bottom.docked.drag-handle, a horizontal 32x4dp bar at 40%
+// on-surface-variant - so a .drag-handle inside a sheet takes the sheet's
+// geometry from _bottom-sheet.scss rather than carrying a `horizontal` modifier
+// here. One class, two hosts, and neither one's values invented.
+//
+// Tokens follow md.comp.drag-handle.* (DSP 34.0.21):
+//   container    24dp wide - the hit target, not the bar
+//   bar          4 x 48dp, corner.full, outline
+//   pressed      12 x 52dp, corner.medium, on-surface
+//   state layer  inverse-on-surface, 8% hover / 10% focus
+//   elevation    level0 at rest and pressed alike, so there is nothing to draw
+//
+// Two departures, both deliberate. M3 publishes a container *width* and no
+// container height, leaving the container to take whatever height it is given;
+// this pins it to the pressed bar so that holding the handle cannot reflow what
+// is beside it, which a stretched container would also achieve but only where
+// the host happens to stretch it. And Compose distinguishes a *dragged* state
+// from a pressed one - draggedSize, draggedShape, draggedColor, checked before
+// isPressed - which the web token set does not publish and CSS could not select
+// anyway: there is no "is being dragged" pseudo-class, and nothing here drags.
+// `:active` covers both, at the pressed values.
+.drag-handle {
+  --md-comp-drag-handle-container-width: 24px;
+  --md-comp-drag-handle-width: 4px;
+  --md-comp-drag-handle-height: 48px;
+  --md-comp-drag-handle-shape: 9999px;
+  --md-comp-drag-handle-color: var(--md-sys-color-outline);
+  --md-comp-drag-handle-pressed-width: 12px;
+  --md-comp-drag-handle-pressed-height: 52px;
+  --md-comp-drag-handle-pressed-shape: 12px;
+  --md-comp-drag-handle-pressed-color: var(--md-sys-color-on-surface);
+  --md-comp-drag-handle-state-layer-color: var(--md-sys-color-inverse-on-surface);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  // The container is the hit target, and it is sized to the *pressed* bar
+  // rather than the resting one so that swelling the bar moves nothing beside
+  // it. M3 gives the container a width and no height for the same reason.
+  inline-size: var(--md-comp-drag-handle-container-width);
+  block-size: var(--md-comp-drag-handle-pressed-height);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--md-comp-drag-handle-shape);
+  background-color: transparent;
+  cursor: grab;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+
+  // The bar. It is a pseudo-element and not the box itself because the box is
+  // the hit target: 4dp of anything is not something a pointer can be asked to
+  // find, and the state layer needs a surface the bar's own shape does not clip.
+  &::before {
+    content: "";
+    display: block;
+    inline-size: var(--md-comp-drag-handle-width);
+    block-size: var(--md-comp-drag-handle-height);
+    border-radius: var(--md-comp-drag-handle-shape);
+    background-color: var(--md-comp-drag-handle-color);
+    transition: inline-size .15s ease, block-size .15s ease, border-radius .15s ease,
+      background-color .15s ease;
+  }
+}
+
+// Interactive states belong to the button spelling alone. A decorative handle
+// is not a control and must not light up under a pointer that merely crosses
+// it - and because the rule keying this is `button`, the semantics rule holding
+// every other element to aria-hidden is what keeps the two in step.
+button.drag-handle {
+  &:hover {
+    background-color: color-mix(
+      in oklab,
+      var(--md-comp-drag-handle-state-layer-color) state-opacity("hover"),
+      transparent
+    );
+  }
+
+  &:focus-visible {
+    background-color: color-mix(
+      in oklab,
+      var(--md-comp-drag-handle-state-layer-color) state-opacity("focus"),
+      transparent
+    );
+  }
+
+  @include focus-visible;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:active::before {
+    inline-size: var(--md-comp-drag-handle-pressed-width);
+    block-size: var(--md-comp-drag-handle-pressed-height);
+    border-radius: var(--md-comp-drag-handle-pressed-shape);
+    background-color: var(--md-comp-drag-handle-pressed-color);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drag-handle::before {
+    transition: none;
+  }
+}