@xenide-io/the-old-ui-theme 0.2.9 → 0.3.0

package/src/components/sections/ProductLayoutsShowcase.tsx

@@ -0,0 +1,138 @@
+import {
+  AuthCard,
+  AuthDivider,
+  AuthLayout,
+  Badge,
+  Button,
+  Checkbox,
+  Input,
+  LoadingState,
+  Panel,
+  SettingsLayout,
+  SettingsNav,
+  ShowcaseWrapper,
+  Toggle,
+} from "@/components/ui";
+import { IconDataReel, IconMail, IconPerson, IconTuning } from "@/components/icons";
+
+const settingsGroups = [
+  {
+    label: "Workspace",
+    items: [
+      { id: "general", label: "General", href: "#settings", icon: <IconTuning className="h-4 w-4" aria-hidden />, active: true },
+      { id: "members", label: "Members", href: "#settings", icon: <IconPerson className="h-4 w-4" aria-hidden />, badge: "12" },
+    ],
+  },
+  {
+    label: "Data",
+    items: [
+      { id: "sources", label: "Sources", href: "#settings", icon: <IconDataReel className="h-4 w-4" aria-hidden /> },
+      { id: "email", label: "Email reports", href: "#settings", icon: <IconMail className="h-4 w-4" aria-hidden /> },
+    ],
+  },
+] as const;
+
+export default function ProductLayoutsShowcase() {
+  const authCode = `import { AuthCard, AuthDivider, AuthLayout, Button, Input } from "@xenide-io/the-old-ui-theme";
+
+<AuthLayout brand="Acme Analytics" footer="Privacy · Terms">
+  <AuthCard title="Welcome back" description="Sign in to your workspace">
+    <Input label="Work email" type="email" autoComplete="email" />
+    <Input label="Password" type="password" autoComplete="current-password" />
+    <Button variant="primary" className="w-full">Sign in</Button>
+    <AuthDivider />
+    <Button variant="secondary" className="w-full">Continue with SSO</Button>
+  </AuthCard>
+</AuthLayout>`;
+
+  const settingsCode = `import { SettingsLayout, SettingsNav } from "@xenide-io/the-old-ui-theme";
+
+<SettingsLayout
+  title="Workspace settings"
+  navigation={<SettingsNav groups={settingsGroups} />}
+>
+  {/* Route-specific settings panels */}
+</SettingsLayout>`;
+
+  return (
+    <>
+      <ShowcaseWrapper
+        id="auth"
+        title="Authentication layouts"
+        description="Focused sign-in, verification, recovery, and loading shells. Authentication state and provider logic stay application-owned."
+        code={authCode}
+        filename="SignInPage.tsx"
+      >
+        <div className="grid gap-5 xl:grid-cols-[1.35fr,0.65fr]">
+          <AuthLayout
+            className="min-h-[34rem]"
+            brand={<span>The Old UI</span>}
+            aside={
+              <div className="flex h-full flex-col justify-between">
+                <strong className="text-xl">Understand every product decision.</strong>
+                <p className="max-w-xs text-sm opacity-80">One focused authentication step at a time, with room for product context.</p>
+              </div>
+            }
+            footer={<>Privacy · Terms · Status</>}
+          >
+            <AuthCard
+              title="Welcome back"
+              description="Sign in to your workspace"
+              footer={<>New to the workspace? <a href="#auth" className="font-medium text-ph-brand">Create an account</a></>}
+            >
+              <Input label="Work email" type="email" autoComplete="email" placeholder="you@company.com" />
+              <Input label="Password" type="password" autoComplete="current-password" />
+              <div className="flex items-center justify-between gap-3">
+                <Checkbox label="Remember me" />
+                <a href="#auth" className="text-xs font-medium text-ph-brand">Forgot password?</a>
+              </div>
+              <Button variant="primary" className="w-full">Sign in</Button>
+              <AuthDivider />
+              <Button variant="secondary" className="w-full">Continue with SSO</Button>
+            </AuthCard>
+          </AuthLayout>
+
+          <div className="grid gap-5">
+            <AuthCard title="Check your inbox" description="We sent a six-digit code to alex@company.com">
+              <Input label="Verification code" inputMode="numeric" autoComplete="one-time-code" placeholder="000000" />
+              <Button variant="primary" className="w-full">Verify email</Button>
+            </AuthCard>
+            <AuthCard title="Preparing workspace" description="Authentication completed successfully.">
+              <LoadingState
+                label="Preparing your workspace"
+                title="Loading your workspace"
+                description="Connecting data sources and restoring your last view."
+                variant="dots"
+              />
+            </AuthCard>
+          </div>
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="settings"
+        title="Settings layout"
+        description="Route-friendly grouped navigation, mobile disclosure menu, page actions, and flexible settings content."
+        code={settingsCode}
+        filename="SettingsPage.tsx"
+      >
+        <SettingsLayout
+          title="Workspace settings"
+          description="Manage identity, data collection, and workspace defaults."
+          actions={<Button variant="primary" size="sm">Save changes</Button>}
+          navigation={<SettingsNav groups={settingsGroups} />}
+        >
+          <Panel title="Workspace identity" description="Shown in navigation, reports, and invitations." className="space-y-4">
+            <Input label="Workspace name" defaultValue="Acme Analytics" />
+            <Input label="Workspace URL" defaultValue="app.example.com/acme" />
+          </Panel>
+          <Panel title="Collection defaults" className="space-y-4">
+            <Toggle label="Capture page views automatically" defaultChecked />
+            <Toggle label="Mask sensitive text inputs" defaultChecked />
+            <div><Badge variant="warning">Restart required</Badge></div>
+          </Panel>
+        </SettingsLayout>
+      </ShowcaseWrapper>
+    </>
+  );
+}

