@greese/ui 0.0.0-stage → 1.0.0

package/src/components/PageTransition/PageTransition.scss

@@ -0,0 +1,168 @@
+// Page transitions (ADR 0029): greese effects played on the snapshots of a
+// view transition. React's <ViewTransition> (or a page's own
+// `view-transition-class`) names the classes below; the browser snapshots
+// the old and new page, and these rules animate `::view-transition-old`
+// (the page leaving) and `::view-transition-new` (the page arriving):
+//   greese-PageTransition                 every greese snapshot: the timing
+//   greese-PageTransition--theme          the motion theme's page roles
+//   greese-PageTransition--theme-back     the same, going back
+//   greese-PageTransition--enter-<name>   an entrance on the new snapshot
+//   greese-PageTransition--exit-<name>    an exit on the old snapshot
+//   greese-PageTransition--enter-none, --exit-none   that side doesn't animate
+//   greese-PageTransition--share          a shared element's morph (its group)
+//   greese-PageTransition--still          not animated at all
+//   greese-PageTransition--page           a whole page: only its screenful shows
+//   greese-PageTransition--left           a page that left live: its rest fades
+// Transition types (`greese-back`, …) pick between these classes in React's
+// <ViewTransition> props, which works wherever React does; the CSS doesn't
+// depend on `:active-view-transition-type()`. Entrances play the effects' own
+// `@keyframes` (Motion.scss); exits play the `leave` keyframes written here.
+// Every snapshot rule starts with `html`: the pseudo-elements belong to the
+// root, and a selector with nothing before `::view-transition-*` is tried
+// against every element at every style recalculation (it cost the homepage
+// about 15 ms of blocking time; ADR 0029). With `html`, only the root.
+// Every rule sits behind `prefers-reduced-motion: no-preference`, and under
+// `reduce` greese snapshots don't animate: React doesn't honour it for view
+// transitions, so this does.
+
+@use 'sass:map';
+@use '../../../dist/maps' as defaults;
+@use '../../styles/effect';
+
+@layer greese.utilities {
+  @media (prefers-reduced-motion: no-preference) {
+    // The page's pacing: the theme's `page-duration` and `page-ease`, or a
+    // normal duration on the library's ease out. `both`: the old snapshot holds
+    // where its exit ends until the transition is over.
+    html::view-transition-old(*.greese-PageTransition),
+    html::view-transition-new(*.greese-PageTransition) {
+      animation-fill-mode: both;
+    }
+
+    // The group (where the pair moves and resizes) keeps the same pace as its
+    // snapshots, or it would morph at the browser's own 250 ms.
+    html::view-transition-group(*.greese-PageTransition),
+    html::view-transition-old(*.greese-PageTransition),
+    html::view-transition-new(*.greese-PageTransition) {
+      animation-duration: var(
+        --greese-motion-page-duration,
+        var(--greese-duration-normal)
+      );
+      animation-timing-function: var(--greese-motion-page-ease, var(--greese-ease-out));
+    }
+
+    // The theme's page roles (`motion-defaults()`), a cross-fade without them.
+    html::view-transition-new(*.greese-PageTransition--theme) {
+      animation-name: var(--greese-motion-page, greese-fade-in);
+    }
+
+    html::view-transition-old(*.greese-PageTransition--theme) {
+      animation-name: var(--greese-motion-page-exit, greese-fade-out);
+    }
+
+    html::view-transition-new(*.greese-PageTransition--theme-back) {
+      animation-name: var(
+        --greese-motion-page-back,
+        var(--greese-motion-page, greese-fade-in)
+      );
+    }
+
+    html::view-transition-old(*.greese-PageTransition--theme-back) {
+      animation-name: var(
+        --greese-motion-page-back-exit,
+        var(--greese-motion-page-exit, greese-fade-out)
+      );
+    }
+
+    // A named effect, after the theme's rules so it wins where both are set.
+    @each $name, $plan in defaults.$effects {
+      @if map.get($plan, enter) {
+        html::view-transition-new(*.greese-PageTransition--enter-#{$name}) {
+          animation-name: greese-#{$name};
+        }
+      } @else {
+        html::view-transition-old(*.greese-PageTransition--exit-#{$name}) {
+          animation-name: greese-#{$name};
+        }
+      }
+    }
+
+    // One side still while the other plays (`enter: 'none'` or `exit: 'none'`).
+    html::view-transition-new(*.greese-PageTransition--enter-none),
+    html::view-transition-old(*.greese-PageTransition--exit-none) {
+      animation-name: none;
+    }
+
+    // A shared element morphs from where it was to where it is: its group
+    // moves and resizes, at the theme's `share-duration` and `share-ease`.
+    html::view-transition-group(*.greese-PageTransition--share) {
+      animation-duration: var(
+        --greese-motion-share-duration,
+        var(--greese-motion-page-duration, var(--greese-duration-normal))
+      );
+      animation-timing-function: var(
+        --greese-motion-share-ease,
+        var(--greese-motion-page-ease, var(--greese-ease-out))
+      );
+    }
+
+    // A page left live: its exit has played on the real page, so what's left
+    // of it (backgrounds, anything that isn't a member) fades beneath the new
+    // page's entrance. After the effects, so it wins over any exit it's
+    // joined with.
+    html::view-transition-old(*.greese-PageTransition--left) {
+      animation-name: greese-fade-out;
+    }
+
+    // A whole page is snapshotted whole, however tall, and an effect sized by
+    // its box (a pocket's 100%, a pop about its middle, a flip's axis) would
+    // play mostly off screen. Its snapshots show only the screenful in view,
+    // so the effects are sized by that: the new page from its top (it's
+    // scrolled there first), the old one from where the screen was on it
+    // (`--greese-page-scrolled`, which usePageNavigate measures at the click).
+    // Hidden from behind: a page turned half over (`flipOver…`) shows the
+    // other page on its back, not its own mirror image.
+    html::view-transition-old(*.greese-PageTransition--page),
+    html::view-transition-new(*.greese-PageTransition--page) {
+      backface-visibility: hidden;
+      block-size: min(100%, 100dvh);
+      object-fit: none;
+      object-position: 50% 0;
+    }
+
+    html::view-transition-old(*.greese-PageTransition--page) {
+      inset-block-start: var(--greese-page-scrolled, 0);
+      object-position: 50% calc(-1 * var(--greese-page-scrolled, 0px));
+    }
+
+    // The exits' keyframes, from rest to where each ends (src/effects.ts).
+    @each $name, $plan in defaults.$effects {
+      @if not map.get($plan, enter) {
+        @include effect.keyframes($name, $plan, $leave: true);
+      }
+    }
+  }
+
+  // Kept in place: a header or footer the page change leaves alone, and every
+  // greese snapshot under reduced motion, where the page simply changes.
+  html::view-transition-group(*.greese-PageTransition--still),
+  html::view-transition-old(*.greese-PageTransition--still),
+  html::view-transition-new(*.greese-PageTransition--still) {
+    animation: none;
+  }
+
+  // And on top: the page moves beneath what stays, as it scrolls beneath a
+  // sticky header, rather than over it. Groups otherwise stack in the
+  // document's order, which puts the page over a header that comes first.
+  html::view-transition-group(*.greese-PageTransition--still) {
+    z-index: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html::view-transition-group(*.greese-PageTransition),
+    html::view-transition-old(*.greese-PageTransition),
+    html::view-transition-new(*.greese-PageTransition) {
+      animation: none;
+    }
+  }
+}

