@greese/ui 1.0.0 → 1.2.0

package/src/components/EditableField/EditableField.scss

@@ -0,0 +1,275 @@
+@use 'sass:map';
+@use '../../styles/controls';
+@use '../../styles/mixins';
+
+// A color picker's swatch paints literal colors, whatever the theme: the
+// checkerboard behind a transparent color reads as "nothing here", not as a
+// surface, so it does not follow the palette.
+/* stylelint-disable color-no-hex */
+$checker: repeating-conic-gradient(#c8ccd2 0% 25%, #fff 0% 50%) 0 0 / 0.5rem 0.5rem;
+
+@layer greese.components {
+  .greese-EditableField {
+    --greese-editablefield-dial: 2.25rem;
+
+    @include mixins.component-root;
+
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    min-inline-size: 0;
+
+    &[data-disabled] {
+      opacity: 0.55;
+    }
+  }
+
+  // A property row: the name on one side, the control on the other, so a
+  // column of fields lines up down the panel.
+  .greese-EditableField--row {
+    justify-content: space-between;
+  }
+
+  .greese-EditableField--column {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .greese-EditableField-label {
+    flex: none;
+    color: var(--greese-color-fg-muted);
+
+    // The name must not push the control out of a narrow panel.
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .greese-EditableField--column > & {
+      align-self: start;
+    }
+  }
+
+  // Every control sits on the other side of the row and takes the slack.
+  .greese-EditableField-control {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  // A checkbox, switch or dial is its own size: stretching one would leave the
+  // hit target floating in a box of empty space.
+  .greese-EditableField--checkbox > .greese-EditableField-control,
+  .greese-EditableField--switch > .greese-EditableField-control,
+  .greese-EditableField--radio > .greese-EditableField-control,
+  .greese-EditableField--segmented > .greese-EditableField-control {
+    flex: 0 0 auto;
+  }
+
+  .greese-EditableField-number,
+  .greese-EditableField-range,
+  .greese-EditableField-knob {
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+  }
+
+  .greese-EditableField-number > .greese-NumberField,
+  .greese-EditableField-range > .greese-Slider,
+  .greese-EditableField-knob > .greese-NumberField {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  // The × that empties the field: a small, muted target inside its end.
+  .greese-EditableField-clear {
+    @include mixins.touch-target;
+
+    position: relative;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    padding: 0;
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-round);
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+    }
+
+    > svg {
+      inline-size: 0.75rem;
+      block-size: 0.75rem;
+    }
+  }
+
+  // A textarea's × sits in its top end corner, over the text's margin.
+  .greese-EditableField-textarea {
+    position: relative;
+
+    > .greese-EditableField-clear {
+      position: absolute;
+      inset-block-start: var(--greese-space-1);
+      inset-inline-end: var(--greese-space-1);
+    }
+
+    &:has(> .greese-EditableField-clear) .greese-Textarea-control {
+      padding-inline-end: 1.75rem;
+    }
+  }
+
+  .greese-EditableField-unit,
+  .greese-EditableField-value {
+    flex: none;
+    font-variant-numeric: tabular-nums;
+    color: var(--greese-color-fg-muted);
+  }
+
+  .greese-EditableField-value {
+    min-inline-size: 3ch;
+    text-align: end;
+  }
+
+  // The color swatch that opens the picker. It takes the slack like a text
+  // field does, so the color a field holds is as easy to see and to hit as
+  // the value in the row above it. The floor is a hit target: the button has
+  // no content, so nothing else would stop it collapsing to a sliver.
+  .greese-EditableField-swatch {
+    inline-size: 100%;
+    padding: 0;
+    cursor: pointer;
+    background:
+      linear-gradient(
+        var(--greese-editablefield-swatch),
+        var(--greese-editablefield-swatch)
+      ),
+      $checker;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+    box-shadow: inset 0 0 0 1px var(--greese-color-border-strong);
+
+    // As tall as the field's other controls at its size, on every pointer;
+    // a coarse pointer gets a 44px hit area around it instead.
+    position: relative;
+    min-inline-size: var(--greese-editablefield-height, 1.75rem);
+    block-size: var(--greese-editablefield-height, 1.75rem);
+
+    @include mixins.touch-target;
+
+    &:focus-visible {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    // No color at all, and a mixed selection, are different states: a slash
+    // for the one that is set to nothing, a dim fill for the one that has no
+    // single answer yet.
+    &[data-none] {
+      background:
+        linear-gradient(
+          to top right,
+          transparent calc(50% - 1px),
+          var(--greese-color-negative) calc(50% - 1px),
+          var(--greese-color-negative) calc(50% + 1px),
+          transparent calc(50% + 1px)
+        ),
+        var(--greese-color-surface);
+    }
+
+    &[data-mixed] {
+      background: var(--greese-color-track);
+      box-shadow: inset 0 0 0 1px var(--greese-color-border-strong);
+      opacity: 0.7;
+    }
+  }
+
+  // The picker's popover, and the "No color" button under it.
+  // `display` is scoped to the open state on purpose. An author `display`
+  // beats the UA's `[popover]:not(:popover-open) { display: none }`, so
+  // declaring it unconditionally leaves the closed popover laid out and
+  // hit-testable — invisible, because the exit state sets `opacity: 0`, while
+  // still swallowing clicks meant for whatever is under it.
+  .greese-EditableField-picker:popover-open {
+    display: grid;
+    gap: var(--greese-space-3);
+  }
+
+  .greese-EditableField-none {
+    padding: var(--greese-space-2);
+    font: inherit;
+    color: var(--greese-color-fg);
+    cursor: pointer;
+    background: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-inset);
+
+    &:hover {
+      background: var(--greese-color-track);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+  }
+
+  // The dial: a circle whose dot shows where it points.
+  .greese-EditableField-dial {
+    position: relative;
+    flex: none;
+    inline-size: var(--greese-editablefield-dial);
+    block-size: var(--greese-editablefield-dial);
+    cursor: grab;
+    background: var(--greese-color-track);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-round);
+
+    // Turning the dial must not scroll the page under a finger.
+    touch-action: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+    }
+  }
+
+  .greese-EditableField-dialDot {
+    position: absolute;
+    inset: 0;
+    display: block;
+
+    // The dot rides at the top of the circle and the whole layer rotates, so
+    // one angle drives it with no trigonometry in JavaScript.
+    rotate: var(--greese-editablefield-angle, 0deg);
+
+    &::after {
+      position: absolute;
+      inset-block-start: 0.125rem;
+      inset-inline-start: 50%;
+      inline-size: 0.375rem;
+      block-size: 0.375rem;
+      content: '';
+      background: var(--greese-color-primary);
+      border-radius: var(--greese-corner-round);
+      translate: -50% 0;
+    }
+  }
+
+  @each $size, $spec in controls.$sizes {
+    .greese-EditableField--size-#{$size} {
+      --greese-editablefield-height: #{map.get($spec, height)};
+    }
+  }
+}

