@elabs-ai/components-ui 4.2.0 → 5.1.0

package/src/components/revision-timeline/revision-timeline.tsx

@@ -528,9 +528,7 @@ function DayHeader({ label }: DayHeaderProps) {
       style={{ height: DAY_HEADER_H }}
       className="box-border flex items-center gap-3 px-3"
     >
-      <span className="text-meta font-medium uppercase tracking-wide text-muted-foreground">
-        {label}
-      </span>
+      <span className="text-eyebrow uppercase text-muted-foreground">{label}</span>
       <div className="h-px flex-1 bg-border" aria-hidden="true" />
     </div>
   );

package/src/components/schema-form/index.ts

@@ -33,6 +33,7 @@ export {
 export {
   fieldSpecSchema,
   formSpecSchema,
+  formSectionSchema,
   enumOptionSchema,
   keyValueRowSchema,
   stringFieldSchema,
@@ -73,6 +74,7 @@ export {
   type GroupFieldSpec,
   type FieldSpec,
   type FormSpec,
+  type FormSectionSpec,
   type FormValue,
   type FormValues,
   type FormSubmitState,

package/src/components/schema-form/schema-form-spec.ts

@@ -91,6 +91,11 @@ const baseField = {
       equals: z.union([z.string(), z.number(), z.boolean()]),
     })
     .optional(),
+  /**
+   * Show the value as read-only text (a `Descriptions` item) instead of an
+   * editable control. The value still belongs to the form's `values`.
+   */
+  readOnly: z.boolean().optional(),
 };
 
 /** A single-line or multi-line text field. */
@@ -306,7 +311,25 @@ export const formSpecSchema = z.object({
   fields: z.array(fieldSpecSchema),
   /** Submit button label. @default "Submit" */
   submitLabel: z.string().optional(),
+  /**
+   * Collapsible groups of top-level fields, in display order. Fields not named
+   * in any section render first, ungrouped. Omit for the flat layout.
+   */
+  sections: z.array(z.lazy(() => formSectionSchema)).optional(),
+});
+
+/** One collapsible group of top-level fields in a `FormSpec`. */
+export const formSectionSchema = z.object({
+  /** Stable key for the section. */
+  id: z.string(),
+  /** Heading on the section's disclosure trigger. */
+  label: z.string(),
+  /** Names of the top-level fields the section holds, in display order. */
+  fields: z.array(z.string()),
+  /** Start collapsed. @default false */
+  collapsed: z.boolean().optional(),
 });
+export type FormSectionSpec = z.infer<typeof formSectionSchema>;
 export type FormSpec = Omit<z.infer<typeof formSpecSchema>, "fields"> & { fields: FieldSpec[] };
 
 // ---------------------------------------------------------------------------
@@ -345,6 +368,8 @@ export interface NormalizedFormSpec {
   description?: string;
   submitLabel?: string;
   fields: FieldSpec[];
+  /** Collapsible field groups; absent when the spec declares none. */
+  sections?: FormSectionSpec[];
 }
 
 /**
@@ -415,10 +440,21 @@ export function normalizeFormSpec(
       description: typeof raw.description === "string" ? raw.description : undefined,
       submitLabel: typeof raw.submitLabel === "string" ? raw.submitLabel : undefined,
       fields,
+      ...normalizeSections(raw.sections),
     },
   };
 }
 
+/** Keep only well-formed sections; `{}` when there are none, so the normalized shape is unchanged. */
+function normalizeSections(raw: unknown): { sections?: FormSectionSpec[] } {
+  if (!Array.isArray(raw)) return {};
+  const sections = raw.flatMap((candidate) => {
+    const parsed = formSectionSchema.safeParse(candidate);
+    return parsed.success ? [parsed.data] : [];
+  });
+  return sections.length > 0 ? { sections } : {};
+}
+
 // ---------------------------------------------------------------------------
 // Field tree helpers (fields can nest inside `group` branches)
 // ---------------------------------------------------------------------------

package/src/components/schema-form/schema-form.stories.tsx

@@ -564,3 +564,36 @@ export const FromJsonSchema: Story = {
     return <SchemaForm spec={spec} onSubmit={(state) => console.info("submit", state)} />;
   },
 };
