@justai/cuts 0.133.0 → 0.138.0

package/src/Profile.astro

@@ -99,40 +99,44 @@ const vars = [
 </section>
 
 <style>
-  /* ---- PROFILE cut ---- */
-  .profile { padding-block-end: 8px; }
-  .cover {
-    height: var(--cover-h, 132px);
-    /* full-bleed to the persona's page edge (see --edge on Toolbar) */
-    margin-inline: calc(-1 * max(var(--edge, 16px), env(safe-area-inset-left))) calc(-1 * max(var(--edge, 16px), env(safe-area-inset-right)));
-    background: var(--cover, linear-gradient(135deg, var(--accent), transparent));
-    position: relative;
+  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
+     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
+  @layer justai.components {
+    /* ---- PROFILE cut ---- */
+    .profile { padding-block-end: 8px; }
+    .cover {
+      height: var(--cover-h, 132px);
+      /* full-bleed to the persona's page edge (see --edge on Toolbar) */
+      margin-inline: calc(-1 * max(var(--edge, 16px), env(safe-area-inset-left))) calc(-1 * max(var(--edge, 16px), env(safe-area-inset-right)));
+      background: var(--cover, linear-gradient(135deg, var(--accent), transparent));
+      position: relative;
+    }
+    @media (min-width: 640px) { .cover { margin-inline: -28px; } }
+    .avatar {
+      width: 76px; height: 76px; border-radius: var(--radius-lg); margin-block-start: -40px;
+      display: grid; place-items: center; padding: var(--avatar-pad, 0);
+      background: var(--avatar-bg, #fff);
+      border: 3px solid var(--bg); box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.22);
+      position: relative;
+      /* it is an <a> now — undo the link ground, or a slotted SVG drawn in currentColor turns accent */
+      color: inherit; text-decoration: none;
+      transition: transform 0.15s var(--ease-out, ease-out);
+    }
+    /* Pressed, not hovered. The tile is the persona's FACE: growing it under the cursor would animate the
+       one object on the page that should hold still. Depressing it on press is the iOS answer — it says
+       "this responds" at the moment of contact, on touch as well, where there is no hover to say it. */
+    .avatar:active { transform: scale(0.97); }
+    .avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+    @media (prefers-reduced-motion: reduce) { .avatar { transition: none; } }
+    /* the avatar content is slotted (persona-owned) → style it globally */
+    .avatar :global(svg) { width: 100%; height: 100%; display: block; }
+    .avatar :global(img) { width: 100%; height: 100%; display: block; object-fit: cover; }
+    @media (prefers-color-scheme: light) {
+      :global(html:not([data-theme="dark"])) .avatar { border-color: #fff; background: var(--avatar-bg-light, var(--avatar-bg, #fff)); }
+    }
+    .pname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; margin-block-start: 12px; }
+    .handle { color: var(--text-dim); font-size: var(--fs-xs); margin-block-start: 2px; }
+    .bio { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 12px; }
+    .meta { color: var(--text-dim); font-size: var(--fs-2xs); margin-block-start: 10px; }
   }
-  @media (min-width: 640px) { .cover { margin-inline: -28px; } }
-  .avatar {
-    width: 76px; height: 76px; border-radius: var(--radius-lg); margin-block-start: -40px;
-    display: grid; place-items: center; padding: var(--avatar-pad, 0);
-    background: var(--avatar-bg, #fff);
-    border: 3px solid var(--bg); box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.22);
-    position: relative;
-    /* it is an <a> now — undo the link ground, or a slotted SVG drawn in currentColor turns accent */
-    color: inherit; text-decoration: none;
-    transition: transform 0.15s var(--ease-out, ease-out);
-  }
-  /* Pressed, not hovered. The tile is the persona's FACE: growing it under the cursor would animate the
-     one object on the page that should hold still. Depressing it on press is the iOS answer — it says
-     "this responds" at the moment of contact, on touch as well, where there is no hover to say it. */
-  .avatar:active { transform: scale(0.97); }
-  .avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
-  @media (prefers-reduced-motion: reduce) { .avatar { transition: none; } }
-  /* the avatar content is slotted (persona-owned) → style it globally */
-  .avatar :global(svg) { width: 100%; height: 100%; display: block; }
-  .avatar :global(img) { width: 100%; height: 100%; display: block; object-fit: cover; }
-  @media (prefers-color-scheme: light) {
-    :global(html:not([data-theme="dark"])) .avatar { border-color: #fff; background: var(--avatar-bg-light, var(--avatar-bg, #fff)); }
-  }
-  .pname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; margin-block-start: 12px; }
-  .handle { color: var(--text-dim); font-size: var(--fs-xs); margin-block-start: 2px; }
-  .bio { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 12px; }
-  .meta { color: var(--text-dim); font-size: var(--fs-2xs); margin-block-start: 10px; }
 </style>

package/src/Segmented.astro

@@ -105,120 +105,71 @@ const on = value && options.some((o) => o.value === value) ? value : options[0]?
 </div>
 
 <style>
-  /* queries: segmented control styles · the chosen segment · ios segmented look
-     ONE TRACK, THE CHOSEN ONE RAISED. The track is recessed and the selection sits on top of it —
-     which is what makes a segmented control read as "these are the options" rather than as a row of
-     buttons where one happens to be coloured. */
-  .jseg {
-    /* ITS OWN BOX MODEL, not the consumer's. `width: 100%` plus a padding and a border comes out
-       SIX pixels wider than its parent unless something has already said `border-box` — and on a
-       bare page nothing has. Inheriting a reset is homework (law 1), and this is the shape that
-       homework takes when nobody notices: a control that fits everywhere it was tried. */
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: stretch;
-    gap: 2px;
-    padding: 2px;
-    border-radius: var(--radius-md);
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    /* A control is one tab stop. The roving tabindex below is what makes that true for the keyboard;
-       this is what makes it true for the eye. */
-    isolation: isolate;
-  }
-  /* queries: segmented control height · 44px touch target · the segments are too small
-     TWO SIZES, AND THE DIFFERENCE IS WHAT THE CONTROL IS.
-     `full` is a VIEW'S OWN SWITCH — a thumb's first target on the screen, so it meets the fleet's
-     44px like every row and every action does. `inline` is a TOOLBAR CHIP, sitting among other
-     chrome at chrome's size; forcing 44 there would make a toolbar taller than its content, which
-     is why iOS ships its own segmented controls shorter in exactly that position.
-     Found by a consumer's spec measuring 33px where its page promised 44 — a number the component
-     should have owned rather than each page discovering separately. */
-  .jseg[data-width="full"] { display: flex; width: 100%; }
-  .jseg[data-width="full"] .jseg-item { flex: 1; min-height: 44px; }
+  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
+     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
+  @layer justai.components {
+    /* queries: segmented control styles · the chosen segment · ios segmented look
+       ONE TRACK, THE CHOSEN ONE RAISED. The track is recessed and the selection sits on top of it —
+       which is what makes a segmented control read as "these are the options" rather than as a row of
+       buttons where one happens to be coloured. */
+    .jseg {
+      /* ITS OWN BOX MODEL, not the consumer's. `width: 100%` plus a padding and a border comes out
+         SIX pixels wider than its parent unless something has already said `border-box` — and on a
+         bare page nothing has. Inheriting a reset is homework (law 1), and this is the shape that
+         homework takes when nobody notices: a control that fits everywhere it was tried. */
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: stretch;
+      gap: 2px;
+      padding: 2px;
+      border-radius: var(--radius-md);
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      /* A control is one tab stop. The roving tabindex below is what makes that true for the keyboard;
+         this is what makes it true for the eye. */
+      isolation: isolate;
+    }
+    /* queries: segmented control height · 44px touch target · the segments are too small
+       TWO SIZES, AND THE DIFFERENCE IS WHAT THE CONTROL IS.
+       `full` is a VIEW'S OWN SWITCH — a thumb's first target on the screen, so it meets the fleet's
+       44px like every row and every action does. `inline` is a TOOLBAR CHIP, sitting among other
+       chrome at chrome's size; forcing 44 there would make a toolbar taller than its content, which
+       is why iOS ships its own segmented controls shorter in exactly that position.
+       Found by a consumer's spec measuring 33px where its page promised 44 — a number the component
+       should have owned rather than each page discovering separately. */
+    .jseg[data-width="full"] { display: flex; width: 100%; }
+    .jseg[data-width="full"] .jseg-item { flex: 1; min-height: 44px; }
 
-  .jseg-item {
-    box-sizing: border-box;
-    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-    min-width: 0; padding: 7px 12px;
-    border: 0; border-radius: calc(var(--radius-md) - 3px);
-    background: transparent; color: var(--text-dim);
-    font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
-    cursor: pointer;
-    transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
-  }
-  .jseg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .jseg-item :global(svg) { width: 16px; height: 16px; flex: none; }
+    .jseg-item {
+      box-sizing: border-box;
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+      min-width: 0; padding: 7px 12px;
+      border: 0; border-radius: calc(var(--radius-md) - 3px);
+      background: transparent; color: var(--text-dim);
+      font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
+      cursor: pointer;
+      transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
+    }
+    .jseg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .jseg-item :global(svg) { width: 16px; height: 16px; flex: none; }
 
-  /* THE CHOSEN ONE. `--surface` against a `--surface-2` track is the raise; the accent names it. */
-  .jseg-item[aria-checked="true"] {
-    background: var(--surface);
-    color: var(--accent);
-    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
-  }
-  .jseg-item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
-  .jseg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    /* THE CHOSEN ONE. `--surface` against a `--surface-2` track is the raise; the accent names it. */
+    .jseg-item[aria-checked="true"] {
+      background: var(--surface);
+      color: var(--accent);
+      box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
+    }
+    .jseg-item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
+    .jseg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
-  /* Motion is never forced on somebody who asked it off. */
-  @media (prefers-reduced-motion: reduce) {
-    .jseg-item { transition: none; }
+    /* Motion is never forced on somebody who asked it off. */
+    @media (prefers-reduced-motion: reduce) {
+      .jseg-item { transition: none; }
+    }
   }
 </style>
 
-<script>
-  // queries: segmented control keyboard · arrow keys · roving tabindex · aria-checked · change event
-  //
-  // ROVING TABINDEX IS THE WHOLE OF THE KEYBOARD. A radiogroup is ONE tab stop: Tab reaches the
-  // chosen option and the arrows move within the group. Leaving every option at `tabIndex 0` is the
-  // common mistake and it is invisible to anyone using a mouse — a person on a keyboard suddenly has
-  // to press Tab three times to get past a control they were not using.
-  //
-  // Lifted from qr, which had it right and had it alone.
-  const wire = (root: HTMLElement) => {
-    const items = () => Array.from(root.querySelectorAll<HTMLElement>('[role="radio"]'));
-
-    const set = (el: HTMLElement, focus?: boolean, quiet?: boolean) => {
-      if (el.getAttribute("aria-disabled") === "true") return;
-      const next = el.dataset.value!;
-      if (root.dataset.value === next) { if (focus) el.focus(); return; }
-      for (const r of items()) {
-        const chosen = r === el;
-        r.setAttribute("aria-checked", String(chosen));
-        r.tabIndex = chosen ? 0 : -1;
-      }
-      root.dataset.value = next;
-      if (focus) el.focus();
-      // Setting `.value` from code does NOT re-announce — a caller that just said what it wants does
-      // not need to be told, and a listener that reacts by setting the value would loop.
-      if (!quiet) root.dispatchEvent(new CustomEvent("change", { detail: { value: next }, bubbles: true }));
-    };
-
-    for (const el of items()) el.addEventListener("click", () => set(el, true));
-
-    root.addEventListener("keydown", (e) => {
-      const key = (e as KeyboardEvent).key;
-      const all = items().filter((r) => r.getAttribute("aria-disabled") !== "true");
-      const at = all.findIndex((r) => r.getAttribute("aria-checked") === "true");
-      let to = -1;
-      if (key === "ArrowRight" || key === "ArrowDown") to = (at + 1) % all.length;
-      else if (key === "ArrowLeft" || key === "ArrowUp") to = (at - 1 + all.length) % all.length;
-      else if (key === "Home") to = 0;
-      else if (key === "End") to = all.length - 1;
-      if (to < 0 || !all[to]) return;
-      e.preventDefault();
-      set(all[to], true);
-    });
-
-    // The one thing a caller needs beyond listening: saying what it wants.
-    Object.defineProperty(root, "value", {
-      get: () => root.dataset.value,
-      set: (v: string) => {
-        const el = items().find((r) => r.dataset.value === v);
-        if (el) set(el, false, true);
-      },
-      configurable: true,
-    });
-  };
-
-  for (const root of document.querySelectorAll<HTMLElement>(".jseg")) wire(root);
-</script>
+  <script>
+    // The behaviour lives in ./behaviour/segmented.ts — see that file for why it is not in here.
+    import "./behaviour/segmented";
+  </script>