package/src/components/Grid/Grid.scss

@@ -1,29 +1,4 @@
-@use 'sass:map';
-@use '../../styles/mixins';
-
-$column-counts: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
-
-@function column-tokens() {
-  $map: ();
-
-  @each $n in $column-counts {
-    $map: map.set($map, $n, repeat(#{$n}, minmax(0, 1fr)));
-  }
-
-  @return $map;
-}
-
-@function size-tokens() {
-  $map: (
-    full: #{'1 / -1'},
-  );
-
-  @each $n in $column-counts {
-    $map: map.set($map, $n, span #{$n} / span #{$n});
-  }
-
-  @return $map;
-}
+@use '../../styles/layout-props';
 
 @layer greese.components {
   // Every Grid can be a cell; `container` makes it a grid too.
@@ -39,48 +14,5 @@ $column-counts: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
     container-type: inline-size;
   }
 
-  @include mixins.responsive-prop(
-    'greese-Grid',
-    'columns',
-    grid-template-columns,
-    column-tokens()
-  );
-
-  // After `columns`, so it wins where both apply.
-  @include mixins.responsive-prop(
-    'greese-Grid',
-    'min-child',
-    grid-template-columns,
-    $template: 'repeat(auto-fill, minmax(min(VALUE, 100%), 1fr))'
-  );
-  @include mixins.responsive-prop('greese-Grid', 'gap', gap, mixins.space-tokens());
-  @include mixins.responsive-prop(
-    'greese-Grid',
-    'align',
-    align-items,
-    (
-      start: start,
-      center: center,
-      end: end,
-      stretch: stretch,
-    )
-  );
-  @include mixins.responsive-prop(
-    'greese-Grid',
-    'justify',
-    justify-items,
-    (
-      start: start,
-      center: center,
-      end: end,
-      stretch: stretch,
-    )
-  );
-  @include mixins.responsive-prop(
-    'greese-Grid',
-    'size',
-    grid-column,
-    size-tokens(),
-    $container-scope: '.greese-Grid--queries >'
-  );
+  @include layout-props.grid;
 }

package/src/components/Input/Input.scss

@@ -8,7 +8,16 @@
     display: flex;
     gap: var(--greese-space-2);
     align-items: center;
+
+    // Fills whatever it sits in — a Field, a table cell, a flex row.
     inline-size: 100%;
+
+    // …but imposes no floor of its own. A flex item's automatic minimum size is
+    // its content's min-content width, and an `<input>`'s min-content width is
+    // whatever `size` says — about twenty characters by default, a number
+    // nobody chose. That is what stopped a text field from ever being narrower
+    // than twenty characters, however little the layout had to give it.
+    min-inline-size: 0;
     min-block-size: var(--greese-input-height);
     padding-inline: var(--greese-input-padding);
     cursor: text;
@@ -47,6 +56,26 @@
     }
   }
 
