@expressivecss/expressive 0.13.1 → 0.15.0

package/src/sass/components/_keypad.scss

@@ -0,0 +1,162 @@
+@use "../abstracts" as *;
+
+// Keypad and keyboard: on-screen keys that type into a text field.
+//
+// Anatomy is the HTML. Every key is a <button type="button">. A key with a
+// `value` types that value; a key with `data-key` is a function key
+// (Backspace, Enter, Shift). `.keypad` is a three-column grid of round keys,
+// the dial pad and PIN pad. `.keyboard` is a column of rows (any <div>), each
+// row a flex line of keys. A key carrying a button style class (.filled,
+// .tonal, .outlined, .elevated, .text) keeps that style, so a call or submit
+// key is written the same way as any other button.
+//
+// Keys press the same way button-group items do: the corner squares off on a
+// spring and springs back on release.
+//
+// Keyboard width comes from a column count rather than per-key classes. A
+// character key is one column wide and may shrink; a function key is one and
+// a half; the space bar takes what is left. Ten columns gives QWERTY's
+// half-key indent on the nine-key row with no extra markup.
+
+$_key: "button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled)";
+
+:is(.keypad, .keyboard) {
+  --md-comp-keypad-key-color: var(--md-sys-color-surface-container-highest);
+  --md-comp-keypad-key-label-color: var(--md-sys-color-on-surface);
+  --md-comp-keypad-function-key-color: var(--md-sys-color-secondary-container);
+  --md-comp-keypad-function-key-label-color: var(--md-sys-color-on-secondary-container);
+  --md-comp-keypad-key-pressed-shape: 12px;
+  // Material's fast-spatial spring, the curve button groups press with.
+  --md-comp-keypad-motion: #{$motion-fast-spatial};
+
+  touch-action: manipulation;
+
+  button {
+    --_color: var(--md-comp-keypad-key-color);
+    --_label: var(--md-comp-keypad-key-label-color);
+    min-width: 0;
+    padding: 0;
+    transition:
+      border-radius 200ms var(--md-comp-keypad-motion),
+      background-color 200ms ease-out;
+
+    &[data-key] {
+      --_color: var(--md-comp-keypad-function-key-color);
+      --_label: var(--md-comp-keypad-function-key-label-color);
+    }
+
+    // The state layer's opacity. Only the rule below reads it, so a key
+    // that keeps a button style ignores it.
+    @each $state, $selector in ("hover": "&:hover", "focus": "&:focus", "pressed": "&:active") {
+      #{$selector} {
+        --_state: #{state-opacity($state)};
+      }
+    }
+
+    &:active:not(:disabled) {
+      border-radius: var(--md-comp-keypad-key-pressed-shape);
+    }
+
+    // The shape stops moving; the color still fades, which is not motion.
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: background-color;
+    }
+  }
+
+  #{$_key} {
+    color: var(--_label);
+    background-color: color-mix(in oklab, var(--_label) var(--_state, 0%), var(--_color));
+  }
+
+  // A latched Shift reads as selected: primary, like a selected toggle.
+  [data-key="Shift"][aria-pressed="true"] {
+    --_color: var(--md-sys-color-primary);
+    --_label: var(--md-sys-color-on-primary);
+  }
+}
+
+// Dial pad and PIN pad: three columns of round keys. A digit key may carry
+// its letters in a <small> under the digit. An empty cell is an empty <span>.
+// Keys fill their cell, so `.wide` spans two and becomes a pill: a call key
+// beside Backspace leaves no hole in the last row.
+.keypad {
+  --md-comp-keypad-key-size: 72px;
+  --md-comp-keypad-gap: 12px;
+
+  display: inline-grid;
+  grid-template-columns: repeat(3, var(--md-comp-keypad-key-size));
+  gap: var(--md-comp-keypad-gap);
+
+  button {
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    height: var(--md-comp-keypad-key-size);
+    border-radius: calc(var(--md-comp-keypad-key-size) / 2);
+    @include typescale("headline-medium");
+
+    &.wide {
+      grid-column: span 2;
+    }
+
+    > small {
+      @include typescale("label-small");
+      color: inherit;
+      opacity: .78;
+    }
+  }
+}
+
+// On-screen keyboard. The container is a docked surface; each row is a line
+// of keys sized from the column count. An optional `.numbers` row of digits
+// sits above the letters with shorter keys, as on a phone; `hidden` drops it.
+// Rows skip `display: flex` while hidden, which would otherwise outrank the
+// browser's `[hidden]` rule.
+.keyboard {
+  --md-comp-keyboard-columns: 10;
+  --md-comp-keyboard-gap: 6px;
+  --md-comp-keyboard-key-height: 48px;
+  --md-comp-keyboard-number-key-height: 40px;
+  --md-comp-keyboard-key-shape: 12px;
+  --md-comp-keypad-key-pressed-shape: 6px;
+  --md-comp-keyboard-container-color: var(--md-sys-color-surface-container);
+  --md-comp-keyboard-container-shape: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  border-radius: var(--md-comp-keyboard-container-shape);
+  background-color: var(--md-comp-keyboard-container-color);
+
+  > :not([hidden]) {
+    --_unit: calc((100% - (var(--md-comp-keyboard-columns) - 1) * var(--md-comp-keyboard-gap)) / var(--md-comp-keyboard-columns));
+    display: flex;
+    justify-content: center;
+    gap: var(--md-comp-keyboard-gap);
+  }
+
+  button {
+    flex: 0 1 var(--_unit);
+    height: var(--md-comp-keyboard-key-height);
+    border-radius: var(--md-comp-keyboard-key-shape);
+    @include typescale("title-medium");
+
+    &[data-key] {
+      flex-basis: calc(1.5 * var(--_unit) + .5 * var(--md-comp-keyboard-gap));
+    }
+
+    &[value=" "] {
+      flex-grow: 1;
+    }
+  }
+
+  > .numbers button {
+    height: var(--md-comp-keyboard-number-key-height);
+  }
+
+  // Shift shows capitals on the character keys while it is latched.
+  &:has([data-key="Shift"][aria-pressed="true"]) button[value] {
+    text-transform: uppercase;
+  }
+}

