@fungi.computer/caps 0.5.0 → 0.6.0

package/README.md

@@ -127,6 +127,13 @@ Caps owns interaction and chooses the semantic destination. A null destination
 waits for the shell root to mount, including during server rendering. Base UI
 menu, Combobox and dialog portals still accept explicit container overrides.
 
+`DialogContent` and the composed `DialogPopup` accept `size="fill"` for a
+full-window frame. It fills the portal's fixed-position containing block (the
+viewport by default), without centring or a maximum width, and retains Caps
+padding, radius and material. Omit `size` or use `size="default"` for the
+existing width-limited frame; `DialogContent` centres it. Focus targets and
+Escape ownership are unchanged.
+
 In body mode, isolate the App root so page controls cannot paint over portaled
 dialogs. Agar's `mountApp` does this. Dialogs and menus rank by portal order;
 tooltips and toasts use their Stipe layers.

package/dist/components/dialog.d.ts

@@ -18,10 +18,15 @@ export declare const DialogTrigger: import("react").ForwardRefExoticComponent<Om
 export declare const DialogPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** The styled backdrop for a composed Dialog. */
 export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by DialogPopup. */
+export type DialogPopupProps = BaseDialog.Popup.Props & {
+    /** Fill the portal's positioning context instead of using the default width. */
+    size?: "default" | "fill";
+};
 /** The styled popup with Base UI composition and caller-controlled focus targets. */
-export declare const DialogPopup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogPopup: import("react").ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Props accepted by DialogContent. */
-export type DialogContentProps = BaseDialog.Popup.Props & Pick<BaseDialog.Portal.Props, "container" | "keepMounted">;
+export type DialogContentProps = DialogPopupProps & Pick<BaseDialog.Portal.Props, "container" | "keepMounted">;
 /**
  * The default portal, backdrop and popup composition for a Dialog.
  * Keeps child state across closes. Like Base UI, only full modal mode has a backdrop.

package/dist/components/dialog.js

@@ -39,17 +39,20 @@ export const DialogBackdrop = forwardRef(function DialogBackdrop({ className, ..
     return (_jsx(BaseDialog.Backdrop, { ...props, ref: ref, className: (state) => cn("caps-dialog-backdrop fixed inset-0 bg-black/40", resolveClassName(className, state)) }));
 });
 /** The styled popup with Base UI composition and caller-controlled focus targets. */
