@bearmenu/ui 0.7.1 → 0.8.2

package/src/components/circular-progress.tsx

@@ -89,7 +89,7 @@ const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>
           />
         </svg>
         {showLabel && !indeterminate && (
-          <span className="absolute text-xs font-medium tabular-nums text-foreground">
+          <span className="absolute text-xs font-semibold tabular-nums text-foreground">
             {Math.round(percent)}%
           </span>
         )}

package/src/components/command.tsx

@@ -41,7 +41,7 @@ const CommandDialog = ({
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -110,7 +110,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground",
       className
     )}
     {...props}

package/src/components/currency-input.tsx

@@ -139,7 +139,7 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
         <div className="relative">
           <span
             aria-hidden
-            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground"
+            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-muted-foreground"
           >
             {currency}
           </span>

package/src/components/description-list.tsx

@@ -40,7 +40,7 @@ const DescriptionTerm = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLE
     <dt
       ref={ref as React.Ref<HTMLElement>}
       data-slot="description-term"
-      className={cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", className)}
+      className={cn("text-xs font-semibold uppercase tracking-wide text-muted-foreground", className)}
       {...props}
     />
   )

package/src/components/drawer.tsx

@@ -71,7 +71,11 @@ const DrawerContent = React.forwardRef<
         className={cn(
           "fixed z-[1000] flex border-border bg-card shadow-2xl",
           positionClasses,
-          isVertical ? "max-h-[90vh]" : "",
+          // The single height cap for every vertical drawer. Consumers should
+          // NOT restate it: six app call sites carried an identical
+          // `!max-h-[90vh]`, so this default governed nothing and changing it
+          // here would have reached none of them.
+          isVertical ? "max-h-[85vh]" : "",
           variant === "floating" && "m-3 rounded-2xl border",
           className
         )}

package/src/components/dropdown-menu.tsx

