@lessly/ui 2.1.0 → 2.2.0

package/dist/index.d.ts

@@ -477,6 +477,10 @@ declare const Toggle: React$1.ForwardRefExoticComponent<Omit<TogglePrimitive.Tog
  * 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).
  *
+ * 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

package/dist/index.js

@@ -914,12 +914,13 @@ var SlidingThumb = ({ index, count }) => /* @__PURE__ */ jsx20(
   }
 );
 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,
@@ -940,10 +941,13 @@ var ToggleGroup = React16.forwardRef(({ className, variant, size, treatment, sli
           // 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,

package/package.json

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