@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_tabs.scss

@@ -3,7 +3,7 @@
 // Tabs.
 //
 // Anatomy is the HTML. A <nav class="tabs"> of <a href="#panel"> is the
-// bar. A heading or <span> is the label; a leading <i> is the icon.
+// bar. A heading or <span> is the label; a leading icon is the icon.
 // .active is the selected tab. Helpers: .tabs-secondary, .horizontal,
 // .max.
 //
@@ -17,13 +17,10 @@
 //   divider     1dp outline-variant
 //   disabled    38%
 
-// Comma list of tab-link selectors. Always nest suffixes inside
-// `#{$_tab} { &.foo {} }` — interpolating `#{$_tab}.foo` only
-// attaches `.foo` to the last alternative and leaves `> a` bare
-// (same bug as the icon size classes). That compiled the disabled
-// rule as `.tabs > a, .tabs > .tab > a.disabled`, so every
-// `nav.tabs > a` got pointer-events:none and could not switch panels.
-$_tab: "> a, > .tab > a";
+// The tab link. Nest suffixes inside `#{$_tab} { &.foo {} }`: when this
+// was a comma list, `#{$_tab}.foo` attached `.foo` to the last alternative
+// only and compiled the disabled rule onto every `nav.tabs > a`.
+$_tab: "> a";
 
 .tabs {
   --md-comp-primary-tab-container-color: var(--md-sys-color-surface);
@@ -32,6 +29,10 @@ $_tab: "> a, > .tab > a";
   --md-comp-primary-tab-active-indicator-color: var(--md-sys-color-primary);
   --md-comp-primary-tab-active-indicator-height: 3px;
   --md-comp-primary-tab-active-indicator-shape: 3px 3px 0 0;
+  // The sliding indicator moves on the default spatial spring; Tabs reads
+  // these unless its duration option is set.
+  --md-comp-tabs-indicator-easing: var(--md-sys-motion-spring-default-spatial);
+  --md-comp-tabs-indicator-duration: var(--md-sys-motion-spring-default-spatial-duration);
   --md-comp-primary-tab-icon-size: 24px;
   --md-comp-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
   --md-comp-primary-tab-active-label-text-color: var(--md-sys-color-primary);
@@ -40,9 +41,7 @@ $_tab: "> a, > .tab > a";
   display: flex;
   position: relative;
   width: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @include list-reset;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
@@ -50,18 +49,6 @@ $_tab: "> a, > .tab > a";
   border-block-end: 1px solid var(--md-sys-color-outline-variant);
   scrollbar-width: none;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  > .tab {
-    display: flex;
-    flex: 0 0 auto;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
   #{$_tab} {
     box-sizing: border-box;
     position: relative;
@@ -83,45 +70,47 @@ $_tab: "> a, > .tab > a";
     cursor: pointer;
     appearance: none;
     @include typescale("title-small");
-    transition: color .2s ease, background-color .2s ease;
+    transition: color var(--md-sys-motion-duration-short4) ease, background-color var(--md-sys-motion-duration-short4) ease;
 
     > #{$icon} {
       flex: 0 0 auto;
-      font-size: var(--md-comp-primary-tab-icon-size);
-      width: var(--md-comp-primary-tab-icon-size);
-      height: var(--md-comp-primary-tab-icon-size);
-      line-height: var(--md-comp-primary-tab-icon-size);
+      @include icon-size(var(--md-comp-primary-tab-icon-size));
       color: inherit;
     }
 
     &:hover {
       color: var(--md-sys-color-on-surface);
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
     }
 
     &:focus-visible,
     &:focus {
       color: var(--md-sys-color-on-surface);
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("focus"), transparent);
+      background-color: state-layer(var(--md-sys-color-on-surface), "focus");
       outline: none;
     }
 
+    // The tint alone is faint and vanishes under forced colors. Inset, so the
+    // scrolling tab row does not clip it.
+    &:focus-visible {
+      @include focus-ring(-3px);
+    }
+
     &.active {
       color: var(--md-comp-primary-tab-active-label-text-color);
       background-color: transparent;
     }
 
     &.active:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("hover"), transparent);
+      background-color: state-layer(var(--md-sys-color-primary), "hover");
     }
 
     &.active:focus-visible,
     &.active:focus {
-      background-color: color-mix(in oklab, var(--md-sys-color-primary) state-opacity("focus"), transparent);
+      background-color: state-layer(var(--md-sys-color-primary), "focus");
     }
 
