@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/_cascader.scss

@@ -0,0 +1,142 @@
+@use "../abstracts" as *;
+
+// Cascader. A .field holding a text input, its label and a ul.cascader-options
+// of nested lists, one <li data-value> per option. The script builds the
+// columns from those lists in a .cascader-popover, so the lists never show.
+//
+// The popover is a manual [popover] opened with the input as its source, so
+// CSS anchor positioning places it below the field and flips it where it
+// would not fit. Each column is a listbox; the options on the open path are
+// aria-selected, and a branch ends in a chevron.
+//
+// Tokens:
+//   --md-comp-cascader-container-color           surface-container
+//   --md-comp-cascader-container-shape           large (16px)
+//   --md-comp-cascader-column-width              rem(176px), the minimum
+//   --md-comp-cascader-max-height                rem(320px)
+//   --md-comp-cascader-option-height             rem(44px)
+//   --md-comp-cascader-selected-container-color  secondary-container
+
+$_chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 18 8 16.6l4.6-4.6L8 7.4 9.4 6l6 6z'/%3E%3C/svg%3E");
+
+.cascader-options {
+  display: none;
+}
+
+// The form control wraps the input with display: contents, so the field's
+// `input + label` rules no longer reach the label. The label floats here
+// instead while the input is focused, open or holds a path.
+.field.cascader {
+  &:has(> expressive-cascader-control > input:is(:focus, [aria-expanded="true"], :not([placeholder=" "]), :not(:placeholder-shown))) > label {
+    transform: scale(calc(12 / 16));
+    top: rem(8px);
+  }
+
+  &:has(> expressive-cascader-control > input:is(:focus, [aria-expanded="true"])) > label {
+    color: var(--input-color);
+  }
+}
+
+.cascader-popover {
+  --md-comp-cascader-container-color: var(--md-sys-color-surface-container);
+  --md-comp-cascader-container-shape: var(--md-sys-shape-corner-large);
+  --md-comp-cascader-column-width: #{rem(176px)};
+  --md-comp-cascader-max-height: #{rem(320px)};
+  --md-comp-cascader-option-height: #{rem(44px)};
+  --md-comp-cascader-selected-container-color: var(--md-sys-color-secondary-container);
+
+  box-sizing: border-box;
+  max-width: calc(100vw - 16px);
+  max-height: min(var(--md-comp-cascader-max-height), calc(100vh - 16px));
+  inset: auto;
+  margin: 4px 0;
+  padding: 0;
+  overflow-x: auto;
+  border: 0;
+  border-radius: var(--md-comp-cascader-container-shape);
+  background-color: var(--md-comp-cascader-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("2");
+  @include glass(var(--md-comp-cascader-container-color));
+
+  position-area: block-end span-inline-end;
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+
+  &:popover-open {
+    display: flex;
+  }
+
+  // Forced colors drop the shadow, so the surface keeps an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
+  > [role="listbox"] {
+    box-sizing: border-box;
+    flex: none;
+    min-width: var(--md-comp-cascader-column-width);
+    max-height: inherit;
+    margin: 0;
+    padding: 8px 0;
+    overflow-y: auto;
+    list-style: none;
+
+    + [role="listbox"] {
+      border-inline-start: 1px solid var(--md-sys-color-outline-variant);
+    }
+  }
+
+  [role="option"] {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-sizing: border-box;
+    min-height: var(--md-comp-cascader-option-height);
+    margin: 0 4px;
+    padding: 8px 12px 8px 16px;
+    border-radius: var(--md-sys-shape-corner-medium);
+    cursor: pointer;
+    @include typescale("label-large");
+
+    &:hover {
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
+    }
+
+    &[aria-selected="true"] {
+      background-color: var(--md-comp-cascader-selected-container-color);
+      color: var(--md-sys-color-on-secondary-container);
+      @include forced-colors-selected;
+    }
+
+    &:focus-visible {
+      outline: 3px solid var(--md-sys-color-secondary);
+      outline-offset: -3px;
+    }
+  }
+
+  .cascader-chevron {
+    flex: none;
+    width: rem(20px);
+    height: rem(20px);
+    margin-inline-start: auto;
+    background-color: currentColor;
+    mask: $_chevron center / contain no-repeat;
+    @include forced-colors-fill;
+
+    &:dir(rtl) {
+      scale: -1 1;
+    }
+  }
+}
+
+// Without anchor positioning the browser ignores position-area, so the
+// popover is centered in the viewport, as a native popover is.
+@supports not (anchor-name: --a) {
+  .cascader-popover {
+    inset: 0;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+  }
+}

package/src/sass/components/_chips.scss

@@ -6,8 +6,8 @@
 // elements, so everything below has to survive on any of them - hence the
 // resets.
 .chip {
-  --font-size: 14px;
-  --font-size-icon: 18px;
+  --font-size: var(--md-sys-typescale-label-large-font-size);
+  --font-size-icon: #{rem(18px)};
   --padding: 8px;
 
   color: var(--md-sys-color-on-surface-variant);
@@ -19,18 +19,16 @@
   min-width: 0;
   gap: 8px;
   margin: 0;
-  min-height: 32px;
+  min-height: rem(32px);
   height: auto;
-  // 4dp keeps wrapped lines off the edges. It is also exactly what a 24dp
-  // avatar or delete target leaves in the 32dp container, so a chip that fits
-  // on one line keeps its height.
+  // Keep a 4px inset for wrapped lines as the content boxes grow.
   padding-block: 4px;
-  padding-left: var(--padding);
-  padding-right: var(--padding);
-  font-size: var(--font-size);
+  padding-left: var(--md-comp-chip-padding, var(--padding));
+  padding-right: var(--md-comp-chip-padding, var(--padding));
+  font-size: var(--md-comp-chip-label-size, var(--font-size));
   line-height: 1.5;
   font-weight: 500;
-  border-radius: 8px;
+  border-radius: var(--md-sys-shape-corner-small);
   align-items: center;
   user-select: none;
   vertical-align: top;
@@ -41,13 +39,12 @@
   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 {
+  // Selected. `: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 {
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
+    @include forced-colors-selected;
   }
 
   @include focus-visible();
@@ -58,11 +55,7 @@
   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)
-    );
+    background-color: state-layer(var(--md-sys-color-on-surface-variant), "hover", var(--md-sys-color-surface-container-low));
   }
 }
 
