@stll/ui 0.26.1 → 0.26.3

package/dist/components/button-variants.d.ts

@@ -10,7 +10,7 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
+  size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
   variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/button.js

@@ -18,12 +18,15 @@ function Button({ className, variant, size, render, loading, children, disabled,
 	});
 	const isAccessibleDisabled = disposition === BUTTON_DISPOSITION.accessibleDisabled;
 	const defaultProps = {
-		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "animate-spin" }), children] }) : children,
+		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderIcon, {
+			className: "animate-spin",
+			"data-slot": "button-loader"
+		}), children] }) : children,
 		className: cn(buttonVariants({
 			className,
 			size,
 			variant
-		}), isAccessibleDisabled && "cursor-not-allowed opacity-64"),
+		}), loading && "[&_svg:not([data-slot=button-loader])]:hidden", isAccessibleDisabled && "cursor-not-allowed opacity-64"),
 		"data-slot": "button",
 		...isAccessibleDisabled ? {
 			"aria-disabled": true,

package/dist/components/sidebar.d.ts

@@ -83,7 +83,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "default" | "lg" | "rail" | null | undefined;
+  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
   asChild?: boolean;

package/dist/inspector/chrome.js

@@ -45,7 +45,7 @@ const InspectorRailCell = ({ className, ...props }) => /* @__PURE__ */ jsx("div"
 });
 /** Scroll owner for rail tabs and other middle actions. */
 const InspectorRailContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("scrollbar-subtle flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
+	className: cn("flex min-h-0 flex-1 scrollbar-none flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
 	"data-slot": "inspector-rail-content",
 	...props
 });

package/dist/inspector/dock.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import "./pane-width.js";
+import { EllipsisIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inspector/dock.tsx
 const InspectorDock = ({ children, className, onResetWidth, rail, resizeHandleLabel, resizeHandleProps, showPaneContent, width }) => {
@@ -18,14 +19,23 @@ const InspectorDock = ({ children, className, onResetWidth, rail, resizeHandleLa
 			className: "fixed inset-y-0 end-0 z-10 hidden h-svh md:flex",
 			"data-slot": "inspector-dock-pane",
 			style: { width: widthPx },
-			children: [showPaneContent && /* @__PURE__ */ jsx("div", {
+			children: [showPaneContent && /* @__PURE__ */ jsxs("div", {
 				"aria-label": resizeHandleLabel,
-				className: "hover:bg-border active:bg-border focus-visible:bg-primary focus-visible:outline-primary absolute inset-y-0 -start-px z-20 flex w-1 cursor-col-resize items-center justify-center border-s focus-visible:outline-2",
+				className: "group focus-visible:outline-primary absolute inset-y-0 -start-1.5 z-20 flex w-3 cursor-col-resize items-center justify-center focus-visible:outline-2",
 				"data-slot": "inspector-resize-handle",
 				role: "separator",
 				...resizeHandleProps,
 				tabIndex: 0,
-				onDoubleClick: onResetWidth
+				onDoubleClick: onResetWidth,
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "bg-border group-hover:bg-primary group-active:bg-primary absolute inset-y-0 start-1/2 w-px -translate-x-1/2"
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "bg-background/80 text-foreground-placeholder ring-border/60 group-hover:bg-accent group-hover:text-foreground group-focus-visible:bg-accent group-focus-visible:text-foreground relative flex h-5 w-3 items-center justify-center rounded-full opacity-0 shadow-xs ring-1 backdrop-blur-sm transition-[color,background-color,opacity] group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100",
+					"data-slot": "inspector-resize-grip",
+					children: /* @__PURE__ */ jsx(EllipsisIcon, { className: "size-3 rotate-90" })
+				})]
 			}), showPaneContent || rail === void 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "bg-sidebar flex h-full w-full flex-row",
 				children: [rail, /* @__PURE__ */ jsx("div", {

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
+declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.26.1",
+  "version": "0.26.3",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -603,7 +603,7 @@
     "@base-ui/react": "1.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@playwright/test": "^1.62.0",
+    "@playwright/test": "^1.63.0",
     "@stll/typescript-config": "0.0.0",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/react-virtual": "^3.14.10",