@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/src/sass/components/_split-button.scss

@@ -0,0 +1,196 @@
+@use "sass:map";
+@use "../abstracts" as *;
+
+// Split buttons.
+//
+// Anatomy is the HTML. A <div class="split-button"> holding two buttons: a
+// leading one that performs the action, and a trailing `.menu-trigger` that
+// opens a <menu> of related ones. They sit 2dp apart, the outside of the pair
+// is round, and the seam between them is square-ish until something happens
+// to it.
+//
+// Both halves are ordinary buttons, so every style class works on them and
+// nothing here restates a colour. What this partial owns is the pair: the
+// seam, the two insets that differ from a lone button's, and the larger
+// trailing icon.
+//
+// No composite role is declared. The two halves are two Tab stops doing two
+// different things - `toolbar` and its nine siblings promise an arrow-key
+// model this is not (SEMANTICS rule 2). The menu the trailing half opens has
+// its own keyboard contract, which Menu implements and owns.
+//
+// `aria-expanded` on the trailing half is Menu's to write, not the author's
+// (SEMANTICS rule 1) - which is exactly why the expanded shape can be drawn
+// from a selector with no script of this component's own.
+//
+// Tokens are md.comp.split-button.{xsmall … xlarge} (DSP 34.0.21). Five
+// families collapse to one here the way the button's own ladder does: the
+// size class rewrites the tokens and the two halves map them onto the button
+// tokens once, below.
+//
+//   size     height  lead-start  lead-end  trail-space  trail-icon  inner  swollen
+//   xsmall     32        12         10          13          22        4       8
+//   small      40        16         12          13          22        4      12
+//   medium     56        24         24          15          26        4      12
+//   large      96        48         48          29          38        8      20
+//   xlarge    136        64         64          43          50       12      20
+//
+// `lead-start` is the button ladder's own `space` at every size, so it is not
+// restated - `button-size()` sets it and the leading half keeps it. Only the
+// inset facing the seam is the split button's, and only at the two smallest
+// sizes does it actually differ. `between-space` is 2dp in all five families,
+// so it is written once for the same reason.
+
+// The two halves. The trailing one *is* the menu trigger: `.menu-trigger`
+// with a target is the JS contract Menu claims, and a split button whose
+// trailing half opened nothing would be a lone button with a decoration
+// glued to it. semantics.json enforces that.
+//
+// `:where()`, not `:is()`: `:is()` takes the specificity of its heaviest
+// argument, so `a.button` would make `> $_half:hover` a class heavier than
+// `> $_trail[aria-expanded]` - and hovering an open split button would
+// collapse the seam Material says stays round for as long as the menu is up.
+//
+// `.icon-button` is deliberately not a half. It is its own component with its
+// own size ladder, insets, colours and icon sizing, all set on the element by
+// its own rule - so the container could not size it by handing it tokens, and
+// the seam here would fight the shape it already draws. Button groups refuse
+// it for the same reason. The trailing half is a `.button.menu-trigger`.
+$_lead: ":where(button:not(.icon-button), a.button):not(.menu-trigger)";
+$_trail: ".menu-trigger:not(.icon-button)";
+$_half: ":where(button:not(.icon-button), a.button)";
+
+// md.comp.split-button.<size>.{leading-button.trailing-space,
+// trailing-button.leading-space, trailing.icon-size, inner-corner,
+// inner-pressed-corner}. The hovered and pressed inner corners are the same
+// value in all five families, so one token carries both states.
+$_sizes: (
+  "xsmall": (lead-end: 10px, trail-space: 13px, trail-icon: 22px, inner: 4px, swollen: 8px),
+  "small": (lead-end: 12px, trail-space: 13px, trail-icon: 22px, inner: 4px, swollen: 12px),
+  "medium": (lead-end: 24px, trail-space: 15px, trail-icon: 26px, inner: 4px, swollen: 12px),
+  "large": (lead-end: 48px, trail-space: 29px, trail-icon: 38px, inner: 8px, swollen: 20px),
+  "xlarge": (lead-end: 64px, trail-space: 43px, trail-icon: 50px, inner: 12px, swollen: 20px),
+);
+
+// The two ladders are keyed alike and read together, so a size added to one
+// and not the other would emit `--token: ;` - a dropped declaration with no
+// error and no visible cause. Fail the build instead.
+@if map.keys($_sizes) != map.keys($button-sizes) {
+  @error "$_sizes and $button-sizes must name the same five sizes; got " +
+    map.keys($_sizes) + " against " + map.keys($button-sizes) + ".";
+}
+
+@mixin _split-size($name) {
+  $s: map.get($_sizes, $name);
+
+  --md-comp-split-button-leading-button-trailing-space: #{map.get($s, lead-end)};
+  --md-comp-split-button-trailing-button-space: #{map.get($s, trail-space)};
+  --md-comp-split-button-trailing-icon-size: #{map.get($s, trail-icon)};
+  --md-comp-split-button-inner-corner-corner-size: #{map.get($s, inner)};
+  --md-comp-split-button-inner-pressed-corner-corner-size: #{map.get($s, swollen)};
+}
+
+.split-button {
+  --md-comp-split-button-between-space: 2px;
+  --md-comp-split-button-container-shape: 9999px;
+
+  @include button-size("small");
+  @include _split-size("small");
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--md-comp-split-button-between-space);
+
+  // The size axis. Height, icon size, the leading inset and the outline width
+  // are the button ladder's, so `button-size()` sets them on the container and
+  // both halves inherit; the five values that are the split button's own are
+  // beside it. The type role cannot travel that way - `btn` states a font-size
+  // of its own - so it is set on the halves.
+  @each $name, $s in $button-sizes {
+    &.#{$name} {
+      @include button-size($name);
+      @include _split-size($name);
+
+      > #{$_half} {
+        @include typescale(map.get($s, label));
+      }
+    }
+  }
+
+  // The seam goes through a variable so that hovering, pressing or opening
+  // changes one value rather than restating `border-radius`. A shorthand under
+  // `:hover` would take the round outer corners with it, which is the bug
+  // `_button-groups.scss` records.
+  > #{$_half} {
+    --_inner: var(--md-comp-split-button-inner-corner-corner-size);
+
+    // `btn` transitions background-color and box-shadow; restating the
+    // property list replaces it wholesale, so both have to be named again or
+    // an `.elevated` split button snaps its shadow where every other elevated
+    // button eases it.
+    transition: border-radius .2s ease-out, background-color .2s ease-out,
+      box-shadow .2s ease-out;
+
+    // M3 gives hovered and pressed the same swollen corner.
+    &:hover,
+    &:active {
+      --_inner: var(--md-comp-split-button-inner-pressed-corner-corner-size);
+    }
+  }
+
+  // Logical, so the outside of the pair is the outside of the pair in RTL too:
+  // the flex row reverses and start follows it.
+  > #{$_lead} {
+    --md-comp-filled-button-trailing-space: var(--md-comp-split-button-leading-button-trailing-space);
+
+    border-start-start-radius: var(--md-comp-split-button-container-shape);
+    border-end-start-radius: var(--md-comp-split-button-container-shape);
+    border-start-end-radius: var(--_inner);
+    border-end-end-radius: var(--_inner);
+  }
+
+  > #{$_trail} {
+    // Symmetric, and narrower than a lone button's - the trailing half is a
+    // glyph in a box, not a label. The width falls out of the two insets and
+    // the icon: 48dp at the two smallest sizes, square at the three largest.
+    --md-comp-filled-button-leading-space: var(--md-comp-split-button-trailing-button-space);
+    --md-comp-filled-button-trailing-space: var(--md-comp-split-button-trailing-button-space);
+    // `_buttons.scss` sizes a button's icon from this token, so rewriting it
+    // here is the whole of the override. M3 draws the trailing glyph larger
+    // than the button ladder's icon at every size (22 against 20, up to 50
+    // against 40).
+    --md-comp-filled-button-icon-size: var(--md-comp-split-button-trailing-icon-size);
+
+    border-start-end-radius: var(--md-comp-split-button-container-shape);
+    border-end-end-radius: var(--md-comp-split-button-container-shape);
+    border-start-start-radius: var(--_inner);
+    border-end-start-radius: var(--_inner);
+
+    // Activation. md.comp.split-button.<size>.trailing.inner-selected-corner
+    // is 50%, and Compose resolves a percentage corner against the shape's
+    // *smaller* dimension - 20dp on the 48x40 half at `small`, which is what
+    // `9999px` clamps to. The two agree at every size, and the outer corners
+    // are the same 50% written the same way. So the pair reads as two
+    // separated round buttons for as long as the menu is open. Menu writes the
+    // attribute; nothing here is scripted.
+    &[aria-expanded="true"] {
+      --_inner: var(--md-comp-split-button-container-shape);
+    }
+
+    > #{$icon} {
+      transition: transform .2s ease-out;
+    }
+
+    &[aria-expanded="true"] > #{$icon} {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+// The corner morph and the spin are the only motion this component has.
+@media (prefers-reduced-motion: reduce) {
+  .split-button > #{$_half},
+  .split-button > #{$_trail} > #{$icon} {
+    transition: none;
+  }
+}