-export const DialogPopup = forwardRef(function DialogPopup({ className, finalFocus, ...props }, ref) {
+export const DialogPopup = forwardRef(function DialogPopup({ className, finalFocus, size = "default", ...props }, ref) {
     const dialog = useDialogContext();
-    return (_jsx(BaseDialog.Popup, { ...props, className: (state) => cn("caps-dialog-popup max-h-screen w-11/12 max-w-(--container-lg) overflow-y-auto overscroll-contain rounded-box bg-base-100 p-lg text-base-content shadow-xl", resolveClassName(className, state)), finalFocus: dialog.interactionOwner === "host" ? false : (finalFocus ?? true), ref: ref }));
+    return (_jsx(BaseDialog.Popup, { ...props, "data-size": size, className: (state) => cn("caps-dialog-popup overflow-y-auto overscroll-contain rounded-box bg-base-100 p-lg text-base-content shadow-xl", size === "fill"
+            ? "fixed inset-0 h-full w-full max-w-none"
+            : "max-h-screen w-11/12 max-w-(--container-lg)", resolveClassName(className, state)), finalFocus: dialog.interactionOwner === "host" ? false : (finalFocus ?? true), ref: ref }));
 });
 /**
  * The default portal, backdrop and popup composition for a Dialog.
  * Keeps child state across closes. Like Base UI, only full modal mode has a backdrop.
  */
-export const DialogContent = forwardRef(function DialogContent({ container, keepMounted = true, className, ...props }, ref) {
+export const DialogContent = forwardRef(function DialogContent({ container, keepMounted = true, className, size = "default", ...props }, ref) {
     const { modal } = useDialogContext();
-    return (_jsxs(DialogPortal, { container: container, keepMounted: keepMounted, children: [modal === true ? _jsx(DialogBackdrop, {}) : null, _jsx(DialogPopup, { ...props, className: (state) => cn("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", resolveClassName(className, state)), ref: ref })] }));
+    return (_jsxs(DialogPortal, { container: container, keepMounted: keepMounted, children: [modal === true ? _jsx(DialogBackdrop, {}) : null, _jsx(DialogPopup, { ...props, size: size, className: (state) => cn(size === "default" &&
+                    "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", resolveClassName(className, state)), ref: ref })] }));
 });
 /** A footer layout for caller-provided Dialog actions. */
 export function DialogFooter({ className, ...props }) {

package/docs/api/components/dialog.md

@@ -62,10 +62,26 @@ Props accepted by Dialog.
 
 ---
 
+### DialogPopupProps
+
+```ts
+type DialogPopupProps = BaseDialog.Popup.Props & object;
+```
+
+Props accepted by DialogPopup.
+
+#### Type Declaration
+
+| Name    | Type                    | Description                                                               |
+| ------- | ----------------------- | ------------------------------------------------------------------------- |
+| `size?` | `"default"` \| `"fill"` | Fill the portal's positioning context instead of using the default width. |
+
+---
+
 ### DialogContentProps
 
 ```ts
-type DialogContentProps = BaseDialog.Popup.Props &
+type DialogContentProps = DialogPopupProps &
   Pick<BaseDialog.Portal.Props, "container" | "keepMounted">;
 ```
 

package/docs/api/components/field.md

@@ -79,6 +79,7 @@ Props accepted by FieldSet.
 | Name           | Type        | Description                                                       |
 | -------------- | ----------- | ----------------------------------------------------------------- |
 | `legend`       | `ReactNode` | -                                                                 |
+| `legendTitle?` | `string`    | Full legend on hover when a columns form clips it to one line.    |
 | `description?` | `ReactNode` | -                                                                 |
 | `layout?`      | `"columns"` | Opt-in label/control grid when used without a Form parent.        |
 | `error?`       | `ReactNode` | The group's announced error, such as "Choose at least one right". |
@@ -103,6 +104,7 @@ Props accepted by Field.
 | `error?`       | `ReactNode`                                  | -                                                                                                                                                                |
 | `icon?`        | `ReactNode`                                  | A decorative marker, such as a Sigil or App icon, before the label. It is hidden from assistive tech; the label stays the control's name.                        |
 | `label?`       | `ReactNode`                                  | -                                                                                                                                                                |
+| `labelTitle?`  | `string`                                     | Full label on hover when a columns form clips it to one line.                                                                                                    |
 | `orientation?` | `"horizontal"` \| `"inline"` \| `"vertical"` | `vertical` stacks label, control and error; `horizontal` puts the control opposite its copy (settings rows); `inline` puts a checkbox or switch before its copy. |
 | `optional?`    | `boolean`                                    | Marks an optional field in a mostly required form.                                                                                                               |
 | `readout?`     | `boolean`                                    | The child is a read-only readout, such as a Status, not a control: the label names the row and nothing is wired to the child.                                    |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/caps",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "Levi <levi@technomancy.dev>",
   "description": "Product-neutral React primitives and blocks for Fungi interfaces",
   "type": "module",
@@ -493,7 +493,7 @@
     "typescript": "5.9.3",
     "vite": "8.2.2",
     "vitest": "4.1.11",
-    "@fungi.computer/sigils": "0.2.0",
+    "@fungi.computer/sigils": "0.2.1",
     "postcss-value-parser": "4.2.0",
     "@tanstack/react-form": "1.33.2",
     "effect": "4.0.2",
@@ -588,7 +588,7 @@
     "format:check": "node ../../tooling/repository/scripts/format-package-check.mjs",
     "lint:anti-slop": "node ../../tooling/repository/scripts/lint-package-anti-slop.mjs",
     "build:workbench": "node scripts/workbench-build.mjs --prepared",
-    "test:nightly": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-workbench --origin-env CAPS_WORKBENCH_URL test/screen-theme.browser.mjs test/scroll-area.browser.mjs test/display-density.browser.mjs test/resize-handle.browser.mjs && node test/scroll-gutter.browser.mjs",
+    "test:nightly": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-workbench --origin-env CAPS_WORKBENCH_URL test/screen-theme.browser.mjs test/scroll-area.browser.mjs test/display-density.browser.mjs test/resize-handle.browser.mjs test/dialog-fill.browser.mjs && node test/scroll-gutter.browser.mjs",
     "test:code-input": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-code-input --origin-env CAPS_WORKBENCH_URL test/code-input.browser.mjs",
     "test:icon-choice": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-icon-choice --origin-env CAPS_WORKBENCH_URL test/icon-choice.browser.mjs",
     "test:choice-label-alignment": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-choice-alignment --origin-env CAPS_WORKBENCH_URL test/choice-label-alignment.browser.mjs",