@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Badge/Badge.module.scss

@@ -1,37 +1,38 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// Local component tokens
-$fui-badge-dot-sm: 5px !default;
-$fui-badge-dot-md: 6px !default;
+@use "../../recipes/action" as action;
+@use "../../recipes/representation" as representation;
+@use "../../recipes/target" as target;
 
 .badge {
   display: inline-flex;
   align-items: center;
-  width: max-content;
-  gap: var(--fui-space-1, $fui-space-1);
+  box-sizing: border-box;
+  inline-size: max-content;
+  gap: var(--fui-raw-space-4, 4px);
+  padding-block: 0;
   border: 0;
   border-radius: var(--fui-badge-radius, var(--fui-radius-lg, #{$fui-radius-lg}));
-  font-family: var(--fui-font-sans, $fui-font-sans);
-  font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-  line-height: 1;
   white-space: nowrap;
 }
 
 // Sizes
 .sm {
-  padding: var(--fui-space-0-5, $fui-space-0-5) var(--fui-space-1, $fui-space-1);
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+  @include representation.badge("sm");
+
+  padding-inline: var(--fui-raw-space-4, 4px);
 }
 
 .md {
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-1, $fui-space-1);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include representation.badge("md");
+
+  padding-inline: var(--fui-raw-space-6, 6px);
 }
 
 .lg {
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include representation.badge("lg");
+
+  padding-inline: var(--fui-raw-space-8, 8px);
 }
 
 // Variants
@@ -63,34 +64,21 @@ $fui-badge-dot-md: 6px !default;
 .outline {
   background-color: transparent;
   color: var(--fui-text-primary, $fui-text-primary);
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-strong, $fui-border-strong);
 }
 
-// Compact hairline-bordered label for dense dashboard metadata rows.
-// Overrides the base pill radius and padding — squared corners read as
-// data metadata rather than status chrome.
 .label {
-  height: var(--fui-target-size-min, $fui-target-size-min); // 32px control floor
-  padding: 0 calc(var(--fui-space-1, $fui-space-1) - var(--fui-space-px, $fui-space-px)); // ~6px
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   background-color: transparent;
   color: var(--fui-text-secondary, $fui-text-secondary);
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 }
 
-// Dim filter-chip chrome for toolbar segmented controls. Transparent at
-// rest, panel-surface + hairline when marked active.
 .dim {
-  height: var(--fui-button-height-sm, $fui-button-height-sm); // 32px small control height
-  padding: 0 calc(var(--fui-space-1, $fui-space-1) + var(--fui-space-0-5, $fui-space-0-5)); // ~9px
-  border: 1px solid transparent;
+  border: var(--fui-stroke-hairline, 1px) solid transparent;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   background-color: transparent;
   color: var(--fui-text-secondary, $fui-text-secondary);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
     border-color var(--fui-transition-fast, $fui-transition-fast),
@@ -98,21 +86,21 @@ $fui-badge-dot-md: 6px !default;
 
   &.active {
     border-color: var(--fui-border, $fui-border);
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: var(--fui-control-selected-bg, $fui-bg-active);
     color: var(--fui-text-primary, $fui-text-primary);
   }
 }
 
 .dot {
-  width: $fui-badge-dot-md;
-  height: $fui-badge-dot-md;
+  inline-size: var(--fui-raw-space-6, 6px);
+  block-size: var(--fui-raw-space-6, 6px);
   border-radius: 50%;
   background-color: var(--fui-badge-dot-color, currentColor);
   flex-shrink: 0;
 
   .sm & {
-    width: $fui-badge-dot-sm;
-    height: $fui-badge-dot-sm;
+    inline-size: var(--fui-raw-space-4, 4px);
+    block-size: var(--fui-raw-space-4, 4px);
   }
 }
 
