@fragments-sdk/ui 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -150,6 +150,9 @@
   },
   "peerDependencies": {
     "@tanstack/react-table": ">=8.0.0",
+    "@tiptap/extension-link": ">=2.0.0",
+    "@tiptap/react": ">=2.0.0",
+    "@tiptap/starter-kit": ">=2.0.0",
     "date-fns": ">=3.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-colorful": ">=5.0.0",
@@ -158,10 +161,7 @@
     "react-markdown": ">=9.0.0",
     "recharts": ">=2.0.0 || >=3.0.0",
     "remark-gfm": ">=4.0.0",
-    "shiki": ">=1.0.0",
-    "@tiptap/react": ">=2.0.0",
-    "@tiptap/starter-kit": ">=2.0.0",
-    "@tiptap/extension-link": ">=2.0.0"
+    "shiki": ">=1.0.0"
   },
   "peerDependenciesMeta": {
     "react-markdown": {
@@ -202,18 +202,18 @@
     "defaultOptIn": true
   },
   "dependencies": {
-    "@base-ui/react": "^1.0.0",
+    "@base-ui/react": "^1.3.0",
     "@phosphor-icons/react": "^2.1.10",
     "@scarf/scarf": "^1.4.0"
   },
   "devDependencies": {
     "@tanstack/react-table": "^8.21.3",
-    "@tiptap/extension-link": "^2.11.0",
-    "@tiptap/react": "^2.11.0",
-    "@tiptap/starter-kit": "^2.11.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.0",
+    "@tiptap/extension-link": "^2.11.0",
+    "@tiptap/react": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -230,7 +230,8 @@
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@fragments-sdk/core": "2.0.0"
+    "@fragments-sdk/core": "2.0.0",
+    "@fragments-sdk/compiler": "0.2.0"
   },
   "files": [
     "src",
@@ -245,11 +246,14 @@
     "fragments.json"
   ],
   "scripts": {
-    "cli:ensure": "test -f ../../packages/cli/dist/bin.js || pnpm --filter @fragments-sdk/cli build",
-    "dev": "pnpm run cli:ensure && node ../../packages/cli/dist/bin.js build",
-    "build": "pnpm run cli:ensure && node ../../packages/cli/dist/bin.js build && vite build && tsc -p tsconfig.build.json",
+    "dev": "node ../../packages/compiler/dist/bin.js build",
+    "build": "pnpm run build:fragments",
+    "build:fragments": "node ../../packages/compiler/dist/bin.js build --if-needed",
+    "check:fragments": "node ../../packages/compiler/dist/bin.js build --check",
+    "build:dist": "vite build && tsc -p tsconfig.build.json",
+    "build:publish": "pnpm run build:fragments && pnpm run build:dist",
     "lint": "eslint src",
-    "validate": "pnpm run cli:ensure && node ../../packages/cli/dist/bin.js validate",
+    "validate": "node ../../packages/cli/dist/bin.js validate",
     "test": "vitest run"
   },
   "module": "dist/index.js"

package/src/components/Button/Button.module.scss

@@ -39,10 +39,33 @@
   font-size: var(--fui-font-size-base, $fui-font-size-base);
 }
 
+// ============================================
+// Optical alignment: icon + text combinations
+// ============================================
+// Icons (SVGs) have built-in whitespace that makes symmetric padding look
+// uneven. When an icon leads or trails text, reduce padding on the icon
+// side so the content appears optically centered.
+//
+// Uses :has() + :first-child/:last-child to detect icon position without
+// JS. The negative margin pulls the icon into the padding zone, compensating
+// for the icon's inherent visual whitespace.
+
+.button:not(.icon) {
+  > svg:first-child:not(:last-child) {
+    // Leading icon: pull left to optically balance
+    margin-left: calc(var(--fui-space-1, $fui-space-1) * -0.5);
+  }
+
+  > svg:last-child:not(:first-child) {
+    // Trailing icon: pull right to optically balance
+    margin-right: calc(var(--fui-space-1, $fui-space-1) * -0.5);
+  }
+}
+
 // Variants
 .primary {
   background-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-text-inverse, $fui-text-inverse);