+
+// SchemaForm sections — RM-080
+const sectionedSpec: FormSpec = {
+  formName: "tile_properties",
+  title: "Tile properties",
+  fields: [
+    { type: "string", name: "id", label: "Tile id", readOnly: true, default: "chart-1" },
+    { type: "string", name: "title", label: "Title" },
+    { type: "string", name: "subtitle", label: "Subtitle" },
+    { type: "string", name: "visibleWhen", label: "Show when" },
+    { type: "integer", name: "minW", label: "Minimum width (cells)", min: 1 },
+  ],
+  sections: [
+    { id: "general", label: "General", fields: ["title", "subtitle"] },
+    { id: "visibility", label: "Visibility", fields: ["visibleWhen"] },
+    { id: "size", label: "Size", fields: ["minW"], collapsed: true },
+  ],
+};
+
+/** `sections` groups fields into disclosures; `readOnly` shows a value as text. */
+export const Sections: Story = {
+  args: { spec: sectionedSpec },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("chart-1")).toBeInTheDocument();
+    await expect(canvas.queryByRole("textbox", { name: "Tile id" })).toBeNull();
+    await expect(canvas.queryByLabelText(/Minimum width/)).toBeNull();
+    await userEvent.click(canvas.getByRole("button", { name: "Size" }));
+    await waitFor(() => expect(canvas.getByLabelText(/Minimum width/)).toBeVisible());
+    await userEvent.click(canvas.getByRole("button", { name: "General" }));
+    await waitFor(() => expect(canvas.queryByLabelText("Title")).toBeNull());
+  },
+};

package/src/components/schema-form/schema-form.test.tsx

@@ -1019,3 +1019,46 @@ describe("SchemaForm — per-field subscription (#review 3.4: one context re-ren
     expect(counts.clientId).toBe(1);
   });
 });