package/src/sass/components/_lightbox.scss

@@ -11,10 +11,8 @@
     border-radius: 12px;
   }
 
-  &:hover {
-    &:not(.active) {
-      opacity: .8;
-    }
+  &:hover:not(.active) {
+    opacity: .8;
   }
   &.active {
     cursor: zoom-out;
@@ -23,10 +21,7 @@
 
 #lightbox-overlay {
   position:fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background-color: var(--md-sys-color-background);
   z-index: 1000;
   will-change: opacity;

package/src/sass/components/_map.scss

@@ -0,0 +1,188 @@
+@use "sass:map";
+@use "../abstracts" as *;
+
+// Map. A MapLibre map in a .map frame. The page loads maplibre-gl.css; these
+// rules restyle what MapLibre draws and add the ExpressiveCSS parts:
+//
+//   .map-marker    a point at data-lng-lat. With no content of its own it is
+//                  a primary dot; anything else inside replaces the dot.
+//                  A .map-marker-label shows below it (.top: above), and a
+//                  child .tooltip works as on any button.
+//   .map-popup     moved into a MapLibre popup, drawn as a surface card.
+//   .map-controls  a corner stack of .icon-button controls, top right
+//                  unless .top-left, .bottom-left or .bottom-right. A
+//                  .map-control-group joins buttons on one surface.
+//
+// Until the script starts the map, markers, popups and controls are hidden.
+// MapLibre moves markers and popups out of the frame, so the hiding rules
+// stop matching them once the map runs.
+//
+// Tokens:
+//   --md-comp-map-height              400px
+//   --md-comp-map-shape               16px
+//   --md-comp-map-marker-color        primary
+//   --md-comp-map-marker-ring-color   surface
+//   --md-comp-map-route-color         primary
+//   --md-comp-map-arc-color           tertiary
+//   --md-comp-map-cluster-color       primary
+//   --md-comp-map-cluster-label-color on-primary
+//   --md-comp-map-popup-max-width     280px
+//   --md-comp-map-control-offset      12px
+//
+// The script sets --md-comp-map-bearing, so a [data-action="compass"] icon
+// points north.
+
+.map {
+  --md-comp-map-height: 400px;
+  --md-comp-map-shape: 16px;
+  --md-comp-map-marker-color: var(--md-sys-color-primary);
+  --md-comp-map-marker-ring-color: var(--md-sys-color-surface);
+  --md-comp-map-route-color: var(--md-sys-color-primary);
+  --md-comp-map-arc-color: var(--md-sys-color-tertiary);
+  --md-comp-map-cluster-color: var(--md-sys-color-primary);
+  --md-comp-map-cluster-label-color: var(--md-sys-color-on-primary);
+  --md-comp-map-popup-max-width: 280px;
+  --md-comp-map-control-offset: 12px;
+
+  position: relative;
+  overflow: hidden;
+  block-size: var(--md-comp-map-height);
+  border-radius: var(--md-comp-map-shape);
+  background-color: var(--md-sys-color-surface-container);
+
+  &:fullscreen {
+    border-radius: 0;
+  }
+
+  > :is(.map-marker, .map-popup),
+  &:not(.maplibregl-map) > .map-controls {
+    display: none;
+  }
+}
+
+// Absolute, as MapLibre places it; a child .tooltip would otherwise make
+// the marker relative.
+.map .map-marker {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  @include focus-visible;
+
+  &:not(:has(> :not(.tooltip, .map-marker-label))) {
+    inline-size: 16px;
+    block-size: 16px;
+    border: 2px solid var(--md-comp-map-marker-ring-color);
+    border-radius: 50%;
+    background-color: var(--md-comp-map-marker-color);
+    @include z-depth(1);
+  }
+
+  &.location {
+    --md-comp-map-marker-color: var(--md-sys-color-tertiary);
+
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-comp-map-marker-color) 24%, transparent);
+    cursor: default;
+  }
+}
+
+.map-marker-label {
+  position: absolute;
+  inset-block-start: calc(100% + 4px);
+  padding: 2px 8px;
+  border-radius: 8px;
+  background-color: var(--md-sys-color-surface-container-highest);
+  color: var(--md-sys-color-on-surface);
+  @include typescale("label-medium");
+  white-space: nowrap;
+  pointer-events: none;
+
+  &.top {
+    inset-block: auto calc(100% + 4px);
+  }
+}
+
+// MapLibre's popup, as an M3 surface card. The tip is dropped; the offset
+// keeps the card clear of its marker.
+//
+// maplibre-gl.css is unlayered, so it beats this layer wherever both set a
+// property. Those declarations are !important; an important declaration in
+// a layer outranks a normal unlayered one.
+.map {
+  .maplibregl-popup-content {
+    max-inline-size: var(--md-comp-map-popup-max-width);
+    padding: 12px 16px !important;
+    border-radius: 12px !important;
+    background: var(--md-sys-color-surface-container-low) !important;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("body-medium");
+    box-shadow: map.get($elevations, "2") !important;
+
+    &:has(> .maplibregl-popup-close-button) {
+      padding-inline-end: 44px;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      margin: 0 0 4px;
+      @include typescale("title-small");
+    }
+
+    p {
+      margin: 0;
+      font: inherit;
+    }
+  }
+
+  .maplibregl-popup-tip {
+    display: none;
+  }
+
+  .maplibregl-popup-close-button {
+    inset: 4px 4px auto auto !important;
+    inline-size: 32px;
+    block-size: 32px;
+    border-radius: 50% !important;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 20px;
+    line-height: 1;
+
+    &:hover {
+      background-color: color-mix(in oklab, currentColor 8%, transparent) !important;
+    }
+
+    @include focus-visible;
+  }
+}
+
+.map-controls {
+  position: absolute;
+  inset: var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto auto;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &.top-left { inset: var(--md-comp-map-control-offset) auto auto var(--md-comp-map-control-offset); }
+  &.bottom-left { inset: auto auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset); }
+  &.bottom-right { inset: auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto; }
+
+  > .icon-button,
+  > .map-control-group {
+    border-radius: 9999px;
+    background-color: var(--md-sys-color-surface-container-low);
+    @include z-depth(2);
+  }
+
+  [data-action="compass"] > .material-symbols {
+    rotate: var(--md-comp-map-bearing, 0deg);
+  }
+}
+
+.map-control-group {
+  display: flex;
+  flex-direction: column;
+}