@@ -75,6 +68,7 @@
 .chip-input:checked + .chip {
   background-color: var(--md-sys-color-secondary-container);
   color: var(--md-sys-color-on-secondary-container);
+  @include forced-colors-selected;
 }
 
 .chip-input:focus-visible + .chip {
@@ -91,14 +85,14 @@
 .chip > img {
   flex-shrink: 0;
   margin: 0;
-  width: 24px;
-  height: 24px;
+  width: rem(24px);
+  height: rem(24px);
   object-fit: cover;
-  border-radius: 12px;
+  border-radius: var(--md-sys-shape-corner-medium);
 }
 
-.chip > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
-  font-size: var(--font-size-icon);
+.chip > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp) {
+  font-size: var(--md-comp-chip-icon-size, var(--font-size-icon));
   color: var(--md-sys-color-on-surface-variant);
 }
 
@@ -106,8 +100,8 @@
 .chip .close {
   flex-shrink: 0;
   border-radius: 50%;
-  height: 24px;
-  width: 24px;
+  height: rem(24px);
+  width: rem(24px);
   padding: 0;
   display: grid;
   justify-content: center;
@@ -131,7 +125,7 @@
 }
 
 .chip .close:hover {
-  background-color: color-mix(in oklab, var(--md-sys-color-on-surface-variant) state-opacity("hover"), transparent);
+  background-color: state-layer(var(--md-sys-color-on-surface-variant), "hover");
 }
 
 //--------------------------
@@ -144,9 +138,16 @@
   box-shadow: none;
   margin: 0 0 8px 0;
   padding: 4px;
-  // min-height: 45px;
   outline: none;