+
+// SchemaForm sections — RM-080
+describe("SchemaForm sections and readOnly", () => {
+  const spec: FormSpec = {
+    formName: "sections",
+    fields: [
+      { type: "string", name: "free", label: "Free" },
+      { type: "string", name: "id", label: "Id", readOnly: true, default: "abc" },
+      { type: "string", name: "title", label: "Title" },
+      { type: "integer", name: "minW", label: "Min width" },
+    ],
+    sections: [
+      { id: "general", label: "General", fields: ["title"] },
+      { id: "size", label: "Size", fields: ["minW"], collapsed: true },
+    ],
+  };
+
+  it("renders ungrouped fields first, then collapsible sections", async () => {
+    render(<SchemaForm spec={spec} />);
+    const free = screen.getByLabelText("Free");
+    const general = screen.getByRole("button", { name: "General" });
+    expect(free.compareDocumentPosition(general) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(screen.getByLabelText("Title")).toBeInTheDocument();
+    expect(screen.queryByLabelText("Min width")).toBeNull();
+    await userEvent.click(screen.getByRole("button", { name: "Size" }));
+    expect(screen.getByLabelText("Min width")).toBeInTheDocument();
+    await userEvent.click(general);
+    expect(screen.queryByLabelText("Title")).toBeNull();
+  });
+
+  it("renders a readOnly field as text, not a control", () => {
+    render(<SchemaForm spec={spec} />);
+    expect(screen.getByText("abc")).toBeInTheDocument();
+    expect(screen.queryByRole("textbox", { name: "Id" })).toBeNull();
+  });
+
+  it("keeps the normalized shape unchanged when no sections are declared", () => {
+    const result = normalizeFormSpec({ formName: "x", fields: [] });
+    expect(result.ok && "sections" in result.spec).toBe(false);
+    const withBad = normalizeFormSpec({ formName: "x", fields: [], sections: [{ id: 1 }] });
+    expect(withBad.ok && "sections" in withBad.spec).toBe(false);
+  });
+});

package/src/components/schema-form/schema-form.tsx

@@ -84,6 +84,9 @@ import {
 } from "../file-upload";
 import { AdvancedGroup } from "../advanced-group";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../tabs";
+import { ChevronRight } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible";
+import { Descriptions, DescriptionsItem } from "../descriptions";
 
 import {
   checkFileIssue,
@@ -745,6 +748,32 @@ export const SchemaFormField = memo(
       setValue: store.setValue,
     };
 
+    if (field.type !== "group" && field.readOnly) {
+      return (
+        <div
+          ref={ref}
+          data-slot="schema-form-field"
+          data-readonly=""
+          className={cn("flex flex-col gap-1.5", className)}
+          {...props}
+        >
+          <Descriptions layout="vertical">
+            <DescriptionsItem
+              label={fieldLabel(field)}
+              numeric={field.type === "number" || field.type === "integer"}
+            >
+              {readOnlyText(snapshot.value)}
+            </DescriptionsItem>
+          </Descriptions>
+          {hasDesc && (
+            <p id={descId(meta.formId, name)} className="text-caption text-muted-foreground">
+              {description}
+            </p>
+          )}
+        </div>
+      );
+    }
+
     const isBoolean = field.type === "boolean";
     const isGroup = field.type === "group";
     // A multi-value control renders a labelled REGION, not one focusable
@@ -852,14 +881,92 @@ export const SchemaFormFields = forwardRef<HTMLDivElement, SchemaFormFieldsProps
         className={cn("flex flex-col gap-4", className)}
         {...props}
       >
-        {visibleNames.map((name) => (
-          <SchemaFormField key={name} name={name} />
-        ))}
+        {spec.sections
+          ? (() => {
+              const grouped = new Set(spec.sections.flatMap((section) => section.fields));
+              const visible = new Set(visibleNames);
+              return (
+                <>
+                  {visibleNames
+                    .filter((name) => !grouped.has(name))
+                    .map((name) => (
+                      <SchemaFormField key={name} name={name} />
+                    ))}
+                  {spec.sections.map((section) => {
+                    const names = section.fields.filter((name) => visible.has(name));
+                    if (names.length === 0) return null;
+                    return (
+                      <SchemaFormSection
+                        key={section.id}
+                        label={section.label}
+                        collapsed={section.collapsed}
+                      >
+                        {names.map((name) => (
+                          <SchemaFormField key={name} name={name} />
+                        ))}
+                      </SchemaFormSection>
+                    );
+                  })}
+                </>
+              );
+            })()
+          : visibleNames.map((name) => <SchemaFormField key={name} name={name} />)}
       </div>
     );
   },
 );
 