+  // `htmlSize`: as wide as that many characters and no wider, so the frame
+  // hugs the input rather than stretching or shrinking. The doubled class
+  // beats a container's `flex: 1 1 auto` (EditableField's control slot, a
+  // toolbar row) without depending on which stylesheet the bundle happens to
+  // emit last.
+  .greese-Input.greese-Input--measured {
+    inline-size: fit-content;
+
+    // Neither grows nor gives up its measure in a crowded row.
+    flex: none;
+
+    // `size` alone measures in the font's average character, narrower than
+    // its digits, so seven of them overflow `size="7"`. `--greese-input-size`
+    // (set by the React component) measures in `ch`; without it, `size` rules.
+    .greese-Input-control {
+      flex: none;
+      inline-size: calc(var(--greese-input-size) * 1ch);
+    }
+  }
+
   @each $size, $spec in controls.$sizes {
     .greese-Input--size-#{$size} {
       --greese-input-height: #{map.get($spec, height)};

package/src/components/Menu/Menu.scss

@@ -20,6 +20,24 @@
     }
   }
 
+  // A context menu is a Menu surface with a different anchor, so it carries
+  // `greese-Menu` too and changes only what the anchor implies.
+  .greese-ContextMenu {
+    // Menu's width floor makes a dropdown look deliberate under the button
+    // that opened it. A context menu has no button: it appears at the pointer,
+    // so it should be exactly as wide as its own items.
+    min-inline-size: 0;
+  }
+
+  // The stand-in for the pointer position: a zero-size box a ContextMenu
+  // anchors to. Inert and never painted — only its position matters.
+  .greese-ContextMenu-point {
+    position: fixed;
+    inline-size: 0;
+    block-size: 0;
+    pointer-events: none;
+  }
+
   .greese-Menu-viewport {
     min-block-size: 0;
     padding: var(--greese-space-1);

package/src/components/NumberField/NumberField.scss

@@ -5,10 +5,13 @@
     font-variant-numeric: tabular-nums;
   }
 
