@expressivecss/expressive 0.15.0 → 0.16.0

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

@@ -0,0 +1,192 @@
+@use "../abstracts" as *;
+
+// Organization chart. A reporting line drawn top down: a <ul class="org-chart">
+// of nested lists, one <li> per person. A person with reports holds a
+// <details open>: its <summary class="org-chart-node"> is the card and its
+// nested <ul> the reports, so the browser collapses a team. A person without
+// reports holds a <div class="org-chart-node">, or an <a> to a profile.
+//
+// A node stacks an optional .org-chart-role band, an .avatar and an
+// .org-chart-name. The nested lists carry the hierarchy to assistive
+// technology; the connector lines are drawn with pseudo-elements and say
+// nothing. Like .tree it is disclosures and links, not role="tree".
+//
+// Siblings sit side by side, so a wide chart scrolls sideways inside the
+// root list instead of the page. Right-to-left pages mirror the order.
+//
+// Tokens:
+//   --md-comp-org-chart-line-color              outline-variant
+//   --md-comp-org-chart-line-length             24px; each vertical connector
+//   --md-comp-org-chart-gap                     16px; between siblings
+//   --md-comp-org-chart-node-container-color    surface-container-high
+//   --md-comp-org-chart-node-shape              12px
+//   --md-comp-org-chart-role-container-color    primary-container
+//   --md-comp-org-chart-role-color              on-primary-container
+
+.org-chart {
+  --md-comp-org-chart-line-color: var(--md-sys-color-outline-variant);
+  --md-comp-org-chart-line-length: 24px;
+  --md-comp-org-chart-gap: 16px;
+  --md-comp-org-chart-node-container-color: var(--md-sys-color-surface-container-high);
+  --md-comp-org-chart-node-shape: var(--md-sys-shape-corner-medium);
+  --md-comp-org-chart-role-container-color: var(--md-sys-color-primary-container);
+  --md-comp-org-chart-role-color: var(--md-sys-color-on-primary-container);
+  --_line: 1px solid var(--md-comp-org-chart-line-color);
+
+  display: flex;
+  // `safe` keeps an overflowing chart's start edge reachable by scrolling.
+  justify-content: safe center;
+  margin: $element-top-margin 0 $element-bottom-margin;
+  padding: 0 0 8px;
+  overflow-x: auto;
+  list-style: none;
+
+  ul {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: var(--md-comp-org-chart-line-length) 0 0;
+    list-style: none;
+
+    // The drop from the manager down to the bar over the reports.
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 50%;
+      block-size: var(--md-comp-org-chart-line-length);
+      border-inline-start: var(--_line);
+    }
+  }
+
+  li {
+    position: relative;
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding-inline: calc(var(--md-comp-org-chart-gap) / 2);
+  }
+
+  // Each report draws half the bar on either side of its centre and a drop
+  // from the bar to its card. The outer halves of the first and last
+  // report are left off, so the bar spans exactly from end card to end card.
+  ul > li {
+    padding-block-start: var(--md-comp-org-chart-line-length);
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 0;
+      inline-size: 50%;
+      block-size: var(--md-comp-org-chart-line-length);
+      border-block-start: var(--_line);
+    }
+
+    &::before {
+      inset-inline-end: 50%;
+    }
+
+    &::after {
+      inset-inline-start: 50%;
+      border-inline-start: var(--_line);
+    }
+
+    &:first-child::before,
+    &:last-child::after {
+      border-block-start: 0;
+    }
+  }
+}
+
+.org-chart-node {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  inline-size: fit-content;
+  min-inline-size: rem(128px);
+  max-inline-size: rem(192px);
+  margin-inline: auto;
+  padding: 16px;
+  border-radius: var(--md-comp-org-chart-node-shape);
+  overflow: hidden;
+  background-color: var(--md-comp-org-chart-node-container-color);
+  color: var(--md-sys-color-on-surface);
+  text-align: center;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  @include typescale("body-medium");
+
+  &:is(a, summary) {
+    cursor: pointer;
+    @include focus-visible;
+
+    &:hover {
+      background-image: linear-gradient(
+        state-layer(var(--md-sys-color-on-surface), "hover") 0 0
+      );
+    }
+  }
+
+  // A summary would otherwise show its own triangle; the card draws a
+  // caret under the name that turns over once the team is open.
+  &:is(summary) {
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::after {
+      content: "";
+      flex: none;
+      inline-size: rem(24px);
+      block-size: rem(24px);
+      margin-block: -8px;
+      background-color: currentColor;
+      mask: $caret-down center / 100% no-repeat;
+      transition: rotate var(--md-sys-motion-duration-short3) ease-out;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
+      @include forced-colors-fill;
+    }
+  }
+
+  [open] > &::after {
+    rotate: 180deg;
+  }
+}
+
+// A band across the top of the card, so it must come first in the node.
+.org-chart-role {
+  align-self: stretch;
+  margin: -16px -16px 0;
+  padding: 8px 16px;
+  background-color: var(--md-comp-org-chart-role-container-color);
+  color: var(--md-comp-org-chart-role-color);
+  @include typescale("label-large");
+}
+
+.org-chart-name {
+  @include typescale("title-small");
+}
+
+// Forced colors drop the fills, so a border keeps each card and the band.
+@media (forced-colors: active) {
+  .org-chart-node {
+    border: 1px solid CanvasText;
+  }
+
+  .org-chart-role {
+    border-block-end: 1px solid CanvasText;
+  }
+}

