plass-ui 1.6.0 → 1.7.0

package/dist/tokens.css

@@ -175,6 +175,29 @@
   --plass-breakpoint-xl: var(--breakpoint-xl, 80rem);
 }
 
+/* ---------------------------------------------------------------------------
+ * The room a fixed bottom bar takes
+ *
+ * A `PlBottomNavigation` or a `PlFloatingBottomNavigation` is `fixed` by
+ * default: held against the bottom of the window and out of the flow, so the
+ * end of the page is always under it, and so is a link a reader tabs to down
+ * there. Only the page can make room, and only if it knows how much, so a fixed
+ * bar measures itself — size, density, names and the home indicator included —
+ * and writes the answer here, on the root element, for as long as it is
+ * mounted. With no bar it is `0px`, so a page can reserve it unconditionally:
+ *
+ *   main { padding-bottom: var(--plass-bottom-navigation-height); }
+ *   html { scroll-padding-bottom: var(--plass-bottom-navigation-height); }
+ *
+ * On a bare `:root`, for the reason `--plass-z-portal` is. It is a reading
+ * rather than a setting: a bar replaces whatever is written here the moment it
+ * has measured itself.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --plass-bottom-navigation-height: 0px;
+}
+
 /* ---------------------------------------------------------------------------
  * Light theme (default)
  *
@@ -275,6 +298,20 @@
   --plass-glow-on-fill: rgb(255 255 255 / 0.18);
   --plass-flash-on-fill: rgb(255 255 255 / 0.26);
 
+  /* How much of that light a **field** carries, as a share of what a key gets.
+
+     A key is pressed and is finished with; a field is pressed once and then
+     written in for a minute, with the bloom sitting under the words being typed
+     and following the hand that is typing them. The same strength that reads as
+     a control answering a pointer reads as a stain on a paragraph. So a field
+     takes the family's tint at a little over half, which is enough to say the
+     surface answered and not enough to compete with the ink on it.
+
+     One value for both layers and for every family, because the thing being
+     dialled down is the effect rather than a colour. It is per-theme neither:
+     the tints it scales are already per-theme. */
+  --plass-glow-field-strength: 55%;
+
   /* Elevation, and how strongly a key's own colour bleeds into the shadow it
      casts. The ambient is a blue-grey rather than black: a neutral shadow over
      a blue-tinted page reads as dirt — and it is faint, because the tint below
@@ -883,6 +920,86 @@
   transition-duration: 0ms;
 }
 
+/*
+ * The bloom steps out of the way while the surface is being typed into.
+ *
+ * A pointer resting on a field is a pointer that has been parked: the hand is
+ * on the keyboard, the light is no longer following anything, and what it is
+ * doing is sitting under the sentence being written. Fading it out on the first
+ * keystroke and back in on the next real pointer move costs the effect nothing —
+ * it only ever *meant* anything while the pointer was moving — and gives the
+ * text a clean sheet for as long as the reader is on the keys.
+ *
+ * Only the bloom. The flash is drawn by `:active`, which cannot be held down
+ * and typed through.
+ *
+ * After the `:hover` rule, and at the same specificity: that order is what makes
+ * this the one that wins. The component writes and clears the attribute — see
+ * `useFieldLight`.
+ */
+.plass-glow[data-quiet]::before {
+  opacity: 0;
+}
+
+/* ---------------------------------------------------------------------------
+ * A fill that comes and goes with a state
+ *
+ * A `solid` toggle, a tick, a radio's ring, a switch's track, a chosen day, a
+ * step's bullet and the current page are glass, a groove or nothing while they
+ * are off and the family's gradient while they are on, and no browser eases a
+ * gradient to or from nothing. Set on the element itself, the gradient arrived
+ * in one frame and left in one. So it is a layer of its own, there in both
+ * states and faded by its opacity, which is the one thing about it a browser
+ * can ease — the way a `PlProgressBox` plate breathes.
+ *
+ * The component says when it is on with `--p-fill-on`, 0 or 1, from the state
+ * variants that used to set the gradient, and a control with an edge says how
+ * wide the edge is with `--p-fill-edge`, so the fill runs under the edge it
+ * turns transparent, as a background does. Both are only read here, never
+ * declared: this is a real class, which a consumer's own Tailwind build keeps
+ * outside the layer it puts utilities in, so a value declared here would beat
+ * the component's. Left unset, the fill is off and has no edge.
+ *
+ * Under what is drawn on the control and over its own background, which is what
+ * the negative depth in a box of its own is for, as the bloom's is above. It is
+ * in CSS rather than in Tailwind for the bloom's reason too: it is a gradient
+ * on a pseudo-element.
+ * ------------------------------------------------------------------------- */
+
+.plass-fill {
+  isolation: isolate;
+}
+
+.plass-fill::before,
+.plass-fill-layer {
+  position: absolute;
+  inset: calc(-1 * var(--p-fill-edge, 0px));
+  z-index: -1;
+  /* An edge as wide as the control's, and as clear, so the gradient is laid out
+     inside it and drawn under it exactly as the control's own background was. */
+  border: var(--p-fill-edge, 0px) solid transparent;
+  border-radius: inherit;
+  background-image: var(--p-fill);
+  opacity: var(--p-fill-on, 0);
+  pointer-events: none;
+  transition: opacity var(--plass-duration) var(--plass-ease);
+}
+
+.plass-fill::before {
+  content: '';
+}
+
+/*
+ * The same layer as an element, for a control whose two pseudo-elements are
+ * already the light: a `solid` `PlToggle` and a `PlPagination` page. The bloom
+ * is the `::before` of the same surface, which comes first, so the fill goes
+ * one step further down to stay under it. The surface's `.plass-glow` gives
+ * both depths a box of their own.
+ */
+.plass-fill-layer {
+  z-index: -2;
+}
+
 /* ---------------------------------------------------------------------------
  * The three dots in a bubble somebody is typing into
  *
@@ -1079,18 +1196,25 @@
  * a writing direction, so the measurement is turned round once, here, rather
  * than in four places that could disagree.
  *
+ * A tab brought into view stops the fade's length short of the edge, through
+ * `scroll-padding-inline`. The reveal is not this sheet's — the browser does it
+ * for a focused tab and Base UI for the chosen one and the next one along — but
+ * both honour the padding, and without it the tab they brought into view would
+ * end flush with the edge, which is exactly where the fade is strongest.
+ *
  * The mask is dropped entirely while something inside holds a visible focus
- * ring. Focusing a tab scrolls it flush against the edge it came from, which is
- * exactly where the fade is strongest — so the one control whose outline has to
- * be legible would be the one drawn half transparent. `:focus-visible` and not
- * `:focus-within`: a tab that was clicked has the focus and no ring, and a bar
- * that stopped fading for the rest of the session because somebody pressed a
- * tab would have lost the signal at the first interaction.
+ * ring, as well: a reader walking the strip with the arrow keys is looking at
+ * the ring, and the one outline on the bar that has to be legible whole should
+ * not be one a fade can reach. `:focus-visible` and not `:focus-within`: a tab
+ * that was clicked has the focus and no ring, and a bar that stopped fading for
+ * the rest of the session because somebody pressed a tab would have lost the
+ * signal at the first interaction.
  * ------------------------------------------------------------------------- */
 
 .plass-fade-x {
   --p-fade: 1.5rem;
 
+  scroll-padding-inline: var(--p-fade);
   scrollbar-width: none;
   mask-image: linear-gradient(
     to right,
@@ -2110,10 +2234,11 @@
  * theme below declares its `fg` and `bg` on that same element — so the derived
  * five follow whichever theme won without being restated fourteen times.
  *
- * The two dark palettes at the top are written twice on purpose — once for
- * `dark`, once for `auto` inside a dark page — because a media query cannot be
- * folded into a selector list. It is the same repetition the theme roots at the
- * top of this file make, for the same reason.
+ * The two house palettes are written more than once on purpose: once on the
+ * block for `light` and `dark`, and again on the theme roots for `auto`, where
+ * the dark one is there twice because a media query cannot be folded into a
+ * selector list. It is the same repetition the theme roots at the top of this
+ * file make, for the same reason.
  *
  * Every hue in the house themes is solved against its own background rather
  * than flipped: the light set runs dark and saturated on near-white, the dark
@@ -2125,7 +2250,8 @@
  * ------------------------------------------------------------------------- */
 
 .plass-code {
-  /* The light set, which is also what `auto` and `light` start from. */
+  /* The light set, which is what `light` is and what a theme that fills only
+     some of the slots starts from. */
   --p-code-bg: oklch(98.4% 0.003 262);
   --p-code-fg: oklch(30% 0.016 262);
 
@@ -2156,8 +2282,7 @@
   --p-code-mark-edge: color-mix(in oklab, var(--p-code-fg) 45%, transparent);
 }
 
-.plass-code[data-code-theme='dark'],
-:where(.dark, [data-theme='dark']) .plass-code[data-code-theme='auto'] {
+.plass-code[data-code-theme='dark'] {
   --p-code-bg: oklch(19.5% 0.014 262);
   --p-code-fg: oklch(90% 0.012 262);
 
@@ -2175,31 +2300,92 @@
   --p-code-del: oklch(75% 0.15 25);
 }
 
-/* Both ways of forcing light are named, the same pair the token block above
-   answers to. `auto` means "whatever the page is", so a page that has said it
-   is light with `.light` and one that has said it with `[data-theme='light']`
-   have to leave the block light alike — otherwise the page is white and the
-   code on it is the one dark rectangle nobody asked for. */
+/* `auto` is the palette of the nearest element that says which theme it is in,
+   however deep the nesting goes: a light preview box inside a dark page, or a
+   dark panel inside that. A selector can name a dark ancestor or a light one
+   but not which of the two is nearer, so the palette `auto` reads is declared
+   on every theme root instead, the way the tokens at the top of this file are,
+   and inheritance is what picks the nearest. The system preference is the
+   root's answer when the page has not given one, and both ways of forcing
+   light are named, so a page that has said it is light leaves the block light
+   either way. */
+:root,
+.light,
+[data-theme='light'] {
+  --p-code-auto-bg: oklch(98.4% 0.003 262);
+  --p-code-auto-fg: oklch(30% 0.016 262);
+
+  --p-code-auto-comment: oklch(58% 0.022 262);
+  --p-code-auto-keyword: oklch(48% 0.19 322);
+  --p-code-auto-string: oklch(46% 0.12 148);
+  --p-code-auto-number: oklch(50% 0.14 48);
+  --p-code-auto-function: oklch(48% 0.17 264);
+  --p-code-auto-type: oklch(45% 0.1 214);
+  --p-code-auto-variable: oklch(45% 0.12 28);
+  --p-code-auto-tag: oklch(48% 0.18 22);
+  --p-code-auto-attr: oklch(47% 0.13 82);
+  --p-code-auto-meta: oklch(52% 0.05 262);
+  --p-code-auto-add: oklch(45% 0.14 152);
+  --p-code-auto-del: oklch(48% 0.18 25);
+}
+
 @media (prefers-color-scheme: dark) {
-  :root:not(.light):not([data-theme='light']) .plass-code[data-code-theme='auto'] {
-    --p-code-bg: oklch(19.5% 0.014 262);
-    --p-code-fg: oklch(90% 0.012 262);
+  :root:not(.light):not([data-theme='light']) {
+    --p-code-auto-bg: oklch(19.5% 0.014 262);
+    --p-code-auto-fg: oklch(90% 0.012 262);
 
-    --p-code-comment: oklch(60% 0.024 262);
-    --p-code-keyword: oklch(76% 0.13 324);
-    --p-code-string: oklch(80% 0.13 148);
-    --p-code-number: oklch(81% 0.12 62);
-    --p-code-function: oklch(78% 0.12 258);
-    --p-code-type: oklch(82% 0.1 210);
-    --p-code-variable: oklch(82% 0.09 32);
-    --p-code-tag: oklch(77% 0.13 22);
-    --p-code-attr: oklch(85% 0.11 92);
-    --p-code-meta: oklch(70% 0.05 262);
-    --p-code-add: oklch(80% 0.14 152);
-    --p-code-del: oklch(75% 0.15 25);
+    --p-code-auto-comment: oklch(60% 0.024 262);
+    --p-code-auto-keyword: oklch(76% 0.13 324);
+    --p-code-auto-string: oklch(80% 0.13 148);
+    --p-code-auto-number: oklch(81% 0.12 62);
+    --p-code-auto-function: oklch(78% 0.12 258);
+    --p-code-auto-type: oklch(82% 0.1 210);
+    --p-code-auto-variable: oklch(82% 0.09 32);
+    --p-code-auto-tag: oklch(77% 0.13 22);
+    --p-code-auto-attr: oklch(85% 0.11 92);
+    --p-code-auto-meta: oklch(70% 0.05 262);
+    --p-code-auto-add: oklch(80% 0.14 152);
+    --p-code-auto-del: oklch(75% 0.15 25);
   }
 }
 
+.dark,
+[data-theme='dark'] {
+  --p-code-auto-bg: oklch(19.5% 0.014 262);
+  --p-code-auto-fg: oklch(90% 0.012 262);
+
+  --p-code-auto-comment: oklch(60% 0.024 262);
+  --p-code-auto-keyword: oklch(76% 0.13 324);
+  --p-code-auto-string: oklch(80% 0.13 148);
+  --p-code-auto-number: oklch(81% 0.12 62);
+  --p-code-auto-function: oklch(78% 0.12 258);
+  --p-code-auto-type: oklch(82% 0.1 210);
+  --p-code-auto-variable: oklch(82% 0.09 32);
+  --p-code-auto-tag: oklch(77% 0.13 22);
+  --p-code-auto-attr: oklch(85% 0.11 92);
+  --p-code-auto-meta: oklch(70% 0.05 262);
+  --p-code-auto-add: oklch(80% 0.14 152);
+  --p-code-auto-del: oklch(75% 0.15 25);
+}
+
+.plass-code[data-code-theme='auto'] {
+  --p-code-bg: var(--p-code-auto-bg);
+  --p-code-fg: var(--p-code-auto-fg);
+
+  --p-code-comment: var(--p-code-auto-comment);
+  --p-code-keyword: var(--p-code-auto-keyword);
+  --p-code-string: var(--p-code-auto-string);
+  --p-code-number: var(--p-code-auto-number);
+  --p-code-function: var(--p-code-auto-function);
+  --p-code-type: var(--p-code-auto-type);
+  --p-code-variable: var(--p-code-auto-variable);
+  --p-code-tag: var(--p-code-auto-tag);
+  --p-code-attr: var(--p-code-auto-attr);
+  --p-code-meta: var(--p-code-auto-meta);
+  --p-code-add: var(--p-code-auto-add);
+  --p-code-del: var(--p-code-auto-del);
+}
+
 /*
  * `mono` is the one theme that follows the page, and the only one with no hue
  * in it at all: the structure is carried by weight and by how far a run is
@@ -2611,6 +2797,138 @@
   flex-basis: 0;
 }
 
+/* ---------------------------------------------------------------------------
+ * The float label
+ *
+ * `labelPlacement="float"`: a notched field whose label rests inside the
+ * control, where the value would be written, while the control is empty,
+ * nothing in the field has the focus and no popup of its is open. At rest it is
+ * set the way that placeholder is — the value's size, the regular weight and
+ * the muted ink — and the moment any of the three stops being true, the label
+ * rises into the notch at the notch's own weight and the placeholder comes
+ * back.
+ *
+ * `internal/notch.tsx` draws the same fieldset and legend a `notch` does and
+ * hands this block its numbers as custom properties on the frame. It is CSS
+ * rather than Tailwind because the condition is a relation between three
+ * elements — the frame's focus, the control's emptiness and a trigger's popup
+ * — and because an input can say it is empty through `:placeholder-shown`
+ * before any script has run, so a server-rendered field is right on its first
+ * frame.
+ *
+ * **The label moves on `top`, `inset-inline-start`, `font-size` and
+ * `font-weight`,** never on a transform: it is set again at every size on the
+ * way rather than scaled, so no frame of it is a resampled picture of the word.
+ * How smoothly the weight goes is the font's to say: a variable font passes
+ * through every weight between, and a font with a few fixed faces steps
+ * between them. Its line box is held at the notch's height throughout, which
+ * is what keeps the legend, and the edge drawn across its middle, where they
+ * are while the word grows and shrinks.
+ *
+ * **The gap folds rather than fades.** A legend cannot fill its own gap, so the
+ * legend is folded to nothing under a resting label and the fieldset draws its
+ * whole top edge again. It opens at once as the label starts to rise, so the
+ * word never crosses a line on its way up, and closes only once the label has
+ * come all the way down, so the line never runs through it on the way down.
+ * ------------------------------------------------------------------------- */
+
+.plass-notch-float > fieldset > legend {
+  max-width: 100%;
+  white-space: nowrap;
+  transition: max-width 0s;
+}
+
+.plass-notch-float > fieldset > legend > * {
+  display: block;
+  position: relative;
+  top: 0;
+  inset-inline-start: 0;
+  margin-inline: var(--p-notch-pad);
+  line-height: var(--p-notch-leading);
+  transition-property: top, inset-inline-start, font-size, font-weight, color;
+  transition-duration: var(--plass-duration);
+  transition-timing-function: var(--plass-ease);
+}
+
+/*
+ * At rest. Three ways to know the control is empty, one for each kind of
+ * control: an input's `:placeholder-shown`, a select trigger's
+ * `data-placeholder`, and `data-empty` on the frame from a component that knows
+ * and has no control that can say so, a picker's trigger. Autofill counts as a
+ * value before the reader has accepted it, since its text is already drawn where
+ * the label would rest.
+ *
+ * The same condition is written out in front of each of the three rules below,
+ * since the stylesheet ships to projects whose own build may not lower nesting.
+ */
+.plass-notch-float:not(:focus-within):not(:has([data-popup-open])):is(
+    [data-empty],
+    :has(.plass-float-control:placeholder-shown:not(:autofill)),
+    :has(.plass-float-control[data-placeholder])
+  )
+  > fieldset
+  > legend {
+  max-width: 0.01px;
+  transition-delay: var(--p-float-fold, var(--plass-duration));
+  /* A press on the words lands on the control under them, as it would on the
+     placeholder they stand in for. A select opens on the pointer going down on
+     its trigger, which a label in front of it would swallow. */
+  pointer-events: none;
+}
+
+.plass-notch-float:not(:focus-within):not(:has([data-popup-open])):is(
+    [data-empty],
+    :has(.plass-float-control:placeholder-shown:not(:autofill)),
+    :has(.plass-float-control[data-placeholder])
+  )
+  > fieldset
+  > legend
+  > * {
+  top: var(--p-float-y);
+  inset-inline-start: var(--p-float-x, 0px);
+  font-size: var(--p-float-text);
+  font-weight: 400;
+  color: var(--plass-muted-fg);
+}
+
+.plass-notch-float:not(:focus-within):not(:has([data-popup-open])):is(
+    [data-empty],
+    :has(.plass-float-control:placeholder-shown:not(:autofill)),
+    :has(.plass-float-control[data-placeholder])
+  )
+  .plass-float-control::placeholder,
+.plass-notch-float:not(:focus-within):not(:has([data-popup-open])):is(
+    [data-empty],
+    :has(.plass-float-control:placeholder-shown:not(:autofill)),
+    :has(.plass-float-control[data-placeholder])
+  )
+  .plass-float-placeholder {
+  color: transparent;
+}
+
+/* The placeholder comes back as the label leaves, over the same time. */
+.plass-notch-float .plass-float-control::placeholder,
+.plass-notch-float .plass-float-placeholder {
+  transition: color var(--plass-duration) var(--plass-ease);
+}
+
+/*
+ * A press that went down on the control comes up on it. The focus the press
+ * hands the control ends the rest before the button is let go, so the label is
+ * back in reach of the pointer while it is still lying over the words, and a
+ * quick click on them came up on the label. The browser then sent the click to
+ * the frame round both, and a picker that opens on a click, such as
+ * `PlTreeSelect`, stayed shut. The label lets the pointer through until that
+ * press is over.
+ *
+ * Only a press on the control: one on the label itself leaves the control out
+ * of the chain `:active` marks, so clicking a risen label still focuses the
+ * field.
+ */
+.plass-notch-float:has(> :not(fieldset):active) > fieldset > legend {
+  pointer-events: none;
+}
+
 /* ---------------------------------------------------------------------------
  * Reduced motion
  *
@@ -2618,7 +2936,9 @@
  * transitions: someone who has asked for less movement is asking for state
  * changes to *arrive*, not to be taken away. The colours still change; they
  * simply stop easing, and the light stops trailing the pointer across the
- * surface — it is either on the control or it is not.
+ * surface — it is either on the control or it is not. The colours are the house
+ * transition's, which is a set of utilities rather than a class, so it says so
+ * beside itself in `internal/styles.ts`.
  * ------------------------------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
@@ -2627,6 +2947,25 @@
     transition-duration: 1ms;
   }
 
+  /* A fill that comes with a state arrives with it, as the colours round it
+     do. */
+  .plass-fill::before,
+  .plass-fill-layer {
+    transition-duration: 0ms;
+  }
+
+  /* A float label arrives where it is going, and the gap under it opens and
+     closes with it rather than a moment after. */
+  .plass-notch-float {
+    --p-float-fold: 0ms;
+  }
+
+  .plass-notch-float > fieldset > legend > *,
+  .plass-notch-float .plass-float-control::placeholder,
+  .plass-notch-float .plass-float-placeholder {
+    transition-duration: 0ms;
+  }
+
   /* The highlight stops travelling and the placeholder pulses in place. It is
      kept running rather than stopped, because a skeleton that holds still is
      indistinguishable from an empty box that finished loading with nothing in
@@ -2666,16 +3005,41 @@
   /*
    * The `PlAnimate*` components go the other way from the indicators above, and
    * the difference is what each of them is saying. A spinner that stops is
-   * lying about whether anything is happening; an entrance that does not play
-   * has still delivered its content, which is the only thing it was ever
-   * carrying.
+   * lying about whether anything is happening; an effect that does not move has
+   * still delivered what it was carrying — which for an entrance is the content
+   * and for an exit is its absence.
    *
-   * `animation: none` rather than a zero duration, because the shorthand also
-   * clears `fill-mode` — and the fill is what was holding an untriggered
-   * element on its own first frame at `opacity: 0`. Left in place, respecting a
-   * reader's preference would blank the page.
+   * So an effect is not switched off but run in no time at all. Nothing changes
+   * until the moment it would have started, its `delay` included, and then it
+   * is on its last frame: an exit has gone, a turn has turned, and
+   * `animationend` arrives for a caller waiting on it. Until that moment the
+   * element is as it is, because the fill runs forwards only — an effect
+   * waiting for its trigger is held at the start of its delay, which with no
+   * backwards fill draws nothing, rather than on a first frame at `opacity: 0`
+   * that would blank the page. The delay is a millisecond at the least, which
+   * is what keeps a waiting effect there: with no delay and no duration, a run
+   * held at its very start has already finished.
+   *
+   * A count of `infinite` is one pass here, which `--p-anim-still-repeat`
+   * says: an endless run has no last frame of its own. And a scroll-linked
+   * effect goes back to the clock, because a zero duration spread over a scroll
+   * range is an effect that snaps at one point of the scroll.
    */
-  .plass-anim,
+  .plass-anim {
+    animation-duration: 0s;
+    animation-delay: max(1ms, var(--p-anim-delay, 0ms));
+    animation-iteration-count: var(--p-anim-still-repeat, var(--p-anim-repeat, 1));
+    animation-fill-mode: forwards;
+    animation-timeline: auto;
+  }
+
+  /* The one effect whose last frame is not the element's own: before it has
+     run, a turn stands at the angle it turns to, which is what it is waiting to
+     deliver. The keyframe outranks this once the run has begun. */
+  .plass-anim-rotate {
+    rotate: var(--p-anim-angle-to, 0deg);
+  }
+
   .plass-marquee-track,
   .plass-headline-item,
   .plass-caret {