package/src/components/Pagination/Pagination.scss

@@ -0,0 +1,55 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Pagination-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-1);
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    .greese-Button {
+      min-inline-size: 2rem;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  .greese-Pagination-step {
+    padding-inline: var(--greese-space-2);
+
+    > svg,
+    .greese-Button-icon > svg {
+      inline-size: 1.1em;
+      block-size: 1.1em;
+    }
+  }
+
+  // The chevron points to the inline start; flip it for "next", and mirror
+  // both in right-to-left.
+  .greese-Pagination-step--next svg {
+    scale: -1 1;
+  }
+
+  .greese-Pagination:dir(rtl) .greese-Pagination-step svg {
+    scale: -1 1;
+  }
+
+  .greese-Pagination:dir(rtl) .greese-Pagination-step--next svg {
+    scale: 1;
+  }
+
+  .greese-Pagination-ellipsis {
+    padding-inline: var(--greese-space-1);
+    color: var(--greese-color-fg-muted);
+  }
+
+  // Phones: only previous, the current page and next.
+  @include mixins.down(sm) {
+    .greese-Pagination-page:not(.greese-Pagination-page--current),
+    .greese-Pagination-ellipsis {
+      display: none;
+    }
+  }
+}

package/src/components/Popover/Popover.scss

@@ -0,0 +1,13 @@
+@use '../../styles/floating';
+
+@layer greese.components {
+  .greese-Popover {
+    @include floating.anchored;
+    @include floating.surface;
+    @include floating.enter-exit(':popover-open', 0 -0.25rem, popover);
+
+    inline-size: max-content;
+    max-inline-size: min(22rem, 100vw - 2 * var(--greese-space-3));
+    padding: var(--greese-space-4);
+  }
+}

