@camstack/ui-library 1.2.48 → 1.2.49

package/dist/index.cjs

@@ -13119,6 +13119,10 @@ var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-
 		* header, tab strip, footer — stays put at every height. The dialog
 		* keeps its own padding either way, so `sheet-on-mobile`'s
 		* safe-area bottom padding still applies to the footer.
+		*
+		* `body` also takes a DEFINITE height below `md` — see the
+		* `scroll: 'body'` compound variants. That is not a style choice; the
+		* flex chain does not resolve without it on iOS Safari.
 		*/
 		scroll: {
 			content: "overflow-y-auto",
@@ -13144,6 +13148,16 @@ var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-
 			placement: "sheet-on-mobile",
 			width: "lg",
 			class: "md:w-[calc(100vw-2rem)] md:max-w-lg"
+		},
+		{
+			scroll: "body",
+			placement: "sheet-on-mobile",
+			class: "h-[92dvh] md:h-auto"
+		},
+		{
+			scroll: "body",
+			placement: "center",
+			class: "h-[calc(100dvh-2rem-2*max(env(safe-area-inset-top),env(safe-area-inset-bottom)))] md:h-auto"
 		}
 	],
 	defaultVariants: {
@@ -13197,6 +13211,12 @@ function DialogHeader({ className, ...props }) {
 * footer out of the dialog instead of scrolling — the exact failure this
 * variant exists to remove. Anything sticky INSIDE a dialog body pins against
 * this element, since it is the scroll container.
+*
+* It only bounds a scroll area if every ancestor up to the dialog has a
+* resolved height. `DialogContent` supplies the top of that chain (see the
+* `scroll: 'body'` compound variants); an intermediate wrapper between them —
+* a `<Tabs>` that owns the tab strip, say — must carry `flex-1 min-h-0` too,
+* or it collapses and takes the body with it.
 */
 function DialogBody({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

package/dist/index.js

@@ -13095,6 +13095,10 @@ var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-
 		* header, tab strip, footer — stays put at every height. The dialog
 		* keeps its own padding either way, so `sheet-on-mobile`'s
 		* safe-area bottom padding still applies to the footer.
+		*
+		* `body` also takes a DEFINITE height below `md` — see the
+		* `scroll: 'body'` compound variants. That is not a style choice; the
+		* flex chain does not resolve without it on iOS Safari.
 		*/
 		scroll: {
 			content: "overflow-y-auto",
@@ -13120,6 +13124,16 @@ var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-
 			placement: "sheet-on-mobile",
 			width: "lg",
 			class: "md:w-[calc(100vw-2rem)] md:max-w-lg"
+		},
+		{
+			scroll: "body",
+			placement: "sheet-on-mobile",
+			class: "h-[92dvh] md:h-auto"
+		},
+		{
+			scroll: "body",
+			placement: "center",
+			class: "h-[calc(100dvh-2rem-2*max(env(safe-area-inset-top),env(safe-area-inset-bottom)))] md:h-auto"
 		}
 	],
 	defaultVariants: {
@@ -13173,6 +13187,12 @@ function DialogHeader({ className, ...props }) {
 * footer out of the dialog instead of scrolling — the exact failure this
 * variant exists to remove. Anything sticky INSIDE a dialog body pins against
 * this element, since it is the scroll container.
+*
+* It only bounds a scroll area if every ancestor up to the dialog has a
+* resolved height. `DialogContent` supplies the top of that chain (see the
+* `scroll: 'body'` compound variants); an intermediate wrapper between them —
+* a `<Tabs>` that owns the tab strip, say — must carry `flex-1 min-h-0` too,
+* or it collapses and takes the body with it.
 */
 function DialogBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/primitives/dialog.d.ts

@@ -51,6 +51,12 @@ export declare function DialogHeader({ className, ...props }: HTMLAttributes<HTM
  * footer out of the dialog instead of scrolling — the exact failure this
  * variant exists to remove. Anything sticky INSIDE a dialog body pins against
  * this element, since it is the scroll container.
+ *
+ * It only bounds a scroll area if every ancestor up to the dialog has a
+ * resolved height. `DialogContent` supplies the top of that chain (see the
+ * `scroll: 'body'` compound variants); an intermediate wrapper between them —
+ * a `<Tabs>` that owns the tab strip, say — must carry `flex-1 min-h-0` too,
+ * or it collapses and takes the body with it.
  */
 export declare function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export declare function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.48",
+  "version": "1.2.49",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",