@@ -122,7 +110,7 @@ $fui-badge-dot-md: 6px !default;
 // motion the component has. Opacity only: nothing reflows, and a reader who has
 // asked for less motion loses the breathing and keeps the badge.
 .dotPulse {
-  animation: fui-badge-dot-pulse 1.6s ease-in-out infinite;
+  animation: fui-badge-dot-pulse var(--fui-duration-pulse, $fui-duration-pulse) ease-in-out infinite;
 }
 
 @keyframes fui-badge-dot-pulse {
@@ -138,30 +126,54 @@ $fui-badge-dot-md: 6px !default;
 }
 
 .icon {
-  display: flex;
+  display: inline-flex;
   align-items: center;
+
+  .sm & {
+    @include representation.glyph("xs");
+  }
+
+  .md & {
+    @include representation.glyph("sm");
+  }
+
+  .lg & {
+    @include representation.glyph("md");
+  }
+
+  > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
 }
 
-// Asymmetric padding when removable — tighter on right side near the × button
 .badge:has(.remove) {
-  padding: var(--fui-space-0-5, $fui-space-0-5) var(--fui-space-1, $fui-space-1)
-    var(--fui-space-0-5, $fui-space-0-5) var(--fui-space-2, $fui-space-2);
+  padding-inline-end: var(--fui-raw-space-4, 4px);
 }
 
 .remove {
-  @include button-reset;
-  @include interactive-base;
-  @include touch-target;
+  @include action.base;
+  @include action.inline;
+  @include target.hit-area("compact");
 
-  margin-left: calc(-1 * var(--fui-space-0-5, $fui-space-0-5));
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-start: calc(-1 * var(--fui-raw-space-2, 2px));
   padding: 0;
-  font-size: inherit;
+  border: 0;
+  background: transparent;
   color: inherit;
   opacity: 0.6;
-  line-height: 1;
   border-radius: var(--fui-radius-full, $fui-radius-full);
+  cursor: pointer;
 
   &:hover {
     opacity: 1;
   }
+
+  &:focus-visible {
+    @include focus-ring;
+
+    opacity: 1;
+  }
 }

package/src/components/BentoGrid/BentoGrid.contract.json

@@ -1,16 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "BentoGrid",
-  "description": "Asymmetric grid layout with responsive spans and built-in surface styling for bento-style feature sections",
+  "description": "Asymmetric feature grid where tiles span different widths and heights.",
   "category": "layout",
-  "tags": [
-    "bento",
-    "grid",
-    "layout",
-    "responsive",
-    "feature-grid",
-    "asymmetric"
-  ],
+  "tags": ["bento", "grid", "layout", "responsive", "feature-grid", "asymmetric"],
   "status": "stable",
   "sourcePath": "src/components/BentoGrid/index.tsx",
   "exportName": "BentoGrid",
@@ -31,25 +24,14 @@
       "description": "Number of columns — auto-collapses responsively (3→2→1)",
       "default": "3",
       "required": false,
