@stll/ui 0.40.2 → 0.41.0

package/dist/components/button.d.ts

@@ -13,8 +13,8 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "row" | "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
+  size?: "icon" | "default" | "row" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  variant?: "link" | "destructive" | "default" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];

package/dist/components/command.d.ts

@@ -27,7 +27,7 @@ declare const CommandGroup: ({ className, ...props }: Autocomplete.Group.Props)
 declare const CommandGroupLabel: ({ className, ...props }: Autocomplete.GroupLabel.Props) => React$1.JSX.Element;
 declare const CommandCollection: (props: Autocomplete.Collection.Props) => React$1.JSX.Element;
 declare const commandItemVariants: (props?: ({
-  size?: "row" | "default" | null | undefined;
+  size?: "default" | "row" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const CommandItem: ({ className, size, ...props }: Autocomplete.Item.Props & {
   ref?: React$1.Ref<HTMLDivElement>;

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+  align?: "inline-start" | "block-end" | "block-start" | "inline-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/landing.d.ts

@@ -24,9 +24,11 @@ type LandingGreetingProps = {
   children: ReactNode;
 };
 export declare const LandingGreeting: ({ icon, children }: LandingGreetingProps) => import("react").JSX.Element;
-/** A column's heading: an icon and an uppercase label, as a link or a trigger. */
-export declare const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase outline-none focus-visible:ring-2";
-/** A row of a column, as a link or a button. */
+/** A column's heading: an icon and a sentence-case label, as a link or a trigger. */
+export declare const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-2";
+/** A row of a column, as a link or a button. Its text lines up with the
+ *  heading's label; the icon slot under the heading icon stays empty unless
+ *  the icon identifies the row (a matter's colour). */
 export declare const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start outline-none focus-visible:ring-2";
 type LandingSectionProps = {
   children: ReactNode;

package/dist/components/landing.js

@@ -39,9 +39,11 @@ const LandingGreeting = ({ icon, children }) => /* @__PURE__ */ jsxs("div", {
 		children
 	})]
 });
-/** A column's heading: an icon and an uppercase label, as a link or a trigger. */
-const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase outline-none focus-visible:ring-2";
-/** A row of a column, as a link or a button. */
+/** A column's heading: an icon and a sentence-case label, as a link or a trigger. */
+const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-2";
+/** A row of a column, as a link or a button. Its text lines up with the
+*  heading's label; the icon slot under the heading icon stays empty unless
+*  the icon identifies the row (a matter's colour). */
 const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start outline-none focus-visible:ring-2";
 /** A column: its heading stays put, its rows scroll beneath it. */
 const LandingSection = ({ children, heading }) => /* @__PURE__ */ jsxs("section", {
@@ -70,7 +72,10 @@ const LandingButton = ({ icon, meta, onClick, title }) => /* @__PURE__ */ jsx("b
 });
 const LandingItemText = ({ icon, iconTone = "muted", meta, title }) => /* @__PURE__ */ jsxs("span", {
 	className: "flex min-w-0 items-start gap-2",
-	children: [icon !== void 0 && /* @__PURE__ */ jsx(LandingRowIcon, {
+	children: [icon === void 0 ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "size-4 shrink-0"
+	}) : /* @__PURE__ */ jsx(LandingRowIcon, {
 		tone: iconTone,
 		children: icon
 	}), /* @__PURE__ */ jsxs("span", {

package/dist/components/sidebar.d.ts

@@ -33,7 +33,7 @@ declare function useSidebarLayout(): SidebarLayout;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 256 | 48;
+declare function useSidebarInlineSize(): 0 | 48 | 256;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.40.2",
+  "version": "0.41.0",
   "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",