@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_buttons.scss

@@ -1,10 +1,11 @@
+@use "sass:list";
 @use "sass:map";
 @use "../abstracts" as *;
 
 // Common buttons and FABs.
 //
 // Anatomy is the HTML. A <button> (or <a class="button">) is a filled
-// common button. Put an <i> first or last for a leading/trailing icon.
+// common button. Put an icon first or last for a leading/trailing icon.
 // Icon-only is a 40dp icon button. Two independent modifier axes dress it:
 // a style (filled, tonal, outlined, elevated, text) and a size (xsmall …
 // xlarge).
@@ -28,7 +29,7 @@
 :root, :host {
   --md-comp-filled-button-container-color: var(--md-sys-color-primary);
   --md-comp-filled-button-label-text-color: var(--md-sys-color-on-primary);
-  --md-comp-filled-button-container-shape: 9999px;
+  --md-comp-filled-button-container-shape: var(--md-sys-shape-corner-full);
   @include button-size("small");
 }
 
@@ -51,7 +52,7 @@
 // specificity; `.chip .close` would make it two and shift every button rule.
 // The delete button needs no entry: `.chip .close` is already two classes, so
 // it ties the state rules and wins on order.
-$_not-btn: ".datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button";
+$_not-btn: ".datepicker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .chart-toggle, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button";
 
 // `label.button` is here for the file input: the control has to be a <label>
 // so that clicking it reaches the <input type="file"> it wraps, but it is a
@@ -71,10 +72,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, label.button";
 
   > #{$icon} {
     flex: 0 0 auto;
-    font-size: var(--md-comp-filled-button-icon-size);
-    width: var(--md-comp-filled-button-icon-size);
-    height: var(--md-comp-filled-button-icon-size);
-    line-height: var(--md-comp-filled-button-icon-size);
+    @include icon-size(var(--md-comp-filled-button-icon-size));
     overflow: hidden;
   }
 
@@ -133,21 +131,13 @@ $_btn: "button:not(#{$_not-btn}), a.button, label.button";
   }
 }
 
-// `.extra` is the pre-1.0 name for the 56dp button, which is now `.medium`.
-// It aliases the geometry and not the type role, because it never carried
-// one: a rail's FAB is `a.button.extra`, its label is label-large, and
-// `.medium`'s title-medium would grow it. Size, not size-and-label.
-//
-// It is also the FAB's marker class - `circle extra` is a FAB, and the rules
-// below reset this geometry entirely.
-:where(#{$_btn}).extra {
-  @include button-size("medium");
-}
+// `.extra` marks the FAB: `circle extra` is a FAB. On its own it no longer
+// sizes a common button; use `.medium` for the 56dp one.
 
 // Every size is corner.full already, so this only bites when a consumer has
 // themed the shape token to something squarer and wants one button back.
 :where(#{$_btn}).rounded {
-  border-radius: 9999px;
+  border-radius: var(--md-sys-shape-corner-full);
 }
 
 // Extended FAB: an icon plus a label, on its own size and colour axes.
@@ -190,41 +180,19 @@ $_extend-sizes: (
   color: var(--md-comp-extended-fab-label-text-color);
   background-color: var(--md-comp-extended-fab-container-color);
   @include z-depth("3");
-
-  &:hover {
-    @include z-depth("4");
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-extended-fab-label-text-color) state-opacity("hover"),
-      var(--md-comp-extended-fab-container-color)
-    );
-  }
-
-  &:active,
-  &:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-extended-fab-label-text-color) state-opacity("focus"),
-      var(--md-comp-extended-fab-container-color)
-    );
-  }
-
-  @include focus-visible;
+  @include btn-states(var(--md-comp-extended-fab-label-text-color), var(--md-comp-extended-fab-container-color), "4");
 
   > #{$icon} {