-  transition: all .3s;
+  // An effect, not a move: the fast effects spring, which never overshoots.
+  transition:
+    border-color var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects),
+    border-width var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects),
+    box-shadow var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 
   &.focus {
     border-bottom: 1px solid var(--md-sys-color-primary);
@@ -164,19 +165,16 @@
   input:not([type]):not(.browser-default).input {
     background: none;
     border: 0;
-    color: var(--md-sys-color-on-background);
+    color: var(--md-sys-color-on-surface);
     display: inline-block;
-    font-size: 16px;
-    // height: 32px;
-    // line-height: 32px;
-    height: 32px;
+    font-size: rem(16px);
+    height: rem(32px);
     outline: 0;
     margin: 0;
     padding: 0;
-    width: 120px;
     width: fit-content;
-    min-width: 100px;
-    max-width: 200px;
+    min-width: rem(100px);
+    max-width: rem(200px);
 
     &:focus {
       border: 0;
@@ -191,20 +189,6 @@
   }
 }
 
-// Form prefix
-.prefix ~ .chips {
-  margin-left: 3rem;
-  width: 92%;
-  width: calc(100% - 3rem);
-}
-
-// Form suffix
-.suffix ~ .chips {
-  margin-right: 3rem;
-  width: 92%;
-  width: calc(100% - 3rem);
-}
-
 .chips:empty ~ label  {
   font-size: 0.8rem;
   transform: translateY(-140%);

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

@@ -11,8 +11,10 @@
 //
 // Modifiers: .stacked draws one column per row with each series on the
 // ones before it, .fade fades each column toward its base, .track draws a
-// full-height track behind each row's columns, .sparkline is a small chart
-// with no axis, grid, legend or tooltip.
+// full-height track behind each row's columns, .axis labels the y axis at
+// round values with a grid line at each, .sparkline is a small chart
+// with no axis, grid, legend or tooltip. A series header with class
+// "range" reads cells such as "12–28" and floats a column between the ends.
 //
 // Tokens:
 //   --md-comp-column-chart-height         240px (sparkline 48px)
@@ -20,14 +22,16 @@
 //   --md-comp-column-chart-shape          4px, the column's end radius
 //   --md-comp-column-chart-track-color    surface-container-highest
 //   --md-comp-column-chart-grid-color     outline-variant
+//   --md-comp-column-chart-axis-width     48px, room for the .axis labels
 //   --md-comp-column-chart-color-1..4     primary, tertiary, secondary,
 //                                         on-surface-variant
 
 @include chart("column-chart");
+@include chart-axis("column-chart");
 
 .column-chart {
   --md-comp-column-chart-column-width: 60%;
-  --md-comp-column-chart-shape: 4px;
+  --md-comp-column-chart-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-column-chart-track-color: var(--md-sys-color-surface-container-highest);
 }
 
@@ -63,17 +67,14 @@
     &.negative {
       --column-chart-ends: var(--column-chart-base) var(--column-chart-base) var(--column-chart-tip) var(--column-chart-tip);
     }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    > div > span {
-      transition: clip-path 400ms cubic-bezier(0.2, 0, 0, 1);
 
-      @starting-style {
-        clip-path: inset(var(--zero, 100%) 0 calc(100% - var(--zero, 100%)) round var(--column-chart-ends));
-      }
+    // A range floats, so both its ends are tips.
+    &.floating {
+      --column-chart-base: var(--column-chart-tip);
     }
   }
+
+  @include chart-column-motion;
 }
 
 // One column per row, rounded only at the ends of the whole stack.
@@ -119,7 +120,7 @@
   z-index: -1;
   width: calc(100% / var(--rows, 1));
   border-radius: var(--md-comp-column-chart-shape);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
   translate: -50% 0;
 }
 
@@ -131,4 +132,10 @@
   .column-chart-cursor {
     outline: 1px solid CanvasText;
   }
+
+  // The track is a fill, which forced colors paint as Canvas.
+  .column-chart.track .column-chart-columns > div {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }

package/src/sass/components/_command-palette.scss

@@ -54,7 +54,7 @@ dialog.command-palette {
 
     > li {
       margin: 0;
-      border-radius: 12px;
+      border-radius: var(--md-sys-shape-corner-medium);
       color: var(--md-sys-color-on-surface);
     }
 
@@ -87,7 +87,7 @@ dialog.command-palette {
 
       > #{$icon}:first-child {
         flex: none;
-        font-size: 20px;
+        font-size: rem(20px);
         color: var(--md-sys-color-on-surface-variant);
       }
 
@@ -132,9 +132,6 @@ dialog.command-palette {
   }
 }
 
-@media (forced-colors: active) {
-  dialog.command-palette > :is(ul, ol) > li.active {
-    outline: 2px solid Highlight;
-    outline-offset: -2px;
-  }
+dialog.command-palette > :is(ul, ol) > li.active {
+  @include forced-colors-selected;
 }

package/src/sass/components/_confetti.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // Confetti. A <canvas class="confetti"> covers its nearest positioned
 // ancestor and lets clicks through to what is under it. The Confetti script
 // draws on it. A burst over the whole viewport needs no markup; the script

package/src/sass/components/_countdown.scss

@@ -22,7 +22,7 @@
 //   --md-comp-countdown-duration   roll duration                       400ms
 //   --md-comp-countdown-easing     roll easing                         cubic-bezier(0.2, 0, 0, 1)
 
-$_timing: var(--md-comp-countdown-duration, 400ms) var(--md-comp-countdown-easing, cubic-bezier(0.2, 0, 0, 1));
+$_timing: var(--md-comp-countdown-duration, var(--md-sys-motion-duration-medium4)) var(--md-comp-countdown-easing, var(--md-sys-motion-easing-standard));
 $_tens: "";
 $_ones: "";
 @for $i from 0 through 99 {