package/src/sass/components/_tabs.scss

@@ -83,10 +83,9 @@ $_tab: "> a, > .tab > a";
     cursor: pointer;
     appearance: none;
     @include typescale("title-small");
-    font-family: $font-stack;
     transition: color .2s ease, background-color .2s ease;
 
-    > i {
+    > #{$icon} {
       flex: 0 0 auto;
       font-size: var(--md-comp-primary-tab-icon-size);
       width: var(--md-comp-primary-tab-icon-size);
@@ -97,13 +96,13 @@ $_tab: "> a, > .tab > a";
 
     &:hover {
       color: var(--md-sys-color-on-surface);
-      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,
     &:focus {
       color: var(--md-sys-color-on-surface);
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("focus"), transparent);
       outline: none;
     }
 
@@ -113,12 +112,12 @@ $_tab: "> a, > .tab > a";
     }
 
     &.active:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
     }
 
     &.active:focus-visible,
     &.active:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
     }
 
     // Disabled — on the <a>. The wrapping `.tab.disabled` case is
@@ -135,7 +134,7 @@ $_tab: "> a, > .tab > a";
   // Stacked icon + label is 64dp (primary).
   &:not(.horizontal) {
     #{$_tab} {
-      &:has(> i) {
+      &:has(> #{$icon}) {
         min-height: var(--md-comp-primary-tab-with-icon-container-height);
         padding-block: 8px;
       }
@@ -210,7 +209,7 @@ $_tab: "> a, > .tab > a";
   }
 }
 