package/src/sass/components/_menu.scss

@@ -28,6 +28,13 @@
 
 $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E");
 
+// Item states, interpolated after `li`. An item is any <li> that is not a
+// divider, optgroup, gap or label; an enabled item is also not disabled.
+$_item: ":not(.divider, .optgroup, .gap, .label)";
+$_enabled: ':not(.disabled, [aria-disabled="true"], .divider, .optgroup, .gap, .label)';
+$_selected: ':is(.selected, [aria-selected="true"], [aria-checked="true"])';
+$_unselected: ':not(.selected, [aria-selected="true"], [aria-checked="true"])';
+
 [popover] {
   outline: none;
   padding: 0;
@@ -188,7 +195,8 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     // butted against the label instead of flush right.
     //
     // Leading stays the default; a trailing icon names its side, the same way
-    // a field icon must (see rule 3 in CLAUDE.md).
+    // a field icon must (see rule 3 under "HTML semantics" in
+    // docs/development-notes.md).
     > :is(a, button) > #{$icon}:is(.suffix, :last-child:not(:only-child)) {
       margin-inline-start: auto;
       color: var(--md-comp-menu-item-trailing-icon-color);
@@ -209,33 +217,26 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
   }
 
-  > li:not(.divider, .optgroup, .gap, .label) {
+  > li#{$_item} {
     min-height: var(--md-comp-menu-item-container-height);
   }
 
