@gridui/grid 2.3.5 → 3.0.0

package/README.md

@@ -56,7 +56,7 @@ FrameBoundary instances use their current palette's border color.
 Astro host elements require an
 [application-owned adapter](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/usage/framework-adapters.md). The page filler uses
 the final section's tone for its leading line.
-Grid `frame="cells"` owns outer and cell edges; `frame="internal"` owns seams
+Grid `frame="all"` owns outer and cell edges; `frame="internal"` owns seams
 inside an existing frame. Use `fillLastRow` with direct GridItem children to
 fill incomplete rows at every breakpoint. Explicit gaps are disallowed in
 framed grids. For wrapping lists with a container-driven track count, use
@@ -101,3 +101,5 @@ See [quarterly release history](https://github.com/sudo-ui/GridUI-React-Monorepo
 
 `DashboardFrame` supplies full-height workspace gutters and structural edges without
 creating a main landmark. See [dashboard frames](docs/README.md#dashboard-frames).
+
+[Component reference](docs/reference/README.md) contains focused API pages for each public component.

package/dist/container/container.d.ts

@@ -4,9 +4,9 @@
  * @namespace Container
  * @description Container
  */
-import type { ElementProps } from "../shared/types";
+import type { ContainerWidth, ElementProps } from "../shared/types";
 import type { FC } from "react";
 export type ContainerProps = ElementProps & {
-    readonly width?: "narrow" | "standard" | "wide";
+    readonly width?: ContainerWidth;
 };
 export declare const Container: FC<ContainerProps>;

package/dist/container/style.d.ts

@@ -10,5 +10,5 @@ export declare const containerWidthClasses: {
     wide: string;
 };
 export declare const containerVariants: (props?: ({
-    width?: "standard" | "narrow" | "wide" | null | undefined;
+    width?: "narrow" | "standard" | "wide" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/frame-boundary/boundary-options.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameBoundary
+ * @description Boundary Options
+ */
+import type { frameBoundaryStyles } from "./style";
+import type { VariantProps } from "class-variance-authority";
+export type FrameBoundaryStyle = NonNullable<VariantProps<typeof frameBoundaryStyles>["boundary"]>;
+export type FrameBoundaryOptions = {
+    readonly boundary?: FrameBoundaryStyle;
+};

package/dist/frame-boundary/frame-boundary.d.ts

@@ -4,12 +4,9 @@
  * @namespace FrameBoundary
  * @description Frame Boundary
  */
-import { frameBoundaryStyles } from "./style";
-import type { VariantProps } from "class-variance-authority";
+import type { FrameBoundaryOptions } from "./boundary-options";
 import type { ComponentPropsWithRef, FC } from "react";
-export type FrameBoundaryStyle = NonNullable<VariantProps<typeof frameBoundaryStyles>["boundary"]>;
-export type FrameBoundaryProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
-    readonly boundary?: FrameBoundaryStyle;
+export type FrameBoundaryProps = Omit<ComponentPropsWithRef<"div">, "children"> & FrameBoundaryOptions & {
     readonly extent?: "content" | "frame";
 };
 export declare const FrameBoundary: FC<FrameBoundaryProps>;

package/dist/frame-footer/frame-footer.d.ts

@@ -4,16 +4,11 @@
  * @namespace FrameFooter
  * @description Frame Footer
  */
-import { type FrameBoundaryStyle } from "../frame-boundary/frame-boundary";
 import { type ChromeProps } from "../shared/chrome";
-import { type FrameDecorationStyle } from "../shared/decoration";
-import { type FrameTone } from "../shared/frame-style";
+import type { FrameSurfaceOptions } from "../shared/frame-surface-options";
 import type { ComponentPropsWithRef, FC, ReactNode } from "react";
-export type FrameFooterProps = ComponentPropsWithRef<"footer"> & ChromeProps & {
+export type FrameFooterProps = ComponentPropsWithRef<"footer"> & ChromeProps & FrameSurfaceOptions & {
     readonly contentLayout?: "flex" | "block";
-    readonly tone?: FrameTone;
-    readonly boundary?: FrameBoundaryStyle;
-    readonly decoration?: FrameDecorationStyle;
     readonly signature?: ReactNode;
     readonly signatureAppearance?: "standard" | "cropped";
 };

package/dist/frame-rail-group/frame-rail-group.d.ts

@@ -4,10 +4,8 @@
  * @namespace FrameRailGroup
  * @description Frame Rail Group
  */
-import { type Responsive, type Space } from "@gridui/style-utils/responsive";
-import type { ComponentPropsWithRef, FC, ReactNode } from "react";
-export type FrameRailGroupProps = ComponentPropsWithRef<"div"> & {
-    readonly rail?: ReactNode;
-    readonly railWidth?: Responsive<Space>;
-};
+import type { FrameRailOptions } from "../shared/frame-rail-options";
+import type { ElementProps } from "../shared/types";
+import type { FC } from "react";
+export type FrameRailGroupProps = ElementProps & FrameRailOptions;
 export declare const FrameRailGroup: FC<FrameRailGroupProps>;

package/dist/frame-region/frame-region.d.ts

@@ -4,9 +4,9 @@
  * @namespace FrameRegion
  * @description Frame Region
  */
-import type { ComponentPropsWithRef, FC } from "react";
-export type FrameRegionProps = ComponentPropsWithRef<"div"> & {
-    readonly asChild?: boolean;
+import type { SlottedElementOptions } from "../shared/types";
+import type { FC } from "react";
+export type FrameRegionProps = SlottedElementOptions & {
     readonly edge?: "none" | "left" | "right" | "both";
 };
 export declare const FrameRegion: FC<FrameRegionProps>;

package/dist/frame-region-row/frame-region-row.d.ts

@@ -4,9 +4,9 @@
  * @namespace FrameRegionRow
  * @description Frame Region Row
  */
-import type { ComponentPropsWithRef, FC } from "react";
-export type FrameRegionRowProps = ComponentPropsWithRef<"div"> & {
-    readonly asChild?: boolean;
+import type { SlottedElementOptions } from "../shared/types";
+import type { FC } from "react";
+export type FrameRegionRowProps = SlottedElementOptions & {
     readonly contentInset?: number | string;
 };
 export declare const FrameRegionRow: FC<FrameRegionRowProps>;

package/dist/frame-section/frame-section.d.ts

@@ -4,16 +4,11 @@
  * @namespace FrameSection
  * @description Frame Section
  */
-import { type FrameBoundaryStyle } from "../frame-boundary/frame-boundary";
-import { type FrameDecorationStyle } from "../shared/decoration";
-import { type FrameTone } from "../shared/frame-style";
+import type { FrameSurfaceOptions } from "../shared/frame-surface-options";
 import type { FrameTextureStyle } from "../shared/texture-types";
 import { type Responsive, type Space } from "@gridui/style-utils/responsive";
 import type { ComponentPropsWithRef, FC } from "react";
-export type FrameSectionProps = ComponentPropsWithRef<"section"> & {
-    readonly tone?: FrameTone;
-    readonly boundary?: FrameBoundaryStyle;
-    readonly decoration?: FrameDecorationStyle;
+export type FrameSectionProps = ComponentPropsWithRef<"section"> & FrameSurfaceOptions & {
     readonly texture?: FrameTextureStyle;
     readonly edges?: "frame" | "none";
     readonly paddingInline?: Responsive<Space>;

package/dist/grid/grid.d.ts

@@ -12,7 +12,7 @@ type GridFrameOptions = {
     readonly frame?: "none";
     readonly gap?: Responsive<Space>;
 } | {
-    readonly frame: "none" | "cells" | "internal";
+    readonly frame: "none" | "all" | "internal";
     readonly gap?: never;
 };
 type GridLayoutOptions = ({

package/dist/grid/style.d.ts

@@ -5,8 +5,8 @@
  * @description Style
  */
 export declare const gridStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const gridCellsStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const gridAllStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const gridInternalStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const gridVariants: (props?: ({
-    frame?: "none" | "cells" | "internal" | null | undefined;
+    frame?: "none" | "all" | "internal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/grid-item/grid-item.d.ts

@@ -5,11 +5,10 @@
  * @description Grid Item
  */
 import type { Span } from "../shared/responsive-types";
-import type { ElementProps } from "../shared/types";
+import type { SlottedElementOptions } from "../shared/types";
 import { type Responsive, type Space } from "@gridui/style-utils/responsive";
 import type { FC } from "react";
-export type GridItemProps = ElementProps & {
-    readonly asChild?: boolean;
+export type GridItemProps = SlottedElementOptions & {
     readonly span?: Responsive<Span>;
     readonly padding?: Responsive<Space>;
     readonly align?: "end" | "center";

package/dist/index.d.ts

@@ -8,7 +8,8 @@ export type { ContainerProps } from "./container/container";
 export { Container } from "./container/container";
 export type { DashboardFrameProps, DashboardFrameSize } from "./dashboard-frame/dashboard-frame";
 export { DashboardFrame } from "./dashboard-frame/dashboard-frame";
-export type { FrameBoundaryProps, FrameBoundaryStyle } from "./frame-boundary/frame-boundary";
+export type { FrameBoundaryStyle } from "./frame-boundary/boundary-options";
+export type { FrameBoundaryProps } from "./frame-boundary/frame-boundary";
 export { FrameBoundary } from "./frame-boundary/frame-boundary";
 export type { FrameFooterProps } from "./frame-footer/frame-footer";
 export { FrameFooter } from "./frame-footer/frame-footer";

package/dist/index.js

@@ -71,28 +71,28 @@ import { cva as cva2 } from "class-variance-authority";
 var dashboardFrameVariants = cva2("gridui-dashboard-frame", {
   variants: {
     startSize: {
-      none: "gridui-u-[--gridui-dashboard-start:0px] gridui-u-[--gridui-dashboard-start-minimum:0px]",
-      small: "gridui-u-[--gridui-dashboard-start:var(--gridui-space-8)]",
-      medium: "gridui-u-[--gridui-dashboard-start:var(--gridui-space-16)]",
-      large: "gridui-u-[--gridui-dashboard-start:var(--gridui-space-24)]"
+      none: "gridui-u-grid--[--gridui-dashboard-start:0px] gridui-u-grid--[--gridui-dashboard-start-minimum:0px]",
+      small: "gridui-u-grid--[--gridui-dashboard-start:var(--gridui-space-8)]",
+      medium: "gridui-u-grid--[--gridui-dashboard-start:var(--gridui-space-16)]",
+      large: "gridui-u-grid--[--gridui-dashboard-start:var(--gridui-space-24)]"
     },
     endSize: {
-      none: "gridui-u-[--gridui-dashboard-end:0px] gridui-u-[--gridui-dashboard-end-minimum:0px]",
-      small: "gridui-u-[--gridui-dashboard-end:var(--gridui-space-8)]",
-      medium: "gridui-u-[--gridui-dashboard-end:var(--gridui-space-16)]",
-      large: "gridui-u-[--gridui-dashboard-end:var(--gridui-space-24)]"
+      none: "gridui-u-grid--[--gridui-dashboard-end:0px] gridui-u-grid--[--gridui-dashboard-end-minimum:0px]",
+      small: "gridui-u-grid--[--gridui-dashboard-end:var(--gridui-space-8)]",
+      medium: "gridui-u-grid--[--gridui-dashboard-end:var(--gridui-space-16)]",
+      large: "gridui-u-grid--[--gridui-dashboard-end:var(--gridui-space-24)]"
     },
     compactStartSize: {
-      none: "gridui-u-[--gridui-dashboard-compact-start:0px] gridui-u-[--gridui-dashboard-compact-start-minimum:0px]",
-      small: "gridui-u-[--gridui-dashboard-compact-start:var(--gridui-space-8)]",
-      medium: "gridui-u-[--gridui-dashboard-compact-start:var(--gridui-space-16)]",
-      large: "gridui-u-[--gridui-dashboard-compact-start:var(--gridui-space-24)]"
+      none: "gridui-u-grid--[--gridui-dashboard-compact-start:0px] gridui-u-grid--[--gridui-dashboard-compact-start-minimum:0px]",
+      small: "gridui-u-grid--[--gridui-dashboard-compact-start:var(--gridui-space-8)]",
+      medium: "gridui-u-grid--[--gridui-dashboard-compact-start:var(--gridui-space-16)]",
+      large: "gridui-u-grid--[--gridui-dashboard-compact-start:var(--gridui-space-24)]"
     },
     compactEndSize: {
-      none: "gridui-u-[--gridui-dashboard-compact-end:0px] gridui-u-[--gridui-dashboard-compact-end-minimum:0px]",
-      small: "gridui-u-[--gridui-dashboard-compact-end:var(--gridui-space-8)]",
-      medium: "gridui-u-[--gridui-dashboard-compact-end:var(--gridui-space-16)]",
-      large: "gridui-u-[--gridui-dashboard-compact-end:var(--gridui-space-24)]"
+      none: "gridui-u-grid--[--gridui-dashboard-compact-end:0px] gridui-u-grid--[--gridui-dashboard-compact-end-minimum:0px]",
+      small: "gridui-u-grid--[--gridui-dashboard-compact-end:var(--gridui-space-8)]",
+      medium: "gridui-u-grid--[--gridui-dashboard-compact-end:var(--gridui-space-16)]",
+      large: "gridui-u-grid--[--gridui-dashboard-compact-end:var(--gridui-space-24)]"
     }
   },
   defaultVariants: {
@@ -195,6 +195,7 @@ var chromeStyle = (padding) => {
   const values = resolveResponsive(padding);
   return {
     "--gridui-chrome-padding": spaceValue(values.base),
+    "--gridui-chrome-padding-sm": spaceValue(values.sm),
     "--gridui-chrome-padding-md": spaceValue(values.md),
     "--gridui-chrome-padding-lg": spaceValue(values.lg)
   };
@@ -214,17 +215,17 @@ var frameToneStyles = (options = {}) => {
 };
 var frameContentStyles = cva5(cn4(
   "gridui-frame-content",
-  "gridui-u-border-x gridui-u-border-solid gridui-u-border-border gridui-u-wrap-anywhere"
+  "gridui-u-grid--border-x gridui-u-grid--border-solid gridui-u-grid--border-border gridui-u-grid--wrap-anywhere"
 ));
 
 // src/frame-footer/style.ts
 import { cn as cn5 } from "@gridui/style-utils";
 import { cva as cva6 } from "class-variance-authority";
 var frameSignatureStyles = cva6(cn5(
-  "gridui-frame-signature gridui-u-flex gridui-u-min-w-0 gridui-u-items-center gridui-u-justify-center gridui-u-gap-gridui-24 gridui-u-py-gridui-32 gridui-u-px-gridui-24 gridui-u-overflow-hidden gridui-u-border-t gridui-u-border-solid gridui-u-border-border gridui-u-bg-transparent",
-  "gridui-u-[&>svg]:h-auto gridui-u-[&>svg]:opacity-30 gridui-u-[&>span]:font-display gridui-u-[&>span]:leading-none gridui-u-[&>span]:text-transparent"
+  "gridui-frame-signature gridui-u-grid--flex gridui-u-grid--min-w-0 gridui-u-grid--items-center gridui-u-grid--justify-center gridui-u-grid--gap-gridui-24 gridui-u-grid--py-gridui-32 gridui-u-grid--px-gridui-24 gridui-u-grid--overflow-hidden gridui-u-grid--border-t gridui-u-grid--border-solid gridui-u-grid--border-border gridui-u-grid--bg-transparent",
+  "gridui-u-grid--[&>svg]:h-auto gridui-u-grid--[&>svg]:opacity-30 gridui-u-grid--[&>span]:font-display gridui-u-grid--[&>span]:leading-none gridui-u-grid--[&>span]:text-transparent"
 ));
-var frameSignatureCroppedStyles = cva6("gridui-frame-signature-cropped gridui-u-block gridui-u-pb-0 gridui-u-@container gridui-u-[&>span]:block gridui-u-[&>span]:text-center gridui-u-[&>span]:whitespace-nowrap");
+var frameSignatureCroppedStyles = cva6("gridui-frame-signature-cropped gridui-u-grid--block gridui-u-grid--pb-0 gridui-u-grid--@container gridui-u-grid--[&>span]:block gridui-u-grid--[&>span]:text-center gridui-u-grid--[&>span]:whitespace-nowrap");
 
 // src/frame-footer/frame-footer.tsx
 import { cn as cn6 } from "@gridui/style-utils";
@@ -232,7 +233,7 @@ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FrameFooter = (props) => {
   const { padding = {
     base: 16,
-    md: 24
+    sm: 24
   }, contentLayout = "flex", tone = "neutral", boundary = "line", decoration, signature, signatureAppearance = "standard", className, children, ...restProps } = props;
   return /* @__PURE__ */ jsxs3(
     "footer",
@@ -286,7 +287,7 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 var FrameHeader = (props) => {
   const { padding = {
     base: 16,
-    md: 24
+    sm: 24
   }, wrap = true, gap = 16, justify = "between", className, children, ...restProps } = props;
   return /* @__PURE__ */ jsx6(
     "header",
@@ -312,9 +313,9 @@ var FrameHeader = (props) => {
 
 // src/frame-rail/style.ts
 import { cva as cva7 } from "class-variance-authority";
-var frameRailStyles = cva7("gridui-frame-rail gridui-u-flex gridui-u-h-full gridui-u-box-border gridui-u-flex-col gridui-u-py-gridui-24 gridui-u-text-muted");
-var frameRailContentStyles = cva7("gridui-frame-rail-content gridui-u-relative gridui-u-z-(--gridui-z-interaction) gridui-u-min-w-0 gridui-u-type-eyebrow gridui-u-bg-inherit");
-var frameRailStickyBottomStyles = cva7("gridui-frame-rail-sticky-bottom gridui-u-justify-end gridui-u-[&>.gridui-frame-rail-content]:sticky");
+var frameRailStyles = cva7("gridui-frame-rail gridui-u-grid--flex gridui-u-grid--h-full gridui-u-grid--box-border gridui-u-grid--flex-col gridui-u-grid--py-gridui-24 gridui-u-grid--text-muted");
+var frameRailContentStyles = cva7("gridui-frame-rail-content gridui-u-grid--relative gridui-u-grid--z-(--gridui-z-interaction) gridui-u-grid--min-w-0 gridui-u-grid--type-eyebrow gridui-u-grid--bg-inherit");
+var frameRailStickyBottomStyles = cva7("gridui-frame-rail-sticky-bottom gridui-u-grid--justify-end gridui-u-grid--[&>.gridui-frame-rail-content]:sticky");
 
 // src/frame-rail/frame-rail.tsx
 import { cn as cn8 } from "@gridui/style-utils";
@@ -349,15 +350,17 @@ import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var FrameRailGroup = (props) => {
   const { rail, railWidth = {
     base: 0,
-    md: 32
+    sm: 32
   }, children, className, style, ...restProps } = props;
   const hasRail = rail !== void 0 && rail !== null && rail !== false;
   const width = resolveResponsive2(hasRail ? railWidth : 0);
   const layoutStyle = {
     "--gridui-rail-width-base": spaceValue3(width.base),
+    "--gridui-rail-width-sm": spaceValue3(width.sm),
     "--gridui-rail-width-md": spaceValue3(width.md),
     "--gridui-rail-width-lg": spaceValue3(width.lg),
     "--gridui-rail-display-base": width.base === 0 ? "none" : "block",
+    "--gridui-rail-display-sm": width.sm === 0 ? "none" : "block",
     "--gridui-rail-display-md": width.md === 0 ? "none" : "block",
     "--gridui-rail-display-lg": width.lg === 0 ? "none" : "block",
     ...style
@@ -473,7 +476,7 @@ var FrameSection = (props) => {
         /* @__PURE__ */ jsxs5(
           "div",
           {
-            className: cn12(frameContentStyles(), "gridui-frame-surface", edges === "none" && "gridui-u-border-x-0"),
+            className: cn12(frameContentStyles(), "gridui-frame-surface", edges === "none" && "gridui-u-grid--border-x-0"),
             style: {
               ...spacingVariables("section-padding-inline", paddingInline),
               ...spacingVariables("section-padding-block", paddingBlock)
@@ -524,7 +527,7 @@ import { cn as cn14 } from "@gridui/style-utils";
 import { cva as cva8 } from "class-variance-authority";
 var gridItemStyles = cva8(cn14(
   "gridui-grid-item",
-  "gridui-u-min-w-0 gridui-u-wrap-anywhere"
+  "gridui-u-grid--min-w-0 gridui-u-grid--wrap-anywhere"
 ));
 
 // src/grid-item/grid-item.tsx
@@ -546,9 +549,11 @@ var GridItem = (props) => {
   const inset = resolveResponsive3(padding);
   const layoutStyle = {
     "--gridui-span": spanValue(size.base),
+    "--gridui-span-sm": spanValue(size.sm),
     "--gridui-span-md": spanValue(size.md),
     "--gridui-span-lg": spanValue(size.lg),
     "--gridui-padding": spaceValue4(inset.base),
+    "--gridui-padding-sm": spaceValue4(inset.sm),
     "--gridui-padding-md": spaceValue4(inset.md),
     "--gridui-padding-lg": spaceValue4(inset.lg),
     ...align ? {
@@ -573,21 +578,21 @@ import { cn as cn16 } from "@gridui/style-utils";
 import { cva as cva9 } from "class-variance-authority";
 var gridStyles = cva9(cn16(
   "gridui-grid",
-  "gridui-u-grid gridui-u-min-w-0"
+  "gridui-u-grid--grid gridui-u-grid--min-w-0"
 ));
-var gridCellsStyles = cva9(cn16(
-  "gridui-grid-cells",
-  "gridui-u-border-t gridui-u-border-solid gridui-u-border-border gridui-u-border-l gridui-u-border-solid gridui-u-border-border"
+var gridAllStyles = cva9(cn16(
+  "gridui-grid-all",
+  "gridui-u-grid--border-t gridui-u-grid--border-solid gridui-u-grid--border-border gridui-u-grid--border-l gridui-u-grid--border-solid gridui-u-grid--border-border"
 ));
 var gridInternalStyles = cva9(cn16(
   "gridui-grid-internal",
-  "gridui-u-bg-border"
+  "gridui-u-grid--bg-border"
 ));
 var gridVariants = cva9(gridStyles(), {
   variants: {
     frame: {
       none: "",
-      cells: gridCellsStyles(),
+      all: gridAllStyles(),
       internal: gridInternalStyles()
     }
   },
@@ -673,6 +678,7 @@ var Grid = (props) => {
     const minimum = resolveResponsive4(minItemWidth);
     geometry = {
       "--gridui-grid-template": adaptiveGridTemplate(minimum.base),
+      "--gridui-grid-template-sm": adaptiveGridTemplate(minimum.sm),
       "--gridui-grid-template-md": adaptiveGridTemplate(minimum.md),
       "--gridui-grid-template-lg": adaptiveGridTemplate(minimum.lg)
     };
@@ -683,14 +689,17 @@ var Grid = (props) => {
     const tracks = resolveResponsive4(columns);
     count = {
       base: gridColumnCount(tracks.base),
+      sm: gridColumnCount(tracks.sm),
       md: gridColumnCount(tracks.md),
       lg: gridColumnCount(tracks.lg)
     };
     geometry = {
       "--gridui-columns": count.base,
+      "--gridui-columns-sm": count.sm,
       "--gridui-columns-md": count.md,
       "--gridui-columns-lg": count.lg,
       "--gridui-grid-template": gridTemplate(tracks.base),
+      "--gridui-grid-template-sm": gridTemplate(tracks.sm),
       "--gridui-grid-template-md": gridTemplate(tracks.md),
       "--gridui-grid-template-lg": gridTemplate(tracks.lg)
     };
@@ -699,6 +708,7 @@ var Grid = (props) => {
   const layoutStyle = {
     ...geometry,
     "--gridui-gap": frame === "internal" ? "1px" : spaceValue5(spacing.base),
+    "--gridui-gap-sm": frame === "internal" ? "1px" : spaceValue5(spacing.sm),
     "--gridui-gap-md": frame === "internal" ? "1px" : spaceValue5(spacing.md),
     "--gridui-gap-lg": frame === "internal" ? "1px" : spaceValue5(spacing.lg),
     ...style
@@ -718,6 +728,9 @@ var Grid = (props) => {
       base: fillGridRowSpans(count.base, spans.map((span) => {
         return span.base === "full" ? count.base : span.base;
       })),
+      sm: fillGridRowSpans(count.sm, spans.map((span) => {
+        return span.sm === "full" ? count.sm : span.sm;
+      })),
       md: fillGridRowSpans(count.md, spans.map((span) => {
         return span.md === "full" ? count.md : span.md;
       })),
@@ -728,6 +741,7 @@ var Grid = (props) => {
     content = items.map((item, index) => {
       const itemStyle = {
         "--gridui-span": `span ${filled.base[index]} / span ${filled.base[index]}`,
+        "--gridui-span-sm": `span ${filled.sm[index]} / span ${filled.sm[index]}`,
         "--gridui-span-md": `span ${filled.md[index]} / span ${filled.md[index]}`,
         "--gridui-span-lg": `span ${filled.lg[index]} / span ${filled.lg[index]}`,
         ...item.props.style
@@ -751,7 +765,7 @@ var Grid = (props) => {
 
 // src/page-frame/style.ts
 import { cva as cva10 } from "class-variance-authority";
-var pageFrameVariants = cva10("gridui-page-frame gridui-u-min-h-svh", {
+var pageFrameVariants = cva10("gridui-page-frame gridui-u-grid--min-h-svh", {
   variants: {
     width: containerWidthClasses
   },
@@ -840,7 +854,7 @@ import { cn as cn19 } from "@gridui/style-utils";
 import { cva as cva11 } from "class-variance-authority";
 var rowStyles = cva11(cn19(
   "gridui-row",
-  "gridui-u-min-w-0"
+  "gridui-u-grid--min-w-0"
 ));
 
 // src/row/row.tsx
@@ -892,9 +906,11 @@ var Split = (props) => {
       className: cn21("gridui-split", className),
       "data-order": order,
       "data-direction": directions.base,
+      "data-direction-sm": directions.sm,
       "data-direction-md": directions.md,
       "data-direction-lg": directions.lg,
       "data-seam": seams.base,
+      "data-seam-sm": seams.sm,
       "data-seam-md": seams.md,
       "data-seam-lg": seams.lg
     }
@@ -906,7 +922,7 @@ import { cn as cn22 } from "@gridui/style-utils";
 import { cva as cva12 } from "class-variance-authority";
 var stackStyles = cva12(cn22(
   "gridui-stack",
-  "gridui-u-flex gridui-u-min-w-0 gridui-u-flex-col"
+  "gridui-u-grid--flex gridui-u-grid--min-w-0 gridui-u-grid--flex-col"
 ));
 
 // src/stack/stack.tsx
@@ -926,6 +942,7 @@ var Stack = (props) => {
   const spacing = resolveResponsive6(gap);
   const layoutStyle = {
     "--gridui-gap": spaceValue7(spacing.base),
+    "--gridui-gap-sm": spaceValue7(spacing.sm),
     "--gridui-gap-md": spaceValue7(spacing.md),
     "--gridui-gap-lg": spaceValue7(spacing.lg),
     width: width === "full" ? "100%" : void 0,