@usefragments/ui 1.5.4 → 1.6.0

package/src/components/Field/index.tsx

@@ -6,6 +6,7 @@ import {
   type FieldControlProps as BaseFieldControlProps,
   type FieldValidityState,
 } from "@base-ui/react/field";
+import { useResolvedControlSize, type ControlSize } from "../ComponentDefaults";
 import styles from "./Field.module.scss";
 
 // ============================================
@@ -20,6 +21,7 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
   validate?: (value: unknown) => string | string[] | null | Promise<string | string[] | null>;
   validationMode?: "onSubmit" | "onBlur" | "onChange";
   validationDebounceTime?: number;
+  size?: ControlSize;
 }
 
 export interface FieldLabelProps {
@@ -57,6 +59,10 @@ export interface FieldValidityProps {
   children: (state: FieldValidityState) => React.ReactNode;
 }
 
+export interface FieldRequiredProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children?: React.ReactNode;
+}
+
 export type { FieldValidityState };
 
 // ============================================
@@ -71,9 +77,11 @@ function FieldRoot({
   validate,
   validationMode,
   validationDebounceTime,
+  size: sizeProp,
   className,
   ...htmlProps
 }: FieldProps) {
+  const size = useResolvedControlSize(sizeProp);
   const classes = [styles.root, className].filter(Boolean).join(" ");
 
   return (
@@ -85,6 +93,7 @@ function FieldRoot({
       validate={validate}
       validationMode={validationMode}
       validationDebounceTime={validationDebounceTime}
+      data-size={size}
       className={classes}
     >
       {children}
@@ -129,6 +138,14 @@ function FieldValidity({ children }: FieldValidityProps) {
   return <BaseField.Validity>{children}</BaseField.Validity>;
 }
 
+function FieldRequired({ children = "*", className, ...htmlProps }: FieldRequiredProps) {
+  return (
+    <span {...htmlProps} className={[styles.required, className].filter(Boolean).join(" ")} aria-hidden>
+      {children}
+    </span>
+  );
+}
+
 // ============================================
 // Export compound component
 // ============================================
@@ -139,6 +156,15 @@ export const Field = Object.assign(FieldRoot, {
   Description: FieldDescription,
   Error: FieldError,
   Validity: FieldValidity,
+  Required: FieldRequired,
 });
 
-export { FieldRoot, FieldLabel, FieldControl, FieldDescription, FieldError, FieldValidity };
+export {
+  FieldRoot,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldValidity,
+  FieldRequired,
+};

package/src/components/Fieldset/Fieldset.module.scss

@@ -1,13 +1,14 @@
 @use '../../tokens/variables' as *;
 @use '../../tokens/mixins' as *;
+@use '../../recipes/typography';
 
 .root {
   @include form-group-surface;
 
   display: flex;
   flex-direction: column;
-  gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-4, $fui-space-4);
+  gap: 0;
+  padding: var(--fui-surface-inset-default, 16px);
   margin: 0;
 
   &[data-disabled] {
@@ -16,13 +17,20 @@
 }
 
 .legend {
-  @include label-text;
+  @include typography.role("ui-standard");
+
   color: var(--fui-text-secondary, $fui-text-secondary);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   padding: 0;
+  margin-block-end: var(--fui-raw-space-16, 16px);
+
+  &:has(+ .description) {
+    margin-block-end: var(--fui-raw-space-4, 4px);
+  }
 }
 
 .description {
-  @include helper-text;
-  margin: calc(-1 * var(--fui-space-2, $fui-space-2)) 0 0 0;
+  @include typography.role("caption");
+
+  margin: 0 0 var(--fui-raw-space-16, 16px);
+  color: var(--fui-text-secondary, $fui-text-secondary);
 }

package/src/components/Form/Form.contract.json

@@ -3,13 +3,7 @@
   "name": "Form",
   "description": "Form wrapper that handles server-side error distribution to Field components. Pairs with Field for complete form validation.",
   "category": "forms",
-  "tags": [
-    "form",
-    "validation",
-    "errors",
-    "submit",
-    "server"
-  ],
+  "tags": ["form", "validation", "errors", "submit", "server"],
   "status": "stable",
   "sourcePath": "src/components/Form/index.tsx",
   "exportName": "Form",
@@ -51,11 +45,7 @@
       "type": "enum",
       "description": "When field validation should run",
       "required": false,
-      "values": [
-        "onSubmit",
-        "onBlur",
-        "onChange"
-      ]
+      "values": ["onSubmit", "onBlur", "onChange"]
     }
   },
   "usage": {
@@ -73,7 +63,8 @@
       "Use onClearErrors to clear errors when fields are modified",
       "Use onSubmit for form submission handling (onFormSubmit is deprecated alias)",
       "Field components with matching name prop display errors automatically",
-      "Use Grid inside Form or Fieldset for multi-column layouts"
+      "Use Grid inside Form or Fieldset for multi-column layouts",
+      "Place form buttons inside Form.Actions so cancel and submit actions are consistently right-aligned"
     ],
     "accessibility": [
       "Renders semantic form element",
@@ -84,22 +75,22 @@
     {
       "name": "Sign up",
       "description": "Registration form with two-column name fields",
-      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"firstName\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lastName\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Doe\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"email\">\n        <Field.Label>Email</Field.Label>\n        <Field.Control>\n          <Input type=\"email\" placeholder=\"jane@example.com\" />\n        </Field.Control>\n        <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"password\">\n        <Field.Label>Password</Field.Label>\n        <Field.Control>\n          <Input type=\"password\" placeholder=\"At least 8 characters\" />\n        </Field.Control>\n        <Field.Description>Must be at least 8 characters</Field.Description>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"terms\">\n        <Field.Control>\n          <Checkbox label=\"I agree to the terms and conditions\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Create Account</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"
+      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"firstName\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lastName\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Doe\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"email\">\n        <Field.Label>Email</Field.Label>\n        <Field.Control>\n          <Input type=\"email\" placeholder=\"jane@example.com\" />\n        </Field.Control>\n        <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"password\">\n        <Field.Label>Password</Field.Label>\n        <Field.Control>\n          <Input type=\"password\" placeholder=\"At least 8 characters\" />\n        </Field.Control>\n        <Field.Description>Must be at least 8 characters</Field.Description>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"terms\">\n        <Field.Control>\n          <Checkbox label=\"I agree to the terms and conditions\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"primary\">Create Account</Button>\n  </Form.Actions>\n</Form>"
     },
     {
       "name": "Profile settings",
       "description": "Multi-section form with Fieldsets, switches, and radio group",
-      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Fieldset>\n    <Fieldset.Legend>Profile</Fieldset.Legend>\n    <Grid columns={2} gap=\"md\">\n      <Field name=\"displayName\">\n        <Field.Label>Display Name</Field.Label>\n        <Field.Control>\n          <Input placeholder=\"How others see you\" />\n        </Field.Control>\n      </Field>\n      <Field name=\"timezone\">\n        <Field.Label>Timezone</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"Select timezone\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"utc\">UTC</Select.Item>\n              <Select.Item value=\"est\">Eastern (EST)</Select.Item>\n              <Select.Item value=\"pst\">Pacific (PST)</Select.Item>\n              <Select.Item value=\"gmt\">GMT</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n      <Grid.Item colSpan=\"full\">\n        <Field name=\"bio\">\n          <Field.Label>Bio</Field.Label>\n          <Field.Control>\n            <Textarea placeholder=\"Tell us about yourself\" rows={3} maxLength={280} />\n          </Field.Control>\n          <Field.Description>Max 280 characters</Field.Description>\n        </Field>\n      </Grid.Item>\n    </Grid>\n  </Fieldset>\n  <Fieldset>\n    <Fieldset.Legend>Notifications</Fieldset.Legend>\n    <Field name=\"emailNotifs\">\n      <Field.Control>\n        <Switch label=\"Email notifications\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"marketingEmails\">\n      <Field.Control>\n        <Switch label=\"Marketing emails\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"frequency\">\n      <Field.Label>Digest frequency</Field.Label>\n      <Field.Control>\n        <RadioGroup name=\"frequency\" orientation=\"vertical\">\n          <RadioGroup.Item value=\"daily\" label=\"Daily\" />\n          <RadioGroup.Item value=\"weekly\" label=\"Weekly\" />\n          <RadioGroup.Item value=\"monthly\" label=\"Monthly\" />\n        </RadioGroup>\n      </Field.Control>\n    </Field>\n  </Fieldset>\n  <Button type=\"submit\" variant=\"primary\">Save Changes</Button>\n</Form>"
+      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Fieldset>\n    <Fieldset.Legend>Profile</Fieldset.Legend>\n    <Grid columns={2} gap=\"md\">\n      <Field name=\"displayName\">\n        <Field.Label>Display Name</Field.Label>\n        <Field.Control>\n          <Input placeholder=\"How others see you\" />\n        </Field.Control>\n      </Field>\n      <Field name=\"timezone\">\n        <Field.Label>Timezone</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"Select timezone\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"utc\">UTC</Select.Item>\n              <Select.Item value=\"est\">Eastern (EST)</Select.Item>\n              <Select.Item value=\"pst\">Pacific (PST)</Select.Item>\n              <Select.Item value=\"gmt\">GMT</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n      <Grid.Item colSpan=\"full\">\n        <Field name=\"bio\">\n          <Field.Label>Bio</Field.Label>\n          <Field.Control>\n            <Textarea placeholder=\"Tell us about yourself\" rows={3} maxLength={280} />\n          </Field.Control>\n          <Field.Description>Max 280 characters</Field.Description>\n        </Field>\n      </Grid.Item>\n    </Grid>\n  </Fieldset>\n  <Fieldset>\n    <Fieldset.Legend>Notifications</Fieldset.Legend>\n    <Field name=\"emailNotifs\">\n      <Field.Control>\n        <Switch label=\"Email notifications\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"marketingEmails\">\n      <Field.Control>\n        <Switch label=\"Marketing emails\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"frequency\">\n      <Field.Label>Digest frequency</Field.Label>\n      <Field.Control>\n        <RadioGroup name=\"frequency\" orientation=\"vertical\">\n          <RadioGroup.Item value=\"daily\" label=\"Daily\" />\n          <RadioGroup.Item value=\"weekly\" label=\"Weekly\" />\n          <RadioGroup.Item value=\"monthly\" label=\"Monthly\" />\n        </RadioGroup>\n      </Field.Control>\n    </Field>\n  </Fieldset>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"primary\">Save Changes</Button>\n  </Form.Actions>\n</Form>"
     },
     {
       "name": "Contact form",
       "description": "Contact form with select, textarea, and checkbox",
-      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"name\">\n      <Field.Label>Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Your name\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"you@example.com\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"subject\">\n        <Field.Label>Subject</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"What is this about?\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"general\">General Inquiry</Select.Item>\n              <Select.Item value=\"support\">Technical Support</Select.Item>\n              <Select.Item value=\"billing\">Billing</Select.Item>\n              <Select.Item value=\"feedback\">Feedback</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"message\">\n        <Field.Label>Message</Field.Label>\n        <Field.Control>\n          <Textarea placeholder=\"How can we help?\" rows={5} />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"copy\">\n        <Field.Control>\n          <Checkbox label=\"Send me a copy\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Send Message</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"
+      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"name\">\n      <Field.Label>Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Your name\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"you@example.com\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"subject\">\n        <Field.Label>Subject</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"What is this about?\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"general\">General Inquiry</Select.Item>\n              <Select.Item value=\"support\">Technical Support</Select.Item>\n              <Select.Item value=\"billing\">Billing</Select.Item>\n              <Select.Item value=\"feedback\">Feedback</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"message\">\n        <Field.Label>Message</Field.Label>\n        <Field.Control>\n          <Textarea placeholder=\"How can we help?\" rows={5} />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"copy\">\n        <Field.Control>\n          <Checkbox label=\"Send me a copy\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"primary\">Send Message</Button>\n  </Form.Actions>\n</Form>"
     },
     {
       "name": "With server errors",
       "description": "Form displaying server-side validation errors",
-      "code": "<Form errors={{ username: 'Username is already taken', email: 'Email is already registered' }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"username\">\n      <Field.Label>Username</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"janedoe\" />\n      </Field.Control>\n      <Field.Error match=\"customError\" />\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" defaultValue=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error match=\"customError\" />\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Submit</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"
+      "code": "<Form errors={{ username: 'Username is already taken', email: 'Email is already registered' }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"username\">\n      <Field.Label>Username</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"janedoe\" />\n      </Field.Control>\n      <Field.Error match=\"customError\" />\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" defaultValue=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error match=\"customError\" />\n    </Field>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"primary\">Submit</Button>\n  </Form.Actions>\n</Form>"
     }
   ],
   "relations": [
@@ -126,15 +117,11 @@
       "onFormSubmit: (event) => void - deprecated alias for onSubmit",
       "onClearErrors: (name) => void - clear errors callback"
     ],
-    "a11yRules": [
-      "A11Y_FORM_LABEL"
-    ]
+    "a11yRules": ["A11Y_FORM_LABEL"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
+    "subComponents": ["Root", "Actions"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Form/Form.module.scss

@@ -1,8 +1,13 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
-
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--fui-space-4, $fui-space-4);
+  gap: var(--fui-raw-space-16, 16px);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--fui-raw-space-8, 8px);
 }

package/src/components/Form/index.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Form as BaseForm } from '@base-ui/react/form';
-import styles from './Form.module.scss';
+import * as React from "react";
+import { Form as BaseForm } from "@base-ui/react/form";
+import styles from "./Form.module.scss";
 
 // ============================================
 // Types
 // ============================================
 
