@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/_timepicker.scss

@@ -1,6 +1,6 @@
 @use "../abstracts" as *;
 
-:is(.timepicker-container, .time-picker-container) {
+.timepicker-container {
   display: flex;
   flex-direction: column;
   max-width: 325px;
@@ -8,97 +8,107 @@
   background-color: var(--md-sys-color-inverse-on-surface);
 }
 
-.text-primary {
-  color:  var(--md-sys-color-on-primary);
-}
-
-/* Clock Digital Display */
-:is(.timepicker-digital-display, .time-picker-digital-display) {
+// Clock Digital Display
+.timepicker-digital-display {
   width: auto;
   flex: 1 auto;
-  // background-color: var(--md-sys-color-surface);
-  padding: 2rem .67rem .67rem .67rem;
+  padding: 2rem 0.67rem 0.67rem 0.67rem;
   font-weight: 300;
 }
 
-:is(.timepicker-text-container, .time-picker-text-container) {
+.timepicker-text-container {
   display: flex;
   font-size: 4rem;
   text-align: left;
   color: var(--md-sys-color-on-surface-variant);
   font-weight: 400;
-  /*position: relative;*/
   user-select: none;
   padding: 1rem 1rem 1.3rem 1rem;
 
   input[type=text]{
     height: 4rem;
     color: var(--md-sys-color-secondary);
-    border-bottom: 0px;
+    border-bottom: 0;
     font-size: 4rem;
     direction: ltr;
   }
 }
 
-:is(.timepicker-display-column, .time-picker-display-column) {
+.timepicker-display-column {
   display: inline-flex;
 }
 
-:is(.timepicker-display-digital-clock, .time-picker-display-digital-clock) {
+.timepicker-display-digital-clock {
   flex-grow: 1;
   display: inline-flex;
 }
 
-:is(.timepicker-input-hours-wrapper, .time-picker-input-hours-wrapper),
-:is(.timepicker-input-minutes-wrapper, .time-picker-input-minutes-wrapper) {
+.timepicker-input-hours-wrapper,
+.timepicker-input-minutes-wrapper,
+.timepicker-input-seconds-wrapper {
   width: 6.9rem;
   height: 5.75rem;
 }
 
-: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 {
+.timepicker-input-hours,
+.timepicker-input-minutes,
+.timepicker-input-seconds,
+.timepicker-span-am-pm div {
   cursor: pointer;
 }
 
-input[type=text]:is(.timepicker-input-hours, .time-picker-input-hours),
-input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
+input[type=text].timepicker-input-hours,
+input[type=text].timepicker-input-minutes,
+input[type=text].timepicker-input-seconds {
   height: 100%;
-  padding: 1.33rem .8rem;
+  padding: 1.33rem 0.8rem;
   border: 0;
   text-align: center;
-  color: var(--md-sys-color-on-background);
-  background-color: var(--md-sys-color-surface-variant);
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-container-highest);
 
   &:focus {
     background-color: var(--md-sys-color-primary-container);
   }
 }
 
-:is(.timepicker-input-divider-wrapper, .time-picker-input-divider-wrapper) {
+.timepicker-input-divider-wrapper {
   width: 1.6rem;
   text-align: center;
 }
 
-/*input[type=text].text-primary {
-  color: var(--md-sys-color-on-background);
-}*/
+// With `showSeconds`, three fields share the row two fill otherwise.
+.timepicker-display-digital-clock:has(.timepicker-input-seconds) {
+  // The field wrappers; the dividers narrow further below.
+  > * {
+    width: rem(60px);
+  }
+
+  .timepicker-input-divider-wrapper {
+    display: grid;
+    place-items: center;
+    width: rem(16px);
+    font-size: rem(36px);
+  }
+
+  input[type=text] {
+    padding-inline: rem(4px);
+    font-size: rem(36px);
+  }
+}
 
-:is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
+.timepicker-display-am-pm {
   font-size: 1.3rem;
-  /*position: absolute;
-  top: 1rem;
-  right: 1rem;*/
   font-weight: 400;
 }
 
-:is(.timepicker-span-am-pm, .time-picker-span-am-pm) {
+.timepicker-span-am-pm {
   height: 5.75rem;
   max-width: 3.5rem;
 }
 
-:is(.timepicker-container, .time-picker-container) .am-btn,
-:is(.timepicker-container, .time-picker-container) .pm-btn {
+.timepicker-container .am-btn,
+.timepicker-container .pm-btn {
   width: 3.6rem;
   height: 50%;
   // --btn-padding is a retired variable that no longer exists, so this
@@ -109,33 +119,32 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
-  // background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
 
-:is(.timepicker-container, .time-picker-container) .am-btn {
+.timepicker-container .am-btn {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-:is(.timepicker-container, .time-picker-container) .pm-btn {
+.timepicker-container .pm-btn {
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-/* Analog Clock Display */
-:is(.timepicker-analog-display, .time-picker-analog-display) {
+// Analog Clock Display
+.timepicker-analog-display {
   flex: 2.5 auto;
-  padding: .67rem;
-  // background-color: var(--md-sys-color-surface);
+  padding: 0.67rem;
 }
 
-:is(.timepicker-plate, .time-picker-plate) {
-  background-color: var(--md-sys-color-surface-variant);
+.timepicker-plate {
+  background-color: var(--md-sys-color-surface-container-highest);
   border-radius: 50%;
-  width: 260px;
-  height: 260px;
+  // The default dialRadius (135) doubled. JS sets the size from the option.
+  width: 270px;
+  height: 270px;
   overflow: visible;
   position: relative;
   margin: 0 1.6rem 1.6rem 1.6rem;
@@ -146,54 +155,70 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   touch-action: none;
 }
 
-:is(.timepicker-canvas, .time-picker-canvas),
-:is(.timepicker-dial, .time-picker-dial) {
+.timepicker-canvas,
+.timepicker-dial {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
 }
 
-:is(.timepicker-minutes, .time-picker-minutes) {
+.timepicker-minutes {
   visibility: hidden;
 }
 
-:is(.timepicker-tick, .time-picker-tick) {
+.timepicker-tick {
   border-radius: 50%;
-  color: var(--md-sys-color-on-background);
+  color: var(--md-sys-color-on-surface);
   line-height: 40px;
   text-align: center;
   width: 40px;
   height: 40px;
   position: absolute;
   cursor: pointer;
-  font-size: 15px;
+  font-size: rem(15px);
 }
 
-:is(.timepicker-tick, .time-picker-tick).active,
-:is(.timepicker-tick, .time-picker-tick):hover {
+.timepicker-tick.active,
+.timepicker-tick:hover {
   background-color: color-mix(in oklab, var(--md-sys-color-primary) 6%, transparent);
 }
 
-:is(.timepicker-dial, .time-picker-dial) {
-  transition: transform 350ms, opacity 350ms;
+// Outside minTime to maxTime. The plate takes the pointer, so dropping
+// pointer events only drops the hover.
+.timepicker-tick.is-disabled {
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  pointer-events: none;
+
+  @media (forced-colors: active) {
+    color: GrayText;
+  }
+}
+
+.timepicker-dial {
+  transition: transform var(--md-sys-motion-duration-medium3), opacity var(--md-sys-motion-duration-medium3);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
-:is(.timepicker-dial-out, .time-picker-dial-out) {
+.timepicker-dial-out {
   opacity: 0;
 
-  &:is(.timepicker-hours, .time-picker-hours) {
+  &.timepicker-hours {
     transform: scale(1.1, 1.1);
   }
 
-  &:is(.timepicker-minutes, .time-picker-minutes) {
-    transform: scale(.8, .8);
+  &.timepicker-minutes {
+    transform: scale(0.8, 0.8);
   }
 }
 
-:is(.timepicker-canvas, .time-picker-canvas) {
-  transition: opacity 175ms;
+.timepicker-canvas {
+  transition: opacity var(--md-sys-motion-duration-short3);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 
   line {
     stroke: var(--md-sys-color-primary);
@@ -202,102 +227,76 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   }
 }
 
-:is(.timepicker-canvas-out, .time-picker-canvas-out) {
+.timepicker-canvas-out {
   opacity: 0.25;
 }
 
-:is(.timepicker-canvas-bearing, .time-picker-canvas-bearing) {
-  stroke: none;
-  fill: var(--md-sys-color-primary);
-}
-
-:is(.timepicker-canvas-bg, .time-picker-canvas-bg) {
+.timepicker-canvas-bearing,
+.timepicker-canvas-bg {
   stroke: none;
   fill: var(--md-sys-color-primary);
 }
 
 
-/* Footer */
-:is(.timepicker-footer, .time-picker-footer) {
+// Footer
+.timepicker-footer {
   margin: 0 auto;
   padding: 5px 1rem;
   display: flex;
   justify-content: space-between;
 }
 
-:is(.timepicker-clear, .time-picker-clear) {
+.timepicker-clear {
   color: var(--md-sys-color-error);
-}
-
-:is(.timepicker-close, .time-picker-close) {
-  color: var(--md-sys-color-primary);
-}
-
-:is(.timepicker-clear, .time-picker-clear),
-:is(.timepicker-close, .time-picker-close) {
   padding: 0 20px;
 }
 
-/* Media Queries */
+// Media Queries
 @include bp-up("expanded") {
-  :is(.timepicker-container, .time-picker-container) {
+  .timepicker-container {
     width: auto;
     max-width: 620px;
-  }
-
-  :is(.timepicker-container, .time-picker-container) {
     flex-direction: row;
   }
 
-  :is(.timepicker-digital-display, .time-picker-digital-display) {
-    padding: .67rem;
+  .timepicker-digital-display {
+    padding: 0.67rem;
   }
 
-  :is(.timepicker-text-container, .time-picker-text-container) {
-    /*top: 31%;*/
+  .timepicker-text-container {
     flex-direction: column;
     margin-top: 4.8rem;
     text-align: center;
   }
 
-  :is(.timepicker-display-column, .time-picker-display-column) {
+  .timepicker-display-column {
     padding: 0 3%;
   }
 
-  :is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
+  .timepicker-display-am-pm {
     margin-top: 1.1rem;
   }
 
-  :is(.timepicker-span-am-pm, .time-picker-span-am-pm) {
+  .timepicker-span-am-pm {
     display: flex;
     flex-grow: 1;
     max-width: unset;
   }
 
-  :is(.timepicker-container, .time-picker-container) .am-btn,
-  :is(.timepicker-container, .time-picker-container) .pm-btn {
+  .timepicker-container .am-btn,
+  .timepicker-container .pm-btn {
     flex-grow: 1;
-    /*width: auto;*/
-    // Same two retired 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;
+    // A retired variable that always rendered as 0. Squares all four
+    // corners of both buttons.
     border-radius: 0;
     border: 1px solid var(--md-sys-color-outline);
   }
 
-  :is(.timepicker-container, .time-picker-container) .am-btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :is(.timepicker-container, .time-picker-container) .pm-btn {
+  .timepicker-container .pm-btn {
     border-left: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
   }
 
-  :is(.timepicker-plate, .time-picker-plate) {
+  .timepicker-plate {
     margin-top: 1.6rem;
   }
 }

package/src/sass/components/_toolbar.scss

@@ -3,7 +3,7 @@
 // Toolbars (M3 Expressive).
 //
 // Anatomy is the HTML. A <div class="toolbar"> is the bar. Direct
-// <button> / <a> children are the actions. An <i> is the icon; wrap a
+// <button> / <a> children are the actions. An icon is a .material-symbols span; wrap a
 // label in <span>. .active marks the selected action. A .filled action
 // is the emphasized control (the in-bar FAB). Helpers are only for
 // variants markup cannot express: .docked, .vibrant, .vertical, .fixed,
@@ -51,18 +51,13 @@
 // (rule 4) - and not role="toolbar" either, because that is a composite role
 // promising arrow-key navigation nothing here implements (rule 2). The <nav>
 // form is the older markup and still works.
-//
-// Wrapped in :is() so it stays one compound selector: interpolating a bare
-// comma-separated list breaks out of its context. That mistake shipped once
-// already, in $_bar.
 $_toolbar: ".toolbar";
 
-// The two axes. `.max` is an alias for docked; `.filled` is the older
-// name for vibrant. Both stay in the :is() lists.
-$_floating: "#{$_toolbar}:is(.floating, :not(.docked, .max))";
-$_docked: "#{$_toolbar}:is(.docked, .max)";
-$_standard: "#{$_toolbar}:is(.standard, :not(.vibrant, .filled))";
-$_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
+// The two axes.
+$_floating: "#{$_toolbar}:is(.floating, :not(.docked))";
+$_docked: "#{$_toolbar}.docked";
+$_standard: "#{$_toolbar}:is(.standard, :not(.vibrant))";
+$_vibrant: "#{$_toolbar}.vibrant";
 
 #{$_toolbar} {
   // Shared across all four variants. --md-comp-toolbar-color stands for
@@ -129,16 +124,17 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
     // The state layer is the content color in both color sets, which is
     // what currentColor already is on an action that has not been filled.
     &:hover:not(.active, .filled) {
-      background-color: color-mix(in oklab, currentColor state-opacity("hover"), transparent);
+      background-color: state-layer(currentColor, "hover");
     }
 
     &:active:not(.active, .filled) {
-      background-color: color-mix(in oklab, currentColor state-opacity("pressed"), transparent);
+      background-color: state-layer(currentColor, "pressed");
     }
 
     &.active {
       background-color: var(--md-comp-toolbar-selected-container-color);
       color: var(--md-comp-toolbar-selected-color);
+      @include forced-colors-selected;
     }
 
     &:disabled {
@@ -162,23 +158,15 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
   > :is(a, button).filled:not(.extra, .icon-button) {
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
-    border-radius: 16px;
+    border-radius: var(--md-sys-shape-corner-large);
     box-shadow: none;
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-primary) state-opacity("hover"),
-        var(--md-sys-color-primary)
-      );
+      background-color: state-layer(var(--md-sys-color-on-primary), "hover", var(--md-sys-color-primary));
     }
 
     &:active {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-primary) state-opacity("pressed"),
-        var(--md-sys-color-primary)
-      );
+      background-color: state-layer(var(--md-sys-color-on-primary), "pressed", var(--md-sys-color-primary));
     }
   }
 
@@ -186,7 +174,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
     height: 40px;
     min-height: 40px;
     padding: 0 24px;
-    border-radius: 20px;
+    border-radius: var(--md-sys-shape-corner-large-increased);
     width: auto;
   }
 
@@ -198,8 +186,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
     margin: 0;
   }
 
-  // Spacer between leading and trailing actions. `.max` on a *child* is the
-  // spacer; on the bar itself it is the docked alias.
+  // Spacer between leading and trailing actions: a `.max` child.
   > .max {
     flex: 1 1 auto;
     align-self: stretch;
@@ -213,7 +200,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
 // vertical bar the container is 64dp wide and arbitrarily tall, where 9999px
 // would round the long edge into an oval.
 #{$_floating} {
-  --md-comp-toolbar-container-shape: 32px;
+  --md-comp-toolbar-container-shape: var(--md-sys-shape-corner-extra-large-increased);
   --md-comp-toolbar-leading-space: 8px;
   --md-comp-toolbar-trailing-space: 8px;
   --md-comp-toolbar-external-space: 16px;
@@ -306,33 +293,34 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
     color: var(--md-comp-toolbar-floating-fab-icon-color);
     @include z-depth("1");
 
+    // A disabled FAB without .circle misses the (0,3,0) FAB disabled arm in
+    // _buttons.scss, and this block's level 1 would win at rest. aria-disabled
+    // is included so the FAB's own focus tint does not show through.
+    &#{$expressive-disabled} {
+      @include btn-disabled;
+    }
+
+    // aria-disabled keeps pointer events so hover help still reaches it.
+    &[aria-disabled="true"] {
+      pointer-events: auto;
+    }
+
+    // State arms skip a disabled FAB, which they would otherwise outrank.
     // One opacity per state. All three arms are needed, bare `:focus`
     // included: .extra.circle draws its own `:active, :focus` tint over
     // primary-container, and leaving either uncovered would flash the FAB's
     // default colour through a click on this one.
-    &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("hover"),
-        var(--md-comp-toolbar-floating-fab-container-color)
-      );
+    &:hover:not(:where(#{$expressive-disabled})) {
+      background-color: state-layer(var(--md-comp-toolbar-floating-fab-icon-color), "hover", var(--md-comp-toolbar-floating-fab-container-color));
       @include z-depth("2");
     }
 
-    &:focus {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("focus"),
-        var(--md-comp-toolbar-floating-fab-container-color)
-      );
+    &:focus:not(:where(#{$expressive-disabled})) {
+      background-color: state-layer(var(--md-comp-toolbar-floating-fab-icon-color), "focus", var(--md-comp-toolbar-floating-fab-container-color));
     }
 
-    &:active {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-toolbar-floating-fab-icon-color) state-opacity("pressed"),
-        var(--md-comp-toolbar-floating-fab-container-color)
-      );
+    &:active:not(:where(#{$expressive-disabled})) {
+      background-color: state-layer(var(--md-comp-toolbar-floating-fab-icon-color), "pressed", var(--md-comp-toolbar-floating-fab-container-color));
     }
   }
 }
@@ -351,7 +339,7 @@ $_vibrant: "#{$_toolbar}:is(.vibrant, .filled)";
 // has no rule - a bar naming it falls through to the one above.
 #{$_toolbar}.fixed {
   position: fixed;
-  z-index: 996;
+  z-index: var(--expressive-z-toolbar);
   inset: auto auto var(--md-comp-toolbar-external-space) 50%;
   transform: translateX(-50%);
 }

package/src/sass/components/_tooltip.scss

@@ -4,7 +4,7 @@
 //
 // Anatomy is the HTML. A child .tooltip is the bubble — no .tooltipped
 // required. Helpers are only for placement and the rich variant:
-// .top (default), .bottom, .left, .right, .rich / .max.
+// .top (default), .bottom, .left, .right, .rich.
 //
 // Tokens follow https://m3.material.io/components/tooltips/specs
 //   plain    inverse-surface / inverse-on-surface, 4dp, body-small
@@ -14,12 +14,13 @@
 //   gap      4dp from the activator
 //
 // The JS plugin still exists: .tooltipped + data-tooltip, AutoInit,
-// class .tooltip appended to <body>. There is no data-html / unsafeHTML.
+// class .tooltip appended to <body>, or to the shadow root its trigger lives
+// in. There is no data-html / unsafeHTML.
 
 .tooltip {
   --md-comp-plain-tooltip-container-color: var(--md-sys-color-inverse-surface);
   --md-comp-plain-tooltip-supporting-text-color: var(--md-sys-color-inverse-on-surface);
-  --md-comp-plain-tooltip-container-shape: 4px;
+  --md-comp-plain-tooltip-container-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-tooltip-anchor-gap: 4px;
 
   box-sizing: border-box;
@@ -40,7 +41,7 @@
   white-space: normal;
   overflow-wrap: anywhere;
   pointer-events: auto;
-  z-index: 2000;
+  z-index: var(--expressive-z-tooltip);
   @include glass(var(--md-comp-plain-tooltip-container-color));
 }
 
@@ -52,7 +53,7 @@
 // Only shrink-wrap typical activators. A stray .tooltip as a section
 // child must not turn the section into inline-flex (invalid <p><div>
 // gets hoisted and would match).
-:is(button, a, span, label, i):has(> .tooltip) {
+:is(button, a, span, label):has(> .tooltip) {
   display: inline-flex;
 }
 
@@ -62,7 +63,7 @@
   opacity: 0;
   inset: 0 auto auto 50%;
   transform: translate(-50%, calc(-100% - var(--md-comp-tooltip-anchor-gap))) scale(0.96);
-  transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
+  transition: opacity var(--md-sys-motion-duration-short3) ease-out, transform var(--md-sys-motion-duration-short3) ease-out, visibility 0s linear var(--md-sys-motion-duration-short3);
 }
 
 :not(body) > .tooltip.bottom {
@@ -107,9 +108,12 @@
   transform: translate(calc(100% + var(--md-comp-tooltip-anchor-gap)), -50%) scale(1);
 }
 
-// JS plugin: appended to <body>, top/left set in script. Do not use the
-// child-positioning rules; they would fight the inline transform.
-body > .tooltip {
+// JS plugin: appended to <body> or a shadow root, top/left set in script. Do
+// not use the child-positioning rules; they would fight the inline transform.
+// A shadow root's top-level elements have no parent element, so neither
+// `body >` nor `:not(body) >` reaches them; `:host >` does.
+body > .tooltip,
+:host > .tooltip {
   position: absolute;
   left: 0;
   top: 0;
@@ -119,10 +123,9 @@ body > .tooltip {
 }
 
 // Rich tooltip — title, supporting text, optional action.
-.tooltip.rich,
-.tooltip.max {
+.tooltip.rich {
   --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface-container);
-  --md-comp-rich-tooltip-container-shape: 12px;
+  --md-comp-rich-tooltip-container-shape: var(--md-sys-shape-corner-medium);
 
   display: flex;
   flex-direction: column;
@@ -179,3 +182,9 @@ body > .tooltip {
 .tooltip-content {
   min-width: 0;
 }
+
+// Transient messages are not part of the page. Important so a size or state rule that sets
+// `display` cannot bring it back; see base/_print.scss for the page itself.
+@media print {
+  .tooltip { display: none !important; }
+}