@stasho/ds 0.15.2 → 0.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "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/project-switcher/project-switcher.tsx

@@ -178,6 +178,7 @@ const ProjectSwitcher = forwardRef<HTMLButtonElement, ProjectSwitcherProps>(
                 value={query}
                 onValueChange={setQuery}
                 placeholder={searchPlaceholder}
+                aria-label={searchPlaceholder}
                 className={cn(
                   "w-full border-b border-edge bg-transparent px-4 py-2.5",
                   "text-sm text-foreground placeholder:text-muted-foreground",

package/src/components/sidebar/sidebar.tsx

@@ -160,9 +160,12 @@ export function SidebarNav({
   return (
     <nav
       aria-label={ariaLabel}
-      className={cn("flex-1 overflow-y-auto p-2", className)}
+      className={cn(
+        "flex flex-1 flex-col gap-1 overflow-y-auto p-2",
+        className,
+      )}
     >
-      <ul className="flex flex-col gap-1">{children}</ul>
+      {children}
     </nav>
   );
 }