-      "values": [
-        "2",
-        "3",
-        "4"
-      ]
+      "values": ["2", "3", "4"]
     },
     "gap": {
       "type": "enum",
       "description": "Gap between grid items, mapped to spacing tokens",
       "default": "md",
       "required": false,
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
+      "values": ["none", "xs", "sm", "md", "lg", "xl"]
     },
     "style": {
       "type": "object",
@@ -59,22 +41,21 @@
   },
   "usage": {
     "when": [
-      "Asymmetric feature grids with hero + supporting items",
-      "Dashboard overviews where cards have different visual weight",
-      "Marketing pages with mixed-size content blocks",
-      "Any layout where items need per-breakpoint column/row spans"
+      "Feature grids with one hero tile and supporting tiles",
+      "Dashboards where cards carry different weight",
+      "Marketing sections with mixed-size blocks"
     ],
     "whenNot": [
-      "Uniform grids where all items are the same size (use Grid)",
-      "Form layouts with labeled fields (use Grid)",
-      "Simple stacked content (use Stack)"
+      "Uniform tiles of one size (use Grid)",
+      "Labelled form fields (use Grid)",
+      "A single column of content (use Stack)"
     ],
     "guidelines": [
-      "Use colSpan/rowSpan with responsive objects for layouts that adapt across breakpoints",
-      "The hero item typically uses colSpan={2} rowSpan={2} at lg and above",
-      "Items include built-in surface styling — no need to wrap children in Card",
-      "Grid auto-collapses: 3→2 columns below lg, all→1 column below sm",
-      "Root and Item forward DOM props (aria-*, data-*, handlers), and Item style merges with span CSS vars"
+      "colSpan and rowSpan take per-breakpoint objects",
+      "A hero tile is usually colSpan 2 and rowSpan 2 from lg up",
+      "Tiles carry their own surface — do not wrap them in Card",
+      "Columns collapse 3 to 2 below lg, and to 1 below sm",
+      "Keep source order equal to visual order for screen readers"
     ],
     "accessibility": [
       "Grid is purely visual — it does not affect reading order or semantics",
@@ -86,23 +67,18 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic 3-column uniform bento grid",
-      "code": "<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n  <BentoGrid.Item>Item 6</BentoGrid.Item>\n</BentoGrid>"
+      "description": "Equal tiles, each on its own surface.",
+      "code": "import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={3} gap=\"md\">\n    <BentoGrid.Item>Item 1</BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item>Item 3</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n    <BentoGrid.Item>Item 6</BentoGrid.Item>\n  </BentoGrid>\n</Box>"
     },
     {
       "name": "Hero Layout",
-      "description": "2×2 hero item with 4 supporting items in a 3-column grid",
-      "code": "<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>\n    Hero content\n  </BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n</BentoGrid>"
+      "description": "One tile takes two columns and two rows; the rest fill around it.",
+      "code": "import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={3} gap=\"md\">\n    <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>\n      Hero content\n    </BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item>Item 3</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n  </BentoGrid>\n</Box>"
     },
     {
       "name": "Two Column",
-      "description": "2-column bento with a wide item",
-      "code": "<BentoGrid columns={2} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item colSpan={2}>Wide item</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n</BentoGrid>"
-    },
-    {
-      "name": "Full-Width Banner",
-      "description": "3-column grid with a full-width item spanning all columns",
-      "code": "<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item colSpan={3}>Full-width banner</BentoGrid.Item>\n</BentoGrid>"
+      "description": "colSpan stretches a tile across the whole row.",
+      "code": "import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={2} gap=\"md\">\n    <BentoGrid.Item>Item 1</BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item colSpan={2}>Wide item</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n  </BentoGrid>\n</Box>"
     }
   ],
   "relations": [

package/src/components/BentoGrid/BentoGrid.module.scss

@@ -1,5 +1,7 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/surface" as surface;
 
 // ============================================
 // BentoGrid Container
@@ -49,22 +51,22 @@
 // ============================================
 
 .gapNone {
-  gap: 0;
+  gap: layout.gap("none");
 }
 .gapXs {
-  gap: var(--fui-space-1, $fui-space-1);
+  gap: layout.gap("xs");
 }
 .gapSm {
-  gap: var(--fui-space-2, $fui-space-2);
+  gap: layout.gap("sm");
 }
 .gapMd {
-  gap: var(--fui-space-3, $fui-space-3);
+  gap: layout.gap("md");
 }
 .gapLg {
-  gap: var(--fui-space-4, $fui-space-4);
+  gap: layout.gap("lg");
 }
 .gapXl {
-  gap: var(--fui-space-6, $fui-space-6);
+  gap: layout.gap("xl");
 }
 
 // ============================================
@@ -73,19 +75,9 @@
 
 .item {
   @include surface-elevated;
+  @include surface.apply-inset("compact");
 
   min-width: 0;
-  padding: var(--fui-space-2, $fui-space-2);
-  transition:
-    box-shadow var(--fui-transition-fast, $fui-transition-fast),
-    border-color var(--fui-transition-fast, $fui-transition-fast),
-    transform var(--fui-transition-fast, $fui-transition-fast);
-
-  &:hover {
-    border-color: var(--fui-border-strong, $fui-border-strong);
-    box-shadow: var(--fui-shadow-md, $fui-shadow-md);
-    transform: translateY(-2px);
-  }
 
   // ---- Responsive span cascade ----
   --_col-span: var(--bento-col-span, 1);
@@ -133,28 +125,15 @@
   }
 }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
-@media (prefers-reduced-motion: reduce) {
-  .item {
-    transition: none;
-
-    &:hover {
-      transform: none;
-    }
-  }
-}
-
 // ============================================
 // Accessibility: High Contrast Mode
 // ============================================
 
 @media (prefers-contrast: more) {
   .item {
-    border-width: 2px;
     border-color: var(--fui-text-primary, $fui-text-primary);
+    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
   }
 }