@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5

package/dist/docs/functional/size/radius.json

@@ -0,0 +1,221 @@
+{
+  "borderRadius-default": {
+    "key": "{borderRadius.default}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{borderRadius.medium}",
+      "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
+          }
+        }
+      },
+      "key": "{borderRadius.default}"
+    },
+    "name": "borderRadius-default",
+    "attributes": {},
+    "path": ["borderRadius", "default"],
+    "value": "0.375rem",
+    "type": "dimension",
+    "description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt"
+  },
+  "borderRadius-full": {
+    "key": "{borderRadius.full}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-full) /* utility class: .circle */"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["avatar", "pill-badge", "circular-button"],
+        "rules": "Use for avatars and pill-shaped elements. Do NOT use for rectangular containers."
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": 9999,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "$description": "Use this border radius for pill shaped elements",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-full) /* utility class: .circle */"
+          }
+        },
+        "org.primer.llm": {
+          "usage": ["avatar", "pill-badge", "circular-button"],
+          "rules": "Use for avatars and pill-shaped elements. Do NOT use for rectangular containers."
+        }
+      },
+      "key": "{borderRadius.full}"
+    },
+    "name": "borderRadius-full",
+    "attributes": {},
+    "path": ["borderRadius", "full"],
+    "value": "624.9375rem",
+    "type": "dimension",
+    "description": "Use this border radius for pill shaped elements"
+  },
+  "borderRadius-large": {
+    "key": "{borderRadius.large}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["dialog", "card", "modal"],
+        "rules": "Recommended for dialogs and modals."
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      },
+      "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
+          }
+        },
+        "org.primer.llm": {
+          "usage": ["dialog", "card", "modal"],
+          "rules": "Recommended for dialogs and modals."
+        }
+      },
+      "key": "{borderRadius.large}"
+    },
+    "name": "borderRadius-large",
+    "attributes": {},
+    "path": ["borderRadius", "large"],
+    "value": "0.75rem",
+    "type": "dimension",
+    "description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons."
+  },
+  "borderRadius-medium": {
+    "key": "{borderRadius.medium}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["button", "input", "textarea", "select", "card", "container"],
+        "rules": "Default choice for most components. Use for inputs, cards, and general containers."
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
+      "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
+          }
+        },
+        "org.primer.llm": {
+          "usage": ["button", "input", "textarea", "select", "card", "container"],
+          "rules": "Default choice for most components. Use for inputs, cards, and general containers."
+        }
+      },
+      "key": "{borderRadius.medium}"
+    },
+    "name": "borderRadius-medium",
+    "attributes": {},
+    "path": ["borderRadius", "medium"],
+    "value": "0.375rem",
+    "type": "dimension",
+    "description": "Medium border radius (6px). The default choice for most buttons, cards, and containers"
+  },
+  "borderRadius-small": {
+    "key": "{borderRadius.small}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["badge", "tag", "label", "small-input"],
+        "rules": "Use for small UI elements under 16px height. Do NOT use for buttons or cards."
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": 3,
+        "unit": "px"
+      },
+      "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
+          }
+        },
+        "org.primer.llm": {
+          "usage": ["badge", "tag", "label", "small-input"],
+          "rules": "Use for small UI elements under 16px height. Do NOT use for buttons or cards."
+        }
+      },
+      "key": "{borderRadius.small}"
+    },
+    "name": "borderRadius-small",
+    "attributes": {},
+    "path": ["borderRadius", "small"],
+    "value": "0.1875rem",
+    "type": "dimension",
+    "description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height"
+  }
+}

package/dist/docs/functional/size/size-coarse.json

@@ -1,47 +1,89 @@
 {
   "control-minTarget-auto": {
     "key": "{control.minTarget.auto}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["touch-target", "mobile-button", "tap-area"],
+        "rules": "Use as minimum size for interactive elements on touch devices. Ensures WCAG 2.5.5 compliance (44x44px minimum). Do NOT use for fine pointer (mouse) contexts."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.44}",
       "$type": "dimension",
+      "$description": "Minimum touch target size for coarse pointer devices (touch screens)",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["touch-target", "mobile-button", "tap-area"],
+          "rules": "Use as minimum size for interactive elements on touch devices. Ensures WCAG 2.5.5 compliance (44x44px minimum). Do NOT use for fine pointer (mouse) contexts."
+        }
+      },
       "key": "{control.minTarget.auto}"
     },
     "name": "control-minTarget-auto",
     "attributes": {},
     "path": ["control", "minTarget", "auto"],
     "value": "2.75rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Minimum touch target size for coarse pointer devices (touch screens)"
   },
   "controlStack-medium-gap-auto": {
     "key": "{controlStack.medium.gap.auto}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+        "rules": "Use for spacing between interactive controls on touch devices in standard layouts. Do NOT use for desktop/mouse interfaces."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.12}",
       "$type": "dimension",
+      "$description": "Gap between stacked controls in medium density layouts for touch devices",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+          "rules": "Use for spacing between interactive controls on touch devices in standard layouts. Do NOT use for desktop/mouse interfaces."
+        }
+      },
       "key": "{controlStack.medium.gap.auto}"
     },
     "name": "controlStack-medium-gap-auto",
     "attributes": {},
     "path": ["controlStack", "medium", "gap", "auto"],
     "value": "0.75rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Gap between stacked controls in medium density layouts for touch devices"
   },
   "controlStack-small-gap-auto": {
     "key": "{controlStack.small.gap.auto}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+        "rules": "Use for spacing between interactive controls on touch devices in compact layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.16}",
       "$type": "dimension",