@@ -161,7 +161,7 @@ function DropdownMenuLabel({
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+      className={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
       {...props}
     />
   );

package/src/components/field.tsx

@@ -136,7 +136,7 @@ const FieldLegend = React.forwardRef<HTMLLegendElement, React.HTMLAttributes<HTM
     <legend
       ref={ref}
       data-slot="field-legend"
-      className={cn("px-1 text-sm font-medium text-foreground", className)}
+      className={cn("px-1 text-sm font-semibold text-foreground", className)}
       {...props}
     />
   )

package/src/components/input-group.tsx

@@ -92,7 +92,7 @@ const InputGroupButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAtt
       type={type}
       data-slot="input-group-button"
       className={cn(
-        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
+        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
         className
       )}
       {...props}

package/src/components/input.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const inputVariants = cva(
-  "flex w-full border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  "flex w-full border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
   {
     variants: {
       size: {

package/src/components/item.tsx

@@ -81,7 +81,7 @@ const ItemTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
     <div
       ref={ref}
       data-slot="item-title"
-      className={cn("truncate text-sm font-medium text-foreground", className)}
+      className={cn("truncate text-sm font-semibold text-foreground", className)}
       {...props}
     />
   )

package/src/components/kbd.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const kbdVariants = cva(
-  "inline-flex select-none items-center justify-center gap-1 rounded-md border border-border bg-muted font-mono font-medium text-muted-foreground shadow-[0_1px_0_0_var(--border)]",
+  "inline-flex select-none items-center justify-center gap-1 rounded-md border border-border bg-muted font-mono font-semibold text-muted-foreground shadow-[0_1px_0_0_var(--border)]",
   {
     variants: {
       size: {

package/src/components/label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 transition-all duration-200"
+  "text-sm font-semibold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 transition-all duration-200"
 );
 
 const Label = React.forwardRef<

package/src/components/place-about-tab.tsx

@@ -49,6 +49,46 @@ import type {
   PlacePreview,
 } from "./place-types";
 
+/**
+ * The sheet's reading order, by what a visitor opens it to find out.
+ *
+ *   getting there   map (own slot, always first) → hours → contact
+ *   transacting     ordering
+ *   practical       busyness → amenities → accessibility → payment → parking
+ *   corroboration   reputation
+ *   reference       cuisines → landmarks → description
+ *
+ * `accessibility` sits ahead of `payment` and `parking` on purpose: for the
+ * people who need it, it is not a nice-to-have detail to be found after two
+ * blocks about how to pay.
+ *
+ * `description` goes last, not first. A place page already carries a tagline
+ * and a review verdict above this sheet, so a third prose block about the same
+ * venue is the least new information here — it opened the sheet, pushing the
+ * opening hours below the fold.
+ */
+const SECTION_ORDER = [
+  "hours",
+  "contact",
+  "ordering",
+  "busyness",
+  "amenities",
+  "accessibility",
+  "payment",
+  "parking",
+  "reputation",
+  "cuisines",
+  "landmarks",
+  "description",
+] as const;
+
+/** A key this list doesn't know sorts to the END, keeping its incoming relative
+ *  order — so a section added later appears last rather than silently leading. */
+function sectionRank(key: string): number {
+  const i = SECTION_ORDER.indexOf(key as (typeof SECTION_ORDER)[number]);
+  return i === -1 ? Number.MAX_SAFE_INTEGER : i;
+}
+
 export interface PlaceAboutTabProps {
   place: PlacePreview;
   labels: PlaceAboutTabLabels;
@@ -56,6 +96,22 @@ export interface PlaceAboutTabProps {
   mapSlot?: React.ReactNode;
   /** Slot for an embedded busyness chart. Rendered only when both this prop and `place.busyness` are present. */
   busynessSlot?: React.ReactNode;
+  /**
+   * Slot for "how to order from here" — delivery platforms and the like.
+   * Sits directly after contact, because it answers the same question contact
+   * does (how do I transact with this venue) and is the most actionable thing
+   * the sheet carries.
+   *
+   * Named for its MEANING, not its position, so a later reordering doesn't turn
+   * the prop name into a lie.
+   */
+  orderingSlot?: React.ReactNode;
+  /**
+   * Slot for "what the rest of the web says / where else this venue lives" —
+   * third-party ratings and the venue's own profiles. Sits after the practical
+   * block: it is corroboration, wanted after the facts, not before them.
+   */
+  reputationSlot?: React.ReactNode;
   /** Fires when the user clicks a contact link (phone/website/social). */
   onLinkClick?: (kind: PlaceLinkKind, url: string) => void;
   className?: string;
@@ -67,7 +123,12 @@ function humanizeEnum(value: string): string {
 
 function SectionHeading({ children }: { children: React.ReactNode }) {
   return (
-    <Text as="h3" variant="body-sm" weight="semibold" className="text-foreground">
+    <Text
+      as="h3"
+      variant="body-sm"
+      weight="semibold"
+      className="text-foreground"
+    >
       {children}
     </Text>
   );
@@ -132,6 +193,8 @@ export function PlaceAboutTab({
   labels,
   mapSlot,
   busynessSlot,
+  orderingSlot,
+  reputationSlot,
   onLinkClick,
   className,
 }: PlaceAboutTabProps) {
@@ -147,23 +210,26 @@ export function PlaceAboutTab({
     labels.accessibilityLabels[key] || humanizeEnum(key);
   const getParkingLabel = (key: string): string =>
     labels.parkingLabels[key] || humanizeEnum(key);
-  const getTypeLabel = (key: string): string => labels.typeLabels[key] || humanizeEnum(key);
+  const getTypeLabel = (key: string): string =>
+    labels.typeLabels[key] || humanizeEnum(key);
   const getStatusLabel = (key: string): string =>
     labels.statusLabels[key] || humanizeEnum(key);
 
   const hasDescription = Boolean(
-    place.generative_summary || place.review_summary || place.description
+    place.generative_summary || place.review_summary || place.description,
   );
   const hasDescriptionChips = Boolean(place.type || place.business_status);
   const hasContact = Boolean(
     place.location?.address ||
-      place.phone ||
-      place.website_url ||
-      place.socials?.instagram_url ||
-      place.socials?.facebook_url
+    place.phone ||
+    place.website_url ||
+    place.socials?.instagram_url ||
+    place.socials?.facebook_url,
   );
   const hasSchedule = Boolean(place.schedule);
-  const hasBusyness = Boolean(busynessSlot && place.busyness && place.busyness.length > 0);
+  const hasBusyness = Boolean(
+    busynessSlot && place.busyness && place.busyness.length > 0,
+  );
   const hasCuisines = (place.cuisines?.length ?? 0) > 0;
   const hasAmenities = (place.amenities?.length ?? 0) > 0;
   const hasPayment = (place.payment_options?.length ?? 0) > 0;
@@ -236,7 +302,12 @@ export function PlaceAboutTab({
                   {place.location.address}
                 </Text>
                 {neighborhood && (
-                  <Text as="p" variant="body-sm" color="muted" className="mt-0.5">
+                  <Text
+                    as="p"
+                    variant="body-sm"
+                    color="muted"
+                    className="mt-0.5"
+                  >
                     {neighborhood}
                   </Text>
                 )}
@@ -248,7 +319,10 @@ export function PlaceAboutTab({
                 onClick={() => handleLinkClick("phone", place.phone)}
                 className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                <Phone className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Phone
+                  className="w-4 h-4 text-muted-foreground shrink-0"
+                  aria-hidden
+                />
                 <Text as="span" variant="body-sm">
                   {place.phone}
                 </Text>
@@ -262,7 +336,10 @@ export function PlaceAboutTab({
                 onClick={() => handleLinkClick("website", place.website_url)}
                 className="flex items-center gap-2 text-foreground hover:text-primary transition-colors break-all"
               >
-                <Globe className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Globe
+                  className="w-4 h-4 text-muted-foreground shrink-0"
+                  aria-hidden
+                />
                 <Text as="span" variant="body-sm" className="break-all">
                   {place.website_url}
                 </Text>
@@ -273,10 +350,15 @@ export function PlaceAboutTab({
                 href={place.socials.instagram_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                onClick={() => handleLinkClick("instagram", place.socials?.instagram_url)}
+                onClick={() =>
+                  handleLinkClick("instagram", place.socials?.instagram_url)
+                }
                 className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                <Instagram className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Instagram
+                  className="w-4 h-4 text-muted-foreground shrink-0"
+                  aria-hidden
+                />
                 <Text as="span" variant="body-sm">
                   {labels.instagram}
                 </Text>
@@ -287,10 +369,15 @@ export function PlaceAboutTab({
                 href={place.socials.facebook_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                onClick={() => handleLinkClick("facebook", place.socials?.facebook_url)}
+                onClick={() =>
+                  handleLinkClick("facebook", place.socials?.facebook_url)
+                }
                 className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                <Facebook className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Facebook
+                  className="w-4 h-4 text-muted-foreground shrink-0"
+                  aria-hidden
+                />
                 <Text as="span" variant="body-sm">
                   {labels.facebook}
                 </Text>
@@ -341,7 +428,9 @@ export function PlaceAboutTab({
         <section className="px-4 space-y-2">
           <SectionHeading>{labels.cuisines}</SectionHeading>
           <ChipRow
-            items={place.cuisines!.map((c) => c.charAt(0).toUpperCase() + c.slice(1))}
+            items={place.cuisines!.map(
+              (c) => c.charAt(0).toUpperCase() + c.slice(1),
+            )}
           />
         </section>
       ),
@@ -378,7 +467,9 @@ export function PlaceAboutTab({
       node: (
         <section className="px-4 space-y-2">
           <SectionHeading>{labels.accessibility}</SectionHeading>
-          <ChecklistGrid items={place.accessibility_features!.map(getAccessibilityLabel)} />
+          <ChecklistGrid
+            items={place.accessibility_features!.map(getAccessibilityLabel)}
+          />
         </section>
       ),
     });
@@ -404,7 +495,10 @@ export function PlaceAboutTab({
           <SectionHeading>{labels.nearbyLandmarks}</SectionHeading>
           <div className="space-y-2">
             {place.landmarks!.map((landmark, i) => (
-              <div key={i} className="flex justify-between items-baseline gap-3">
+              <div
+                key={i}
+                className="flex justify-between items-baseline gap-3"
+              >
                 <Text as="span" variant="body-sm">
                   {landmark.name}
                 </Text>
@@ -426,6 +520,25 @@ export function PlaceAboutTab({
     });
   }
 
+  if (orderingSlot) {
+    sections.push({
+      key: "ordering",
+      node: <section className="px-4">{orderingSlot}</section>,
+    });
+  }
+  if (reputationSlot) {
+    sections.push({
+      key: "reputation",
+      node: <section className="px-4">{reputationSlot}</section>,
+    });
+  }
+
+  // Sorted, not pushed in order: the reading order is a product decision and
+  // belongs in ONE greppable list, not implied by the physical sequence of a
+  // dozen `if` blocks 250 lines apart — which is how it came to open on a
+  // description while "is it open" sat fourth.
+  sections.sort((a, b) => sectionRank(a.key) - sectionRank(b.key));
+
   return (
     <div className={cn("space-y-6 pt-4", className)}>
       {mapSlot}

package/src/components/place-card.tsx

@@ -83,7 +83,7 @@ export const PlaceCard = memo(function PlaceCard({
           {ratingDisplay !== null && (
             <div className="flex items-center gap-1">
               <Star className="w-4 h-4 fill-primary text-primary" aria-hidden="true" />
-              <span className="font-medium text-sm">{ratingDisplay}</span>
+              <span className="font-semibold text-sm">{ratingDisplay}</span>
               {reviewCount !== undefined && reviewCount !== null && (
                 <span className="text-xs text-muted-foreground">({reviewCount})</span>
               )}

package/src/components/place-details-mobile.tsx

@@ -83,7 +83,7 @@ export function PlaceDetailsMobile({
         <div className="rounded-[22px] overflow-hidden relative">
           <div className="h-44 flex items-center justify-center relative overflow-hidden">
             {/* Status badge — bottom right */}
-            <div className="absolute bottom-2 right-2 z-20 flex items-center gap-1.5 bg-surface border border-border px-2.5 h-7 rounded-[12px] text-[11px] font-medium text-foreground">
+            <div className="absolute bottom-2 right-2 z-20 flex items-center gap-1.5 bg-surface border border-border px-2.5 h-7 rounded-[12px] text-[11px] font-semibold text-foreground">
               <span
                 className={cn(
                   "w-1.5 h-1.5 rounded-full flex-shrink-0",
@@ -235,7 +235,7 @@ function MobileTabPlaceholder({
   return (
     <div
       className={cn(
-        "flex flex-1 min-w-0 items-center justify-center gap-1 px-1 py-2.5 text-[12px] font-medium border-b-2 -mb-px",
+        "flex flex-1 min-w-0 items-center justify-center gap-1 px-1 py-2.5 text-[12px] font-semibold border-b-2 -mb-px",
         active
           ? "border-primary text-foreground"
           : "border-transparent text-muted-foreground"

package/src/components/popover.tsx

@@ -12,15 +12,23 @@ const PopoverClose = PopoverPrimitive.Close;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, collisionPadding = 12, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       data-slot="popover-content"
       align={align}
       sideOffset={sideOffset}
+      // Radix flips the side to avoid a collision, but a popover TALLER than the
+      // space on either side still overflows — and it overflows upward, off the
+      // top of the viewport, where the content cannot be scrolled back into
+      // view. `collisionPadding` keeps it off the edges; capping to Radix's
+      // measured available height and scrolling makes tall content fit rather
+      // than escape.
+      collisionPadding={collisionPadding}
       className={cn(
         "z-50 w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
+        "max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}

package/src/components/select.tsx

@@ -11,7 +11,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 const selectTriggerVariants = cva(
-  "flex w-full items-center justify-between rounded-xl bg-background border border-border text-sm font-medium text-foreground transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 hover:border-foreground/30 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  "flex w-full items-center justify-between rounded-xl bg-background border border-border text-sm font-semibold text-foreground transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 hover:border-foreground/30 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
   {
     variants: {
       size: {
@@ -126,7 +126,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     data-slot="select-item"
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-medium",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-semibold",
       className
     )}
     {...props}

package/src/components/selection-bar.tsx

@@ -40,7 +40,7 @@ const SelectionBar = React.forwardRef<HTMLDivElement, SelectionBarProps>(
         )}
         {...props}
       >
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+        <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
           {onClear && (
             <button
               type="button"

package/src/components/sheet.tsx

@@ -29,21 +29,66 @@ const SheetOverlay = React.forwardRef<
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
+/**
+ * `attachment` controls whether the panel is welded to the viewport edge or
+ * floats clear of it.
+ *
+ * - `edge` (default) — the classic sheet: full bleed against its side, only the
+ *   two corners facing inward rounded. Every existing consumer gets this, so
+ *   adding `inset` changes nothing already shipped.
+ * - `inset` — a floating panel: held off all four edges, rounded on every
+ *   corner, page visible around it. Reads as a surface laid ON the page rather
+ *   than one grafted to it, which is what detail surfaces want — the content
+ *   behind stays legible as context instead of being cropped away.
+ *
+ * `inset` deliberately drops the border. At an edge the border is the seam
+ * between panel and viewport and has work to do; floating, the shadow already
+ * separates the two and a border only draws a hard line around the radius.
+ */
 const sheetVariants = cva(
-  "fixed z-[1000] gap-4 bg-background border-border p-6 shadow-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-[var(--duration-deliberate)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)]",
+  "fixed z-[1000] gap-4 bg-background border-border shadow-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-[var(--duration-deliberate)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)]",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        top: "inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom rounded-t-2xl",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm rounded-r-2xl",
+          "inset-x-0 bottom-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
         right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm rounded-l-2xl",
+          "inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+      },
+      attachment: {
+        edge: "p-6",
+        // Padding is the caller's business here: a detail surface runs a gallery
+        // and a sticky action bar to the panel edge, and a fixed p-6 would inset
+        // both. `edge` keeps its p-6 so nothing already shipped shifts.
+        inset: "rounded-2xl overflow-hidden",
       },
     },
+    compoundVariants: [
+      // `edge` restates exactly what each side carried before `attachment`
+      // existed — the seam border and the two inward-facing corners. Kept as
+      // compounds rather than left on `side` so `inset` is not fighting them
+      // through class-merge order.
+      // `sm:max-w-sm` lives here, not on `side`: an inset panel is sized by its
+      // caller, and a responsive cap left on `side` cannot be overridden from
+      // className — tailwind-merge scopes `sm:max-w-*` and `max-w-*` to
+      // different groups, so `max-w-none` loses to it at every width ≥ sm.
+      { side: "top", attachment: "edge", class: "border-b" },
+      { side: "bottom", attachment: "edge", class: "border-t rounded-t-2xl" },
+      { side: "left", attachment: "edge", class: "border-r rounded-r-2xl sm:max-w-sm" },
+      { side: "right", attachment: "edge", class: "border-l rounded-l-2xl sm:max-w-sm" },
+      // The inset offsets live here rather than on `attachment` because each
+      // side has to give up its own edge: a right-side panel clears top, right
+      // and bottom but is still anchored to the right.
+      { side: "right", attachment: "inset", class: "inset-y-3 right-3 h-auto" },
+      { side: "left", attachment: "inset", class: "inset-y-3 left-3 h-auto" },
+      { side: "top", attachment: "inset", class: "inset-x-3 top-3" },
+      { side: "bottom", attachment: "inset", class: "inset-x-3 bottom-3" },
+    ],
     defaultVariants: {
       side: "right",
+      attachment: "edge",
     },
   }
 );
@@ -51,20 +96,35 @@ const sheetVariants = cva(
 interface SheetContentProps
   extends
     React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  /**
+   * Suppress the built-in floating close button. Use when the panel renders its
+   * own header row with a close control, which would otherwise stack two close
+   * buttons in the same corner.
+   */
+  hideClose?: boolean;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = "right", attachment = "edge", className, children, hideClose, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side, attachment }), className)}
+      {...props}
+    >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary glass-hover p-2">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
+      {/* Surfaces that run their own header own the close control there, and
+          would otherwise stack two of them in the same corner. */}
+      {!hideClose && (
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary glass-hover p-2">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      )}
     </SheetPrimitive.Content>
   </SheetPortal>
 ));