@usefragments/ui 1.5.4 → 1.6.0

package/src/components/NavigationMenu/NavigationMenu.module.scss

@@ -1,11 +1,16 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/navigation" as navigation;
+@use "../../recipes/popup" as popup;
+@use "../../recipes/typography" as typography;
 
 // ============================================
 // Root
 // ============================================
 
 .root {
+  @include navigation.properties;
   // Container query context: children respond to nav menu width, not viewport
   @include container(fui-navmenu);
 
@@ -51,16 +56,14 @@
 .trigger {
   @include button-reset;
   @include interactive-base;
-  @include text-base;
+  @include action.base;
+  @include action.size("md");
 
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
-  min-height: var(--fui-button-height-md, $fui-button-height-md);
   cursor: pointer;
 
   &:hover {
@@ -72,7 +75,7 @@
     background-color: var(--fui-bg-active, $fui-bg-active);
   }
 
-  &[data-state='open'] {
+  &[data-state="open"] {
     color: var(--fui-text-primary, $fui-text-primary);
   }
 }
@@ -81,7 +84,7 @@
   transition: transform var(--fui-transition-fast, $fui-transition-fast);
   flex-shrink: 0;
 
-  [data-state='open'] > & {
+  [data-state="open"] > & {
     transform: rotate(180deg);
   }
 }
@@ -93,7 +96,7 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--fui-stroke-hairline, 1px);
   position: absolute;
   left: 0;
   top: 0;
@@ -101,16 +104,16 @@
   min-width: 180px;
 
   // Motion direction for directional slide
-  &[data-motion='from-start'] {
+  &[data-motion="from-start"] {
     animation: slideFromStart var(--fui-transition-normal, $fui-transition-normal) ease forwards;
   }
-  &[data-motion='from-end'] {
+  &[data-motion="from-end"] {
     animation: slideFromEnd var(--fui-transition-normal, $fui-transition-normal) ease forwards;
   }
-  &[data-motion='to-start'] {
+  &[data-motion="to-start"] {
     animation: slideToStart var(--fui-transition-normal, $fui-transition-normal) ease forwards;
   }
-  &[data-motion='to-end'] {
+  &[data-motion="to-end"] {
     animation: slideToEnd var(--fui-transition-normal, $fui-transition-normal) ease forwards;
   }
 }
@@ -164,13 +167,13 @@
 // ============================================
 
 .link {
-  @include popup-item;
+  @include popup.row;
 
   text-decoration: none;
   white-space: nowrap;
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 
   // Links are real tab stops, so keep the focus ring on top of the highlight.
@@ -197,7 +200,7 @@
   min-height: auto;
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 }
 
@@ -220,24 +223,23 @@
 }
 
 .linkTitle {
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  @include typography.role("ui-standard");
+
   color: var(--fui-text-primary, $fui-text-primary);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
 }
 
 .linkDescription {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include typography.role("caption");
+
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
 .linkFeatured {
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
     border-color: var(--fui-border-strong, $fui-border-strong);
   }
 }
@@ -249,7 +251,7 @@
 .indicator {
   position: absolute;
   bottom: 0;
-  height: 2px;
+  height: var(--fui-stroke-default, 2px);
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   transition:
@@ -263,24 +265,22 @@
 // ============================================
 
 .viewport {
-  @include surface-elevated;
+  @include popup.container;
 
   position: absolute;
   top: calc(100% + var(--fui-space-1, #{$fui-space-1}));
   left: var(--fui-navmenu-viewport-left, 0);
   overflow: hidden;
-  padding: var(--fui-space-1, $fui-space-1);
   border-color: var(--fui-border-strong, $fui-border-strong);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   z-index: calc(var(--fui-header-z-index, $fui-header-z-index) + 1);
 
   width: var(--fui-navmenu-viewport-width);
   height: var(--fui-navmenu-viewport-height);
-  transition:
-    opacity var(--fui-transition-fast, $fui-transition-fast);
+  transition: opacity var(--fui-transition-fast, $fui-transition-fast);
 
   // Hidden when no item is open
-  &[data-state='closed'] {
+  &[data-state="closed"] {
     opacity: 0;
     pointer-events: none;
     // Collapse to avoid layout space
@@ -289,7 +289,7 @@
     overflow: hidden;
   }
 
-  &[data-state='open'] {
+  &[data-state="open"] {
     opacity: 1;
   }
 
@@ -306,12 +306,12 @@
 .hamburger {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("lg");
 
   display: none;
   align-items: center;
   justify-content: center;
-  width: var(--fui-touch-lg, $fui-touch-lg);
-  height: var(--fui-touch-lg, $fui-touch-lg);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-primary, $fui-text-primary);
   flex-shrink: 0;
@@ -321,8 +321,7 @@
   }
 
   svg {
-    width: var(--fui-icon-xl, $fui-icon-xl);
-    height: var(--fui-icon-xl, $fui-icon-xl);
+    @include action.glyph("lg");
   }
 
   // Keep viewport visibility in sync with JS mobile mode.
@@ -373,19 +372,19 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--fui-space-4, $fui-space-4);
-  border-bottom: 1px solid var(--fui-border, $fui-border);
+  border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   min-height: var(--fui-appshell-header-height, $fui-appshell-header-height);
 }
 
 .drawerClose {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("md");
 
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--fui-touch-md, $fui-touch-md);
-  height: var(--fui-touch-md, $fui-touch-md);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
 
@@ -408,24 +407,22 @@
 
 .drawerLink {
   @include button-reset;
-  @include text-base;
+  @include navigation.row;
 
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
-  min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 }
 
 .drawerSectionLabel {
-  @include section-label-text;
+  @include navigation.section-row;
 
   padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4)
     var(--fui-space-1, $fui-space-1);
@@ -433,16 +430,14 @@
 
 .drawerCollapsibleTrigger {
   @include button-reset;
-  @include text-base;
+  @include navigation.row;
 
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
@@ -455,7 +450,7 @@
   color: var(--fui-text-secondary, $fui-text-secondary);
   flex-shrink: 0;
 
-  &[data-open='true'] {
+  &[data-open="true"] {
     transform: rotate(90deg);
   }
 }
@@ -469,18 +464,30 @@
 // ============================================
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slideInLeft {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes slideInRight {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 // ============================================

package/src/components/Pagination/Pagination.module.scss

@@ -1,5 +1,7 @@
 @use '../../tokens/variables' as *;
 @use '../../tokens/mixins' as *;
+@use '../../recipes/action';
+@use '../../recipes/layout';
 
 // ============================================
 // Navigation wrapper
@@ -18,7 +20,7 @@
 .list {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
+  gap: layout.gap("xs");
   list-style: none;
   margin: 0;
   padding: 0;
@@ -30,17 +32,9 @@
 
 .item {
   @include button-reset;
-  @include text-base;
+  @include action.base;
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--fui-touch-md, $fui-touch-md);
-  height: var(--fui-touch-md, $fui-touch-md);
-  padding: 0 var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
   cursor: pointer;
   transition:
@@ -78,35 +72,48 @@
 // Nav buttons (Previous/Next)
 // ============================================
 
-.navButton {
-  svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
-  }
-}
-
 // ============================================
 // Ellipsis
 // ============================================
 
 .ellipsis {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--fui-touch-md, $fui-touch-md);
-  height: var(--fui-touch-md, $fui-touch-md);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include action.base;
+
   color: var(--fui-text-secondary, $fui-text-secondary);
   user-select: none;
 }
 
+.sm :is(.item, .ellipsis) {
+  @include action.icon-only("sm");
+}
+
+.md :is(.item, .ellipsis) {
+  @include action.icon-only("md");
+}
+
+.lg :is(.item, .ellipsis) {
+  @include action.icon-only("lg");
+}
+
+.sm .navButton svg {
+  @include action.glyph("sm");
+}
+
+.md .navButton svg {
+  @include action.glyph("md");
+}
+
+.lg .navButton svg {
+  @include action.glyph("lg");
+}
+
 // ============================================
 // Accessibility: High Contrast Mode
 // ============================================
 
 @media (prefers-contrast: more) {
   .itemActive {
-    outline: 2px solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: -2px;
+    outline: var(--fui-stroke-default, 2px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
   }
 }

package/src/components/Pagination/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useResolvedControlSize } from '../ComponentDefaults';
 import styles from './Pagination.module.scss';
 
 // ============================================
@@ -21,6 +22,8 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>,
   edgeCount?: number;
   /** Number of pages shown around current: default 1 */
   siblingCount?: number;
+  /** Visible action size. Resolves through ComponentDefaults when omitted. */
+  size?: 'sm' | 'md' | 'lg';
 }
 
 export interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -191,10 +194,12 @@ function PaginationRoot({
   onPageChange,
   edgeCount = 1,
   siblingCount = 1,
+  size: sizeProp,
   className,
   'aria-label': ariaLabel,
   ...htmlProps
 }: PaginationProps) {
+  const size = useResolvedControlSize(sizeProp);
   const totalPages = Math.max(0, Math.floor(rawTotalPages));
   const [uncontrolledPage, setUncontrolledPage] = React.useState(() =>
     totalPages > 0 ? clamp(defaultPage, 1, totalPages) : 1
@@ -228,7 +233,7 @@ function PaginationRoot({
       <nav
         {...htmlProps}
         aria-label={ariaLabel ?? 'Pagination'}
-        className={[styles.pagination, className].filter(Boolean).join(' ')}
+        className={[styles.pagination, styles[size], className].filter(Boolean).join(' ')}
       />
     );
   }
@@ -238,7 +243,7 @@ function PaginationRoot({
       <nav
         {...htmlProps}
         aria-label={ariaLabel ?? 'Pagination'}
-        className={[styles.pagination, className].filter(Boolean).join(' ')}
+        className={[styles.pagination, styles[size], className].filter(Boolean).join(' ')}
       >
         <ul className={styles.list}>
           {children}

package/src/components/Popover/Popover.module.scss

@@ -1,26 +1,17 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/overlay" as overlay;
 
-// Local component tokens
-$fui-arrow-size: 10px !default;
-
-// Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, 52);
   outline: none;
 }
 
-// Popup container
 .popup {
-  @include surface-elevated;
-  @include text-base;
-
-  min-width: 12rem;
-  max-width: 24rem;
-  padding: var(--fui-space-2, $fui-space-2);
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+  @include overlay.anchored-surface("md");
 
-  // Animation
+  position: relative;
   opacity: 0;
   transform: scale(0.95) translateY(-$fui-anim-offset-sm);
   transform-origin: var(--transform-origin);
@@ -43,7 +34,6 @@ $fui-arrow-size: 10px !default;
     transform: scale(0.95) translateY($fui-anim-offset-sm);
   }
 
-  // Adjust animation direction based on side
   &[data-side="top"] {
     &[data-starting-style] {
       transform: scale(0.95) translateY($fui-anim-offset-sm);
@@ -63,49 +53,33 @@ $fui-arrow-size: 10px !default;
   }
 }
 
-// Size variants
 .sm {
-  padding: var(--fui-space-3, $fui-space-3);
-  max-width: 16rem;
-}
-
-.md {
-  // Default styles
+  @include overlay.anchored-size("sm");
 }
 
 .lg {
-  padding: var(--fui-space-6, $fui-space-6);
-  max-width: 32rem;
+  @include overlay.anchored-size("lg");
 }
 
-// Title
 .title {
-  margin: 0 0 var(--fui-space-1, $fui-space-1);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+  @include overlay.anchored-title;
+
+  margin: 0 0 var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
   color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
 }
 
-// Description
 .description {
+  @include overlay.description;
+
   margin: 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);
 }
 
-// Close button
 .close {
   @include button-reset;
   @include interactive-base;
-  @include touch-target;
+  @include overlay.close;
 
-  position: absolute;
-  top: var(--fui-space-2, $fui-space-2);
-  right: var(--fui-space-2, $fui-space-2);
-  width: 1.5rem;
-  height: 1.5rem;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 
@@ -115,18 +89,22 @@ $fui-arrow-size: 10px !default;
   }
 
   svg {
-    width: 0.875rem;
-    height: 0.875rem;
+    inline-size: action.icon-size("sm");
+    block-size: action.icon-size("sm");
   }
 }
 
-// Arrow
+.popup:has(.close) .title {
+  padding-inline-end: calc(
+    #{action.track("sm")} + var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px))
+  );
+}
+
 .arrow {
-  width: $fui-arrow-size;
-  height: $fui-arrow-size;
-  transform: rotate(45deg);
+  @include overlay.arrow-box;
+
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 
   &[data-side="top"] {
     border-top: none;
@@ -134,56 +112,42 @@ $fui-arrow-size: 10px !default;
   }
 
   &[data-side="bottom"] {
-    border-bottom: none;
     border-right: none;
+    border-bottom: none;
   }
 
   &[data-side="left"] {
-    border-left: none;
     border-bottom: none;
+    border-left: none;
   }
 
   &[data-side="right"] {
-    border-right: none;
     border-top: none;
+    border-right: none;
   }
 }
 
-// Body content area
 .body {
-  margin-top: var(--fui-space-3, $fui-space-3);
+  margin-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
 }
 
-// Footer for actions
 .footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--fui-space-2, $fui-space-2);
-  margin-top: var(--fui-space-4, $fui-space-4);
-  padding-top: var(--fui-space-3, $fui-space-3);
-  border-top: 1px solid var(--fui-border, $fui-border);
+  gap: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
+  margin-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
+  padding-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
+  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
 @media (prefers-reduced-motion: reduce) {
-  .popup {
+  .popup,
+  .popup[data-starting-style],
+  .popup[data-ending-style],
+  .popup[data-side="top"][data-starting-style],
+  .popup[data-side="top"][data-ending-style] {
     transition: none;
     transform: none;
-
-    &[data-starting-style],
-    &[data-ending-style] {
-      transform: none;
-    }
-
-    &[data-side="top"] {
-      &[data-starting-style],
-      &[data-ending-style] {
-        transform: none;
-      }
-    }
   }
 }