plass-ui 1.4.0 → 1.5.0

package/dist/tailwind.css

@@ -608,7 +608,11 @@
   --plass-primary-soft-press: color-mix(in srgb, var(--plass-primary-accent) 26%, transparent);
   --plass-primary-line: color-mix(in srgb, var(--plass-primary-accent) 30%, transparent);
   --plass-primary-line-hover: color-mix(in srgb, var(--plass-primary-accent) 48%, transparent);
-  --plass-primary-ring: color-mix(in srgb, var(--plass-primary-solid) 55%, transparent);
+  /* The focus ring is the accent at full strength, because it is read against
+     the page rather than looked at: the ring has to clear 3:1 against the
+     sheet round a control in both themes, and only the per-theme accent does.
+     `solid` is one colour for both, and amber on white cannot reach it. */
+  --plass-primary-ring: var(--plass-primary-accent);
 
   --plass-secondary-fill: linear-gradient(
     135deg,
@@ -625,7 +629,7 @@
   --plass-secondary-soft-press: color-mix(in srgb, var(--plass-secondary-accent) 26%, transparent);
   --plass-secondary-line: color-mix(in srgb, var(--plass-secondary-accent) 30%, transparent);
   --plass-secondary-line-hover: color-mix(in srgb, var(--plass-secondary-accent) 48%, transparent);
-  --plass-secondary-ring: color-mix(in srgb, var(--plass-secondary-solid) 55%, transparent);
+  --plass-secondary-ring: var(--plass-secondary-accent);
 
   --plass-success-fill: linear-gradient(
     135deg,
@@ -642,7 +646,7 @@
   --plass-success-soft-press: color-mix(in srgb, var(--plass-success-accent) 26%, transparent);
   --plass-success-line: color-mix(in srgb, var(--plass-success-accent) 30%, transparent);
   --plass-success-line-hover: color-mix(in srgb, var(--plass-success-accent) 48%, transparent);
-  --plass-success-ring: color-mix(in srgb, var(--plass-success-solid) 55%, transparent);
+  --plass-success-ring: var(--plass-success-accent);
 
   --plass-warning-fill: linear-gradient(
     135deg,
@@ -659,7 +663,7 @@
   --plass-warning-soft-press: color-mix(in srgb, var(--plass-warning-accent) 28%, transparent);
   --plass-warning-line: color-mix(in srgb, var(--plass-warning-accent) 34%, transparent);
   --plass-warning-line-hover: color-mix(in srgb, var(--plass-warning-accent) 52%, transparent);
-  --plass-warning-ring: color-mix(in srgb, var(--plass-warning-solid) 55%, transparent);
+  --plass-warning-ring: var(--plass-warning-accent);
 
   --plass-danger-fill: linear-gradient(
     135deg,
@@ -676,7 +680,7 @@
   --plass-danger-soft-press: color-mix(in srgb, var(--plass-danger-accent) 26%, transparent);
   --plass-danger-line: color-mix(in srgb, var(--plass-danger-accent) 30%, transparent);
   --plass-danger-line-hover: color-mix(in srgb, var(--plass-danger-accent) 48%, transparent);
-  --plass-danger-ring: color-mix(in srgb, var(--plass-danger-solid) 55%, transparent);
+  --plass-danger-ring: var(--plass-danger-accent);
 
   --plass-info-fill: linear-gradient(
     135deg,
@@ -693,7 +697,7 @@
   --plass-info-soft-press: color-mix(in srgb, var(--plass-info-accent) 26%, transparent);
   --plass-info-line: color-mix(in srgb, var(--plass-info-accent) 30%, transparent);
   --plass-info-line-hover: color-mix(in srgb, var(--plass-info-accent) 48%, transparent);
-  --plass-info-ring: color-mix(in srgb, var(--plass-info-solid) 55%, transparent);
+  --plass-info-ring: var(--plass-info-accent);
   /* The three greys a chart draws its frame with, derived so a project that
      re-tones its border moves the grid with it.
 
@@ -1191,6 +1195,190 @@
  * drift.
  * ------------------------------------------------------------------------- */
 
+/*
+ * The per-breakpoint slots do not inherit. Each one is written inline on the
+ * element that reads it, and a custom property is inherited by default, so a
+ * `PlFlex` nested in another took every rung its parent named and it did not:
+ * a vertical flex inside `{ xs: 'vertical', md: 'horizontal' }` turned
+ * horizontal at `md`, and a `PlGridItem` with no `span` inside a cell of eight
+ * was eight columns wide. The slots they resolve into (`--p-cols`, `--p-gap-x`)
+ * still inherit, which is how a grid item reads its grid.
+ */
+@property --p-gap-x-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-xl {
+  syntax: '*';
+  inherits: false;
+}
+
 .plass-grid,
 .plass-flex {
   --p-gap-x: var(--p-gap-x-xs, 0px);
@@ -1722,6 +1910,12 @@
   flex-direction: column;
 }
 
+/* Inset, so a box inside something that clips does not lose its ring. */
+.plass-marquee:focus-visible {
+  outline: 2px solid var(--plass-primary-ring);
+  outline-offset: -2px;
+}
+
 .plass-marquee-track {
   display: flex;
   flex: 0 0 auto;
@@ -1927,8 +2121,13 @@
   --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. */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) .plass-code[data-code-theme='auto'] {
+  :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);
 
@@ -2320,10 +2519,11 @@
  * arrangement that still reads as a set.
  *
  * The three lines below are what the slot is *for*. A grid and a quilt lay out
- * in CSS Grid off `--p-cols`; a masonry deals its items into that many lanes in
- * JavaScript, because which lane an item lands in changes the DOM and no
- * stylesheet can do that; and a justified row is flexbox, which needs no count
- * at all — it fills to the edge with whatever fits.
+ * in CSS Grid off `--p-cols`; a masonry deals its items into lanes in JavaScript
+ * and writes the count and the rows inline, because which lane an item lands in
+ * depends on the heights of the items before it and no stylesheet can work that
+ * out; and a justified row is flexbox, which needs no count at all — it fills
+ * to the edge with whatever fits.
  * ------------------------------------------------------------------------- */
 
 .plass-gallery-grid,
@@ -2331,6 +2531,32 @@
   grid-template-columns: repeat(var(--p-cols, 2), minmax(0, 1fr));
 }
 
+/*
+ * What holds a justified gallery's last row down.
+ *
+ * Every tile is grown in proportion to its own width, which is what makes a row
+ * come out one height once it has been stretched to the edge. The last row is
+ * the exception: it has fewer tiles and the same width to share, so they stretch
+ * further than any row above them — one leftover photograph ends up filling the
+ * whole width and standing two or three times as tall as the gallery it belongs
+ * to.
+ *
+ * An empty `::after` with an absurd `flex-grow` eats the leftover width instead,
+ * so the real tiles keep their basis and the row lands at the height it was
+ * aiming for. It has to be a pseudo-element rather than a filler item: the list
+ * is a `<ul>` with `role="list"`, and an extra `<li>` would be an extra item in
+ * it — a photograph that is not there, counted by every screen reader that
+ * announces how many there are.
+ *
+ * It costs a row of nothing when the last row happens to be full, which is why
+ * the flex-basis is zero.
+ */
+.plass-gallery-justified::after {
+  content: '';
+  flex-grow: 1000000;
+  flex-basis: 0;
+}
+
 /* ---------------------------------------------------------------------------
  * Reduced motion
  *
@@ -2402,6 +2628,27 @@
     animation: none;
   }
 
+  /*
+   * A marquee that stops would leave everything past the edge of its box out
+   * of sight for good. One copy is drawn, and the box scrolls along it instead
+   * of clipping it, so the strip stays one line rather than wrapping down the
+   * page; a platform that draws a permanent scrollbar adds only the bar. The
+   * component makes the box a tab stop while it scrolls.
+   */
+  .plass-marquee {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .plass-marquee-vertical {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .plass-marquee-track + .plass-marquee-track {
+    display: none;
+  }
+
   /* The arc stops travelling and becomes an even glow. The same trade the
      skeleton makes: the decoration survives, the motion does not. */
   .plass-anim-lighting::before {

package/dist/tokens.css

@@ -611,7 +611,11 @@
   --plass-primary-soft-press: color-mix(in srgb, var(--plass-primary-accent) 26%, transparent);
   --plass-primary-line: color-mix(in srgb, var(--plass-primary-accent) 30%, transparent);
   --plass-primary-line-hover: color-mix(in srgb, var(--plass-primary-accent) 48%, transparent);
-  --plass-primary-ring: color-mix(in srgb, var(--plass-primary-solid) 55%, transparent);
+  /* The focus ring is the accent at full strength, because it is read against
+     the page rather than looked at: the ring has to clear 3:1 against the
+     sheet round a control in both themes, and only the per-theme accent does.
+     `solid` is one colour for both, and amber on white cannot reach it. */
+  --plass-primary-ring: var(--plass-primary-accent);
 
   --plass-secondary-fill: linear-gradient(
     135deg,
@@ -628,7 +632,7 @@
   --plass-secondary-soft-press: color-mix(in srgb, var(--plass-secondary-accent) 26%, transparent);
   --plass-secondary-line: color-mix(in srgb, var(--plass-secondary-accent) 30%, transparent);
   --plass-secondary-line-hover: color-mix(in srgb, var(--plass-secondary-accent) 48%, transparent);
-  --plass-secondary-ring: color-mix(in srgb, var(--plass-secondary-solid) 55%, transparent);
+  --plass-secondary-ring: var(--plass-secondary-accent);
 
   --plass-success-fill: linear-gradient(
     135deg,
@@ -645,7 +649,7 @@
   --plass-success-soft-press: color-mix(in srgb, var(--plass-success-accent) 26%, transparent);
   --plass-success-line: color-mix(in srgb, var(--plass-success-accent) 30%, transparent);
   --plass-success-line-hover: color-mix(in srgb, var(--plass-success-accent) 48%, transparent);
-  --plass-success-ring: color-mix(in srgb, var(--plass-success-solid) 55%, transparent);
+  --plass-success-ring: var(--plass-success-accent);
 
   --plass-warning-fill: linear-gradient(
     135deg,
@@ -662,7 +666,7 @@
   --plass-warning-soft-press: color-mix(in srgb, var(--plass-warning-accent) 28%, transparent);
   --plass-warning-line: color-mix(in srgb, var(--plass-warning-accent) 34%, transparent);
   --plass-warning-line-hover: color-mix(in srgb, var(--plass-warning-accent) 52%, transparent);
-  --plass-warning-ring: color-mix(in srgb, var(--plass-warning-solid) 55%, transparent);
+  --plass-warning-ring: var(--plass-warning-accent);
 
   --plass-danger-fill: linear-gradient(
     135deg,
@@ -679,7 +683,7 @@
   --plass-danger-soft-press: color-mix(in srgb, var(--plass-danger-accent) 26%, transparent);
   --plass-danger-line: color-mix(in srgb, var(--plass-danger-accent) 30%, transparent);
   --plass-danger-line-hover: color-mix(in srgb, var(--plass-danger-accent) 48%, transparent);
-  --plass-danger-ring: color-mix(in srgb, var(--plass-danger-solid) 55%, transparent);
+  --plass-danger-ring: var(--plass-danger-accent);
 
   --plass-info-fill: linear-gradient(
     135deg,
@@ -696,7 +700,7 @@
   --plass-info-soft-press: color-mix(in srgb, var(--plass-info-accent) 26%, transparent);
   --plass-info-line: color-mix(in srgb, var(--plass-info-accent) 30%, transparent);
   --plass-info-line-hover: color-mix(in srgb, var(--plass-info-accent) 48%, transparent);
-  --plass-info-ring: color-mix(in srgb, var(--plass-info-solid) 55%, transparent);
+  --plass-info-ring: var(--plass-info-accent);
   /* The three greys a chart draws its frame with, derived so a project that
      re-tones its border moves the grid with it.
 
@@ -1194,6 +1198,190 @@
  * drift.
  * ------------------------------------------------------------------------- */
 
+/*
+ * The per-breakpoint slots do not inherit. Each one is written inline on the
+ * element that reads it, and a custom property is inherited by default, so a
+ * `PlFlex` nested in another took every rung its parent named and it did not:
+ * a vertical flex inside `{ xs: 'vertical', md: 'horizontal' }` turned
+ * horizontal at `md`, and a `PlGridItem` with no `span` inside a cell of eight
+ * was eight columns wide. The slots they resolve into (`--p-cols`, `--p-gap-x`)
+ * still inherit, which is how a grid item reads its grid.
+ */
+@property --p-gap-x-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-xl {
+  syntax: '*';
+  inherits: false;
+}
+
 .plass-grid,
 .plass-flex {
   --p-gap-x: var(--p-gap-x-xs, 0px);
@@ -1725,6 +1913,12 @@
   flex-direction: column;
 }
 
+/* Inset, so a box inside something that clips does not lose its ring. */
+.plass-marquee:focus-visible {
+  outline: 2px solid var(--plass-primary-ring);
+  outline-offset: -2px;
+}
+
 .plass-marquee-track {
   display: flex;
   flex: 0 0 auto;
@@ -1930,8 +2124,13 @@
   --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. */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) .plass-code[data-code-theme='auto'] {
+  :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);
 
@@ -2323,10 +2522,11 @@
  * arrangement that still reads as a set.
  *
  * The three lines below are what the slot is *for*. A grid and a quilt lay out
- * in CSS Grid off `--p-cols`; a masonry deals its items into that many lanes in
- * JavaScript, because which lane an item lands in changes the DOM and no
- * stylesheet can do that; and a justified row is flexbox, which needs no count
- * at all — it fills to the edge with whatever fits.
+ * in CSS Grid off `--p-cols`; a masonry deals its items into lanes in JavaScript
+ * and writes the count and the rows inline, because which lane an item lands in
+ * depends on the heights of the items before it and no stylesheet can work that
+ * out; and a justified row is flexbox, which needs no count at all — it fills
+ * to the edge with whatever fits.
  * ------------------------------------------------------------------------- */
 
 .plass-gallery-grid,
@@ -2334,6 +2534,32 @@
   grid-template-columns: repeat(var(--p-cols, 2), minmax(0, 1fr));
 }
 
+/*
+ * What holds a justified gallery's last row down.
+ *
+ * Every tile is grown in proportion to its own width, which is what makes a row
+ * come out one height once it has been stretched to the edge. The last row is
+ * the exception: it has fewer tiles and the same width to share, so they stretch
+ * further than any row above them — one leftover photograph ends up filling the
+ * whole width and standing two or three times as tall as the gallery it belongs
+ * to.
+ *
+ * An empty `::after` with an absurd `flex-grow` eats the leftover width instead,
+ * so the real tiles keep their basis and the row lands at the height it was
+ * aiming for. It has to be a pseudo-element rather than a filler item: the list
+ * is a `<ul>` with `role="list"`, and an extra `<li>` would be an extra item in
+ * it — a photograph that is not there, counted by every screen reader that
+ * announces how many there are.
+ *
+ * It costs a row of nothing when the last row happens to be full, which is why
+ * the flex-basis is zero.
+ */
+.plass-gallery-justified::after {
+  content: '';
+  flex-grow: 1000000;
+  flex-basis: 0;
+}
+
 /* ---------------------------------------------------------------------------
  * Reduced motion
  *
@@ -2405,6 +2631,27 @@
     animation: none;
   }
 
+  /*
+   * A marquee that stops would leave everything past the edge of its box out
+   * of sight for good. One copy is drawn, and the box scrolls along it instead
+   * of clipping it, so the strip stays one line rather than wrapping down the
+   * page; a platform that draws a permanent scrollbar adds only the bar. The
+   * component makes the box a tab stop while it scrolls.
+   */
+  .plass-marquee {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .plass-marquee-vertical {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .plass-marquee-track + .plass-marquee-track {
+    display: none;
+  }
+
   /* The arc stops travelling and becomes an even glow. The same trade the
      skeleton makes: the decoration survives, the motion does not. */
   .plass-anim-lighting::before {