package/src/sass/components/_page-footer.scss

@@ -115,7 +115,7 @@ $_footer: "footer:not(:has(> .navigation-bar:only-child))";
   @include typescale("label-large");
 
   &:hover {
-    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");
   }
 }
 

package/src/sass/components/_pagination.scss

@@ -84,17 +84,17 @@
     text-decoration: none;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: background-color 0.2s ease-out;
+    transition: background-color var(--md-sys-motion-duration-short4) ease-out;
     @include focus-visible;
 
     &:hover {
-      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");
     }
 
     // The pressed layer is the only feedback a touch tap gets: hover never
     // fires there and the tap highlight is suppressed above.
     &:active {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("pressed"), transparent);
+      background-color: state-layer(var(--md-sys-color-on-surface), "pressed");
     }
 
     // "Does this control carry a text label?" - the icon is a <span>, so a
@@ -116,21 +116,14 @@
   li:has(> [aria-current="page"]) > :is(a, button) {
     background-color: var(--md-comp-pagination-selected-color);
     color: var(--md-comp-pagination-selected-on-color);
+    @include forced-colors-selected;
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-pagination-selected-on-color) state-opacity("hover"),
-        var(--md-comp-pagination-selected-color)
-      );
+      background-color: state-layer(var(--md-comp-pagination-selected-on-color), "hover", var(--md-comp-pagination-selected-color));
     }
 
     &:active {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-pagination-selected-on-color) state-opacity("pressed"),
-        var(--md-comp-pagination-selected-color)
-      );
+      background-color: state-layer(var(--md-comp-pagination-selected-on-color), "pressed", var(--md-comp-pagination-selected-color));
     }
   }
 

package/src/sass/components/_panes.scss

@@ -150,6 +150,35 @@
   --_pane-wide-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
 }
 
+// ---------------------------------------------------------------------------
+// Resizable panes
+// ---------------------------------------------------------------------------
+// A <button class="drag-handle"> between the two panes of a list-detail or
+// supporting layout takes the spacer's place as its own column, and the
+// PaneResize behavior writes the list or supporting width token as it moves.
+// Below 840px only one pane shows, so the handle hides with the others.
+// Equal and three-pane layouts have no width token to move, so they keep
+// their own columns.
+:is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.equal, .three-pane):has(> button.drag-handle) {
+  --_pane-expanded-columns: var(--md-comp-pane-list-width) auto minmax(0, 1fr);
+  column-gap: 0;
+
+  > button.drag-handle {
+    display: var(--_pane-display);
+    align-self: center;
+    cursor: col-resize;
+    touch-action: none;
+  }
+}
+
+:is(.panes.supporting, .supporting-pane-layout):has(> button.drag-handle) {
+  --_pane-expanded-columns: minmax(0, 1fr) auto var(--md-comp-pane-supporting-width);
+
+  &:is(.start, .left) {
+    --_pane-expanded-columns: var(--md-comp-pane-supporting-width) auto minmax(0, 1fr);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Separated / Floating Appearance
 // ---------------------------------------------------------------------------
@@ -157,7 +186,7 @@
 .panes.floating,
 .pane-layout.separated,
 .pane-layout.floating {
-  --md-comp-pane-container-shape: 16px;
+  --md-comp-pane-container-shape: var(--md-sys-shape-corner-large);
   --md-comp-pane-container-color: transparent;
   gap: var(--md-comp-pane-gap);
   padding: var(--md-comp-pane-gap);
@@ -183,7 +212,7 @@
 // Coplanar / Docked Dividers (Default)
 // ---------------------------------------------------------------------------
 :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) {
-  > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
+  > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child, :has(+ button.drag-handle)) {
     border-inline-end: var(--_pane-divider) solid var(--md-comp-pane-divider-color);
   }
 }
@@ -231,30 +260,7 @@
     // See _dialog: `:only-child` cannot see a text-node label, so `.button`
     // is the opt-out for an icon action that also carries one.
     > :is(button:not(.button, .icon-button), a.button):has(> #{$icon}:only-child) {
-      flex: 0 0 48px;
-      box-sizing: border-box;
-      width: 48px;
-      height: 48px;
-      min-width: 48px;
-      padding: 0;
-      border: none;
-      border-radius: 50%;
-      background-color: transparent;
-      color: var(--md-sys-color-on-surface-variant);
-      box-shadow: none;
-
-      > #{$icon} {
-        font-size: 24px;
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
-      }
-
-      &:hover {
-        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-      }
-
-      @include focus-visible;
+      @include header-icon-action;
     }
   }
 