-@include bp-down("large") {
+@include bp-down("expanded") {
   .tabs {
     > :is(a, .tab) {
       flex: 1 1 0;

package/src/sass/components/_timepicker.scss

@@ -1,6 +1,6 @@
 @use "../abstracts" as *;
 
-.timepicker-container {
+:is(.timepicker-container, .time-picker-container) {
   display: flex;
   flex-direction: column;
   max-width: 325px;
@@ -13,7 +13,7 @@
 }
 
 /* Clock Digital Display */
-.timepicker-digital-display {
+:is(.timepicker-digital-display, .time-picker-digital-display) {
   width: auto;
   flex: 1 auto;
   // background-color: var(--md-sys-color-surface);
@@ -21,7 +21,7 @@
   font-weight: 300;
 }
 
-.timepicker-text-container {
+:is(.timepicker-text-container, .time-picker-text-container) {
   display: flex;
   font-size: 4rem;
   text-align: left;
@@ -40,29 +40,29 @@
   }
 }
 
-.timepicker-display-column {
+:is(.timepicker-display-column, .time-picker-display-column) {
   display: inline-flex;
 }
 
-.timepicker-display-digital-clock {
+:is(.timepicker-display-digital-clock, .time-picker-display-digital-clock) {
   flex-grow: 1;
   display: inline-flex;
 }
 
-.timepicker-input-hours-wrapper,
-.timepicker-input-minutes-wrapper {
+:is(.timepicker-input-hours-wrapper, .time-picker-input-hours-wrapper),
+:is(.timepicker-input-minutes-wrapper, .time-picker-input-minutes-wrapper) {
   width: 6.9rem;
   height: 5.75rem;
 }
 
-.timepicker-input-hours,
-.timepicker-input-minutes,
-.timepicker-span-am-pm div {
+:is(.timepicker-input-hours, .time-picker-input-hours),
+:is(.timepicker-input-minutes, .time-picker-input-minutes),
+:is(.timepicker-span-am-pm, .time-picker-span-am-pm) div {
   cursor: pointer;
 }
 
-input[type=text].timepicker-input-hours,
-input[type=text].timepicker-input-minutes {
+input[type=text]:is(.timepicker-input-hours, .time-picker-input-hours),
+input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   height: 100%;
   padding: 1.33rem .8rem;
   border: 0;
@@ -75,7 +75,7 @@ input[type=text].timepicker-input-minutes {
   }
 }
 
-.timepicker-input-divider-wrapper {
+:is(.timepicker-input-divider-wrapper, .time-picker-input-divider-wrapper) {
   width: 1.6rem;
   text-align: center;
 }
@@ -84,7 +84,7 @@ input[type=text].timepicker-input-minutes {
   color: var(--md-sys-color-on-background);
 }*/
 
-.timepicker-display-am-pm {
+:is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
   font-size: 1.3rem;
   /*position: absolute;
   top: 1rem;
@@ -92,17 +92,20 @@ input[type=text].timepicker-input-minutes {
   font-weight: 400;
 }
 
-.timepicker-span-am-pm {
+:is(.timepicker-span-am-pm, .time-picker-span-am-pm) {
   height: 5.75rem;
   max-width: 3.5rem;
 }
 
-.timepicker-container .am-btn,
-.timepicker-container .pm-btn {
+:is(.timepicker-container, .time-picker-container) .am-btn,
+:is(.timepicker-container, .time-picker-container) .pm-btn {
   width: 3.6rem;
   height: 50%;
-  padding-left: calc(var(--btn-padding) / 1.8);
-  padding-right: calc(var(--btn-padding) / 1.8);
+  // --btn-padding is a Materialize variable that no longer exists, so this
+  // was invalid at computed-value time and the padding resolved to 0 - not
+  // to the base button's inline space, which the invalid declaration still
+  // beat in the cascade. Written as the 0 it has always rendered as.
+  padding-inline: 0;
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
@@ -110,25 +113,25 @@ input[type=text].timepicker-input-minutes {
   border: 1px solid var(--md-sys-color-outline);
 }
 
-.timepicker-container .am-btn {
+:is(.timepicker-container, .time-picker-container) .am-btn {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.timepicker-container .pm-btn {
+:is(.timepicker-container, .time-picker-container) .pm-btn {
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
 /* Analog Clock Display */
-.timepicker-analog-display {
+:is(.timepicker-analog-display, .time-picker-analog-display) {
   flex: 2.5 auto;
   padding: .67rem;
   // background-color: var(--md-sys-color-surface);
 }
 
-.timepicker-plate {
+:is(.timepicker-plate, .time-picker-plate) {
   background-color: var(--md-sys-color-surface-variant);
   border-radius: 50%;
   width: 260px;
@@ -137,10 +140,14 @@ input[type=text].timepicker-input-minutes {
   position: relative;
   margin: 0 1.6rem 1.6rem 1.6rem;
   user-select: none;
+  // Dragging the clock hand is a two-dimensional gesture, so no axis is left
+  // to the page. See the note on the snackbar: under Pointer Events this is
+  // what reserves the gesture, not `preventDefault()`.
+  touch-action: none;
 }
 
-.timepicker-canvas,
-.timepicker-dial {
+:is(.timepicker-canvas, .time-picker-canvas),
+:is(.timepicker-dial, .time-picker-dial) {
   position: absolute;
   left: 0;
   right: 0;
@@ -148,11 +155,11 @@ input[type=text].timepicker-input-minutes {
   bottom: 0;
 }
 
-.timepicker-minutes {
+:is(.timepicker-minutes, .time-picker-minutes) {
   visibility: hidden;
 }
 
-.timepicker-tick {
+:is(.timepicker-tick, .time-picker-tick) {
   border-radius: 50%;
   color: var(--md-sys-color-on-background);
   line-height: 40px;
@@ -164,28 +171,28 @@ input[type=text].timepicker-input-minutes {
   font-size: 15px;
 }
 
-.timepicker-tick.active,
-.timepicker-tick:hover {
+:is(.timepicker-tick, .time-picker-tick).active,
+:is(.timepicker-tick, .time-picker-tick):hover {
   background-color: color-mix(in oklab, var(--md-sys-color-primary) 6%, transparent);
 }
 
-.timepicker-dial {
+:is(.timepicker-dial, .time-picker-dial) {
   transition: transform 350ms, opacity 350ms;
 }
 
-.timepicker-dial-out {
+:is(.timepicker-dial-out, .time-picker-dial-out) {
   opacity: 0;
 
-  &.timepicker-hours {
+  &:is(.timepicker-hours, .time-picker-hours) {
     transform: scale(1.1, 1.1);
   }
 
-  &.timepicker-minutes {
+  &:is(.timepicker-minutes, .time-picker-minutes) {
     transform: scale(.8, .8);
   }
 }
 
-.timepicker-canvas {
+:is(.timepicker-canvas, .time-picker-canvas) {
   transition: opacity 175ms;
 
   line {
@@ -195,100 +202,102 @@ input[type=text].timepicker-input-minutes {
   }
 }
 
-.timepicker-canvas-out {
+:is(.timepicker-canvas-out, .time-picker-canvas-out) {
   opacity: 0.25;
 }
 
-.timepicker-canvas-bearing {
+:is(.timepicker-canvas-bearing, .time-picker-canvas-bearing) {
   stroke: none;
   fill: var(--md-sys-color-primary);
 }
 
-.timepicker-canvas-bg {
+:is(.timepicker-canvas-bg, .time-picker-canvas-bg) {
   stroke: none;
   fill: var(--md-sys-color-primary);
 }
 
 
 /* Footer */
-.timepicker-footer {
+:is(.timepicker-footer, .time-picker-footer) {
   margin: 0 auto;
   padding: 5px 1rem;
   display: flex;
   justify-content: space-between;
 }
 
-.timepicker-clear {
+:is(.timepicker-clear, .time-picker-clear) {
   color: var(--md-sys-color-error);
 }
 
-.timepicker-close {
+:is(.timepicker-close, .time-picker-close) {
   color: var(--md-sys-color-primary);
 }
 
-.timepicker-clear,
-.timepicker-close {
+:is(.timepicker-clear, .time-picker-clear),
+:is(.timepicker-close, .time-picker-close) {
   padding: 0 20px;
 }
 
 /* Media Queries */
-@include bp-up("large") {
-  .timepicker-container {
+@include bp-up("expanded") {
+  :is(.timepicker-container, .time-picker-container) {
     width: auto;
     max-width: 620px;
   }
 
-  .timepicker-container {
+  :is(.timepicker-container, .time-picker-container) {
     flex-direction: row;
   }
 
-  .timepicker-digital-display {
+  :is(.timepicker-digital-display, .time-picker-digital-display) {
     padding: .67rem;
   }
 
-  .timepicker-text-container {
+  :is(.timepicker-text-container, .time-picker-text-container) {
     /*top: 31%;*/
     flex-direction: column;
     margin-top: 4.8rem;
     text-align: center;
   }
 
-  .timepicker-display-column {
+  :is(.timepicker-display-column, .time-picker-display-column) {
     padding: 0 3%;
   }
 
-  .timepicker-display-am-pm {
+  :is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
     margin-top: 1.1rem;
   }
 
-  .timepicker-span-am-pm {
+  :is(.timepicker-span-am-pm, .time-picker-span-am-pm) {
     display: flex;
     flex-grow: 1;
     max-width: unset;
   }
 
-  .timepicker-container .am-btn,
-  .timepicker-container .pm-btn {
+  :is(.timepicker-container, .time-picker-container) .am-btn,
+  :is(.timepicker-container, .time-picker-container) .pm-btn {
     flex-grow: 1;
     /*width: auto;*/
-    padding-left: calc(var(--btn-padding) / .565);
-    padding-right: calc(var(--btn-padding) / .565);
-    border-radius: var(--btn-border-radius);
+    // Same two dead Materialize variables as above; both declarations
+    // rendered as 0. The corner rules that follow square off the inner
+    // edges, so the outer ones are the only radius in play.
+    padding-inline: 0;
+    border-radius: 0;
     border: 1px solid var(--md-sys-color-outline);
   }
 
-  .timepicker-container .am-btn {
+  :is(.timepicker-container, .time-picker-container) .am-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .timepicker-container .pm-btn {
+  :is(.timepicker-container, .time-picker-container) .pm-btn {
     border-left: 0;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  .timepicker-plate {
+  :is(.timepicker-plate, .time-picker-plate) {
     margin-top: 1.6rem;
   }
 }