package/src/components/Progress/Progress.scss

@@ -0,0 +1,126 @@
+@use '../../styles/mixins';
+
+$sizes: (
+  xs: 0.125rem,
+  sm: 0.25rem,
+  md: 0.5rem,
+  lg: 0.75rem,
+  xl: 1rem,
+);
+
+/* stylelint-disable selector-no-vendor-prefix */
+
+@layer greese.components {
+  .greese-Progress {
+    @include mixins.component-root;
+
+    display: block;
+    inline-size: 100%;
+    block-size: var(--greese-progress-height);
+    overflow: hidden;
+    color: var(--greese-color-primary);
+    background-color: var(--greese-color-track);
+    border: 0;
+    border-radius: var(--greese-corner-pill);
+    appearance: none;
+
+    &::-webkit-progress-bar {
+      background-color: var(--greese-color-track);
+    }
+
+    &::-webkit-progress-value {
+      background-color: var(--greese-color-primary);
+      border-radius: var(--greese-corner-pill);
+      transition: inline-size var(--greese-duration-normal) var(--greese-easing-standard);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--greese-color-primary);
+      border-radius: var(--greese-corner-pill);
+    }
+
+    // Indeterminate: a band sweeping across.
+    &:indeterminate {
+      background-image: linear-gradient(
+        to right,
+        transparent 0%,
+        var(--greese-color-primary) 50%,
+        transparent 100%
+      );
+      background-repeat: no-repeat;
+      background-size: 40% 100%;
+
+      @include mixins.motion-safe {
+        animation: greese-progress-sweep 1.2s var(--greese-easing-standard) infinite;
+      }
+    }
+
+    &:indeterminate::-webkit-progress-bar {
+      background-color: transparent;
+    }
+
+    &:indeterminate::-moz-progress-bar {
+      background-color: transparent;
+    }
+  }
+
+  // Loading: the filled part striped on the diagonal, in the value's and the
+  // track's colors, running toward the end. A stripe pair is a square tile
+  // twice the bar's height, so the stripes stay at 45° at any thickness.
+  .greese-Progress--loading {
+    --greese-progress-stripes: linear-gradient(
+      -45deg,
+      var(--greese-color-primary) 25%,
+      var(--greese-color-track) 25% 50%,
+      var(--greese-color-primary) 50% 75%,
+      var(--greese-color-track) 75%
+    );
+    --greese-progress-tile: max(0.5rem, 2 * var(--greese-progress-height));
+
+    &::-webkit-progress-value {
+      background-image: var(--greese-progress-stripes);
+      background-size: var(--greese-progress-tile) var(--greese-progress-tile);
+    }
+
+    &::-moz-progress-bar {
+      background-image: var(--greese-progress-stripes);
+      background-size: var(--greese-progress-tile) var(--greese-progress-tile);
+    }
+
+    @include mixins.motion-safe {
+      &::-webkit-progress-value {
+        animation: greese-progress-stripes 0.8s linear infinite;
+      }
+
+      &::-moz-progress-bar {
+        animation: greese-progress-stripes 0.8s linear infinite;
+      }
+    }
+  }
+
+  @keyframes greese-progress-stripes {
+    from {
+      background-position: 0 0;
+    }
+
+    to {
+      background-position: var(--greese-progress-tile) 0;
+    }
+  }
+
+  @each $size, $value in $sizes {
+    .greese-Progress--#{$size} {
+      --greese-progress-height: #{$value};
+    }
+  }
+
+  @keyframes greese-progress-sweep {
+    from {
+      background-position: -60% 0;
+    }
+
+    to {
+      background-position: 160% 0;
+    }
+  }
+}