-    // Disabled — on the <a>. The wrapping `.tab.disabled` case is
-    // below; it cannot live in this block.
+    // Disabled — on the <a>.
     &.disabled,
     &[aria-disabled="true"] {
       color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
@@ -151,6 +140,7 @@ $_tab: "> a, > .tab > a";
         height: var(--md-comp-primary-tab-active-indicator-height);
         background-color: var(--md-comp-primary-tab-active-indicator-color);
         border-radius: var(--md-comp-primary-tab-active-indicator-shape);
+        @include forced-colors-fill(Highlight);
       }
     }
   }
@@ -162,16 +152,8 @@ $_tab: "> a, > .tab > a";
     background-color: var(--md-comp-primary-tab-active-indicator-color);
     border-radius: var(--md-comp-primary-tab-active-indicator-shape);
     pointer-events: none;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  > .tab.disabled > a {
-    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    background-color: transparent;
-    cursor: default;
-    pointer-events: none;
+    @include list-reset;
+    @include forced-colors-fill(Highlight);
   }
 }
 
@@ -199,7 +181,7 @@ $_tab: "> a, > .tab > a";
 
 // Equal-width tabs. Default on compact so a few destinations still fill.
 .tabs.max {
-  > :is(a, .tab) {
+  > a {
     flex: 1 1 0;
     min-width: 0;
   }
@@ -211,7 +193,7 @@ $_tab: "> a, > .tab > a";
 
 @include bp-down("expanded") {
   .tabs {
-    > :is(a, .tab) {
+    > a {
       flex: 1 1 0;
       min-width: 0;
     }
@@ -222,3 +204,24 @@ $_tab: "> a, > .tab > a";
     }
   }
 }
+
+// Swipeable tabs. The script moves the panels into this track, one panel per
+// track width, so a touch or trackpad swipe is native scrolling and the snap
+// settles it on a panel.
+.tabs-content {
+  display: flex;
+  align-items: flex-start;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+  > * {
+    flex: 0 0 100%;
+    box-sizing: border-box;
+    min-width: 0;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+}

package/src/sass/components/_timeline.scss

@@ -76,17 +76,20 @@
     }
   }
 
-  // A leading icon takes the dot's place in a 32px tonal circle.
+  // A leading icon takes the dot's place in a 32dp tonal circle, sized in rem
+  // so it grows with the icon; the text and the line clear it. A short row
+  // still leaves 8px before the next event's circle.
   > li:has(> #{$icon}:first-child) {
-    padding-inline-start: 48px;
+    min-block-size: calc(#{rem(32px)} + 8px);
+    padding-inline-start: calc(#{rem(32px)} + 16px);
 
     &::before {
       content: none;
     }
 
     &::after {
-      inset-block-start: 36px;
-      inset-inline-start: 15.5px;
+      inset-block-start: calc(#{rem(32px)} + 4px);
+      inset-inline-start: calc(#{rem(16px)} - 0.5px);
     }
 
     > #{$icon}:first-child {
@@ -96,19 +99,16 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
-      height: 32px;
+      width: rem(32px);
+      height: rem(32px);
       border-radius: 50%;
       background-color: var(--md-sys-color-secondary-container);
       color: var(--md-sys-color-on-secondary-container);
-      font-size: 18px;
+      font-size: rem(18px);
     }
   }
 }
 
-@media (forced-colors: active) {
-  .timeline > li::before {
-    forced-color-adjust: none;
-    background-color: CanvasText;
-  }
+.timeline > li::before {
+  @include forced-colors-fill;
 }

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,19 +8,15 @@
   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;
-  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;
@@ -32,64 +28,87 @@
   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;
 }
 
-:is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
+// 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);
+  }
+}
+
+.timepicker-display-am-pm {
   font-size: 1.3rem;
   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
@@ -103,28 +122,29 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   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;
+  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;
@@ -135,51 +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;
   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;
+  }
 }
 
-:is(.timepicker-dial-out, .time-picker-dial-out) {
+.timepicker-dial {
+  transition: transform var(--md-sys-motion-duration-medium3), opacity var(--md-sys-motion-duration-medium3);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.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);
@@ -188,72 +227,64 @@ 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),
-: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;
     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) {
+  .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;
     // A retired variable that always rendered as 0. Squares all four
     // corners of both buttons.
@@ -261,11 +292,12 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
     border: 1px solid var(--md-sys-color-outline);
   }
 
-  :is(.timepicker-container, .time-picker-container) .pm-btn {
-    border-left: 0;
+  // The buttons share one edge: the start of PM, which is its right in RTL.
+  .timepicker-container .pm-btn {
+    border-inline-start: 0;
   }
 
-  :is(.timepicker-plate, .time-picker-plate) {
+  .timepicker-plate {
     margin-top: 1.6rem;
   }
 }