@lessly/ui 2.0.0 → 2.2.0

package/dist/index.d.ts

@@ -429,27 +429,25 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
 /**
  * Two signals on two channels that never touch (#446), and two treatments for two shapes.
  *
- * **Fill means the pointer is here.** Selection reads as an edge, and `ToggleGroup` picks which
- * edge from its `type` — the question being "can nothing be selected?".
+ * **Fill means the pointer is here — except inside a track, where it means "this one".**
+ * `ToggleGroup` picks the treatment from its `type`, the question being "can nothing be selected?".
  *
  * - `frame` (a standalone `Toggle`, and every `type="multiple"` group): each item carries its own
  *   1px hairline and selection steps it up to `border-strong` — 5.17:1 against the page in light and
- *   5.47:1 in dark, and 3.63:1 / 4.31:1 above the resting hairline it replaces. Fill used to say both
- *   things at 1.07:1, which is why a filter row could not say which of its filters were applied.
- * - `track` (every `type="single"` group): the group draws the track and the selected slot takes the
- *   selection pair (#452) — `bg-bg-selected` filled inside a `ring-border-selected` edge. The fill is
- *   1.08:1 against the page in dark and 1.04:1 in light, so it is the **edge** that carries the
- *   reading: 3.81:1 above the slot's own fill in dark and 3.75:1 in light, against 1.07:1 / 1.53:1
- *   for the `border-subtle` ring over `bg-bg-overlay` it replaces. A fill that faint is only placed
- *   at all against the track's own frame, which is why the track belongs to the component and not to
- *   the call site.
- *
- * The mark is a **ring**, not a border: a ring is a box-shadow, so it costs no layout and an
- * icon-only toggle stays square at the height its `size` declares. It is also the whole mark —
- * `track` carries no `shadow-sm`. The shadow was the raised reading a 1.18:1 fill could not give
- * alone; under a 3.81:1 edge it is a second, weaker statement of one state, its blur compositing to
- * 1.11:1 against the page in dark and 1.14:1 in light, and `shadow-sm` is the one dark step
- * `@lessly/tokens@0.7.0` leaves without a rim, so in dark it can only darken.
+ *   5.47:1 in dark, and 3.63:1 / 4.31:1 above the resting hairline it replaces. Nothing is filled but
+ *   the hovered item, so a filter row still says which of its filters are applied.
+ * - `track` (every `type="single"` group): the selected slot is a `bg-brand-subtle` tint with its
+ *   label in `text-brand` at 600 against the unselected 500. No edge on the slot and no frame around
+ *   the set. The tint measures 1.104:1 against the page in light and 1.144:1 in dark; the selected
+ *   word measures 1.55:1 light and 1.26:1 against the unselected word — 1.19:1 and 1.35:1 with hue
+ *   removed — and 5.89:1 light / 5.07:1 dark against the tint it sits on. The weight step is the one
+ *   channel that survives hue removal.
+ *
+ * The `frame` mark is a **ring**, not a border: a ring is a box-shadow, so it costs no layout and an
+ * icon-only toggle stays square at the height its `size` declares. `track` draws no ring and no
+ * `shadow-sm`: `shadow-sm` is the one dark step `@lessly/tokens@0.7.0` leaves without a rim, so in
+ * dark it can only darken, and its blur composites to 1.11:1 against the page in dark and 1.14:1 in
+ * light.
  *
  * Focus is an **outline held 2px off the box** — a flush ring painted over the selection mark, and
  * focused-selected and focused-unselected measured 1.55:1 apart, which is #446 on the keyboard.
@@ -477,12 +475,18 @@ declare const Toggle: React$1.ForwardRefExoticComponent<Omit<TogglePrimitive.Tog
  *
  * `multiple` is a set of independent chips — a filter row, where nothing need be on — so each chip
  * carries its own edge and selection steps that edge up. `single` is one object with a moving part,
- * so it takes the segmented-control treatment (#346): the group draws the **track** — a hairline
- * frame with no fill — and the selected slot is the only filled thing in the row.
+ * so it takes the segmented-control treatment (#346).
  *
- * The track is the component's, not the call site's: the slot fill measures 1.04:1 against the page
- * in light and 1.08:1 in dark, so without the track's edge a selected slot reads as nothing at all —
- * the defect #446 reports. A component cannot own half of a two-part signal.
+ * A `single` set of **glyphs** is the exception, and it is the treatment's own limit rather than a
+ * special case: with no word to thicken the mark would be the tint alone, which greyscale erases.
+ * That set takes `frame`, the same as a `multiple` one (#755).
+ *
+ * **The selected slot is a tint and a heavier word, and the track draws nothing else.** The
+ * `bg-brand-subtle` fill measures 1.104:1 against the page in light and 1.144:1 in dark; the label
+ * goes to `text-brand` at 600 against the unselected 500, which is 1.55:1 light and 1.26:1 dark
+ * against the unselected word — 1.19:1 and 1.35:1 with hue removed, so the weight step is the one
+ * channel that does not depend on seeing colour. There is no edge on the slot and no frame around
+ * the set: down a stacked list a frame put a rounded rectangle around every row.
  */
 declare const ToggleGroup: React$1.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React$1.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     treatment?: "track" | "frame" | null | undefined;