package/src/components/sections/ProgressShowcase.tsx

@@ -1,82 +1,79 @@
-import { IconSpinner } from "@/components/icons";
-import { ComponentDocs, Progress, ShowcaseWrapper } from "@/components/ui";
+import {
+  ComponentDocs,
+  Loader,
+  LoadingState,
+  Progress,
+  ShowcaseWrapper,
+  Skeleton,
+} from "@/components/ui";
 
 export default function ProgressShowcase() {
-  const code = `import { Progress } from "the-old-ui";
+  const code = `import { Loader, LoadingState, Progress, Skeleton } from "@xenide-io/the-old-ui-theme";
 
-<div className="space-y-8">
-  <div className="ph-panel space-y-6">
-    <Progress label="Ingest backlog" value={72} color="bg-ph-brand" showPercentage />
-    <Progress label="Exports" value={45} color="bg-ph-blue" showPercentage />
-    <Progress label="LLM evaluations" value={28} color="bg-ph-purple" showPercentage />
-  </div>
-
-  <div className="ph-panel flex flex-wrap items-center gap-10">
-    <Progress value={72} color="bg-ph-brand" size="lg" className="w-48" />
-    <Progress value={45} color="bg-ph-blue" size="lg" className="w-48" />
-  </div>
-
-  <div className="ph-panel flex flex-wrap items-center gap-8">
-    <span className="ph-loading" role="status" aria-label="Loading" />
-    <IconSpinner className="h-6 w-6 text-ph-brand" role="status" aria-label="Loading" />
-    <div className="ph-loading-dots" role="status" aria-label="Loading">
-      <span />
-      <span />
-      <span />
-    </div>
-  </div>
+<Progress label="Ingest backlog" value={72} showPercentage />
+<Loader variant="spinner" label="Refreshing insight" />
+<Loader variant="dots" label="Loading events" />
+<Loader variant="pulse" label="Connecting" />
+<LoadingState title="Loading dashboard" description="Restoring the latest results." />
+<div role="status" aria-label="Loading account">
+  <Skeleton shape="title" />
+  <Skeleton shape="text" />
+  <Skeleton shape="short-text" />
 </div>`;
 
   return (
     <ShowcaseWrapper
       title="Progress & loading"
-      description="Linear progress bars, spinners, and skeleton placeholders with semantic colour support."
+      description="Determinate progress, compact action loaders, full-region loading states, and structure-matching cold-load skeletons."
       code={code}
-      filename="ProgressExample.tsx"
+      filename="LoadingExample.tsx"
       docs={
         <ComponentDocs
           rows={[
-            { name: "value", type: "number", description: "Current value." },
-            { name: "max", type: "number", defaultValue: "100", description: "Maximum value." },
-            { name: "color", type: "string", defaultValue: "bg-ph-brand", description: "Tailwind colour class for the bar." },
-            { name: "label", type: "string", description: "Label shown above the bar." },
-            { name: "showPercentage", type: "boolean", defaultValue: "false", description: "Show percentage text." },
-            { name: "size", type: "sm | md | lg", defaultValue: "md", description: "Bar height." },
+            { name: "Loader.variant", type: "spinner | dots | pulse", defaultValue: "spinner", description: "Indeterminate treatment for compact asynchronous work." },
+            { name: "Loader.size", type: "sm | md | lg", defaultValue: "md", description: "Visual loader size." },
+            { name: "LoadingState", type: "LoadingStateProps", description: "Centered region state with one accessible status message." },
+            { name: "Skeleton.shape", type: "title | text | short-text | avatar | button | block", defaultValue: "text", description: "Decorative skeleton matching expected content geometry." },
+            { name: "Progress.value", type: "number", description: "Real determinate progress value." },
           ]}
         />
       }
     >
-      <div className="space-y-8">
+      <div className="space-y-6">
         <div className="ph-panel space-y-6">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Linear bars</h3>
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Determinate progress</h3>
           <Progress label="Ingest backlog" value={72} color="bg-ph-brand" showPercentage />
           <Progress label="Exports" value={45} color="bg-ph-blue" showPercentage />
           <Progress label="LLM evaluations" value={28} color="bg-ph-purple" showPercentage />
         </div>
 
-        <div className="ph-panel flex flex-wrap items-center gap-10">
-          <div className="w-full">
-            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Large bars</h3>
-            <div className="flex gap-10">
-              <Progress value={72} color="bg-ph-brand" size="lg" className="w-48" />
-              <Progress value={45} color="bg-ph-blue" size="lg" className="w-48" />
+        <div className="grid gap-4 md:grid-cols-3">
+          {(["spinner", "dots", "pulse"] as const).map((variant) => (
+            <div key={variant} className="ph-panel flex min-h-28 flex-col items-center justify-center gap-3">
+              <Loader variant={variant} size="lg" label={`${variant} loader`} />
+              <code className="ph-kbd">{variant}</code>
             </div>
-          </div>
+          ))}
         </div>
 
-        <div className="ph-panel flex flex-wrap items-center gap-8">
-          <div className="flex items-center gap-3 text-ph-subtle">
-            <span className="ph-loading" role="status" aria-label="Loading" />
-            <code className="ph-kbd">ph-loading</code> — CSS spinner
+        <div className="grid gap-4 lg:grid-cols-2">
+          <div className="ph-panel p-0">
+            <LoadingState
+              label="Loading dashboard"
+              title="Loading dashboard"
+              description="Restoring the latest results without pretending progress is measurable."
+            />
           </div>
-          <div className="flex items-center gap-3 text-ph-subtle">
-            <IconSpinner className="h-6 w-6 text-ph-brand" role="status" aria-label="Loading" />
-            <code className="ph-kbd">IconSpinner</code> — Animated icon
-          </div>
-          <div className="ph-loading-dots" role="status" aria-label="Loading">
-            <span />
-            <span />
-            <span />
+          <div className="ph-panel" role="status" aria-label="Loading account summary">
+            <div className="mb-5 flex items-center gap-3">
+              <Skeleton shape="avatar" />
+              <div className="min-w-0 flex-1">
+                <Skeleton shape="title" className="mb-2 w-1/2" />
+                <Skeleton shape="short-text" className="w-2/3" />
+              </div>
+            </div>
+            <Skeleton shape="block" className="mb-4" />
+            <div className="flex justify-end"><Skeleton shape="button" /></div>
           </div>
         </div>
       </div>

package/src/components/sections/SwapShowcase.tsx

@@ -9,15 +9,17 @@ function IconSwapToggle({
   onIcon: OnIcon,
   offClassName,
   onClassName,
+  label,
 }: {
   offIcon: typeof IconBellOff;
   onIcon: typeof IconBell;
   offClassName?: string;
   onClassName?: string;
+  label: string;
 }) {
   return (
-    <label className="group relative inline-flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-ph-surface shadow-ph">
-      <input type="checkbox" className="sr-only" />
+    <label className="group relative inline-flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-ph-surface shadow-ph focus-within:ring-2 focus-within:ring-ph-focus focus-within:ring-offset-2">
+      <input type="checkbox" className="sr-only" aria-label={label} />
       <span className="ph-icon-swap h-7 w-7" aria-hidden>
         <OffIcon
           className={cn(
@@ -37,10 +39,11 @@ function IconSwapToggle({
 }
 
 export default function SwapShowcase() {
-  const code = `import { IconBell, IconBellOff, IconMoon, IconSun, IconVolume, IconVolumeOff } from "the-old-ui";
+  const code = `import { IconBell, IconBellOff, IconMoon, IconSun, IconVolume, IconVolumeOff } from "@xenide-io/the-old-ui-theme";
 
 <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted p-8">
   <IconSwapToggle
+    label="Mute audio"
     offIcon={IconVolume}
     onIcon={IconVolumeOff}
     offClassName="text-ph-brand"
@@ -48,6 +51,7 @@ export default function SwapShowcase() {
   />
 
   <IconSwapToggle
+    label="Mute notifications"
     offIcon={IconBell}
     onIcon={IconBellOff}
     offClassName="rotate-[-8deg] text-ph-mutedtext"
@@ -55,10 +59,11 @@ export default function SwapShowcase() {
   />
 
   <IconSwapToggle
+    label="Use light appearance"
     offIcon={IconMoon}
     onIcon={IconSun}
     offClassName="text-ph-mutedtext"
-    onClassName="text-amber-500"
+    onClassName="text-ph-warning"
   />
 </div>`;
 
@@ -66,6 +71,7 @@ export default function SwapShowcase() {
     <ShowcaseWrapper title="Icon swap" code={code} filename="SwapExample.tsx">
       <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted p-8">
         <IconSwapToggle
+          label="Mute audio"
           offIcon={IconVolume}
           onIcon={IconVolumeOff}
           offClassName="text-ph-brand"
@@ -73,6 +79,7 @@ export default function SwapShowcase() {
         />
 
         <IconSwapToggle
+          label="Mute notifications"
           offIcon={IconBell}
           onIcon={IconBellOff}
           offClassName="rotate-[-8deg] text-ph-mutedtext"
@@ -80,10 +87,11 @@ export default function SwapShowcase() {
         />
 
         <IconSwapToggle
+          label="Use light appearance"
           offIcon={IconMoon}
           onIcon={IconSun}
           offClassName="text-ph-mutedtext"
-          onClassName="text-amber-500"
+          onClassName="text-ph-warning"
         />
       </div>
     </ShowcaseWrapper>

package/src/components/ui/Alert.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
-import { IconCancel, IconCheckCircle, IconErrorOutline, IconExclamation } from "@/components/icons";
+import { forwardRef, type AriaAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { IconCancel, IconCheckCircle, IconClose, IconExclamation, IconInfo } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
 export type AlertStatus = "info" | "success" | "warning" | "danger";
 
-export interface AlertProps {
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   status?: AlertStatus;
   title?: string;
   description?: string;
@@ -12,13 +12,15 @@ export interface AlertProps {
   children?: ReactNode;
   className?: string;
   onDismiss?: () => void;
+  live?: AriaAttributes["aria-live"];
+  dismissLabel?: string;
 }
 
-const statusConfig: Record<AlertStatus, { icon: typeof IconErrorOutline; color: string } > = {
-  info: { icon: IconErrorOutline, color: "text-ph-info" },
-  success: { icon: IconCheckCircle, color: "text-ph-success" },
-  warning: { icon: IconExclamation, color: "text-ph-warning" },
-  danger: { icon: IconCancel, color: "text-ph-danger" },
+const statusConfig: Record<AlertStatus, { icon: typeof IconInfo } > = {
+  info: { icon: IconInfo },
+  success: { icon: IconCheckCircle },
+  warning: { icon: IconExclamation },
+  danger: { icon: IconCancel },
 };
 
 const statusClassMap: Record<AlertStatus, string > = {
@@ -28,7 +30,7 @@ const statusClassMap: Record<AlertStatus, string > = {
   danger: "ph-alert-danger",
 };
 
-export function Alert({
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert({
   status = "info",
   title,
   description,
@@ -36,17 +38,24 @@ export function Alert({
   children,
   className,
   onDismiss,
-}: AlertProps) {
+  live,
+  dismissLabel = "Dismiss notification",
+  role,
+  ...props
+}, ref) {
   const config = statusConfig[status];
   const Icon = config.icon;
 
   return (
     <div
-      role="alert"
+      ref={ref}
+      role={role ?? (live === "assertive" ? "alert" : live === "polite" ? "status" : undefined)}
+      aria-live={live}
       className={cn("ph-alert", statusClassMap[status], className)}
+      {...props}
     >
-      {icon ?? <Icon className={cn("mt-0.5 h-5 w-5 shrink-0", config.color)} />}
-      <div className="flex-1">
+      {icon ?? <Icon className="ph-alert-icon mt-0.5 h-5 w-5 shrink-0" aria-hidden />}
+      <div className="min-w-0 flex-1">
         {title && <p className="font-semibold">{title}</p>}
         {description && <p className="mt-1 text-sm text-ph-subtle">{description}</p>}
         {children}
@@ -55,14 +64,14 @@ export function Alert({
         <button
           type="button"
           onClick={onDismiss}
-          className="shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink"
-          aria-label="Dismiss"
+          className="ph-alert-dismiss"
+          aria-label={dismissLabel}
         >
-          <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
+          <IconClose className="h-4 w-4" aria-hidden />
         </button>
       )}
     </div>
   );
-}
+});
+
+Alert.displayName = "Alert";

package/src/components/ui/AuthLayout.tsx

@@ -0,0 +1,58 @@
+import { useId, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface AuthLayoutProps extends ComponentPropsWithoutRef<"div"> {
+  brand?: ReactNode;
+  footer?: ReactNode;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+export interface AuthCardProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}
+
+export interface AuthDividerProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+}
+
+export function AuthLayout({ brand, footer, aside, children, className, ...props }: AuthLayoutProps) {
+  return (
+    <div className={cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className)} {...props}>
+      {aside ? <aside className="ph-auth-layout__aside">{aside}</aside> : null}
+      <div className="ph-auth-layout__main">
+        <div className="ph-auth-layout__column">
+          {brand ? <div className="ph-auth-layout__brand">{brand}</div> : null}
+          {children}
+          {footer ? <footer className="ph-auth-layout__footer">{footer}</footer> : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function AuthCard({ title, description, footer, children, className, ...props }: AuthCardProps) {
+  const titleId = useId();
+
+  return (
+    <section className={cn("ph-auth-card", className)} aria-labelledby={titleId} {...props}>
+      <header className="ph-auth-card__header">
+        <h1 id={titleId}>{title}</h1>
+        {description ? <p>{description}</p> : null}
+      </header>
+      <div className="ph-auth-card__body">{children}</div>
+      {footer ? <footer className="ph-auth-card__footer">{footer}</footer> : null}
+    </section>
+  );
+}
+
+export function AuthDivider({ children = "or continue with", className, ...props }: AuthDividerProps) {
+  return (
+    <div className={cn("ph-auth-divider", className)} {...props}>
+      <span>{children}</span>
+    </div>
+  );
+}

package/src/components/ui/Badge.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export type BadgeVariant =
@@ -12,7 +12,7 @@ export type BadgeVariant =
 
 export type BadgeSize = "sm" | "md";
 
-export interface BadgeProps {
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   variant?: BadgeVariant;
   size?: BadgeSize;
   children?: ReactNode;
@@ -34,22 +34,27 @@ const sizeMap: Record<BadgeSize, string> = {
   md: "",
 };
 
-export function Badge({
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge({
   variant = "neutral",
   size = "md",
   children,
   className,
-}: BadgeProps) {
+  ...props
+}, ref) {
   return (
     <span
+      ref={ref}
       className={cn(
         "ph-badge",
         variantMap[variant],
         sizeMap[size],
         className
       )}
+      {...props}
     >
       {children}
     </span>
   );
-}
+});
+
+Badge.displayName = "Badge";

package/src/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { ButtonChrome } from "@/components/ui/ButtonChrome";
 import { cn } from "@/lib/cn";
 
@@ -29,6 +29,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ReactNode;
   sideIcon?: ReactNode;
   children?: ReactNode;
+  loading?: boolean;
+  loadingLabel?: ReactNode;
 }
 
 const variantClass: Record<ButtonVariant, string> = {
@@ -60,11 +62,8 @@ const shapeClass: Record<ButtonShape, string> = {
   wide: "ph-btn-wide",
 };
 
-/**
- * PostHog LemonButton parity — primary/secondary use ::before border ring + ::after face/ridge
- * (see PostHog `LemonButton.scss`). Prefer this over raw `<button className="ph-btn …">`.
- */
-export function Button({
+/** Filled variants keep a stationary depth plate while the face and content move together. */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
   variant = "secondary",
   size = "md",
   shape = "default",
@@ -72,19 +71,24 @@ export function Button({
   split = false,
   icon,
   sideIcon,
+  loading = false,
+  loadingLabel,
   className,
   children,
   type = "button",
+  disabled,
   ...props
-}: ButtonProps) {
-  const usesLemonChrome = variant === "primary" || variant === "secondary";
+}, ref) {
+  const usesLemonChrome = !["tertiary", "ghost", "link"].includes(variant);
+  const label = loadingLabel ?? children;
+  const leadingIcon = loading ? <span className="ph-btn-spinner" aria-hidden /> : icon;
 
   const content = usesLemonChrome ? (
-    <ButtonChrome label={children} icon={icon} sideIcon={sideIcon} split={split} />
+    <ButtonChrome label={label} icon={leadingIcon} sideIcon={sideIcon} split={split} />
   ) : (
     <>
-      {icon != null ? <span className="ph-btn-icon">{icon}</span> : null}
-      {children != null ? <span className="ph-btn-label">{children}</span> : null}
+      {leadingIcon != null ? <span className="ph-btn-icon">{leadingIcon}</span> : null}
+      {label != null ? <span className="ph-btn-label">{label}</span> : null}
       {split ? <span className="ph-btn-split-divider" aria-hidden /> : null}
       {sideIcon != null ? <span className="ph-btn-side-icon">{sideIcon}</span> : null}
     </>
@@ -92,9 +96,13 @@ export function Button({
 
   return (
     <button
+      ref={ref}
       type={type}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
       className={cn(
         "ph-btn",
+        usesLemonChrome && "ph-btn-raised",
         outline && "ph-btn-outline",
         variantClass[variant],
         sizeClass[size],
@@ -107,4 +115,6 @@ export function Button({
       {content}
     </button>
   );
-}
+});
+
+Button.displayName = "Button";

package/src/components/ui/ButtonChrome.tsx

@@ -7,7 +7,7 @@ export interface ButtonChromeProps {
   split?: boolean;
 }
 
-/** Inner face for Lemon primary/secondary — keeps labels above ::after ridge. */
+/** Content layer for tactile variants; CSS moves it with the independently rendered face. */
 export function ButtonChrome({ label, icon, sideIcon, split }: ButtonChromeProps) {
   return (
     <span className="ph-btn-chrome">