package/src/sass/components/_particles.scss

@@ -1,5 +1,3 @@
-@use "../abstracts" as *;
-
 // Particles. A <canvas class="particles"> covers its nearest positioned
 // ancestor and lets clicks through to what is under it. The Particles script
 // paints the dots in the canvas's `color`.

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

@@ -12,39 +12,50 @@
 // --turn PieChart sets, a fraction of a turn clockwise from the top.
 //
 // Modifiers: .donut cuts a hole and shows a <tfoot> total in it, .values
-// writes each slice's share on it, .sparkline is a small pie with no
-// legend or tooltip.
+// writes each slice's share on it, .labels writes each slice's name
+// outside it with a leader line, .sparkline is a small pie with no
+// legend, tooltip or names.
 //
 // Tokens:
 //   --md-comp-pie-chart-height       240px, the pie's diameter (sparkline 48px)
 //   --md-comp-pie-chart-hole         0.6, the donut hole's share of the diameter
+//   --md-comp-pie-chart-label-width  96px, the room each side of the pie for
+//                                    .labels, at most a quarter of the figure
 //   --md-comp-pie-chart-gap          1.5, the gap between slices in hundredths
 //                                    of the plot's width
 //   --md-comp-pie-chart-color-1..6   primary, tertiary, secondary,
-//                                    on-surface-variant, primary-container,
-//                                    tertiary-container
+//                                    on-surface-variant, then primary- and
+//                                    tertiary-container deepened toward
+//                                    on-surface
 //   --md-comp-pie-chart-on-color-1..6  on-primary, on-tertiary, on-secondary,