@@ -1389,6 +1393,15 @@ interface ExtensionIconProps extends LucideProps {
 /**
  * Renders the lucide-react icon named by a kebab-case manifest id, falling back
  * to the Puzzle glyph (plus a one-time dev warning) for unknown ids.
+ *
+ * A fallback carries `data-icon-fallback="<the unresolved id>"`, in every
+ * environment. That is the contract a consumer gates on — one DOM query in a
+ * snapshot, an E2E assertion, or a grep over built output names both the fact
+ * and the id, without a throw and without a line of production console output:
+ *
+ * ```ts
+ * expect(container.querySelector('[data-icon-fallback]')).toBeNull();
+ * ```
  */
 declare const ExtensionIcon: React$1.ForwardRefExoticComponent<Omit<ExtensionIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
 

package/dist/index.js

@@ -158,7 +158,13 @@ var DialogContent = React3.forwardRef(({ className, children, showClose = true,
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border-subtle bg-bg-elevated p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+        // The gap at both screen edges is an inset, not a narrower width: `inset-x-4 w-auto` sets
+        // the two edges and `mx-auto` centres whatever `max-w-lg` leaves over. Capping the width
+        // instead — a `max-w-[calc(100vw-2rem)]` beside `max-w-lg` — is the same tailwind-merge
+        // group, so it evicts the 512px cap, and a caller's own `max-w-2xl` would take the gap
+        // with it. The 16 is `AppShell`'s own mobile inset (#337), so this edge lands on the edge
+        // of the page behind the overlay.
+        "fixed inset-x-4 top-[50%] z-50 mx-auto grid w-auto max-w-lg translate-y-[-50%] gap-4 rounded-lg border border-border-subtle bg-bg-elevated p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       ),
       ...props,
@@ -842,7 +848,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var toggleVariants = cva3(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium text-text-secondary transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-text-primary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium text-text-secondary transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       /**
@@ -850,8 +856,8 @@ var toggleVariants = cva3(
        * lone toggle is by definition something that may be off.
        */
       treatment: {
-        frame: "ring-1 ring-inset ring-border-subtle hover:bg-bg-secondary hover:text-text-primary data-[state=on]:ring-border-strong",
-        track: "data-[state=off]:hover:bg-bg-secondary data-[state=off]:hover:text-text-primary data-[state=on]:bg-bg-selected data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-border-selected"
+        frame: "ring-1 ring-inset ring-border-subtle hover:bg-bg-secondary hover:text-text-primary data-[state=on]:text-text-primary data-[state=on]:ring-border-strong",
+        track: "data-[state=off]:hover:text-text-primary data-[state=on]:bg-bg-brand-subtle data-[state=on]:text-text-brand"
       },
       variant: {
         default: "bg-transparent",
@@ -903,17 +909,18 @@ var SlidingThumb = ({ index, count }) => /* @__PURE__ */ jsx20(
   "span",
   {
     "aria-hidden": "true",
-    className: "motion-segment-thumb pointer-events-none absolute inset-y-0.5 left-0.5 rounded-md border border-border-selected bg-bg-selected",
-    style: { width: `calc((100% - 0.25rem) / ${count})`, transform: `translateX(${index * 100}%)` }
+    className: "motion-segment-thumb pointer-events-none absolute inset-y-0 left-0 rounded-md bg-bg-brand-subtle",
+    style: { width: `calc(100% / ${count})`, transform: `translateX(${index * 100}%)` }
   }
 );
 var ToggleGroup = React16.forwardRef(({ className, variant, size, treatment, sliding, children, ...props }, ref) => {
-  const resolved = treatment ?? (props.type === "single" ? "track" : "frame");
+  const slots = React16.Children.toArray(children).filter(React16.isValidElement);
+  const wordless = slots.length > 0 && slots.every((slot) => isIconOnly(slot.props.children));
+  const resolved = treatment ?? (props.type === "single" && !wordless ? "track" : "frame");
   const [mirror, setMirror] = React16.useState(
     () => typeof props.defaultValue === "string" ? props.defaultValue : void 0
   );
   const selected = typeof props.value === "string" ? props.value : mirror;
-  const slots = React16.Children.toArray(children).filter(React16.isValidElement);
   const index = slots.findIndex((slot) => slot.props.value === selected);
   const rootProps = sliding && typeof props.value !== "string" ? {
     ...props,
@@ -929,13 +936,18 @@ var ToggleGroup = React16.forwardRef(({ className, variant, size, treatment, sli
       className: cn(
         resolved === "track" ? (
           // `w-fit` because a flex or grid parent blockifies `inline-flex` and then stretches it:
-          // measured, the track spanned the full 1400px inside Storybook's column.
-          "inline-flex w-fit items-center gap-0.5 rounded-lg border border-border-subtle bg-transparent p-0.5"
+          // measured, the track spanned the full 1400px inside Storybook's column. Nothing is
+          // drawn here: no frame, no fill, and so no padding to hold slots off a frame — which is
+          // what lets the thumb be exactly `100% / count` wide and travel in multiples of itself.
+          "inline-flex w-fit items-center gap-0.5"
         ) : "flex items-center justify-center gap-1",
-        // A sliding track is as wide as what holds it and its slots share that width equally, because
-        // the thumb is one slot wide and travels in multiples of itself. The gap goes for the same
-        // reason: a gap between slots is width the thumb's own step does not account for.
-        sliding && "relative flex w-full gap-0",
+        // A sliding track's slots share its width equally, because the thumb is one slot wide and
+        // travels in multiples of itself. The gap goes for the same reason: a gap between slots is
+        // width the thumb's own step does not account for. The track sizes to those slots rather
+        // than to whatever holds it — given a parent and no width of its own it used to span the
+        // whole of it, and with no frame drawn the slots then read as loose words with a tint
+        // somewhere in them (#754). A caller wanting full width writes one, as every call site did.
+        sliding && "relative flex w-fit gap-0",
         className
       ),
       ...rootProps,
@@ -960,12 +972,12 @@ var ToggleGroupItem = React16.forwardRef(({ className, children, variant, size,
     // the height its size declares. A slot is the one place this matters most — the items of a
     // group sit side by side, so one that is 8px wider than its neighbours is visible.
     isIconOnly(children) && ICON_ONLY_BOX,
-    // Inside a track, the selected slot is also the heavier word: weight is the one channel left
-    // once colour marks actions and the fill measures barely above the page.
+    // Inside a track, the selected slot is also the heavier word: weight is the one channel that
+    // survives hue removal, and the tint under it is 1.104:1 light / 1.144:1 dark on its own.
     context.treatment === "track" && "data-[state=on]:font-semibold",
-    // Under a sliding thumb the slot draws neither half of the selection pair — the thumb is both,
-    // and a second copy of it would sit still while the first one travelled.
-    context.sliding && "relative z-10 flex-1 data-[state=on]:bg-transparent data-[state=on]:ring-0"
+    // Under a sliding thumb the tint belongs to the thumb, which is the one that travels; a second
+    // copy on the slot would sit still while the first one moved. The word stays the slot's own.
+    context.sliding && "relative z-10 flex-1 data-[state=on]:bg-transparent"
   );
   if (inert) {
     return /* @__PURE__ */ jsx20("span", { ref, "aria-hidden": "true", className: cn(box, "invisible", className), children });
@@ -1158,7 +1170,13 @@ var AlertDialogContent = React21.forwardRef(({ className, ...props }, ref) => /*
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border-subtle bg-bg-elevated p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+        // The gap at both screen edges is an inset, not a narrower width: `inset-x-4 w-auto` sets
+        // the two edges and `mx-auto` centres whatever `max-w-lg` leaves over. Capping the width
+        // instead — a `max-w-[calc(100vw-2rem)]` beside `max-w-lg` — is the same tailwind-merge
+        // group, so it evicts the 512px cap, and a caller's own `max-w-2xl` would take the gap
+        // with it. The 16 is `AppShell`'s own mobile inset (#337), so this edge lands on the edge
+        // of the page behind the overlay.
+        "fixed inset-x-4 top-[50%] z-50 mx-auto grid w-auto max-w-lg translate-y-[-50%] gap-4 rounded-lg border border-border-subtle bg-bg-elevated p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -3426,7 +3444,7 @@ var ExtensionIcon = React51.forwardRef(
     const Icon = resolveIcon(name);
     if (!Icon) {
       warnUnknownIconOnce(name);
-      return /* @__PURE__ */ jsx62(Puzzle, { ref, ...props });
+      return /* @__PURE__ */ jsx62(Puzzle, { ref, ...props, "data-icon-fallback": name });
     }
     return /* @__PURE__ */ jsx62(Icon, { ref, ...props });
   }
@@ -6058,25 +6076,15 @@ function ThresholdControl({
   onChange
 }) {
   return /* @__PURE__ */ jsx95(
-    "span",
+    ToggleGroup,
     {
-      role: "group",
+      type: "single",
+      size: "sm",
       "aria-label": `Interrupt me for ${label}`,
-      className: "inline-flex shrink-0 rounded-lg border border-border-subtle bg-transparent p-0.5",
-      children: THRESHOLDS.map(([threshold, text]) => /* @__PURE__ */ jsx95(
-        "button",
-        {
-          type: "button",
-          "aria-pressed": value === threshold,
-          onClick: () => onChange(threshold),
-          className: cn(
-            "rounded-[7px] border border-transparent px-2.5 py-1 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
-            value === threshold ? "border-border-selected bg-bg-selected font-semibold text-text-primary" : "text-text-secondary hover:text-text-primary"
-          ),
-          children: text
-        },
-        threshold
-      ))
+      value,
+      onValueChange: (next) => next && onChange(next),
+      className: "shrink-0",
+      children: THRESHOLDS.map(([threshold, text]) => /* @__PURE__ */ jsx95(ToggleGroupItem, { value: threshold, children: text }, threshold))
     }
   );
 }
@@ -6138,20 +6146,18 @@ var NotificationSettings = React79.forwardRef(
     return /* @__PURE__ */ jsxs63("div", { ref, className: cn("space-y-5", className), children: [
       products && products.length > 0 && /* @__PURE__ */ jsxs63("div", { children: [
         /* @__PURE__ */ jsx95("p", { className: "mb-2 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: "Preferences for" }),
-        /* @__PURE__ */ jsx95("div", { className: "flex flex-wrap gap-2", children: [{ id: DEFAULT_KEY, label: "Default" }, ...products].map((t) => /* @__PURE__ */ jsx95(
-          "button",
+        /* @__PURE__ */ jsx95(
+          ToggleGroup,
           {
-            type: "button",
-            "aria-pressed": tab === t.id,
-            onClick: () => setTab(t.id),
-            className: cn(
-              "rounded-lg border border-transparent px-3 py-1.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
-              tab === t.id ? "border-border-selected bg-bg-selected font-semibold text-text-primary" : "bg-bg-elevated text-text-secondary hover:text-text-primary"
-            ),
-            children: t.label
-          },
-          t.id
-        )) })
+            type: "single",
+            size: "sm",
+            "aria-label": "Preferences for",
+            value: tab,
+            onValueChange: (next) => next && setTab(next),
+            className: "flex-wrap",
+            children: [{ id: DEFAULT_KEY, label: "Default" }, ...products].map((t) => /* @__PURE__ */ jsx95(ToggleGroupItem, { value: t.id, children: t.label }, t.id))
+          }
+        )
       ] }),
       isDefault ? /* @__PURE__ */ jsxs63(Fragment11, { children: [
         /* @__PURE__ */ jsx95("p", { className: "text-sm leading-relaxed text-text-secondary", children: "Your defaults, applied to every product unless you customize one. Everything addressed to you always lands in the in-app record; that cannot be turned off." }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",