-export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
   children: React.ReactNode;
   errors?: Record<string, string | string[]>;
   /** Standard form submit handler */
@@ -16,7 +16,11 @@ export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
   /** @deprecated Use onSubmit */
   onFormSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
   onClearErrors?: (name: string) => void;
-  validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
+  validationMode?: "onSubmit" | "onBlur" | "onChange";
+}
+
+export interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
 }
 
 // ============================================
@@ -33,7 +37,7 @@ function FormRoot({
   className,
   ...htmlProps
 }: FormProps) {
-  const classes = [styles.root, className].filter(Boolean).join(' ');
+  const classes = [styles.root, className].filter(Boolean).join(" ");
   const submitHandler = onSubmit ?? onFormSubmit;
 
   return (
@@ -49,6 +53,17 @@ function FormRoot({
   );
 }
 
+function FormActions({ children, className, ...htmlProps }: FormActionsProps) {
+  const classes = [styles.actions, className].filter(Boolean).join(" ");
+
+  return (
+    <div {...htmlProps} className={classes}>
+      {children}
+    </div>
+  );
+}
+
 export const Form = Object.assign(FormRoot, {
   Root: FormRoot,
+  Actions: FormActions,
 });

package/src/components/Grid/Grid.module.scss

@@ -1,5 +1,5 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/layout";
 
 // ============================================
 // Grid Container
@@ -8,31 +8,59 @@
 .grid {
   display: grid;
   width: 100%;
+  gap: var(--_fui-grid-gap, #{layout.gap("md")});
 }
 
 // ============================================
 // Fixed column counts (1-12)
 // ============================================
 
-.columns1  { grid-template-columns: repeat(1, 1fr); }
-.columns2  { grid-template-columns: repeat(2, 1fr); }
-.columns3  { grid-template-columns: repeat(3, 1fr); }
-.columns4  { grid-template-columns: repeat(4, 1fr); }
-.columns5  { grid-template-columns: repeat(5, 1fr); }
-.columns6  { grid-template-columns: repeat(6, 1fr); }
-.columns7  { grid-template-columns: repeat(7, 1fr); }
-.columns8  { grid-template-columns: repeat(8, 1fr); }
-.columns9  { grid-template-columns: repeat(9, 1fr); }
-.columns10 { grid-template-columns: repeat(10, 1fr); }
-.columns11 { grid-template-columns: repeat(11, 1fr); }
-.columns12 { grid-template-columns: repeat(12, 1fr); }
+.columns1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+.columns2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+.columns3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.columns4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+.columns5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+.columns6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+.columns7 {
+  grid-template-columns: repeat(7, 1fr);
+}
+.columns8 {
+  grid-template-columns: repeat(8, 1fr);
+}
+.columns9 {
+  grid-template-columns: repeat(9, 1fr);
+}
+.columns10 {
+  grid-template-columns: repeat(10, 1fr);
+}
+.columns11 {
+  grid-template-columns: repeat(11, 1fr);
+}
+.columns12 {
+  grid-template-columns: repeat(12, 1fr);
+}
 
 // ============================================
 // Auto-fill (responsive without media queries)
 // ============================================
 
 .columnsAuto {
-  grid-template-columns: repeat(auto-fill, minmax(var(--fui-grid-min-child-width, 16rem), 1fr));
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(var(--fui-grid-min-child-width, #{layout.measure("grid-cell")}), 1fr)
+  );
 }
 
 // ============================================
@@ -58,51 +86,73 @@
   }
 
   @include breakpoint-lg {
-    --_cols: var(--fui-grid-cols-lg, var(--fui-grid-cols-md, var(--fui-grid-cols-sm, var(--fui-grid-cols, 1))));
+    --_cols: var(
+      --fui-grid-cols-lg,
+      var(--fui-grid-cols-md, var(--fui-grid-cols-sm, var(--fui-grid-cols, 1)))
+    );
   }
 
   @include breakpoint-xl {
-    --_cols: var(--fui-grid-cols-xl, var(--fui-grid-cols-lg, var(--fui-grid-cols-md, var(--fui-grid-cols-sm, var(--fui-grid-cols, 1)))));
+    --_cols: var(
+      --fui-grid-cols-xl,
+      var(
+        --fui-grid-cols-lg,
+        var(--fui-grid-cols-md, var(--fui-grid-cols-sm, var(--fui-grid-cols, 1)))
+      )
+    );
   }
 }
 
-// ============================================
-// Gap
-// ============================================
-
-.gapNone { gap: 0; }
-.gapXs   { gap: var(--fui-space-1, $fui-space-1); }
-.gapSm   { gap: var(--fui-space-2, $fui-space-2); }
-.gapMd   { gap: var(--fui-space-3, $fui-space-3); }
-.gapLg   { gap: var(--fui-space-4, $fui-space-4); }
-.gapXl   { gap: var(--fui-space-6, $fui-space-6); }
-
 // ============================================
 // Padding
 // ============================================
 
-.paddingNone { padding: 0; }
-.paddingSm   { padding: var(--fui-space-2, $fui-space-2); }
-.paddingMd   { padding: var(--fui-space-3, $fui-space-3); }
-.paddingLg   { padding: var(--fui-space-4, $fui-space-4); }
+.paddingNone {
+  padding: layout.gap("none");
+}
+.paddingSm {
+  padding: layout.gap("sm");
+}
+.paddingMd {
+  padding: layout.gap("md");
+}
+.paddingLg {
+  padding: layout.gap("lg");
+}
 
 // ============================================
 // Align items (cross-axis within cells)
 // ============================================
 
-.alignStart   { align-items: start; }
-.alignCenter  { align-items: center; }
-.alignEnd     { align-items: end; }
-.alignStretch { align-items: stretch; }
+.alignStart {
+  align-items: start;
+}
+.alignCenter {
+  align-items: center;
+}
+.alignEnd {
+  align-items: end;
+}
+.alignStretch {
+  align-items: stretch;
+}
 
 // ============================================
 // Justify items (main-axis within cells)
 // ============================================
 
-.justifyStart   { justify-items: start; }
-.justifyCenter  { justify-items: center; }
-.justifyEnd     { justify-items: end; }
-.justifyStretch { justify-items: stretch; }
+.justifyStart {
+  justify-items: start;
+}
+.justifyCenter {
+  justify-items: center;
+}
+.justifyEnd {
+  justify-items: end;
+}
+.justifyStretch {
+  justify-items: stretch;
+}
 
 // ============================================
 // Grid Item
@@ -113,33 +163,79 @@
 }
 
 // Column spans
-.colSpan1    { grid-column: span 1; }
-.colSpan2    { grid-column: span 2; }
-.colSpan3    { grid-column: span 3; }
-.colSpan4    { grid-column: span 4; }
-.colSpan5    { grid-column: span 5; }
-.colSpan6    { grid-column: span 6; }
-.colSpan7    { grid-column: span 7; }
-.colSpan8    { grid-column: span 8; }
-.colSpan9    { grid-column: span 9; }
-.colSpan10   { grid-column: span 10; }
-.colSpan11   { grid-column: span 11; }
-.colSpan12   { grid-column: span 12; }
-.colSpanFull { grid-column: 1 / -1; }
+.colSpan1 {
+  grid-column: span 1;
+}
+.colSpan2 {
+  grid-column: span 2;
+}
+.colSpan3 {
+  grid-column: span 3;
+}
+.colSpan4 {
+  grid-column: span 4;
+}
+.colSpan5 {
+  grid-column: span 5;
+}
+.colSpan6 {
+  grid-column: span 6;
+}
+.colSpan7 {
+  grid-column: span 7;
+}
+.colSpan8 {
+  grid-column: span 8;
+}
+.colSpan9 {
+  grid-column: span 9;
+}
+.colSpan10 {
+  grid-column: span 10;
+}
+.colSpan11 {
+  grid-column: span 11;
+}
+.colSpan12 {
+  grid-column: span 12;
+}
+.colSpanFull {
+  grid-column: 1 / -1;
+}
 
 // Row spans
-.rowSpan1 { grid-row: span 1; }
-.rowSpan2 { grid-row: span 2; }
-.rowSpan3 { grid-row: span 3; }
-.rowSpan4 { grid-row: span 4; }
-.rowSpan5 { grid-row: span 5; }
-.rowSpan6 { grid-row: span 6; }
+.rowSpan1 {
+  grid-row: span 1;
+}
+.rowSpan2 {
+  grid-row: span 2;
+}
+.rowSpan3 {
+  grid-row: span 3;
+}
+.rowSpan4 {
+  grid-row: span 4;
+}
+.rowSpan5 {
+  grid-row: span 5;
+}
+.rowSpan6 {
+  grid-row: span 6;
+}
 
 // Self alignment overrides
-.selfAlignStart   { align-self: start; }
-.selfAlignCenter  { align-self: center; }
-.selfAlignEnd     { align-self: end; }
-.selfAlignStretch { align-self: stretch; }
+.selfAlignStart {
+  align-self: start;
+}
+.selfAlignCenter {
+  align-self: center;
+}
+.selfAlignEnd {
+  align-self: end;
+}
+.selfAlignStretch {
+  align-self: stretch;
+}
 
 // ============================================
 // Subgrid — item children align to parent tracks