-  > li:not(.divider, .optgroup, .gap, .label):first-child {
+  > li#{$_item}:first-child {
     border-radius: var(--md-comp-menu-item-edge-shape)
       var(--md-comp-menu-item-edge-shape)
       var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-container-shape);
   }
 
-  > li:not(.divider, .optgroup, .gap, .label):last-child {
+  > li#{$_item}:last-child {
     border-radius: var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-container-shape)
       var(--md-comp-menu-item-edge-shape) var(--md-comp-menu-item-edge-shape);
   }
 
   // Hover / press sit on extra-small corners and do not span the container.
-  > li:not(
-      .disabled,
-      [aria-disabled="true"],
-      .divider,
-      .optgroup,
-      .gap,
-      .label
-    ):hover,
-  > li.active:not(.selected, [aria-selected="true"], [aria-checked="true"]) {
+  > li#{$_enabled}:hover,
+  > li.active#{$_unselected} {
     background-color: color-mix(
       in oklab,
       var(--md-comp-menu-item-label-text-color) 8%,
@@ -243,14 +244,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     );
   }
 
-  > li:not(
-      .disabled,
-      [aria-disabled="true"],
-      .divider,
-      .optgroup,
-      .gap,
-      .label
-    ):active {
+  > li#{$_enabled}:active {
     background-color: color-mix(
       in oklab,
       var(--md-comp-menu-item-label-text-color) 10%,
@@ -261,9 +255,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
   // :not(.divider) only buys specificity: menu-item.selected.shape is 12dp
   // unconditionally, so it has to outrank the first/last-child edge rule that
   // would otherwise leave a selected end item with 4dp inner corners.
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):not(
-      .divider
-    ) {
+  > li#{$_selected}:not(.divider) {
     border-radius: var(--md-comp-menu-item-selected-container-shape);
     background-color: var(--md-comp-menu-item-selected-container-color);
     color: var(--md-comp-menu-item-selected-label-text-color);
@@ -282,7 +274,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
   }
 
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):hover {
+  > li#{$_selected}:hover {
     background-color: color-mix(
       in oklab,
       var(--md-comp-menu-item-selected-label-text-color) 8%,
@@ -290,11 +282,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     );
   }
 