+  color: var(--fui-color-on-accent, $fui-color-on-accent);
   border: 1px solid transparent;
 
   &:hover:not(:disabled) {

package/src/components/Card/Card.module.scss

@@ -76,10 +76,14 @@
 }
 
 .description {
-  margin: var(--fui-space-1, $fui-space-1) 0 0;
+  margin: 0 0 var(--fui-space-1, $fui-space-1) 0;
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .body {

package/src/components/Chart/index.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { mergeAriaIds } from '../../utils/aria';
 import styles from './Chart.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types (self-owned — no external dependency for types)

package/src/components/Chip/Chip.module.scss

@@ -62,7 +62,7 @@
 
   &.selected {
     background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    color: var(--fui-color-on-accent, $fui-color-on-accent);
 
     &:hover:not(:disabled) {
       background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
@@ -90,7 +90,7 @@
 
   &.selected {
     background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    color: var(--fui-color-on-accent, $fui-color-on-accent);
     border-color: var(--fui-color-accent, $fui-color-accent);
 
     &:hover:not(:disabled) {
@@ -119,7 +119,7 @@
 
   &.selected {
     background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    color: var(--fui-color-on-accent, $fui-color-on-accent);
 
     &:hover:not(:disabled) {
       background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
@@ -245,7 +245,7 @@
 
 .selected + .remove {
   background-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-text-inverse, $fui-text-inverse);
+  color: var(--fui-color-on-accent, $fui-color-on-accent);
   border-left-color: transparent;
 
   &:hover:not(:disabled) {

package/src/components/CodeBlock/index.tsx

@@ -29,7 +29,6 @@ async function loadShikiDeps() {
 }
 import { TabsRoot, TabsList, Tab, TabsPanel } from "../Tabs";
 import styles from "./CodeBlock.module.scss";
-import "../../styles/globals.scss";
 
 export type CodeBlockLanguage =
   | "tsx"

package/src/components/ColorPicker/index.tsx

@@ -25,7 +25,6 @@ function loadColorfulDeps() {
 import { Field } from '@base-ui/react/field';
 import { Input } from '../Input';
 import styles from './ColorPicker.module.scss';
-import '../../styles/globals.scss';
 
 export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
   /** Label text above the picker */

package/src/components/Combobox/index.tsx

@@ -277,7 +277,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
     [placeholder, multiple, selectedValues, itemsVersion, incrementItemsVersion, explicitTriggerCount, registerTrigger, size]
   );
 
-  const { labelId, helperId, errorId, hasError, errorMessage } = useFormFieldIds('combobox', { label, helperText, error });
+  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds('combobox', { label, helperText, error });
 
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');
   const helperClasses = [styles.helper, hasError && styles.helperError]
@@ -286,7 +286,6 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
 
   const wrapperContent = (inner: React.ReactNode) => (
     <div ref={ref} className={wrapperClasses}>
-      {label && <span id={labelId} className={styles.label}>{label}</span>}
       {inner}
       {helperText && (
         <span id={helperId} className={helperClasses}>{helperText}</span>
@@ -324,9 +323,9 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
             multiple
             autoHighlight={autoHighlight}
             itemToStringLabel={itemToStringLabel}
-            aria-labelledby={labelId}
             aria-describedby={mergeAriaIds(errorId, helperId)}
           >
+            {label && <BaseCombobox.Label className={styles.label}>{label}</BaseCombobox.Label>}
             {children}
           </BaseCombobox.Root>
         )}
@@ -360,9 +359,9 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
           multiple={false}
           autoHighlight={autoHighlight}
           itemToStringLabel={itemToStringLabel}
-          aria-labelledby={labelId}
           aria-describedby={mergeAriaIds(errorId, helperId)}
         >
+          {label && <BaseCombobox.Label className={styles.label}>{label}</BaseCombobox.Label>}
           {children}
         </BaseCombobox.Root>
       )}
@@ -380,7 +379,7 @@ function ComboboxInput({ className, showTrigger = true, ...htmlProps }: Combobox
 
   if (context.multiple) {
     return (
-      <div className={wrapperClasses}>
+      <BaseCombobox.InputGroup className={wrapperClasses}>
         {context.selectedValues.length > 0 && (
           <BaseCombobox.Chips className={styles.chips}>
             {context.selectedValues.map((chipValue) => (
@@ -405,12 +404,12 @@ function ComboboxInput({ className, showTrigger = true, ...htmlProps }: Combobox
             <ChevronDownIcon />
           </BaseCombobox.Trigger>
         )}
-      </div>
+      </BaseCombobox.InputGroup>
     );
   }
 
   return (
-    <div className={wrapperClasses}>
+    <BaseCombobox.InputGroup className={wrapperClasses}>
       <BaseCombobox.Input
         placeholder={context.placeholder}
         {...htmlProps}
@@ -421,7 +420,7 @@ function ComboboxInput({ className, showTrigger = true, ...htmlProps }: Combobox
           <ChevronDownIcon />
         </BaseCombobox.Trigger>
       )}
-    </div>
+    </BaseCombobox.InputGroup>
   );
 }
 

package/src/components/Command/Command.module.scss

@@ -19,33 +19,46 @@
 // ============================================
 
 .inputWrapper {
+  @include field-shell;
+
   display: flex;
   align-items: center;
-  gap: var(--fui-space-2, 0.5rem);
-  padding: var(--fui-space-2, 0.5rem) var(--fui-space-4, 1rem);
-  border-bottom: 1px solid var(--fui-border);
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: 0 var(--fui-space-2, $fui-space-2);
+  margin: var(--fui-space-2, $fui-space-2);
+  height: var(--fui-input-height, $fui-input-height);
+
+  &:focus-within {
+    @include field-shell-focus;
+  }
 
   svg {
     flex-shrink: 0;
     width: 1rem;
     height: 1rem;
-    color: var(--fui-text-secondary);
+    color: var(--fui-text-secondary, $fui-text-secondary);
   }
 }
 
 .input {
   @include text-base;
 
-  width: 100%;
+  flex: 1;
   border: none;
   background: transparent;
   outline: none;
-  font-size: var(--fui-font-size-sm, 0.875rem);
-  color: var(--fui-text-primary);
-  padding: var(--fui-space-1, 0.25rem) 0;
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: var(--fui-text-primary, $fui-text-primary);
+  padding: 0;
 
   &::placeholder {
-    color: var(--fui-text-tertiary);
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
   }
 }
 

package/src/components/DataTable/index.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import * as React from 'react';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 import styles from './DataTable.module.scss';
 import { Checkbox } from '../Checkbox';
 

package/src/components/DatePicker/index.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 import { useFormFieldIds, type FormFieldProps } from '../../utils/aria';
 import styles from './DatePicker.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types (self-owned — no external dependency for types)

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

@@ -138,6 +138,7 @@
       "Trigger",
       "Content",
       "Close",
+      "SwipeArea",
       "Header",
       "Title",
       "Description",

package/src/components/Drawer/Drawer.module.scss

@@ -22,6 +22,18 @@
   }
 }
 
+// Viewport positioning container
+.viewport {
+  position: fixed;
+  inset: 0;
+  z-index: 51;
+  pointer-events: none;
+
+  &[data-open] {
+    pointer-events: auto;
+  }
+}
+
 // The popup panel
 .popup {
   @include surface-elevated;
@@ -33,6 +45,7 @@
   flex-direction: column;
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   overflow-y: auto;
+  pointer-events: auto;
 
   // Animation
   transition:
@@ -47,14 +60,18 @@
 }
 
 // ============================================
-// Side positioning
+// Side positioning — swipe-aware transforms
 // ============================================
 
 .side-right {
   top: 0;
   right: 0;
   bottom: 0;
-  transform: translateX(100%);
+  transform: translateX(calc(100% + var(--drawer-swipe-movement-x, 0px)));
+
+  &[data-open] {
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -66,7 +83,11 @@
   top: 0;
   left: 0;
   bottom: 0;
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% + var(--drawer-swipe-movement-x, 0px)));
+
+  &[data-open] {
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -78,7 +99,11 @@
   top: 0;
   left: 0;
   right: 0;
-  transform: translateY(-100%);
+  transform: translateY(calc(-100% + var(--drawer-swipe-movement-y, 0px)));
+
+  &[data-open] {
+    transform: translateY(var(--drawer-swipe-movement-y, 0px));
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -90,7 +115,11 @@
   bottom: 0;
   left: 0;
   right: 0;
-  transform: translateY(100%);
+  transform: translateY(calc(100% + var(--drawer-swipe-movement-y, 0px)));
+
+  &[data-open] {
+    transform: translateY(var(--drawer-swipe-movement-y, 0px));
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -98,6 +127,11 @@
   }
 }
 
+// Disable transition during active swipe for instant feedback
+.popup[data-swiping] {
+  transition-duration: 0s;
+}
+
 // ============================================
 // Size variants — width for left/right, height for top/bottom
 // ============================================
@@ -194,6 +228,12 @@
   }
 }
 
+// SwipeArea — invisible gesture zone at screen edge
+.swipeArea {
+  position: fixed;
+  z-index: 49;
+}
+
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Drawer/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
 import styles from './Drawer.module.scss';
 
 // ============================================
@@ -10,6 +10,7 @@ import styles from './Drawer.module.scss';
 
 /**
  * Slide-in panel for navigation, forms, or supplementary content.
+ * Now backed by Base UI's stable Drawer (v1.3.0) with native swipe gestures.
  * @see https://usefragments.com/components/drawer
  */
 export interface DrawerProps {
@@ -20,9 +21,18 @@ export interface DrawerProps {
   defaultOpen?: boolean;
   /** Called when open state changes */
   onOpenChange?: (open: boolean) => void;
+  /** Called after open/close animation completes */
+  onOpenChangeComplete?: (open: boolean) => void;
   /** Whether the drawer blocks interaction with the rest of the page.
    * @default true */
-  modal?: boolean;
+  modal?: boolean | 'trap-focus';
+  /** Swipe direction to dismiss.
+   * @default derived from `side` prop on Content */
+  swipeDirection?: 'up' | 'down' | 'left' | 'right';
+  /** Preset snap-point heights for bottom-sheet drawers */
+  snapPoints?: number[];
+  /** Disable outside-click dismissal */
+  disablePointerDismissal?: boolean;
 }
 
 export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -70,6 +80,13 @@ export interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonE
   asChild?: boolean;
 }
 
+export interface DrawerSwipeAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Swipe direction to open the drawer */
+  swipeDirection?: 'up' | 'down' | 'left' | 'right';
+  /** Disable swipe detection */
+  disabled?: boolean;
+}
+
 function getAsChildElement(children: React.ReactNode, componentName: string): React.ReactElement {
   if (!React.isValidElement(children)) {
     throw new Error(`${componentName} with asChild requires a single valid React element child.`);
@@ -110,17 +127,25 @@ function DrawerRoot({
   open,
   defaultOpen,
   onOpenChange,
+  onOpenChangeComplete,
   modal = true,
+  swipeDirection,
+  snapPoints,
+  disablePointerDismissal,
 }: DrawerProps) {
   return (
-    <BaseDialog.Root
+    <BaseDrawer.Root
       open={open}
       defaultOpen={defaultOpen}
       onOpenChange={onOpenChange}
+      onOpenChangeComplete={onOpenChangeComplete}
       modal={modal}
+      swipeDirection={swipeDirection}
+      snapPoints={snapPoints}
+      disablePointerDismissal={disablePointerDismissal}
     >
       {children}
-    </BaseDialog.Root>
+    </BaseDrawer.Root>
   );
 }
 
@@ -133,16 +158,16 @@ function DrawerTrigger({
   if (asChild) {
     const child = getAsChildElement(children, 'Drawer.Trigger');
     return (
-      <BaseDialog.Trigger {...htmlProps} className={className} render={child}>
+      <BaseDrawer.Trigger {...htmlProps} className={className} render={child}>
         {null}
-      </BaseDialog.Trigger>
+      </BaseDrawer.Trigger>
     );
   }
 
   return (
-    <BaseDialog.Trigger {...htmlProps} className={className}>
+    <BaseDrawer.Trigger {...htmlProps} className={className}>
       {children}
-    </BaseDialog.Trigger>
+    </BaseDrawer.Trigger>
   );
 }
 
@@ -165,12 +190,16 @@ function DrawerContent({
     .join(' ');
 
   return (
-    <BaseDialog.Portal>
-      {backdrop && <BaseDialog.Backdrop className={styles.backdrop} />}
-      <BaseDialog.Popup initialFocus={initialFocus} {...htmlProps} data-side={side} className={popupClasses}>
-        {children}
-      </BaseDialog.Popup>
-    </BaseDialog.Portal>
+    <BaseDrawer.Portal>
+      {backdrop && <BaseDrawer.Backdrop className={styles.backdrop} />}
+      <BaseDrawer.Viewport className={styles.viewport}>
+        <BaseDrawer.Popup initialFocus={initialFocus} {...htmlProps} data-side={side} className={popupClasses}>
+          <BaseDrawer.Content>
+            {children}
+          </BaseDrawer.Content>
+        </BaseDrawer.Popup>
+      </BaseDrawer.Viewport>
+    </BaseDrawer.Portal>
   );
 }
 
@@ -181,15 +210,15 @@ function DrawerHeader({ children, className, ...htmlProps }: DrawerHeaderProps)
 
 function DrawerTitle({ children, className, ...htmlProps }: DrawerTitleProps) {
   const classes = [styles.title, className].filter(Boolean).join(' ');
-  return <BaseDialog.Title {...htmlProps} className={classes}>{children}</BaseDialog.Title>;
+  return <BaseDrawer.Title {...htmlProps} className={classes}>{children}</BaseDrawer.Title>;
 }
 
 function DrawerDescription({ children, className, ...htmlProps }: DrawerDescriptionProps) {
   const classes = [styles.description, className].filter(Boolean).join(' ');
   return (
-    <BaseDialog.Description {...htmlProps} className={classes}>
+    <BaseDrawer.Description {...htmlProps} className={classes}>
       {children}
-    </BaseDialog.Description>
+    </BaseDrawer.Description>
   );
 }
 
@@ -206,35 +235,47 @@ function DrawerFooter({ children, className, ...htmlProps }: DrawerFooterProps)
 function DrawerClose({ children, asChild, className, ...htmlProps }: DrawerCloseProps) {
   if (!children) {
     return (
-      <BaseDialog.Close
+      <BaseDrawer.Close
         {...htmlProps}
         data-drawer-close
         aria-label="Close drawer"
         className={[styles.close, className].filter(Boolean).join(' ')}
       >
         <CloseIcon />
-      </BaseDialog.Close>
+      </BaseDrawer.Close>
     );
   }
 
   if (asChild) {
     const child = getAsChildElement(children, 'Drawer.Close');
     return (
-      <BaseDialog.Close
+      <BaseDrawer.Close
         {...htmlProps}
         data-drawer-close
         className={className}
         render={child}
       >
         {null}
-      </BaseDialog.Close>
+      </BaseDrawer.Close>
     );
   }
 
   return (
-    <BaseDialog.Close {...htmlProps} data-drawer-close className={className}>
+    <BaseDrawer.Close {...htmlProps} data-drawer-close className={className}>
       {children}
-    </BaseDialog.Close>
+    </BaseDrawer.Close>
+  );
+}
+
+function DrawerSwipeArea({ swipeDirection, disabled, className, ...htmlProps }: DrawerSwipeAreaProps) {
+  const classes = [styles.swipeArea, className].filter(Boolean).join(' ');
+  return (
+    <BaseDrawer.SwipeArea
+      {...htmlProps}
+      swipeDirection={swipeDirection}
+      disabled={disabled}
+      className={classes}
+    />
   );
 }
 
@@ -251,6 +292,7 @@ export const Drawer = Object.assign(DrawerRoot, {
   Body: DrawerBody,
   Footer: DrawerFooter,
   Close: DrawerClose,
+  SwipeArea: DrawerSwipeArea,
 });
 
 // Re-export individual components for tree-shaking
@@ -264,4 +306,5 @@ export {
   DrawerBody,
   DrawerFooter,
   DrawerClose,
+  DrawerSwipeArea,
 };

package/src/components/Header/Header.contract.json

@@ -174,6 +174,8 @@
       "Brand",
       "Nav",
       "NavItem",
+      "MobileNav",
+      "MobileNavLink",
       "NavMenu",
       "NavMenuItem",
       "Search",