@stasho/ds 0.15.3 → 0.15.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.15.3",
+  "version": "0.15.5",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",

package/src/components/button/button.tsx

@@ -273,11 +273,25 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       return null;
     })();
 
+    // asChild lends the chassis to the child element (an anchor, usually), so
+    // the label to wrap is the child's children, not the child itself.
+    const label =
+      asChild && isValidElement(children)
+        ? (children.props as { children?: ReactNode }).children
+        : children;
+
     const content = (
       <>
         {leadingSlot}
-        <span className="inline-flex items-center leading-none">
-          {children}
+        {/* Height parity by construction: empirically (consuming app), both
+            button and anchor roots compute line-height 1.5, and a bare text
+            node renders a ~6px taller line box than this leading-none wrapper.
+            [gap:inherit] passes the root's per-size flex gap through to
+            multi-child labels (text + inline icon); single-child labels are
+            unaffected — same wrapper serves both the <button> and asChild
+            paths. */}
+        <span className="inline-flex items-center leading-none [gap:inherit]">
+          {label}
         </span>
         {!loading && iconRight ? (
           <span
@@ -294,11 +308,20 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
 
     if (asChild && isValidElement(children)) {
-      return cloneElement(children as ReactElement<Record<string, unknown>>, {
-        className: classes,
-        ref,
-        ...rest,
-      });
+      // Same inner structure as the <button> path (LED + label wrapper), so an
+      // asChild button is pixel-identical to its siblings — previously the raw
+      // child children rendered without either, making asChild buttons ~6px
+      // taller and LED-less.
+      return cloneElement(
+        children as ReactElement<Record<string, unknown>>,
+        {
+          className: classes,
+          ref,
+          "aria-busy": loading || undefined,
+          ...rest,
+        },
+        content,
+      );
     }
 
     return (

package/src/components/logo/logo.tsx

@@ -67,14 +67,30 @@ LogoFull.displayName = "LogoFull";
 /**
  * stasho wordmark only, no icon (placeholder logotype, rebrand still deferred).
  * Set in Anybody 800 italic to match the brand headings; the consuming app must
- * load Anybody or it falls back to sans-serif. viewBox is fitted to "stasho" at
- * that cut. Inherits color from parent via `currentColor`.
+ * load Anybody or it falls back to sans-serif. Inherits color from parent via
+ * `currentColor`.
+ *
+ * The wordmark is live `<text>`, so its width is decided by whichever faces the
+ * consuming app actually loaded — not by anything this component controls. The
+ * viewBox must therefore clear the WIDEST realistic rendering: overflow clips a
+ * glyph, while underflow only leaves benign trailing space. Measured at
+ * font-size 200, `font-stretch: normal` (Chromium, 2026-08-21): Anybody 800/900
+ * italic 848.9, Anybody 800 upright 833.1, Anybody 700 italic 777.6, generic
+ * sans-serif fallback ~650. 880 clears the widest with headroom.
+ *
+ * Two known ways past 880, both requiring a consumer to opt in: Anybody ships a
+ * `wdth` 75..125 axis, and `font-stretch` inherits into SVG `<text>` — at
+ * `wdth` 125 this measures 1046. Nothing sets it today; the numbers above
+ * assume `wdth` 100.
+ *
+ * The previous 654 was fitted to the generic sans-serif FALLBACK, not to
+ * Anybody, and clipped the trailing "o" by ~30% wherever Anybody loaded.
  */
 const LogoWordmark = forwardRef<SVGSVGElement, LogoProps>(
   ({ className, ...rest }, ref) => (
     <svg
       ref={ref}
-      viewBox="0 0 654 229"
+      viewBox="0 0 880 229"
       xmlns="http://www.w3.org/2000/svg"
       fill="currentColor"
       className={cn("shrink-0", className)}
@@ -102,12 +118,17 @@ LogoWordmark.displayName = "LogoWordmark";
  * logotype, rebrand still deferred). Set in Anybody 800 italic to match the
  * brand headings; the consuming app must load Anybody or it falls back to
  * sans-serif. Inherits color from parent via `currentColor`.
+ *
+ * Same live-`<text>` sizing rule as LogoWordmark above — the viewBox clears the
+ * widest realistic rendering. Measured at font-size 200 (Chromium, 2026-08-21):
+ * Anybody 800/900 italic "s" 157.9. 164 clears it with ~3.9% headroom. The
+ * previous 119 clipped the single glyph by ~33%.
  */
 const LogoLetter = forwardRef<SVGSVGElement, LogoProps>(
   ({ className, ...rest }, ref) => (
     <svg
       ref={ref}
-      viewBox="0 0 119 229"
+      viewBox="0 0 164 229"
       xmlns="http://www.w3.org/2000/svg"
       fill="currentColor"
       className={cn("shrink-0", className)}