@conscia-labs/design-system 1.0.2 → 1.0.3

package/README.md

@@ -6,7 +6,7 @@ The shared React component library for building clear, consistent, and accessibl
 
 > **Package:** available publicly as [`@conscia-labs/design-system`](https://www.npmjs.com/package/@conscia-labs/design-system).
 >
-> **v1.0.0:** this README documents the clean-break v1 contract. `1.0.0` is published as the stable v1 release.
+> **Current release:** `1.0.3` is the latest stable v1 release.
 >
 > **Migration:** upgrading an application to v1? Follow the [Design System v1 Migration Guide](https://github.com/conscia-labs/design-system/blob/main/docs/design-system-v1-migration.md).
 
@@ -694,6 +694,40 @@ Use `SearchableSelect` when users need to find an item in a longer list by label
 Both `FormSelect` and `SearchableSelect` contribute a named value to a native
 HTML form when their `name` prop is provided.
 
+### Nested overlays
+
+Portaled controls can be used inside `Dialog` and `Sheet` without clipping
+their popup. The popup Positioner is mounted in a Base UI portal and uses the
+shared overlay layer hierarchy:
+
+| Layer | Components | z-index |
+| --- | --- | ---: |
+| Modal | `Dialog`, `Sheet`, `AlertDialog` | 40 |
+| Popup | `Select`, `Popover`, `SearchableSelect`, `DropdownMenu` | 50 |
+| Transient | `Toast`, `Tooltip` | 100 |
+
+Base UI `Select` is modal by default, so `FormSelect` preserves that default
+for backwards compatibility. Set `modal={false}` when a `Select` or
+`FormSelect` is nested in a modal surface so it does not add a second backdrop,
+focus boundary, or inert page state. `SearchableSelect` also exposes `modal`
+and preserves Combobox's current non-modal default:
+
+```tsx
+<Dialog open={open} onOpenChange={setOpen}>
+  <DialogContent>
+    <DialogBody className="overflow-y-auto">
+      <FormSelect modal={false} name="vendor" options={vendorOptions} />
+      <SearchableSelect modal={false} name="model" options={modelOptions} onValueChange={setModel} />
+    </DialogBody>
+  </DialogContent>
+</Dialog>
+```
+
+`Select`, `Popover`, and `DropdownMenu` already forward their Base UI root
+props, including `modal`. Use the same `modal={false}` setting for those
+controls when they are nested. No consuming-app z-index override or portal
+adapter is required.
+
 ## Semantic color
 
 Color communicates meaning rather than palette choice:

package/dist/{chunk-YAJUTCGD.js → chunk-HAJMOT3P.js}

@@ -13030,6 +13030,15 @@ var SelectSeparator = ListboxSeparator;
 
 // src/primitives/select.tsx
 import { CheckIcon as CheckIcon2, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+// src/primitives/overlay-layers.ts
+var overlayLayers = {
+  modal: "z-40",
+  popup: "z-50",
+  transient: "z-[100]"
+};
+
+// src/primitives/select.tsx
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function collectItems(children) {
   const items = [];
@@ -13058,7 +13067,7 @@ function SelectTrigger3({ className, size: size4 = "default", children, ...props
   ] });
 }
 function SelectContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx4(index_parts_exports2.Portal, { children: /* @__PURE__ */ jsx4(index_parts_exports2.Positioner, { children: /* @__PURE__ */ jsx4(index_parts_exports2.Popup, { "data-slot": "select-content", className: cn("bg-surface-floating text-text-primary relative z-50 max-h-[var(--available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none data-open:animate-in data-closed:animate-out", className), ...props, children }) }) });
+  return /* @__PURE__ */ jsx4(index_parts_exports2.Portal, { children: /* @__PURE__ */ jsx4(index_parts_exports2.Positioner, { "data-slot": "select-positioner", className: overlayLayers.popup, children: /* @__PURE__ */ jsx4(index_parts_exports2.Popup, { "data-slot": "select-content", className: cn("bg-surface-floating text-text-primary relative max-h-[var(--available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none data-open:animate-in data-closed:animate-out", className), ...props, children }) }) });
 }
 function SelectItem3({ className, children, ...props }) {
   return /* @__PURE__ */ jsxs(index_parts_exports2.Item, { "data-slot": "select-item", className: cn("ds-type-menu-item data-highlighted:bg-surface-muted relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50", className), ...props, children: [
@@ -13794,12 +13803,12 @@ function DialogPortal3({ ...props }) {
   return /* @__PURE__ */ jsx5(index_parts_exports3.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(index_parts_exports3.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 z-50 bg-black/50 data-open:animate-in data-closed:animate-out", className), ...props });
+  return /* @__PURE__ */ jsx5(index_parts_exports3.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0", overlayLayers.modal, "bg-black/50 data-open:animate-in data-closed:animate-out", className), ...props });
 }
 function DialogContent({ className, children, showCloseButton = true, size: size4 = "default", closeLabel = "Close", ...props }) {
   return /* @__PURE__ */ jsxs2(DialogPortal3, { children: [
     /* @__PURE__ */ jsx5(DialogOverlay, {}),
-    /* @__PURE__ */ jsx5(index_parts_exports3.Viewport, { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs2(index_parts_exports3.Popup, { "data-slot": "dialog-content", "data-size": size4, className: cn("relative grid max-h-[min(42rem,calc(100vh-2rem))] w-full max-w-[calc(100%-2rem)] grid-rows-[auto_minmax(0,1fr)_auto] gap-5 overflow-hidden rounded-lg border bg-canvas p-5 text-text-primary shadow-lg outline-none sm:p-6", "data-[size=small]:max-w-sm data-[size=default]:max-w-lg data-[size=large]:max-w-3xl", className), ...props, children: [
+    /* @__PURE__ */ jsx5(index_parts_exports3.Viewport, { className: cn("fixed inset-0 flex items-center justify-center p-4", overlayLayers.modal), children: /* @__PURE__ */ jsxs2(index_parts_exports3.Popup, { "data-slot": "dialog-content", "data-size": size4, className: cn("relative grid max-h-[min(42rem,calc(100vh-2rem))] w-full max-w-[calc(100%-2rem)] grid-rows-[auto_minmax(0,1fr)_auto] gap-5 overflow-hidden rounded-lg border bg-canvas p-5 text-text-primary shadow-lg outline-none sm:p-6", "data-[size=small]:max-w-sm data-[size=default]:max-w-lg data-[size=large]:max-w-3xl", className), ...props, children: [
       children,
       showCloseButton ? /* @__PURE__ */ jsxs2(index_parts_exports3.Close, { "data-slot": "dialog-close", className: "absolute right-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus focus:ring-offset-2 focus:ring-offset-canvas disabled:pointer-events-none [&_svg]:size-4", children: [
         /* @__PURE__ */ jsx5(XIcon, {}),
@@ -17534,14 +17543,14 @@ function SheetClose({ ...props }) {
 }
 var sideClasses = { top: "inset-x-0 top-0 max-h-[90vh] border-b", right: "right-0 top-0 h-full max-w-md border-l sm:max-w-lg", bottom: "inset-x-0 bottom-0 max-h-[90vh] border-t", left: "left-0 top-0 h-full max-w-md border-r sm:max-w-lg" };
 function SheetOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(index_parts_exports4.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/50 data-open:animate-in data-closed:animate-out", className), ...props });
+  return /* @__PURE__ */ jsx9(index_parts_exports4.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0", overlayLayers.modal, "bg-black/50 data-open:animate-in data-closed:animate-out", className), ...props });
 }
 function SheetContent({ className, children, side: sideProp, closeLabel = "Close", ...props }) {
   const contextSide = React116.useContext(SheetSideContext);
   const side = sideProp ?? contextSide;
   return /* @__PURE__ */ jsxs3(SheetPortal, { children: [
     /* @__PURE__ */ jsx9(SheetOverlay, {}),
-    /* @__PURE__ */ jsx9(index_parts_exports4.Viewport, { className: "fixed inset-0 z-50 pointer-events-none", children: /* @__PURE__ */ jsxs3(index_parts_exports4.Popup, { "data-slot": "sheet-content", className: cn("pointer-events-auto absolute flex w-full flex-col gap-6 bg-canvas p-6 text-text-primary shadow-lg outline-none data-open:animate-in data-closed:animate-out", sideClasses[side], className), ...props, children: [
+    /* @__PURE__ */ jsx9(index_parts_exports4.Viewport, { className: cn("fixed inset-0 pointer-events-none", overlayLayers.modal), children: /* @__PURE__ */ jsxs3(index_parts_exports4.Popup, { "data-slot": "sheet-content", className: cn("pointer-events-auto absolute flex w-full flex-col gap-6 bg-canvas p-6 text-text-primary shadow-lg outline-none data-open:animate-in data-closed:animate-out", sideClasses[side], className), ...props, children: [
       children,
       /* @__PURE__ */ jsxs3(index_parts_exports4.Close, { "data-slot": "sheet-close", className: "absolute right-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus focus:ring-offset-2 focus:ring-offset-canvas [&_svg]:size-4", children: [
         /* @__PURE__ */ jsx9(XIcon2, {}),
@@ -18784,9 +18793,9 @@ function TooltipTrigger3({ ...props }) {
   return /* @__PURE__ */ jsx10(index_parts_exports5.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, sideOffset = 6, side, align, children, ...props }) {
-  return /* @__PURE__ */ jsx10(index_parts_exports5.Portal, { children: /* @__PURE__ */ jsx10(index_parts_exports5.Positioner, { sideOffset, side, align, children: /* @__PURE__ */ jsxs4(index_parts_exports5.Popup, { role: "tooltip", "data-slot": "tooltip-content", className: cn("z-50 w-fit rounded-md bg-text-primary px-3 py-1.5 text-balance text-xs text-canvas shadow-[var(--ds-shadow-floating)]", className), ...props, children: [
+  return /* @__PURE__ */ jsx10(index_parts_exports5.Portal, { children: /* @__PURE__ */ jsx10(index_parts_exports5.Positioner, { className: overlayLayers.transient, sideOffset, side, align, children: /* @__PURE__ */ jsxs4(index_parts_exports5.Popup, { role: "tooltip", "data-slot": "tooltip-content", className: cn("w-fit rounded-md bg-text-primary px-3 py-1.5 text-balance text-xs text-canvas shadow-[var(--ds-shadow-floating)]", className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx10(index_parts_exports5.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-text-primary fill-text-primary" })
+    /* @__PURE__ */ jsx10(index_parts_exports5.Arrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-text-primary fill-text-primary" })
   ] }) }) });
 }
 
@@ -18834,12 +18843,12 @@ function AlertDialogPortal({ ...props }) {
   return /* @__PURE__ */ jsx11(index_parts_exports6.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
 function AlertDialogOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsx11(index_parts_exports6.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 z-50 bg-black/50 data-open:animate-in data-closed:animate-out", className), ...props });
+  return /* @__PURE__ */ jsx11(index_parts_exports6.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0", overlayLayers.modal, "bg-black/50 data-open:animate-in data-closed:animate-out", className), ...props });
 }
 function AlertDialogContent({ className, children, ...props }) {
   return /* @__PURE__ */ jsxs5(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx11(AlertDialogOverlay, {}),
-    /* @__PURE__ */ jsx11(index_parts_exports6.Viewport, { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs5(index_parts_exports6.Popup, { "data-slot": "alert-dialog-content", className: cn("relative grid w-full max-w-[calc(100%-2rem)] gap-5 rounded-lg border bg-canvas p-5 text-text-primary shadow-lg outline-none sm:max-w-lg sm:p-6", className), ...props, children: [
+    /* @__PURE__ */ jsx11(index_parts_exports6.Viewport, { className: cn("fixed inset-0 flex items-center justify-center p-4", overlayLayers.modal), children: /* @__PURE__ */ jsxs5(index_parts_exports6.Popup, { "data-slot": "alert-dialog-content", className: cn("relative grid w-full max-w-[calc(100%-2rem)] gap-5 rounded-lg border bg-canvas p-5 text-text-primary shadow-lg outline-none sm:max-w-lg sm:p-6", className), ...props, children: [
       children,
       /* @__PURE__ */ jsx11(index_parts_exports6.Close, { "aria-label": "Close", className: "absolute right-4 top-4 rounded-xs opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus [&_svg]:size-4", children: /* @__PURE__ */ jsx11(XIcon3, {}) })
     ] }) })
@@ -23198,13 +23207,13 @@ function DropdownMenuSubTrigger({ className, children, ...props }) {
   ] });
 }
 function DropdownMenuSubContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(index_parts_exports9.Portal, { children: /* @__PURE__ */ jsx16(index_parts_exports9.Positioner, { children: /* @__PURE__ */ jsx16(index_parts_exports9.Popup, { "data-slot": "dropdown-menu-sub-content", className: cn("z-50 min-w-56 overflow-hidden rounded-md border bg-surface-floating p-1 text-text-primary shadow-[var(--ds-shadow-floating)]", className), ...props }) }) });
+  return /* @__PURE__ */ jsx16(index_parts_exports9.Portal, { children: /* @__PURE__ */ jsx16(index_parts_exports9.Positioner, { "data-slot": "dropdown-menu-sub-positioner", className: overlayLayers.popup, children: /* @__PURE__ */ jsx16(index_parts_exports9.Popup, { "data-slot": "dropdown-menu-sub-content", className: cn("min-w-56 overflow-hidden rounded-md border bg-surface-floating p-1 text-text-primary shadow-[var(--ds-shadow-floating)]", className), ...props }) }) });
 }
 function DropdownMenuTrigger({ ...props }) {
   return /* @__PURE__ */ jsx16(index_parts_exports9.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
 }
 function DropdownMenuContent({ className, sideOffset = 4, side, align, ...props }) {
-  return /* @__PURE__ */ jsx16(index_parts_exports9.Portal, { children: /* @__PURE__ */ jsx16(index_parts_exports9.Positioner, { sideOffset, side, align, children: /* @__PURE__ */ jsx16(index_parts_exports9.Popup, { "data-slot": "dropdown-menu-content", className: cn("z-50 min-w-40 overflow-hidden rounded-md border bg-surface-floating p-1 text-text-primary shadow-[var(--ds-shadow-floating)]", className), ...props }) }) });
+  return /* @__PURE__ */ jsx16(index_parts_exports9.Portal, { children: /* @__PURE__ */ jsx16(index_parts_exports9.Positioner, { "data-slot": "dropdown-menu-positioner", className: overlayLayers.popup, sideOffset, side, align, children: /* @__PURE__ */ jsx16(index_parts_exports9.Popup, { "data-slot": "dropdown-menu-content", className: cn("min-w-40 overflow-hidden rounded-md border bg-surface-floating p-1 text-text-primary shadow-[var(--ds-shadow-floating)]", className), ...props }) }) });
 }
 function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
   return /* @__PURE__ */ jsx16(index_parts_exports9.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("ds-type-menu-item data-[variant=destructive]:text-danger-foreground data-highlighted:bg-surface-muted relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset=true]:pl-8", className), ...props });
@@ -26626,6 +26635,7 @@ export {
   useAnchoredPopupScrollLock,
   useToolbarRootContext,
   COMPOSITE_KEYS,
+  overlayLayers,
   Select,
   SelectGroup3 as SelectGroup,
   SelectValue3 as SelectValue,
@@ -26716,4 +26726,4 @@ export {
   DropdownMenuLabel,
   DropdownMenuSeparator
 };
-//# sourceMappingURL=chunk-YAJUTCGD.js.map
+//# sourceMappingURL=chunk-HAJMOT3P.js.map