package/src/components/RadialProgress/RadialProgress.scss

@@ -0,0 +1,65 @@
+@use '../../styles/mixins';
+
+// Registered so the ring animates between values. Read only by the ring
+// itself (::before), so nothing inherits it.
+@property --greese-radialprogress-angle {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+@layer greese.components {
+  // A conic-gradient disc, masked to a ring.
+  .greese-RadialProgress {
+    @include mixins.component-root;
+
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    inline-size: var(--greese-radialprogress-size, 4rem);
+    aspect-ratio: 1;
+    font-size: calc(var(--greese-radialprogress-size, 4rem) / 4.5);
+    font-weight: var(--greese-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--greese-color-fg);
+
+    &::before {
+      --greese-radialprogress-angle: calc(var(--greese-radialprogress-value) * 1%);
+
+      position: absolute;
+      inset: 0;
+      content: '';
+      background: conic-gradient(
+        var(--greese-color-primary) var(--greese-radialprogress-angle),
+        var(--greese-color-track) 0
+      );
+      border-radius: 50%;
+
+      // Only the mask's alpha matters; the color is any opaque one.
+      mask: radial-gradient(
+        farthest-side,
+        transparent calc(100% - var(--greese-radialprogress-thickness, 10%) - 0.5px),
+        var(--greese-color-fg) calc(100% - var(--greese-radialprogress-thickness, 10%))
+      );
+      transition: --greese-radialprogress-angle var(--greese-duration-slow)
+        var(--greese-easing-standard);
+    }
+  }
+
+  .greese-RadialProgress-label {
+    position: relative;
+  }
+
+  .greese-RadialProgress--indeterminate::before {
+    @include mixins.motion-safe {
+      animation: greese-radialprogress-spin 1s linear infinite;
+    }
+  }
+
+  @keyframes greese-radialprogress-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+}

package/src/components/Radio/Radio.scss

@@ -0,0 +1,36 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Radio-input {
+    @include mixins.touch-target;
+
+    position: relative;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    margin: 0;
+    cursor: pointer;
+    background-color: var(--greese-color-canvas);
+    border: 1.5px solid var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-round);
+    appearance: none;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    transition:
+      border-color var(--greese-duration-fast) var(--greese-easing-standard),
+      border-width var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring;
+
+    // A thick primary ring around the canvas centre reads as the dot.
+    &:checked {
+      border: 5px solid var(--greese-color-primary);
+    }
+
+    &[aria-invalid='true']:not(:checked) {
+      border-color: var(--greese-color-negative);
+    }
+  }
+}

package/src/components/Rating/Rating.scss