-    font-size: var(--md-comp-extended-fab-icon-size);
-    width: var(--md-comp-extended-fab-icon-size);
-    height: var(--md-comp-extended-fab-icon-size);
-    line-height: var(--md-comp-extended-fab-icon-size);
+    @include icon-size(var(--md-comp-extended-fab-icon-size));
   }
 
   // The size axis. Every size sets the same six tokens and its type role -
   // the geometry is written once, above, against those tokens.
   @each $name, $s in $_extend-sizes {
     &.#{$name} {
-      --md-comp-extended-fab-container-height: #{map.get($s, height)};
+      --md-comp-extended-fab-container-height: #{rem(map.get($s, height))};
       --md-comp-extended-fab-container-shape: #{map.get($s, shape)};
-      --md-comp-extended-fab-icon-size: #{map.get($s, icon)};
+      --md-comp-extended-fab-icon-size: #{rem(map.get($s, icon))};
       --md-comp-extended-fab-leading-space: #{map.get($s, space)};
       --md-comp-extended-fab-icon-label-space: #{map.get($s, gap)};
       --md-comp-extended-fab-trailing-space: #{map.get($s, space)};
@@ -257,10 +225,10 @@ $_extend-sizes: (
 // by size.
 :where(#{$_btn}).extra.circle,
 :where(#{$_btn}).large.circle {
-  --md-comp-fab-container-height: 56px;
-  --md-comp-fab-container-width: 56px;
-  --md-comp-fab-container-shape: 16px;
-  --md-comp-fab-icon-size: 24px;
+  --md-comp-fab-container-height: #{rem(56px)};
+  --md-comp-fab-container-width: #{rem(56px)};
+  --md-comp-fab-container-shape: var(--md-sys-shape-corner-large);
+  --md-comp-fab-icon-size: #{rem(24px)};
 
   display: inline-flex;
   flex: none;
@@ -278,52 +246,20 @@ $_extend-sizes: (
   appearance: none;
   vertical-align: middle;
   @include z-depth("3");
-  @include focus-visible;
+  @include btn-states(var(--md-sys-color-on-primary-container), var(--md-sys-color-primary-container), "4");
 
   > #{$icon} {
-    font-size: var(--md-comp-fab-icon-size);
-    width: var(--md-comp-fab-icon-size);
-    height: var(--md-comp-fab-icon-size);
-    line-height: var(--md-comp-fab-icon-size);
+    @include icon-size(var(--md-comp-fab-icon-size));
     color: inherit;
   }
 
-  &:hover {
-    @include z-depth("4");
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-primary-container) state-opacity("hover"),
-      var(--md-sys-color-primary-container)
-    );
-  }
-
-  &:active,
-  &:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--md-sys-color-on-primary-container) state-opacity("focus"),
-      var(--md-sys-color-primary-container)
-    );
-  }
-
   // Medium FAB: 80dp container, 26dp icon. The corner continues the size
   // ladder - 16dp default, 20dp here (corner.large-increased).
   &.medium {
-    --md-comp-fab-container-height: 80px;
-    --md-comp-fab-container-width: 80px;
-    --md-comp-fab-container-shape: 20px;
-    --md-comp-fab-icon-size: 26px;
-  }
-
-  &.halfway-fab {
-    position: absolute;
-    inset-inline-end: 24px;
-    bottom: -28px;
-
-    &.left {
-      inset-inline-end: auto;
-      inset-inline-start: 24px;
-    }
+    --md-comp-fab-container-height: #{rem(80px)};
+    --md-comp-fab-container-width: #{rem(80px)};
+    --md-comp-fab-container-shape: var(--md-sys-shape-corner-large-increased);
+    --md-comp-fab-icon-size: #{rem(26px)};
   }
 }
 