+/** A read-only field's value as text; an empty value renders an em dash. */
+function readOnlyText(value: FormValue): string {
+  if (value === undefined || value === "") return "—";
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "—";
+    return value
+      .map((item) =>
+        typeof item === "string"
+          ? item
+          : item instanceof File
+            ? item.name
+            : `${item.key}: ${item.value}`,
+      )
+      .join(", ");
+  }
+  return String(value);
+}
+
+/** One `FormSpec.sections` entry: a disclosure over its fields. */
+function SchemaFormSection({
+  label,
+  collapsed,
+  children,
+}: {
+  label: string;
+  collapsed?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Collapsible
+      defaultOpen={!collapsed}
+      data-slot="schema-form-section"
+      className="group/section flex flex-col gap-3 border-t border-border-strong pt-3"
+    >
+      <CollapsibleTrigger
+        data-slot="schema-form-section-trigger"
+        className="focus-ring flex w-full items-center gap-1 rounded-sm text-start text-subtitle text-foreground"
+      >
+        <ChevronRight
+          aria-hidden="true"
+          className="size-4 shrink-0 transition-transform group-data-[state=open]/section:rotate-90 motion-reduce:transition-none"
+        />
+        {label}
+      </CollapsibleTrigger>
+      <CollapsibleContent data-slot="schema-form-section-content" className="flex flex-col gap-4">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
 function SchemaFormSkeletonAnnouncement() {
   const { t } = useLocale();
   return (
@@ -1209,7 +1316,7 @@ export const SchemaFormTitle = forwardRef<HTMLParagraphElement, SchemaFormTitleP
       <p
         ref={ref}
         id={headingId}
-        className={cn("text-subtitle font-semibold text-foreground text-balance", className)}
+        className={cn("text-subtitle text-foreground text-balance", className)}
         {...props}
       >
         {content}

package/src/components/scroll-area/index.ts

@@ -1 +1 @@
-export { ScrollArea, ScrollBar } from "./scroll-area";
+export { ScrollArea, ScrollBar, type ScrollAreaProps } from "./scroll-area";

package/src/components/scroll-area/scroll-area.tsx

@@ -2,24 +2,53 @@ import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "reac
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/cn";
 
-export const ScrollArea = forwardRef<
-  ElementRef<typeof ScrollAreaPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(function ScrollArea({ className, children, ...props }, ref) {
-  return (
-    <ScrollAreaPrimitive.Root
-      ref={ref}
-      className={cn("relative overflow-hidden", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-});
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  /**
+   * Props for the scrolling VIEWPORT — the element that actually overflows, which is
+   * otherwise unreachable from the outside.
+   *
+   * The viewport is deliberately NOT focusable by default: when the content inside it is
+   * focusable (a list of links, rows of buttons) a keyboard user reaches the overflow by
+   * tabbing through it, and a tab stop on the viewport would be noise. When the content is
+   * plain text or non-focusable rows, that same user cannot scroll it at all — axe's
+   * `scrollable-region-focusable` is the gate that catches it. Make it a named tab stop the
+   * way `ChartFrame` does for its scrolling body:
+   *
+   * ```tsx
+   * viewportProps={{ tabIndex: 0, role: "group", "aria-label": "Scrollable list" }}
+   * ```
+   *
+   * `role="group"` rather than `"region"`: ARIA 1.2 forbids `aria-label` on a generic
+   * element, and `group` gives the name a host without adding a landmark.
+   */
+  viewportProps?: ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>;
+}
+
+export const ScrollArea = forwardRef<ElementRef<typeof ScrollAreaPrimitive.Root>, ScrollAreaProps>(
+  function ScrollArea({ className, children, viewportProps, ...props }, ref) {
+    return (
+      <ScrollAreaPrimitive.Root
+        ref={ref}
+        className={cn("relative overflow-hidden", className)}
+        {...props}
+      >
+        <ScrollAreaPrimitive.Viewport
+          {...viewportProps}
+          className={cn(
+            "size-full rounded-[inherit]",
+            // A viewport made focusable needs a visible ring, like every other tab stop.
+            viewportProps?.tabIndex !== undefined && "focus-ring-inset",
+            viewportProps?.className,
+          )}
+        >
+          {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+      </ScrollAreaPrimitive.Root>
+    );
+  },
+);
 
 export const ScrollBar = forwardRef<
   ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,

package/src/components/section-header/section-header.stories.tsx

@@ -55,3 +55,26 @@ export const DefaultLevelIsH2: Story = {
     await expect(canvas.queryByRole("heading", { level: 1 })).toBeNull();
   },
 };
+
+/**
+ * `size="lg"` is for the sections of a LONG page — a landing page, a docs overview — that a
+ * reader scans by its headings: the title moves up to the display rung and the description
+ * keeps a readable measure. The eyebrow stays small above it, and the heading level is still
+ * `as`'s business, so the outline is unchanged.
+ */
+export const LargeForLongPages: Story = {
+  args: {
+    size: "lg",
+    eyebrow: "02 / Blocks",
+    title: "Blocks you copy and own",
+    description:
+      "Compositions from the registry, grouped by what they are for. One command puts the source in your repo.",
+    actions: <Button variant="outline">All blocks</Button>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const heading = canvas.getByRole("heading", { level: 2, name: "Blocks you copy and own" });
+    await expect(heading.classList.contains("text-display")).toBe(true);
+    await expect(heading.classList.contains("text-title")).toBe(false);
+  },
+};

package/src/components/section-header/section-header.tsx

@@ -10,14 +10,21 @@ export interface SectionHeaderProps {
   eyebrow?: ReactNode;
   /**
    * The heading LEVEL the title contributes to the document outline. The
-   * visual (`text-title`) is identical for every value — pick the level the
-   * page's structure calls for, not the size you want (WCAG 1.3.1).
+   * visual is identical for every value — pick the level the page's structure
+   * calls for, not the size you want (WCAG 1.3.1); the size is `size`.
    *
    * Use `as="h1"` when this header titles the PAGE (a screen whose route it
    * names); leave it at the default when it titles a section INSIDE a page
    * that already has an `<h1>` elsewhere. @default "h2"
    */
   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  /**
+   * Title size: `"default"` (`text-title`) for a section inside a screen; `"lg"`
+   * (`text-display`, description at a readable measure) for the sections of a LONG page a
+   * reader scans by its headings — a landing page, a docs overview. Visual only: it never
+   * changes the heading level (`as`). @default "default"
+   */
+  size?: "default" | "lg";
   className?: string;
 }
 
@@ -28,18 +35,29 @@ export function SectionHeader({
   actions,
   eyebrow,
   as: TitleTag = "h2",
+  size = "default",
   className,
 }: SectionHeaderProps) {
+  const lg = size === "lg";
   return (
-    <div className={cn("flex flex-wrap items-end justify-between gap-4", className)}>
-      <div className="space-y-1">
+    <div
+      data-size={size}
+      className={cn("flex flex-wrap items-end justify-between gap-4", className)}
+    >
+      <div className={lg ? "space-y-2" : "space-y-1"}>
         {eyebrow ? (
-          <div className="text-meta font-medium uppercase tracking-wide text-muted-foreground">
-            {eyebrow}
-          </div>
+          <div className="text-eyebrow uppercase text-muted-foreground">{eyebrow}</div>
+        ) : null}
+        <TitleTag
+          className={cn("text-foreground", lg ? "text-display text-balance" : "text-title")}
+        >
+          {title}
+        </TitleTag>
+        {description ? (
+          <p className={cn("text-body text-muted-foreground", lg && "max-w-prose text-pretty")}>
+            {description}
+          </p>
         ) : null}
-        <TitleTag className="text-title text-foreground">{title}</TitleTag>
-        {description ? <p className="text-body text-muted-foreground">{description}</p> : null}
       </div>
       {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
     </div>

package/src/components/select/select.stories.tsx

@@ -36,6 +36,23 @@ export const Default: Story = {
   },
 };
 
+// WCAG 1.4.11 keyboard-focus contrast (#308) for `SelectItem` is locked in
+// `select.test.tsx`, not here: a Storybook interaction story that opens this
+// `Select` and then either closes it (any method — Escape, `{Enter}`, or a
+// click) or leaves it open trips one of two PRE-EXISTING, unrelated axe
+// violations in this test environment on any story id not already
+// grandfathered into `scripts/a11y-baseline.json` — closing hits the same
+// `button-name` false-positive `forms-select--default` is already exempted
+// for (reproduced verbatim by a throwaway story that just re-runs `Default`'s
+// own play function under a new id), and leaving it open hits
+// `aria-hidden-focus` (reproduced even with `modal={false}`). Growing the
+// a11y baseline for a new story is exactly what `pnpm check --rule
+// a11y-baseline`'s ratchet forbids (`ratchet.maxStories` only goes down), so
+// rather than force a hand-baselined exemption for a defect this change did
+// not introduce, the keyboard-focus-ring assertion for `SelectItem` lives in
+// a plain RTL unit test instead (no axe gate there), matching the existing
+// `icon-button.test.tsx` precedent of asserting the utility class directly.
+
 const LONG_LABEL = "prod-eu-west-1 · 2026-08-01 · 12 tools";
 
 /**

package/src/components/select/select.test.tsx

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
-import { Select, SelectTrigger, SelectValue } from "./select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 
 const LONG_LABEL = "prod-eu-west-1 · 2026-08-01 · 12 tools";
 
@@ -96,3 +96,30 @@ describe("SelectTrigger", () => {
     expect(trigger).not.toHaveAttribute("title");
   });
 });
+
+describe("SelectItem", () => {
+  // WCAG 1.4.11 (#308): a `focus:bg-accent` fill alone measures ~1.17–1.40:1
+  // against `--popover` in both themes — not a visible indicator. A real RTL
+  // unit test rather than a Storybook interaction story: opening this Select
+  // in the Storybook/vitest-browser + axe harness hits a PRE-EXISTING,
+  // unrelated `button-name`/`aria-hidden-focus` axe defect on any story id not
+  // already grandfathered into `scripts/a11y-baseline.json` (see the comment
+  // in `select.stories.tsx`), so the utility-class assertion — the same
+  // pattern `icon-button.test.tsx` already uses for its own `focus-ring` —
+  // lives here instead, with no axe gate to trip.
+  it("carries focus-ring-inset, not just the fill, on the fill-only focus state (#308)", () => {
+    render(
+      <Select defaultValue="prod" open>
+        <SelectTrigger aria-label="Environment">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="prod">Production</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    const item = screen.getByRole("option", { name: "Production" });
+    expect(item.className).toContain("focus:bg-accent");
+    expect(item.className).toContain("focus-ring-inset");
+  });
+});

package/src/components/select/select.tsx

@@ -125,7 +125,7 @@ export const SelectTrigger = forwardRef<
       className={cn(
         "flex w-full items-center justify-between gap-2 rounded-control border border-input bg-input-background px-3 py-2 text-body shadow-input",
         size === "sm" ? "h-control-sm" : "h-control",
-        "placeholder:text-muted-foreground focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "placeholder:text-muted-foreground focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
         // No `disabled:cursor-*` override — disabled controls keep the arrow
         // automatically (interaction-guidelines.md), matching Combobox's
         // Button-based trigger (`disabled:pointer-events-none`) (#343).
@@ -156,7 +156,7 @@ export const SelectContent = forwardRef<
         ref={ref}
         position={position}
         className={cn(
-          "relative z-50 max-h-96 min-w-[12rem] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-ring-md",
+          "relative z-50 max-h-96 min-w-[12rem] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-popover",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
@@ -207,7 +207,7 @@ export const SelectItem = forwardRef<
       ref={ref}
       className={cn(
         "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-2 pe-8 text-body outline-none transition-colors duration-fast",
-        "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className,
       )}
       {...props}

package/src/components/sheet/sheet.tsx

@@ -38,7 +38,7 @@ const sheetVariants = cva(
   // `overflow-y-auto` so content taller than the sheet scrolls INSIDE it
   // instead of overflowing the fixed-position box (unreachable below the
   // viewport edge).
-  "fixed z-50 gap-4 overflow-y-auto overscroll-contain bg-card p-6 text-card-foreground shadow-ring-lg transition duration-slow ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+  "fixed z-50 gap-4 overflow-y-auto overscroll-contain bg-card p-6 text-card-foreground shadow-dialog transition duration-slow ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
   {
     variants: {
       side: {