@@ -0,0 +1,121 @@
+@use '../../styles/mixins';
+
+$sizes: (
+  xs: 0.75rem,
+  sm: 1.125rem,
+  md: 1.625rem,
+  lg: 2rem,
+  xl: 3rem,
+);
+
+@layer greese.components {
+  .greese-Rating {
+    @include mixins.component-root;
+
+    --greese-rating-size: 1.5rem;
+    --greese-rating-on: var(--greese-color-warning);
+    --greese-rating-off: var(--greese-color-border-strong);
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--greese-space-1);
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  @each $size, $value in $sizes {
+    .greese-Rating--#{$size} {
+      --greese-rating-size: #{$value};
+    }
+  }
+
+  // The stars: an empty row with a filled row over it, clipped to the value
+  // (--greese-rating-fill), so any fraction draws exactly.
+  .greese-Rating-items,
+  .greese-Rating-stars {
+    position: relative;
+    display: inline-grid;
+    inline-size: max-content;
+
+    > * {
+      grid-area: 1 / 1;
+    }
+  }
+
+  .greese-Rating-items {
+    cursor: pointer;
+    touch-action: none;
+
+    &:has(.greese-Rating-input:focus-visible) {
+      border-radius: var(--greese-corner-inset);
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+  }
+
+  // At least 44px tall to touch: the slices share the stars' cell, so they
+  // stretch over this padding too.
+  @media (pointer: coarse) {
+    .greese-Rating-items > .greese-Rating-stars {
+      padding-block: max(0px, (44px - var(--greese-rating-size)) / 2);
+    }
+  }
+
+  .greese-Rating:disabled .greese-Rating-items {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .greese-Rating-empty,
+  .greese-Rating-filled {
+    display: inline-flex;
+  }
+
+  .greese-Rating-filled {
+    clip-path: inset(0 calc(100% - var(--greese-rating-fill)) 0 0);
+    transition: clip-path var(--greese-duration-fast) var(--greese-easing-standard);
+
+    &:dir(rtl) {
+      clip-path: inset(0 0 0 calc(100% - var(--greese-rating-fill)));
+    }
+
+    .greese-Rating-icon {
+      color: var(--greese-rating-on);
+    }
+  }
+
+  .greese-Rating-icon {
+    display: inline-flex;
+    inline-size: var(--greese-rating-size);
+    block-size: var(--greese-rating-size);
+    padding: 0.0625rem;
+    color: var(--greese-rating-off);
+
+    > svg {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+
+  // One slice per choice over the stars: clicking a slice chooses it.
+  .greese-Rating-choices {
+    display: flex;
+  }
+
+  .greese-Rating-choice {
+    position: relative;
+    flex: 1;
+  }
+
+  .greese-Rating-input {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+}

package/src/components/ScrollSpy/ScrollSpy.scss

@@ -0,0 +1,6 @@
+@layer greese.components {
+  // The link to the section the page is on (ScrollSpy sets the attribute).
+  .greese-ScrollSpy [aria-current='location'] {
+    color: var(--greese-color-primary);
+  }
+}

package/src/components/SegmentedControl/SegmentedControl.scss

@@ -0,0 +1,107 @@
+@use 'sass:map';
+@use '../../styles/mixins';
+@use '../../styles/controls';
+
+@layer greese.components {
+  .greese-SegmentedControl {
+    @include mixins.component-root;
+
+    display: inline-block;
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+
+    > legend {
+      padding: 0;
+      margin-block-end: var(--greese-space-2);
+    }
+  }
+
+  .greese-SegmentedControl--full {
+    display: block;
+  }
+
+  .greese-SegmentedControl-track {
+    display: flex;
+    gap: 2px;
+    padding: 3px;
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-control);
+  }
+
+  // Sizes
+  @each $size, $spec in controls.$sizes {
+    .greese-SegmentedControl--size-#{$size} {
+      --greese-button-height: #{map.get($spec, height)};
+      --greese-button-padding: #{map.get($spec, padding)};
+
+      font-size: map.get($spec, font);
+    }
+  }
+
+  .greese-Segment {
+    position: relative;
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--greese-segment-height);
+    padding-inline: var(--greese-space-3);
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    border-radius: calc(var(--greese-corner-control) - 3px);
+    transition:
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+    }
+
+    // The chosen segment's fill and edge are hooks a theme reassigns (a color
+    // variant outlines it).
+    &:has(:checked) {
+      color: var(--greese-color-fg);
+      background-color: var(
+        --greese-segment-current-bg,
+        var(--greese-color-surface-overlay)
+      );
+      box-shadow: var(--greese-segment-current-edge, var(--greese-shadow-sm));
+    }
+
+    &:has(:focus-visible) {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 1px;
+    }
+
+    &:has(:disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    @media (pointer: coarse) {
+      min-block-size: 2.75rem;
+    }
+  }
+
+  // The real radio covers the segment: it takes clicks, taps and focus.
+  // Icons and text centered as boxes: an inline icon sits on the text's
+  // middle, below the segment's.
+  .greese-Segment-label {
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+  }
+
+  .greese-Segment-input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+}