@@ -335,15 +271,19 @@ $_extend-sizes: (
 // would compile `.large.circle.large` as well, and every aliased 56dp FAB on
 // a page would silently grow to 96dp.
 :where(#{$_btn}).extra.circle.large {
-  --md-comp-fab-container-height: 96px;
-  --md-comp-fab-container-width: 96px;
-  --md-comp-fab-container-shape: 28px;
-  --md-comp-fab-icon-size: 36px;
+  --md-comp-fab-container-height: #{rem(96px)};
+  --md-comp-fab-container-width: #{rem(96px)};
+  --md-comp-fab-container-shape: var(--md-sys-shape-corner-extra-large);
+  --md-comp-fab-icon-size: #{rem(36px)};
 }
 
-:where(#{$_btn}):disabled,
-:where(#{$_btn})[disabled],
-:where(#{$_btn}).disabled {
+// The second arm matters for a focusable disabled control (`a.button.disabled`
+// with an href, or a `<button class="disabled">`): a variant's `:focus` state
+// is (0,2,0), so the plain disabled rule would lose its shadow and fill to it.
+// The third covers the FAB, whose own rule is (0,2,0) and its states (0,3,0).
+:where(#{$_btn}):is(:disabled, [disabled], .disabled),
+:where(#{$_btn}):is(:disabled, [disabled], .disabled):is(:hover, :active, :focus),
+:where(#{$_btn}):is(.extra, .large).circle:is(:disabled, [disabled], .disabled) {
   @include btn-disabled;
 }
 
@@ -376,7 +316,7 @@ $_extend-sizes: (
 // bars and rails, tabs, pagination and snackbar actions are fixed-height
 // slots. `:where()` keeps the whole rule at zero specificity; it only has to
 // come after the base rule above, whose `height` and `nowrap` it replaces.
-$_fixed: ".circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *";
+$_fixed: ".circle, .extend, .indicator-item, .chip .close, .timepicker-container :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *";
 
 :where(#{$_btn}):where(:not(#{$_fixed})) {
   height: auto;
@@ -391,3 +331,106 @@ $_fixed: ".circle, .extend, .indicator-item, .chip .close, :is(.timepicker-conta
     min-width: 0;
   }
 }
+
+$_shaped: ":where(#{$_btn}):where(:not(#{$_fixed}))";
+
+// Shape, from md.comp.button.<size>.{shape.square, pressed.container.shape}.
+// A button is round; `.square` takes the size's squared corner. A toggle
+// button, one with `aria-pressed`, swaps shape when selected: round goes
+// square and square goes round, a cue beside the colour. Pressed, any
+// common button morphs to the size's pressed corner on Material's spring.
+// Buttons in fixed slots keep their own shapes and colours: FABs, button
+// group items, the time picker's AM and PM, and the rest of `$_fixed`.
+#{$_shaped} {
+  --_shape: var(--md-comp-filled-button-container-shape);
+
+  transition:
+    background-color var(--md-sys-motion-duration-short4) ease-out,
+    box-shadow var(--md-sys-motion-duration-short4) ease-out,
+    border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: background-color, box-shadow;
+  }
+}
+
+#{$_shaped}:is(.square, [aria-pressed="true"]) {
+  --_shape: var(--md-comp-filled-button-container-shape-square);
+}
+
+#{$_shaped}.square[aria-pressed="true"] {
+  --_shape: var(--md-sys-shape-corner-full);
+}
+
+#{$_shaped}:is(.square, [aria-pressed]) {
+  border-radius: var(--_shape);
+}
+
+#{$_shaped}:not(:disabled, [disabled], .disabled):active {
+  border-radius: var(--md-comp-filled-button-pressed-container-shape);
+}
+
+// Toggle colours, from `$button-toggle-colors`. Text buttons do not toggle. A
+// disabled toggle takes the disabled colours below.
+@each $style, $states in $button-toggle-colors {
+  @each $pressed, $colors in $states {
+    $attr: "[aria-pressed]";
+    @if $pressed { $attr: '[aria-pressed="true"]'; }
+    $toggle: ".#{$style}#{$attr}";
+    @if $style == "filled" { $toggle: "#{$attr}:not(.tonal, .outlined, .elevated, .text)"; }
+
+    #{$_shaped}#{$toggle} {
+      --_toggle-container: #{list.nth($colors, 1)};
+      --_toggle-state: #{list.nth($colors, 2)};
+
+      @if $style == "outlined" and $pressed {
+        border-color: transparent;
+      }
+    }
+  }
+}
+
+#{$_shaped}[aria-pressed]:not(.text, :disabled, [disabled], .disabled) {
+  color: var(--_toggle-state);
+  background-color: var(--_toggle-container);
+
+  &:hover {
+    background-color: state-layer(var(--_toggle-state), "hover", var(--_toggle-container));
+  }
+
+  &:is(:focus, :active) {
+    background-color: state-layer(var(--_toggle-state), "focus", var(--_toggle-container));
+  }
+}
+
+// Forced colors paint every container as Canvas and drop every shadow, so a
+// filled, tonal or elevated button was a bare label and a pressed toggle, only
+// a fill, looked like an unpressed one. An outline draws the container back
+// without moving the layout, and lets the focus ring replace it; a pressed
+// toggle takes the Highlight fill Windows gives a selected control.
+//
+// Only a button that names its container gets the edge: a style, or a class
+// the hosts step aside for (`.button`, and the FAB's `.extra`, `.extend` and
+// `.large.circle`). A plain <button> is filled too, but the hosts that restyle
+// plain buttons as bare icons and labels (app bars, toolbars, rails,
+// snackbars) leave nothing to outline; the components whose plain buttons are
+// containers opt in where they are styled. The selector stays at one class so
+// the focus ring still outranks the edge.
+@media (forced-colors: active) {
+  :where(#{$_btn}):is(.filled, .tonal, .elevated, .button, .extra, .extend, :where(.large.circle)):where(:not(.outlined, .text)),
+  .icon-button:is(.filled, .tonal) {
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+  }
+
+  :where(#{$_btn}):is(:disabled, [disabled], .disabled) {
+    outline-color: GrayText;
+  }
+
+  :where(#{$_btn}, .icon-button)[aria-pressed="true"]:not(:disabled, [disabled], .disabled) {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+}

package/src/sass/components/_calendar.scss

@@ -0,0 +1,244 @@
+@use "../abstracts" as *;
+
+// Calendar. A month of days with their events, on a native <table> the page
+// renders: a <caption> with the month, a header row of weekdays, then a row
+// per week. Each day cell starts with a <time> holding the day number and
+// may hold a .calendar-events list of links or text. The page owns the dates,
+// navigation and events; the framework draws the grid.
+//
+//   td.outside            a day from the previous or next month
+//   td[aria-current=date] today
+//
+// Week and day: table.calendar.week (or .day, with one day column) is an
+// hourly grid. The header row starts with an empty <td> over the hour
+// column, then one <th scope="col"> per day holding the weekday and a <time>;
+// mark today's header with aria-current="date". Each body row is an hour: a
+// <th scope="row"> with its <time>, then a cell per day. An event in a cell
+// starts at that hour and covers one hour; set these inline to change that:
+//
+//   --md-comp-calendar-event-start     hours after the row's hour (0.5 = :30)
+//   --md-comp-calendar-event-duration  length in hours
+//
+// The placement is only visual, so the page writes each event's time in a
+// .visually-hidden span. Events that overlap in time overlap on screen, and
+// one that runs past the last hour row spills out of the table; the page
+// splits the first and ends the second at the last row.
+// ponytail: no side-by-side layout for overlapping events, add a column
+// index custom property if schedules need it.
+//
+// Year: .calendar-year lays out twelve small month tables, each a normal
+// table.calendar, in as many columns as fit. Render only the days; event
+// lists belong in the month, week or day view.
+//
+// At Compact widths days get shorter and event chips tighter; long titles
+// ellipsize rather than hide, so each event stays a visible target.
+//
+// Tokens:
+//   --md-comp-calendar-day-min-height     96px (Compact: 64px)
+//   --md-comp-calendar-outline-color      outline-variant
+//   --md-comp-calendar-event-container-color  primary-container
+//   --md-comp-calendar-event-color            on-primary-container
+//   --md-comp-calendar-hour-height        48px (week and day)
+
+table.calendar {
+  --md-comp-calendar-day-min-height: 96px;
+  --md-comp-calendar-outline-color: var(--md-sys-color-outline-variant);
+  --md-comp-calendar-event-container-color: var(--md-sys-color-primary-container);
+  --md-comp-calendar-event-color: var(--md-sys-color-on-primary-container);
+
+  inline-size: 100%;
+  margin: $element-top-margin 0 $element-bottom-margin;
+  border-collapse: collapse;
+  table-layout: fixed;
+  color: var(--md-sys-color-on-surface);
+
+  > caption {
+    padding-block-end: 12px;
+    text-align: start;
+    @include typescale("title-large");
+  }
+
+  th {
+    padding: 8px 4px;
+    border: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    text-align: center;
+    @include typescale("label-medium");
+
+    abbr {
+      text-decoration: none;
+    }
+  }
+
+  td {
+    block-size: var(--md-comp-calendar-day-min-height);
+    padding: 4px;
+    border: 1px solid var(--md-comp-calendar-outline-color);
+    vertical-align: top;
+    overflow: hidden;
+
+    > time {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-inline-size: 28px;
+      block-size: 28px;
+      border-radius: 14px;
+      @include typescale("label-large");
+    }
+
+    &.outside > time {
+      color: var(--md-sys-color-on-surface-variant);
+      opacity: 0.6;
+    }
+
+    &[aria-current="date"] > time {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+  }
+
+  .calendar-events {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 4px 0 0;
+    padding: 0;
+    list-style: none;
+
+    > li {
+      @include ellipsis;
+      padding: 2px 6px;
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      background-color: var(--md-comp-calendar-event-container-color);
+      color: var(--md-comp-calendar-event-color);
+      @include typescale("label-small");
+
+      > a {
+        color: inherit;
+        text-decoration: none;
+        @include focus-visible;
+      }
+    }
+  }
+
+  // Compact: shorter days and tighter chips. Chips keep their text, which
+  // ellipsizes, so every event stays a visible, reachable target.
+  @include bp-down("medium") {
+    --md-comp-calendar-day-min-height: 64px;
+
+    td {
+      padding: 2px;
+    }
+
+    .calendar-events > li {
+      padding: 1px 3px;
+    }
+  }
+
+  // Week and day: hour rows whose cells hold absolutely placed events, so a
+  // long event runs down into the rows below.
+  &.week,
+  &.day {
+    --md-comp-calendar-hour-height: #{rem(48px)};
+
+    thead td {
+      inline-size: rem(56px);
+      border: 0;
+    }
+
+    thead th > time {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: rem(32px);
+      block-size: rem(32px);
+      margin: 4px auto 0;
+      border-radius: 50%;
+      color: var(--md-sys-color-on-surface);
+      @include typescale("title-medium");
+    }
+
+    thead th[aria-current="date"] > time {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+
+    tbody th {
+      padding-block: 0;
+      padding-inline: 0 8px;
+      vertical-align: top;
+      text-align: end;
+      @include typescale("label-small");
+    }
+
+    tbody td {
+      position: relative;
+      block-size: var(--md-comp-calendar-hour-height);
+      padding: 0;
+      overflow: visible;
+    }
+
+    .calendar-events {
+      margin: 0;
+
+      > li {
+        position: absolute;
+        z-index: 1;
+        inset-inline: 2px;
+        inset-block-start: calc(var(--md-comp-calendar-event-start, 0) * var(--md-comp-calendar-hour-height) + 1px);
+        block-size: calc(var(--md-comp-calendar-event-duration, 1) * var(--md-comp-calendar-hour-height) - 2px);
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    thead th[aria-current="date"] > time,
+    td[aria-current="date"] > time {
+      outline: 2px solid CanvasText;
+    }
+
+    .calendar-events > li {
+      border: 1px solid CanvasText;
+    }
+  }
+}
+
+// Year: twelve small months in as many columns as fit.
+.calendar-year {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(rem(224px), 1fr));
+  gap: 24px;
+  margin: $element-top-margin 0 $element-bottom-margin;
+
+  > table.calendar {
+    margin: 0;
+
+    > caption {
+      padding-block-end: 4px;
+      @include typescale("title-small");
+    }
+
+    tr {
+      border: 0;
+    }
+
+    th {
+      padding: 4px 0;
+      @include typescale("label-small");
+    }
+
+    td {
+      block-size: auto;
+      padding: 2px 0;
+      border: 0;
+      text-align: center;
+
+      > time {
+        min-inline-size: rem(24px);
+        block-size: rem(24px);
+        @include typescale("label-small");
+      }
+    }
+  }
+}