@usefragments/ui 1.7.0 → 2.0.0

package/src/components/DatePicker/DatePicker.module.scss

@@ -1,9 +1,11 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action";
 @use "../../recipes/field";
 @use "../../recipes/layout";
 @use "../../recipes/popup";
+@use "../../recipes/surface";
 @use "../../recipes/typography";
 
 .wrapper {
@@ -40,15 +42,25 @@
   min-width: layout.measure("field-minimum");
   text-align: left;
 
+  &:focus-visible,
   &[data-popup-open] {
-    border-color: var(--fui-field-border-focus, $fui-color-accent);
+    @include field.focus-state;
   }
 
   // Error border, matching Input. Set from the wrapper's data-invalid so the
   // control reads as failed, not just the message beneath it.
   .wrapper[data-invalid] & {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
+    @include field.invalid-state;
+
+    // Focused while invalid keeps the danger edge and takes the danger ring,
+    // the same pairing Input and Textarea render.
+    &:focus-visible,
+    &[data-popup-open] {
+      @include field.invalid-focus-state;
+    }
   }
+
+  @include high-contrast-outline;
 }
 
 .triggerSm {
@@ -104,16 +116,14 @@
 // ============================================
 
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
   outline: none;
 }
 
 .popup {
-  @include surface-elevated;
+  @include popup.container;
 
-  border-color: var(--fui-form-group-border, $fui-border);
-  padding: var(--fui-surface-inset-compact, 12px);
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+  padding: surface.inset("compact");
 
   // Animation
   opacity: 0;
@@ -182,7 +192,7 @@
   top: 0;
   left: 0;
   right: 0;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 .navButton {
@@ -224,9 +234,9 @@
 .weekday {
   @include typography.role("ui-compact");
 
-  width: var(--_day-size);
-  height: var(--_day-size);
-  padding: 0;
+  width: var(--_day-size, #{action.track("md")});
+  height: var(--_day-size, #{action.track("md")});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   text-align: center;
   vertical-align: middle;
@@ -245,9 +255,9 @@
 // ============================================
 
 .day {
-  width: var(--_day-size);
-  height: var(--_day-size);
-  padding: 0;
+  width: var(--_day-size, #{action.track("md")});
+  height: var(--_day-size, #{action.track("md")});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   text-align: center;
   vertical-align: middle;
   position: relative;
@@ -259,8 +269,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--_day-size);
-  height: var(--_day-size);
+  width: var(--_day-size, #{action.track("md")});
+  height: var(--_day-size, #{action.track("md")});
   border-radius: var(--fui-radius-md, $fui-radius-md);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-primary, $fui-text-primary);
@@ -283,7 +293,7 @@
 
 .today > .dayButton {
   box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
-    var(--fui-field-border, $fui-border-strong);
+    var(--fui-border-strong, $fui-border-strong);
   background-color: color-mix(in srgb, var(--fui-bg-hover, $fui-bg-hover) 55%, transparent);
 }
 
@@ -296,14 +306,17 @@
   }
 }
 
+// Days outside the visible month recede but stay clickable; they borrow the
+// disabled opacity because the kit has no separate muted-opacity token yet.
 .outside > .dayButton {
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  opacity: 0.5;
+  opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
 }
 
 .disabled > .dayButton {
+  @include disabled-state;
+
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -420,29 +433,6 @@
   }
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .trigger {
-    border-width: var(--fui-stroke-default, 2px);
-    border-color: var(--fui-text-primary, $fui-text-primary);
-
-    &[data-popup-open] {
-      border-color: var(--fui-color-accent, $fui-color-accent);
-    }
-  }
-
-  .dayButton {
-    border: var(--fui-stroke-hairline, 1px) solid transparent;
-
-    &:focus-visible {
-      border-color: var(--fui-text-primary, $fui-text-primary);
-    }
-  }
-}
-
 // ============================================
 // Reduced motion
 // ============================================

package/src/components/DatePicker/index.tsx

@@ -171,6 +171,9 @@ interface DatePickerContextValue {
   isControlledOpen: boolean;
   size: "sm" | "md" | "lg";
   name?: string;
+  /** Mirrors the wrapper's `data-invalid` onto the trigger as `aria-invalid`,
+   * so assistive tech hears the state the danger edge is painting. */
+  invalid?: boolean;
 }
 
 const DatePickerContext = React.createContext<DatePickerContextValue | null>(null);
@@ -420,6 +423,12 @@ const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerProps>(functio
 
   const defaultPlaceholder = mode === "range" ? "Select date range" : "Pick a date";
 
+  const { labelId, helperId, errorId, hasError, errorMessage } = useFormFieldIds("datepicker", {
+    label,
+    helperText,
+    error,
+  });
+
   const contextValue = React.useMemo<DatePickerContextValue>(
     () => ({
       mode,
@@ -440,6 +449,7 @@ const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerProps>(functio
       isControlledOpen,
       size,
       name,
+      invalid: hasError,
     }),
     [
       mode,
@@ -463,15 +473,10 @@ const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerProps>(functio
       isControlledOpen,
       size,
       name,
+      hasError,
     ]
   );
 
-  const { labelId, helperId, errorId, hasError, errorMessage } = useFormFieldIds("datepicker", {
-    label,
-    helperText,
-    error,
-  });
-
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
   const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
 
@@ -543,7 +548,13 @@ function DatePickerTrigger({
   }
 
   return (
-    <BasePopover.Trigger {...htmlProps} type={type} className={classes} disabled={ctx.disabled}>
+    <BasePopover.Trigger
+      {...htmlProps}
+      type={type}
+      className={classes}
+      disabled={ctx.disabled}
+      aria-invalid={ctx.invalid || undefined}
+    >
       {children ?? (
         <>
           <span className={styles.triggerIcon}>

package/src/components/Dialog/Dialog.module.scss

@@ -1,13 +1,12 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/overlay" as overlay;
 
 .backdrop {
-  position: fixed;
-  z-index: var(--fui-overlay-layer-backdrop, 50);
-  inset: 0;
-  background-color: var(--fui-backdrop, $fui-backdrop);
+  @include overlay.backdrop;
+
   opacity: 0;
   transition: opacity var(--fui-transition-normal, $fui-transition-normal);
 
@@ -25,13 +24,21 @@
   @include overlay.safe-viewport;
 
   position: fixed;
-  z-index: var(--fui-overlay-layer-modal, 51);
+  z-index: var(--fui-overlay-layer-modal, #{$fui-overlay-layer-modal});
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-block: var(--_fui-overlay-safe-top) var(--_fui-overlay-safe-bottom);
-  padding-inline: var(--_fui-overlay-safe-left) var(--_fui-overlay-safe-right);
+  padding-block: var(
+      --_fui-overlay-safe-top,
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+    )
+    var(--_fui-overlay-safe-bottom, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+  padding-inline: var(
+      --_fui-overlay-safe-left,
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+    )
+    var(--_fui-overlay-safe-right, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
   overflow: auto;
 }
 
@@ -80,7 +87,10 @@
 }
 
 .full {
-  max-inline-size: var(--_fui-overlay-safe-inline);
+  max-inline-size: var(
+    --_fui-overlay-safe-inline,
+    calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+  );
 }
 
 .header {
@@ -90,14 +100,14 @@
 .title {
   @include overlay.modal-title;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-primary, $fui-text-primary);
 }
 
 .description {
   @include overlay.description;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
@@ -107,35 +117,19 @@
 
 .footer {
   @include overlay.footer;
-
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
-  border-radius: 0 0 var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }
 
 .close {
   @include button-reset;
   @include interactive-base;
   @include overlay.close;
-
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-
-  &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
-
-  svg {
-    inline-size: action.icon-size("sm");
-    block-size: action.icon-size("sm");
-  }
 }
 
 .popup:has(.close) .header {
   padding-inline-end: calc(
-    var(--fui-overlay-close-inset, var(--fui-raw-space-12, 12px)) + #{action.track("sm")} +
-      var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px))
+    var(--fui-overlay-close-inset, var(--fui-raw-space-12, #{measurements.raw-space(12)})) +
+      #{action.track("sm")} +
+      var(--fui-overlay-section-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}))
   );
 }
 

package/src/components/Dialog/index.tsx

@@ -12,6 +12,8 @@ import styles from "./Dialog.module.scss";
  * Modal dialog overlay for confirmations, forms, and focused tasks.
  * @see https://usefragments.com/components/dialog
  */
+export type DialogWidth = "sm" | "md" | "lg" | "xl" | "full";
+
 export interface DialogProps {
   children: React.ReactNode;
   /** Controlled open state */
@@ -27,10 +29,10 @@ export interface DialogProps {
 
 export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Dialog width.
+  /** Dialog width. `full` spans the safe viewport.
    * @default "md"
-   * @see https://usefragments.com/components/dialog#sizes */
-  size?: "sm" | "md" | "lg" | "xl" | "full";
+   * @see https://usefragments.com/components/dialog#widths */
+  width?: DialogWidth;
   /** Whether the dialog should autofocus content on open.
    * @default true */
   initialFocus?: boolean;
@@ -146,12 +148,12 @@ function DialogTrigger({ children, asChild, className, ...htmlProps }: DialogTri
 
 function DialogContent({
   children,
-  size = "md",
+  width = "md",
   initialFocus = true,
   className,
   ...htmlProps
 }: DialogContentProps) {
-  const popupClasses = [styles.popup, styles[size], className].filter(Boolean).join(" ");
+  const popupClasses = [styles.popup, styles[width], className].filter(Boolean).join(" ");
 
   return (
     <BaseDialog.Portal>

package/src/components/Drawer/Drawer.contract.json

@@ -74,22 +74,22 @@
     {
       "name": "Default",
       "description": "Enters from the right, the default for editing and forms.",
-      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Open Drawer</Button>\n  </Drawer.Trigger>\n  <Drawer.Content>\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Drawer Title</Drawer.Title>\n      <Drawer.Description>\n        A panel sliding in from the right.\n      </Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Drawer content goes here.</p>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"primary\">Save</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"
+      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Open Drawer</Button>\n  </Drawer.Trigger>\n  <Drawer.Content>\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Drawer Title</Drawer.Title>\n      <Drawer.Description>\n        A panel sliding in from the right.\n      </Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Drawer content goes here.</p>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"soft\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"solid\">Save</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"
     },
     {
       "name": "Left Side",
       "description": "Enters from the left, where navigation belongs.",
-      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"secondary\">Open Left</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"left\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Navigation</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Left-side drawer for navigation or filters.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"
+      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"soft\">Open Left</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"left\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Navigation</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Left-side drawer for navigation or filters.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"
     },
     {
       "name": "Bottom Sheet",
       "description": "Rises from the bottom for touch-reachable actions.",
-      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"secondary\">Open Bottom Sheet</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"bottom\" size=\"sm\">\n    <Drawer.Header>\n      <Drawer.Title>Actions</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Bottom sheet for mobile-style actions.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"
+      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"soft\">Open Bottom Sheet</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"bottom\" width=\"sm\">\n    <Drawer.Header>\n      <Drawer.Title>Actions</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Bottom sheet for mobile-style actions.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"
     },
     {
       "name": "With Form",
       "description": "Fields in the body, submit and cancel pinned to the footer.",
-      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Edit Settings</Button>\n  </Drawer.Trigger>\n  <Drawer.Content size=\"md\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Settings</Drawer.Title>\n      <Drawer.Description>Update your preferences.</Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <Stack gap=\"md\">\n        <Input label=\"Display Name\" placeholder=\"Enter name\" />\n        <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n      </Stack>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"primary\">Save Changes</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"
+      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Edit Settings</Button>\n  </Drawer.Trigger>\n  <Drawer.Content width=\"md\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Settings</Drawer.Title>\n      <Drawer.Description>Update your preferences.</Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <Stack gap=\"md\">\n        <Input label=\"Display Name\" placeholder=\"Enter name\" />\n        <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n      </Stack>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"soft\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"solid\">Save Changes</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"
     }
   ],
   "relations": [
@@ -115,7 +115,7 @@
       "onOpenChange: (open) => void - open state handler",
       "modal: boolean - blocks page interaction (default: true)",
       "Drawer.Content side: left|right|top|bottom - slide direction (default: right)",
-      "Drawer.Content size: sm|md|lg|xl|full - panel size",
+      "Drawer.Content width: sm|md|lg|xl|full - panel width, or height for top/bottom (default: md)",
       "Drawer.Content initialFocus: boolean - auto-focus popup on open (default: true)"
     ],
     "a11yRules": ["A11Y_DIALOG_FOCUS", "A11Y_DIALOG_ESCAPE", "A11Y_DIALOG_LABEL"]
@@ -135,7 +135,7 @@
     ],
     "requiredChildren": ["Content"],
     "commonPatterns": [
-      "<Drawer><Drawer.Trigger><Button>Open</Button></Drawer.Trigger><Drawer.Content><Drawer.Close /><Drawer.Header><Drawer.Title>{title}</Drawer.Title></Drawer.Header><Drawer.Body>{content}</Drawer.Body><Drawer.Footer><Drawer.Close asChild><Button variant=\"secondary\">Cancel</Button></Drawer.Close><Button>Save</Button></Drawer.Footer></Drawer.Content></Drawer>"
+      "<Drawer><Drawer.Trigger><Button>Open</Button></Drawer.Trigger><Drawer.Content><Drawer.Close /><Drawer.Header><Drawer.Title>{title}</Drawer.Title></Drawer.Header><Drawer.Body>{content}</Drawer.Body><Drawer.Footer><Drawer.Close asChild><Button variant=\"soft\">Cancel</Button></Drawer.Close><Button>Save</Button></Drawer.Footer></Drawer.Content></Drawer>"
     ]
   },
   "provenance": {