@expressivecss/expressive 0.9.0 → 0.10.0

package/src/sass/components/_navigation-drawer.scss

@@ -1,476 +0,0 @@
-@use "../abstracts" as *;
-
-// Navigation drawer.
-//
-// Overlay is a modal <dialog> (JS wraps a <ul class="sidenav"> in
-// dialog:is(.sidenav-overlay, .navigation-drawer-overlay), or the author writes <dialog class="sidenav">).
-// showModal() puts it on the top layer; ::backdrop is the scrim; Escape
-// and a scrim tap close it. Drag writes --md-comp-nav-drawer-shift;
-// this file does the slide.
-//
-// Nested sections are native <details>/<summary>. Same `name` is an
-// accordion. The summary is a destination row with an expand_more
-// chevron; there is no Collapsible plugin.
-//
-// :is(.sidenav-fixed, .navigation-drawer-fixed) is a breakpoint, not a JS open(): at `large` the host
-// is display: contents so the list is a docked sidebar. Below that it
-// is the same overlay drawer as any other sidenav.
-//
-// Tokens:
-//   --md-comp-nav-drawer-width          300px
-//   --md-comp-nav-drawer-item-height    48px
-//   --md-comp-nav-drawer-duration       250ms
-//   --md-comp-nav-drawer-easing
-//   --md-comp-nav-drawer-shift          0px   (JS, px from fully open)
-//   --md-comp-nav-drawer-open           1     (JS, 0–1 scrim opacity)
-//   --md-comp-nav-drawer-font-size      14px
-//   --md-comp-nav-drawer-padding        16px
-//   --md-comp-nav-drawer-line-height    item height
-//   --md-comp-nav-drawer-user-view-shape
-//                                       16px, bottom corners of the header
-//   --md-comp-nav-drawer-user-view-scrim
-//                                       gradient laid over the header image
-//   --md-comp-nav-drawer-user-view-ink-color
-//                                       text colour over that scrim
-
-:root, :host {
-  --md-comp-nav-drawer-width: 300px;
-}
-
-// A drawer row is whatever element the list item holds: a destination
-// <a>, the <summary> of a nested section, the <button> a command row is
-// written with (.navigation-drawer-close), and the plain element a
-// .subheader label is. Keyed on `li > a`, the row layout disappeared the
-// moment a row stopped being an anchor - the same trap $_icon documents.
-// $_row-control is the subset that is operable: it takes the hover and
-// focus treatment, a label does not. Both are wrapped in :is() - a bare
-// comma list breaks out of its context (see $_bar in _navbar).
-$_row: ":is(li > :is(a, button, .subheader), summary)";
-$_row-control: ":is(li > :is(a, button):not(.button, .icon-button, .circle, .extra), summary)";
-
-
-dialog:is(.sidenav-overlay, .navigation-drawer-overlay),
-dialog:is(.sidenav, .navigation-drawer) {
-  --md-comp-nav-drawer-item-height: 48px;
-  --md-comp-nav-drawer-duration: 250ms;
-  --md-comp-nav-drawer-easing: ease;
-  --md-comp-nav-drawer-shift: 0px;
-  --md-comp-nav-drawer-open: 1;
-  --md-comp-nav-drawer-font-size: 14px;
-  --md-comp-nav-drawer-padding: 16px;
-  --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
-  --md-comp-nav-drawer-user-view-shape: 16px;
-  --md-comp-nav-drawer-user-view-ink-color: var(--md-ref-palette-neutral100);
-  --md-comp-nav-drawer-user-view-scrim: linear-gradient(
-    to bottom,
-    color-mix(in oklab, var(--md-sys-color-scrim) 15%, transparent) 0%,
-    color-mix(in oklab, var(--md-sys-color-scrim) 50%, transparent) 55%,
-    color-mix(in oklab, var(--md-sys-color-scrim) 80%, transparent) 100%
-  );
-
-  box-sizing: border-box;
-  width: var(--md-comp-nav-drawer-width);
-  min-width: 0;
-  max-width: none;
-  max-height: none;
-  height: 100dvh;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  inset: 0 auto 0 0;
-  overflow: hidden;
-  color: var(--md-sys-color-on-surface);
-  background-color: var(--md-sys-color-surface-container-low);
-  outline: none;
-  @include z-depth("1");
-
-  transform: translateX(calc(-100% + var(--md-comp-nav-drawer-shift)));
-  transition:
-    transform var(--md-comp-nav-drawer-duration) var(--md-comp-nav-drawer-easing),
-    display var(--md-comp-nav-drawer-duration) allow-discrete,
-    overlay var(--md-comp-nav-drawer-duration) allow-discrete;
-
-  &:modal {
-    display: flex;
-    flex-direction: column;
-    transform: translateX(var(--md-comp-nav-drawer-shift));
-  }
-
-  &.right-aligned {
-    inset: 0 0 0 auto;
-    transform: translateX(calc(100% - var(--md-comp-nav-drawer-shift)));
-
-    &:modal {
-      transform: translateX(calc(-1 * var(--md-comp-nav-drawer-shift)));
-    }
-  }
-
-  &.dragging {
-    transition: none;
-  }
-
-  &::backdrop {
-    background-color: var(--md-comp-scrim-color);
-    opacity: var(--md-comp-nav-drawer-open, 1);
-    backdrop-filter: none;
-    transition:
-      opacity var(--md-comp-nav-drawer-duration) var(--md-comp-nav-drawer-easing),
-      display var(--md-comp-nav-drawer-duration) allow-discrete,
-      overlay var(--md-comp-nav-drawer-duration) allow-discrete;
-  }
-}
-
-@starting-style {
-  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)):modal {
-    transform: translateX(-100%);
-  }
-
-  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)).right-aligned:modal {
-    transform: translateX(100%);
-  }
-
-  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)):modal::backdrop {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay),
-  dialog:is(.sidenav, .navigation-drawer) {
-    transition: none;
-
-    &::backdrop {
-      transition: none;
-    }
-  }
-}
-
-// Docked sidebar: the host must not be a box, or it would steal the
-// list's position:fixed. Closed, so it is not :modal and does not
-// lock the page.
-@include bp-up("expanded") {
-  dialog:is(.sidenav-overlay, .navigation-drawer-overlay):has(> :is(.sidenav-fixed, .navigation-drawer-fixed)):not(:modal) {
-    display: contents;
-  }
-}
-
-:is(.sidenav, .navigation-drawer) {
-  --md-comp-nav-drawer-item-height: 48px;
-  --md-comp-nav-drawer-font-size: 14px;
-  --md-comp-nav-drawer-padding: 16px;
-  --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
-  --md-comp-nav-drawer-user-view-shape: 16px;
-  --md-comp-nav-drawer-user-view-ink-color: var(--md-ref-palette-neutral100);
-  --md-comp-nav-drawer-user-view-scrim: linear-gradient(
-    to bottom,
-    color-mix(in oklab, var(--md-sys-color-scrim) 15%, transparent) 0%,
-    color-mix(in oklab, var(--md-sys-color-scrim) 50%, transparent) 55%,
-    color-mix(in oklab, var(--md-sys-color-scrim) 80%, transparent) 100%
-  );
-
-  box-sizing: border-box;
-  position: fixed;
-  width: var(--md-comp-nav-drawer-width);
-  inset: 0 auto 0 0;
-  margin: 0;
-  padding: 0;
-  height: 100dvh;
-  z-index: 999;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  user-select: none;
-  color: var(--md-sys-color-on-surface);
-  background-color: var(--md-sys-color-surface-container-low);
-  transform: translateX(-100%);
-  @include z-depth("1");
-
-  &.right-aligned {
-    inset: 0 0 0 auto;
-    transform: translateX(100%);
-  }
-
-  li {
-    list-style: none;
-    display: grid;
-    align-content: center;
-  }
-
-  // The selected destination keeps its pill under the pointer: the row's own
-  // state layer mixes into `transparent`, so letting it reach a selected row
-  // would erase the fill rather than tint it. Higher specificity than the row
-  // rule, so order does not matter.
-  li.active > :is(a, button):not(.button, .icon-button, .circle, .extra) {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-
-    &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-secondary-container) state-opacity("hover"),
-        var(--md-sys-color-secondary-container)
-      );
-    }
-
-    &:active {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-secondary-container) state-opacity("pressed"),
-        var(--md-sys-color-secondary-container)
-      );
-    }
-  }
-
-  #{$_row} {
-    display: flex;
-    align-items: center;
-    margin: 0 12px;
-    padding: 0 var(--md-comp-nav-drawer-padding);
-    height: var(--md-comp-nav-drawer-item-height);
-    overflow: hidden;
-    border-radius: 100px;
-    font-size: var(--md-comp-nav-drawer-font-size);
-    font-weight: 500;
-
-    > :is(
-      .material-symbols,
-      .material-symbols-outlined,
-      .material-symbols-rounded,
-      .material-symbols-sharp,
-      .material-icons
-    ) {
-      display: inline-flex;
-      flex-shrink: 0;
-      margin-right: 12px;
-    }
-  }
-
-  #{$_row-control} {
-    color: var(--md-sys-color-on-surface-variant);
-
-    &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-    }
-
-    &:active {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("pressed"), transparent);
-    }
-
-    @include focus-visible;
-  }
-
-  li > :is(a, button):is(.button, .circle, .extra) {
-    margin: 10px 15px;
-  }
-
-  // Every <button> is a styled button ($_btn in _buttons is `button:not(...)`),
-  // so a command row has to be stripped back to a row the same way <summary>
-  // is. The chevron below stays summary-only.
-  :is(summary, li > button:not(.button, .icon-button, .circle, .extra)) {
-    box-sizing: border-box;
-    // A <button> centres its own content, so a command row's label sat in the
-    // middle of the row while every anchor row started at the inset.
-    justify-content: flex-start;
-    border: 0;
-    background: transparent;
-    font: inherit;
-    text-align: start;
-    list-style: none;
-    cursor: pointer;
-    appearance: none;
-  }
-
-  summary {
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    &::marker {
-      content: none;
-    }
-
-    &::after {
-      content: "expand_more";
-      flex-shrink: 0;
-      margin-inline-start: auto;
-      font-family: var(--md-icon-font);
-      font-size: 24px;
-      font-style: normal;
-      font-variation-settings:
-        "FILL" var(--md-icon-fill),
-        "wght" var(--md-icon-weight),
-        "GRAD" var(--md-icon-grade),
-        "opsz" var(--md-icon-optical-size);
-      line-height: 1;
-      -webkit-font-smoothing: antialiased;
-      transition: transform var(--md-comp-nav-drawer-duration, 250ms)
-        var(--md-comp-nav-drawer-easing, ease);
-    }
-  }
-
-  details {
-    margin: 0;
-  }
-
-  details[open] > summary::after {
-    transform: rotate(180deg);
-  }
-
-  details > ul {
-    margin: 0;
-    padding: 0;
-    padding-inline-start: 10px;
-    list-style: none;
-  }
-
-  .divider {
-    margin: calc(var(--md-comp-nav-drawer-padding) * 0.5) 0 0;
-  }
-
-  .subheader {
-    cursor: initial;
-    pointer-events: none;
-    color: var(--md-sys-color-on-surface-variant);
-    font-size: var(--md-comp-nav-drawer-font-size);
-    font-weight: 500;
-    line-height: var(--md-comp-nav-drawer-line-height);
-  }
-
-  .user-view {
-    position: relative;
-    padding: calc(var(--md-comp-nav-drawer-padding) * 2) calc(var(--md-comp-nav-drawer-padding) * 2) 0;
-    margin-bottom: calc(var(--md-comp-nav-drawer-padding) * 0.5);
-
-    > a {
-      height: auto;
-      padding: 0;
-
-      &:is(:hover, :active) {
-        background-color: transparent;
-      }
-    }
-
-    // The header image is clipped by .background, so the radius goes on the
-    // clipping box rather than the <img>: the image is a child of an
-    // overflow: hidden box, and rounding the child alone leaves the box's own
-    // square corners painting behind it.
-    .background {
-      overflow: hidden;
-      position: absolute;
-      inset: 0;
-      z-index: -1;
-      border-end-start-radius: var(--md-comp-nav-drawer-user-view-shape);
-      border-end-end-radius: var(--md-comp-nav-drawer-user-view-shape);
-
-      // The name and email sit on whatever photograph the author supplied, so
-      // the scrim is what makes them legible - bottom-weighted, because that
-      // is where the text is. It rides inside .background so the rounded
-      // corners clip it too.
-      &::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: var(--md-comp-nav-drawer-user-view-scrim);
-      }
-    }
-
-    .circle,
-    .name,
-    .email {
-      display: block;
-    }
-
-    .circle {
-      height: 64px;
-      width: 64px;
-    }
-
-    .name,
-    .email {
-      font-size: var(--md-comp-nav-drawer-font-size);
-      line-height: calc(var(--md-comp-nav-drawer-line-height) * 0.5);
-    }
-
-    // Over an image the surface roles mean nothing and the link colour these
-    // spans inherit is unreadable on a mid-tone photograph. Scoped to
-    // :has(> .background): with no image the header is on the drawer surface
-    // and must keep tracking the theme, where fixed light ink would vanish.
-    &:has(> .background) {
-      .name,
-      .email {
-        color: var(--md-comp-nav-drawer-user-view-ink-color);
-      }
-    }
-
-    .name {
-      margin-top: 16px;
-      font-weight: 500;
-    }
-
-    .email {
-      padding-bottom: 16px;
-      font-weight: 400;
-    }
-  }
-}
-
-// Overlay only: the dialog is the panel, so the list fills it. When the
-// host is `display: contents` (a docked :is(.sidenav-fixed, .navigation-drawer-fixed)) this must not
-// apply — static positioning would drop the list into the header flow
-// and it would read as part of the app bar.
-dialog:is(.sidenav-overlay, .navigation-drawer-overlay):modal > :is(.sidenav, .navigation-drawer) {
-  position: static;
-  inset: auto;
-  width: 100%;
-  height: 100%;
-  transform: none;
-  box-shadow: none;
-  background-color: transparent;
-  z-index: auto;
-}
-
-:is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed) {
-  transform: none;
-
-  &.right-aligned {
-    transform: none;
-  }
-}
-
-@include bp-down("expanded") {
-  // Uninitialized / no-js: keep a fixed drawer off-canvas. Once JS wraps
-  // it, the host's display:none hides the closed drawer and this must
-  // not also hide the list inside an open dialog.
-  :is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed) {
-    transform: translateX(-100%);
-
-    &.right-aligned {
-      transform: translateX(100%);
-    }
-  }
-
-  :is(.sidenav, .navigation-drawer) .user-view {
-    padding: var(--md-comp-nav-drawer-padding) var(--md-comp-nav-drawer-padding) 0;
-  }
-}
-
-.drag-target {
-  position: fixed;
-  inset: 0 auto 0 0;
-  width: var(--md-comp-nav-drawer-drag-width, 10px);
-  height: 100%;
-  z-index: 998;
-  touch-action: pan-y;
-
-  &.right-aligned {
-    inset: 0 0 0 auto;
-  }
-}
-
-@include bp-up("expanded") {
-  .drag-target[data-fixed] {
-    display: none;
-    pointer-events: none;
-  }
-}
-