-//                                      surface, on-primary-container,
-//                                      on-tertiary-container; .values text
+//                                      surface, surface, surface; .values text
 
 @include chart("pie-chart");
 
 .pie-chart {
   --md-comp-pie-chart-hole: 0.6;
   --md-comp-pie-chart-gap: 1.5;
-  --md-comp-pie-chart-color-5: var(--md-sys-color-primary-container);
-  --md-comp-pie-chart-color-6: var(--md-sys-color-tertiary-container);
+  // The container roles alone are 1.3:1 on the surface in light mode and
+  // 2:1 in dark. Mixed 45% with on-surface, they keep their hue and reach
+  // 5:1 and 6.8:1, past the 3:1 a slice needs (WCAG 1.4.11), and surface
+  // text on them passes too.
+  --md-comp-pie-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
+  --md-comp-pie-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
   --md-comp-pie-chart-on-color-1: var(--md-sys-color-on-primary);
   --md-comp-pie-chart-on-color-2: var(--md-sys-color-on-tertiary);
   --md-comp-pie-chart-on-color-3: var(--md-sys-color-on-secondary);
   --md-comp-pie-chart-on-color-4: var(--md-sys-color-surface);
-  --md-comp-pie-chart-on-color-5: var(--md-sys-color-on-primary-container);
-  --md-comp-pie-chart-on-color-6: var(--md-sys-color-on-tertiary-container);
+  --md-comp-pie-chart-on-color-5: var(--md-sys-color-surface);
+  --md-comp-pie-chart-on-color-6: var(--md-sys-color-surface);
   // Where labels and the tooltip sit, as a share of the radius.
   --pie-chart-label-at: 0.62;
 
   gap: 16px;
 
+  &.labels {
+    --md-comp-pie-chart-label-width: #{rem(96px)};
+  }
+
   &.donut {
     // The middle of the ring.
     --pie-chart-label-at: calc((1 + var(--md-comp-pie-chart-hole)) / 2);
@@ -101,7 +112,7 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 400ms cubic-bezier(0.2, 0, 0, 1);
+    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
 
     @starting-style {
       opacity: 0;
@@ -127,6 +138,75 @@
   white-space: nowrap;
 }
 
+.pie-chart.labels:not(.sparkline) .pie-chart-plot {
+  // A narrow figure keeps at least half its width for the pie.
+  width: min(100% - 2 * min(var(--md-comp-pie-chart-label-width), 25%), var(--md-comp-pie-chart-height));
+  margin-block: 24px;
+}
+
+// One unit of the names' places is 1cqw, a hundredth of the pie, so the
+// leader lines can measure from it as well as the names.
+.pie-chart.labels .pie-chart-pie {
+  container-type: size;
+}
+
+// PieChart sets each name's --pie-chart-name-top, pushed apart from its
+// neighbours.
+.pie-chart-names > span {
+  // The middle of the name's near edge, 8px past the grown active slice.
+  --pie-chart-name-at: calc(50cqw + 8px);
+  --pie-chart-name-step: 1.25lh;
+  --pie-chart-angle: calc(var(--turn, 0) * 1turn);
+  // 1 for a name running rightwards, -1 for one running leftwards.
+  --pie-chart-side: 1;
+
+  position: absolute;
+  left: calc(50cqw + sin(var(--pie-chart-angle)) * var(--pie-chart-name-at));
+  top: var(--pie-chart-name-top, 50cqw);
+  translate: 0 -50%;
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("label-medium");
+  white-space: nowrap;
+
+  &.end {
+    --pie-chart-side: -1;
+
+    translate: -100% -50%;
+  }
+
+  // No wider than the room beside the pie, which is at least half the pie's
+  // width when the plot rule above caps it at a quarter of the figure.
+  > span {
+    display: block;
+    max-width: calc(min(var(--md-comp-pie-chart-label-width), 50cqw) - 8px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // The leader line runs from 4px before the name to the slice's edge on its
+  // middle, so a name pushed up or down still points at its slice. The drop
+  // is how far the name sits below that edge; it adds the top because
+  // Chromium gets x - max(…) wrong when max() has one argument.
+  &::before {
+    --pie-chart-dx: calc(sin(var(--pie-chart-angle)) * (46cqw - var(--pie-chart-name-at)) + var(--pie-chart-side) * 4px);
+    --pie-chart-drop: calc(var(--pie-chart-name-top, 50cqw) + cos(var(--pie-chart-angle)) * 46cqw - 50cqw);
+
+    content: "";
+    position: absolute;
+    top: calc(50% - 0.5px);
+    left: -4px;
+    width: hypot(var(--pie-chart-dx), var(--pie-chart-drop));
+    height: 1px;
+    transform-origin: 0 50%;
+    rotate: calc(-1 * atan2(var(--pie-chart-drop), var(--pie-chart-dx)));
+    background: var(--md-sys-color-outline-variant);
+  }
+
+  &.end::before {
+    left: calc(100% + 4px);
+  }
+}
+
 .pie-chart-tooltip {
   translate: 12px -50%;
 

package/src/sass/components/_popover.scss

@@ -10,7 +10,8 @@
 // press, stays open while the user reads or acts, and can hold links and
 // buttons. A small one behind an info button is a toggletip.
 //
-// Placement (the panel flips to the other side when it would not fit):
+// Placement (the panel flips to the other side when it would not fit, and
+// is centered in the viewport where anchor positioning is missing):
 //   (default)  below, start edges aligned
 //   .top       above, start edges aligned
 //   .start     before the button, centered on it
@@ -25,7 +26,7 @@
 
 .popover {
   --md-comp-popover-container-color: var(--md-sys-color-surface-container);
-  --md-comp-popover-shape: 12px;
+  --md-comp-popover-shape: var(--md-sys-shape-corner-medium);
   --md-comp-popover-padding: 12px 16px;
   --md-comp-popover-max-width: 320px;
   --md-comp-popover-gap: 4px;
@@ -49,9 +50,9 @@
 
   opacity: 0;
   transition:
-    opacity 150ms ease-out,
-    display 150ms allow-discrete,
-    overlay 150ms allow-discrete;
+    opacity var(--md-sys-motion-duration-short3) ease-out,
+    display var(--md-sys-motion-duration-short3) allow-discrete,
+    overlay var(--md-sys-motion-duration-short3) allow-discrete;
   @include glass(var(--md-comp-popover-container-color));
 
   &:popover-open {
@@ -110,3 +111,15 @@
     border: 1px solid CanvasText;
   }
 }
+
+// Without anchor positioning the browser ignores position-area, and the
+// panel would sit in the viewport's top-left corner, far from its button.
+// Centered instead, as a native popover is, it stays in view. :is() matches
+// .start and .end too, which set their own margin.
+@supports not (anchor-name: --a) {
+  .popover:is(*, .start, .end) {
+    inset: 0;
+    height: fit-content;
+    margin: auto;
+  }
+}