+      "$description": "Gap between stacked controls in small density layouts for touch devices",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+          "rules": "Use for spacing between interactive controls on touch devices in compact layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
+        }
+      },
       "key": "{controlStack.small.gap.auto}"
     },
     "name": "controlStack-small-gap-auto",
     "attributes": {},
     "path": ["controlStack", "small", "gap", "auto"],
     "value": "1rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Gap between stacked controls in small density layouts for touch devices"
   }
 }

package/dist/docs/functional/size/size-fine.json

@@ -1,47 +1,89 @@
 {
   "control-minTarget-auto": {
     "key": "{control.minTarget.auto}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["mouse-target", "desktop-button", "click-area"],
+        "rules": "Use as minimum size for interactive elements on desktop/mouse interfaces. Smaller than touch targets for denser layouts. Do NOT use for touch/mobile contexts."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.16}",
       "$type": "dimension",
+      "$description": "Minimum target size for fine pointer devices (mouse)",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["mouse-target", "desktop-button", "click-area"],
+          "rules": "Use as minimum size for interactive elements on desktop/mouse interfaces. Smaller than touch targets for denser layouts. Do NOT use for touch/mobile contexts."
+        }
+      },
       "key": "{control.minTarget.auto}"
     },
     "name": "control-minTarget-auto",
     "attributes": {},
     "path": ["control", "minTarget", "auto"],
     "value": "1rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Minimum target size for fine pointer devices (mouse)"
   },
   "controlStack-medium-gap-auto": {
     "key": "{controlStack.medium.gap.auto}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
+        "rules": "Use for spacing between interactive controls on desktop in standard layouts. Do NOT use for mobile/touch interfaces."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.8}",
       "$type": "dimension",
+      "$description": "Gap between stacked controls in medium density layouts for mouse interfaces",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
+          "rules": "Use for spacing between interactive controls on desktop in standard layouts. Do NOT use for mobile/touch interfaces."
+        }
+      },
       "key": "{controlStack.medium.gap.auto}"
     },
     "name": "controlStack-medium-gap-auto",
     "attributes": {},
     "path": ["controlStack", "medium", "gap", "auto"],
     "value": "0.5rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Gap between stacked controls in medium density layouts for mouse interfaces"
   },
   "controlStack-small-gap-auto": {
     "key": "{controlStack.small.gap.auto}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
+        "rules": "Use for spacing between interactive controls on desktop in compact layouts. Tighter spacing than touch devices. Do NOT use for mobile/touch interfaces."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.8}",
       "$type": "dimension",
+      "$description": "Gap between stacked controls in small density layouts for mouse interfaces",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
+          "rules": "Use for spacing between interactive controls on desktop in compact layouts. Tighter spacing than touch devices. Do NOT use for mobile/touch interfaces."
+        }
+      },
       "key": "{controlStack.small.gap.auto}"
     },
     "name": "controlStack-small-gap-auto",
     "attributes": {},
     "path": ["controlStack", "small", "gap", "auto"],
     "value": "0.5rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Gap between stacked controls in small density layouts for mouse interfaces"
   }
 }

package/dist/docs/functional/size/size.json

@@ -64,7 +64,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "10px",
+      "$value": {
+        "value": 10,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -226,7 +229,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "6px",
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -631,7 +637,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "14px",
+      "$value": {
+        "value": 14,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -793,7 +802,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "2px",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1144,7 +1156,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "432px",
+      "$value": {
+        "value": 432,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1171,7 +1186,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "320px",
+      "$value": {
+        "value": 320,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1198,7 +1216,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "256px",
+      "$value": {
+        "value": 256,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1225,7 +1246,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "600px",
+      "$value": {
+        "value": 600,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1252,7 +1276,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "4px",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1387,7 +1414,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "640px",
+      "$value": {
+        "value": 640,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1414,7 +1444,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "480px",
+      "$value": {
+        "value": 480,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1441,7 +1474,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "320px",
+      "$value": {
+        "value": 320,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1468,7 +1504,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "960px",
+      "$value": {
+        "value": 960,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1495,7 +1534,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "192px",
+      "$value": {
+        "value": 192,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1597,7 +1639,10 @@
     "filePath": "src/tokens/functional/size/size.json5",
     "isSource": true,
     "original": {
-      "$value": "2px",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
       "$type": "dimension",
       "key": "{spinner.strokeWidth.default}"
     },

package/dist/docs/functional/size/viewport.json

@@ -34,14 +34,14 @@
     "filePath": "src/tokens/functional/size/viewport.json5",
     "isSource": true,
     "original": {
-      "$value": "(max-width: calc({breakpoint.large} - 0.02px) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
+      "$value": "((max-width: calc({breakpoint.large} - 0.02px)) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
       "$type": "custom-viewportRange",
       "key": "{viewportRange.narrowLandscape}"
     },
     "name": "viewportRange-narrowLandscape",
     "attributes": {},
     "path": ["viewportRange", "narrowLandscape"],
-    "value": "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
+    "value": "((max-width: calc(63.25rem - 0.02px)) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
     "type": "custom-viewportRange"
   },
   "viewportRange-portrait": {