package/src/sass/components/_segmented-buttons.scss

@@ -1,188 +0,0 @@
-@use "../abstracts" as *;
-
-// Segmented buttons.
-//
-// Anatomy is the HTML. A <fieldset class="segmented-button"> is the group and
-// its <legend> names it. Each segment is an <input> and the
-// <label class="segment"> beside it, tied by id: radios make the group
-// single-select, checkboxes make it multi-select, and the input type is the
-// whole difference.
-//
-// The control is the label's *sibling*, not its child, which is the same
-// arrangement filter chips use and for the same reason: to
-// forms/_radio-buttons and forms/_checkboxes, a <label> wrapping one of those
-// inputs *is* a radio or a checkbox. They would paint a 20dp ring on the
-// input, stretch the label to a 48dp row and, for a checkbox, mask a
-// checkmark onto its ::before - none of which a segment wants, and all of
-// which outweigh a segment rule that only names two classes.
-//
-// Nothing here is scripted, and that is the point. The browser owns the
-// checked state and, for radios, the arrow-key model a single-select group
-// promises: SEMANTICS rule 2 asks that a composite keyboard contract be
-// implemented before the role is claimed, and the native one is implemented
-// by the platform. No ARIA role is declared, so none is withheld.
-//
-// Tokens follow M3, md.comp.outlined-segmented-button.* (DSP 34.0.21):
-//   container    40dp, corner.full, 1dp outline, dividers between segments
-//   segment      12dp insets, 18dp icon, 8dp icon-label space, label-large
-//   unselected   on-surface on a transparent container
-//   selected     on-secondary-container on secondary-container
-//   state layer  8% hover, 10% press (focus is the ring, not a layer)
-//   disabled     label and icon at 38%, outline at 12%
-.segmented-button {
-  --md-comp-outlined-segmented-button-container-height: 40px;
-  --md-comp-outlined-segmented-button-container-shape: 9999px;
-  --md-comp-outlined-segmented-button-outline-width: 1px;
-  --md-comp-outlined-segmented-button-outline-color: var(--md-sys-color-outline);
-  --md-comp-outlined-segmented-button-leading-space: 12px;
-  --md-comp-outlined-segmented-button-trailing-space: 12px;
-  --md-comp-outlined-segmented-button-icon-size: 18px;
-  --md-comp-outlined-segmented-button-icon-label-space: 8px;
-  --md-comp-outlined-segmented-button-label-text-color: var(--md-sys-color-on-surface);
-  --md-comp-outlined-segmented-button-selected-container-color: var(--md-sys-color-secondary-container);
-  --md-comp-outlined-segmented-button-selected-label-text-color: var(--md-sys-color-on-secondary-container);
-
-  // A <fieldset> arrives with a border, 16dp of padding and a min-width; the
-  // group's own outline replaces all three.
-  box-sizing: border-box;
-  // Equal columns across whatever inline size the group is given, which is
-  // what M3 specifies - material-web's own set is `grid-auto-columns: 1fr` on
-  // a full-width grid, not a shrink-wrapped row. Constrain the group with a
-  // width or a wrapper when it should be narrower than its container.
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  min-inline-size: 0;
-  margin: 0;
-  padding: 0;
-  background-color: transparent;
-  border: var(--md-comp-outlined-segmented-button-outline-width) solid
-    var(--md-comp-outlined-segmented-button-outline-color);
-  border-radius: var(--md-comp-outlined-segmented-button-container-shape);
-  // Squares the segments off against the pill, so the end segments' fill and
-  // their focus ring both stop at the outline.
-  overflow: hidden;
-
-  & + & {
-    margin-block-start: 24px;
-  }
-
-  // M3's anatomy has no visible group label. A set of radios is only a set
-  // because a <fieldset> says so, and a <fieldset> is only named because of
-  // its <legend> — so the legend is the accessible name and nothing else.
-  //
-  // There is deliberately no modifier that shows it. The root is both the
-  // fieldset and the grid of segments, so a legend back in flow is another
-  // column beside them; putting it above the pill would take an inner
-  // wrapper the markup does not have. A group that needs a visible label
-  // writes one before the fieldset and leaves the legend as the name.
-  > legend {
-    @include visually-hidden();
-  }
-
-  // The control carries the state and the form value; the label is the
-  // segment. Clipped rather than `display: none` so it stays focusable — and
-  // so the arrow keys still move between the radios.
-  > input {
-    @include visually-hidden();
-    border: 0;
-    appearance: none;
-  }
-
-  > .segment {
-    // Read back by the state layer below, so hover and press are one rule
-    // each rather than one per selected/unselected pair.
-    --_label-color: var(--md-comp-outlined-segmented-button-label-text-color);
-    --_container-color: transparent;
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--md-comp-outlined-segmented-button-icon-label-space);
-    margin: 0;
-    min-block-size: calc(
-      var(--md-comp-outlined-segmented-button-container-height) - 2 *
-        var(--md-comp-outlined-segmented-button-outline-width)
-    );
-    padding-inline: var(--md-comp-outlined-segmented-button-leading-space)
-      var(--md-comp-outlined-segmented-button-trailing-space);
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    color: var(--_label-color);
-    background-color: var(--_container-color);
-    transition: background-color .2s ease, color .2s ease;
-    @include typescale("label-large");
-  }
-
-  // Divider, not a border on every segment: the group's own outline is the
-  // outer edge, so only the joins are drawn. `:first-of-type` counts labels,
-  // and every segment is one — the legend and the inputs are other types.
-  > .segment:not(:first-of-type) {
-    border-inline-start: var(--md-comp-outlined-segmented-button-outline-width) solid
-      var(--md-comp-outlined-segmented-button-outline-color);
-  }
-
-  // Selected is the input's business. The adjacency is what lets the label
-  // read a state only the control has, with no class for the page to sync.
-  > input:checked + .segment {
-    --_label-color: var(--md-comp-outlined-segmented-button-selected-label-text-color);
-    --_container-color: var(--md-comp-outlined-segmented-button-selected-container-color);
-  }
-
-  > .segment > #{$icon} {
-    font-size: var(--md-comp-outlined-segmented-button-icon-size);
-    width: var(--md-comp-outlined-segmented-button-icon-size);
-    height: var(--md-comp-outlined-segmented-button-icon-size);
-    line-height: var(--md-comp-outlined-segmented-button-icon-size);
-    color: inherit;
-  }
-
-  > input:not(:disabled) + .segment {
-    &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--_label-color) state-opacity("hover"),
-        var(--_container-color)
-      );
-    }
-
-    &:active {
-      background-color: color-mix(
-        in oklab,
-        var(--_label-color) state-opacity("pressed"),
-        var(--_container-color)
-      );
-    }
-  }
-
-  // The ring is drawn inside the segment: `overflow: hidden` above would clip
-  // an outline sitting outside it, and the end segments would lose half of it
-  // to the pill's own corner.
-  > input:focus-visible + .segment {
-    @include focus-ring();
-    outline-offset: -3px;
-  }
-
-  > input:disabled + .segment {
-    --_label-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    cursor: default;
-  }
-}
-
-.segmented-button:disabled {
-  --md-comp-outlined-segmented-button-outline-color: color-mix(
-    in oklab,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
-  --md-comp-outlined-segmented-button-label-text-color: color-mix(
-    in oklab,
-    var(--md-sys-color-on-surface) 38%,
-    transparent
-  );
-
-  > .segment {
-    cursor: default;
-  }
-}