+  // Two carets in a column, the height of the field between them. Side by side
+  // they cost about 3.5rem of a field's width, which is most of a row in a
+  // dense panel; stacked they cost one button's width.
   .greese-NumberField-steppers {
     display: inline-flex;
-    gap: 2px;
-    margin-inline-end: calc(-1 * var(--greese-space-2));
+    flex-direction: column;
+    margin-inline-end: calc(-1 * var(--greese-space-1));
   }
 
   .greese-NumberField-step {
@@ -17,8 +20,6 @@
     position: relative;
     display: inline-grid;
     place-items: center;
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
     padding: 0;
     color: var(--greese-color-fg-muted);
     cursor: pointer;
@@ -26,11 +27,6 @@
     border: 0;
     border-radius: var(--greese-corner-inset);
 
-    > svg {
-      inline-size: 1rem;
-      block-size: 1rem;
-    }
-
     @include mixins.hover {
       color: var(--greese-color-fg);
       background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
@@ -41,4 +37,55 @@
       opacity: 0.4;
     }
   }
+
+  // Stacked: each caret takes half the row, so the pair is one button tall.
+  .greese-NumberField-steppers .greese-NumberField-step {
+    inline-size: 1.25rem;
+    block-size: 0.875rem;
+
+    > svg {
+      inline-size: 0.75rem;
+      block-size: 0.75rem;
+    }
+  }
+
+  // Split: a minus at one end of the field and a plus at the other, each a
+  // full-height target.
+  .greese-NumberField--split .greese-NumberField-step {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+
+    > svg {
+      inline-size: 0.875rem;
+      block-size: 0.875rem;
+    }
+  }
+
+  // The × that empties the field: a small, muted target inside its end.
+  .greese-NumberField-clear {
+    @include mixins.touch-target;
+
+    position: relative;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    padding: 0;
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-round);
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+    }
+
+    > svg {
+      inline-size: 0.75rem;
+      block-size: 0.75rem;
+    }
+  }
 }

package/src/components/NumberStepper/NumberStepper.scss

@@ -0,0 +1,13 @@
+@layer greese.components {
+  // A minus at one end and a plus at the other, with the value between them.
+  // The field keeps its own frame; only what sits inside it differs from a
+  // NumberField.
+  .greese-NumberStepper {
+    --greese-numberstepper-gap: var(--greese-space-1);
+  }
+
+  // The value is centred because it reads as a quantity, not as typed text.
+  .greese-NumberStepper .greese-Input-control {
+    text-align: center;
+  }
+}

package/src/components/PageTransition/PageTransition.scss

@@ -13,6 +13,11 @@
 //   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
+//   greese-PageTransition--route-enter, --route-exit, --route-pace
+//                                         a route's or navigation's own effects
+//                                         and pace, read from the root's
+//                                         --greese-page-enter / -exit /
+//                                         -duration / -ease (usePageNavigate)
 // 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
@@ -93,6 +98,30 @@
       animation-name: none;
     }
 
+    // A route's or a navigation's own effects (usePageNavigate writes the
+    // variables at the click): after the named effects and the theme's roles,
+    // so they win; `--left` below still wins, since a live exit already played.
+    html::view-transition-new(*.greese-PageTransition--route-enter) {
+      animation-name: var(--greese-page-enter);
+    }
+
+    html::view-transition-old(*.greese-PageTransition--route-exit) {
+      animation-name: var(--greese-page-exit);
+    }
+
+    html::view-transition-group(*.greese-PageTransition--route-pace),
+    html::view-transition-old(*.greese-PageTransition--route-pace),
+    html::view-transition-new(*.greese-PageTransition--route-pace) {
+      animation-duration: var(
+        --greese-page-duration,
+        var(--greese-motion-page-duration, var(--greese-duration-normal))
+      );
+      animation-timing-function: var(
+        --greese-page-ease,
+        var(--greese-motion-page-ease, var(--greese-ease-out))
+      );
+    }
+
     // 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) {

package/src/components/Radio/Radio.scss

@@ -5,8 +5,8 @@
     @include mixins.touch-target;
 
     position: relative;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--greese-choice-box, 1.125rem);
+    block-size: var(--greese-choice-box, 1.125rem);
     margin: 0;
     cursor: pointer;
     background-color: var(--greese-color-canvas);