-  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):is(
-      :focus,
-      :focus-visible,
-      :active
-    ) {
+  > li#{$_selected}:is(:focus, :focus-visible, :active) {
     background-color: color-mix(
       in oklab,
       var(--md-comp-menu-item-selected-label-text-color) 10%,
@@ -365,21 +353,21 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     // blur the menu itself. Grouped menus stay solid.
     backdrop-filter: none;
 
-    > li:not(.divider, .optgroup, .gap, .label) {
+    > li#{$_item} {
       padding-inline: var(--md-comp-menu-group-padding);
       background-color: var(--md-comp-menu-container-color);
       border-radius: 0;
     }
 
-    > li:not(.divider, .optgroup, .gap, .label):first-child,
-    > li.gap + li:not(.divider, .optgroup, .gap, .label) {
+    > li#{$_item}:first-child,
+    > li.gap + li#{$_item} {
       padding-block-start: var(--md-comp-menu-group-padding);
       border-start-start-radius: var(--md-comp-menu-group-shape);
       border-start-end-radius: var(--md-comp-menu-group-shape);
     }
 
-    > li:not(.divider, .optgroup, .gap, .label):has(+ li.gap),
-    > li:not(.divider, .optgroup, .gap, .label):last-child {
+    > li#{$_item}:has(+ li.gap),
+    > li#{$_item}:last-child {
       padding-block-end: var(--md-comp-menu-group-padding);
       border-end-start-radius: var(--md-comp-menu-group-shape);
       border-end-end-radius: var(--md-comp-menu-group-shape);
@@ -390,14 +378,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     }
 
     // State layers belong to the inset item while the group surface remains.
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):hover,
+    > li#{$_enabled}:hover,
     > li.active,
     > li.selected,
     > li[aria-selected="true"],
@@ -405,16 +386,9 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       background-color: var(--md-comp-menu-container-color);
     }
 
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):hover
+    > li#{$_enabled}:hover
       > :is(a, button, #{$icon-label}),
-    > li.active:not(.selected, [aria-selected="true"], [aria-checked="true"])
+    > li.active#{$_unselected}
       > :is(a, button, #{$icon-label}) {
       border-radius: var(--md-comp-menu-item-container-shape);
       background-color: color-mix(
@@ -424,14 +398,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       );
     }
 
-    > li:not(
-        .disabled,
-        [aria-disabled="true"],
-        .divider,
-        .optgroup,
-        .gap,
-        .label
-      ):active
+    > li#{$_enabled}:active
       > :is(a, button, #{$icon-label}) {
       background-color: color-mix(
         in oklab,
@@ -440,13 +407,13 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       );
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"])
+    > li#{$_selected}
       > :is(a, button, #{$icon-label}) {
       border-radius: var(--md-comp-menu-item-selected-container-shape);
       background-color: var(--md-comp-menu-item-selected-container-color);
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):hover
+    > li#{$_selected}:hover
       > :is(a, button, #{$icon-label}) {
       background-color: color-mix(
         in oklab,
@@ -455,11 +422,7 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       );
     }
 
-    > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):is(
-        :focus,
-        :focus-visible,
-        :active
-      )
+    > li#{$_selected}:is(:focus, :focus-visible, :active)
       > :is(a, button, #{$icon-label}) {
       background-color: color-mix(
         in oklab,
@@ -576,18 +539,12 @@ menu[id] > li:focus-visible {
   );
 }
 
-menu[id]
-  > li:focus-visible:not(.selected, [aria-selected="true"], [aria-checked="true"]) {
-  outline: 3px solid var(--md-sys-color-secondary);
-  outline-offset: -3px;
-}
-
 menu[id].grouped > li:focus-visible {
   background-color: var(--md-comp-menu-container-color);
 }
 
 menu[id].grouped
-  > li:focus-visible:not(.selected, [aria-selected="true"], [aria-checked="true"])
+  > li:focus-visible#{$_unselected}
   > :is(a, button, span:not(.material-symbols, .badge, .supporting-text)) {
   border-radius: var(--md-comp-menu-item-container-shape);
   background-color: color-mix(

package/src/sass/components/_mixed-chart.scss

@@ -125,7 +125,7 @@
     inset: 0;
     z-index: -1;
     border-radius: var(--md-comp-mixed-chart-shape);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
   }
 
   > span {