@primer/primitives 11.4.0-rc.e472be0d → 11.4.0

package/dist/build/formats/markdownLlmGuidelines.js

@@ -45,6 +45,35 @@ function formatCategoryName(category) {
     // Capitalize first letter
     return category.charAt(0).toUpperCase() + category.slice(1);
 }
+/**
+ * Creates a key for grouping by usage and rules only (not description)
+ */
+function createUsageRulesKey(guideline) {
+    var _a;
+    return JSON.stringify({
+        usage: ((_a = guideline.usage) === null || _a === void 0 ? void 0 : _a.sort()) || [],
+        rules: guideline.rules || '',
+    });
+}
+/**
+ * Extracts a subcategory name from token names for headings
+ * e.g., "border-accent-emphasis" -> "accent"
+ */
+function extractSubcategory(tokenNames) {
+    if (tokenNames.length < 2)
+        return null;
+    // Get the second part of each token name
+    const subcategories = tokenNames.map(name => {
+        const parts = name.split('-');
+        return parts[1] || null;
+    });
+    // Check if all tokens share the same subcategory
+    const uniqueSubcats = [...new Set(subcategories.filter(Boolean))];
+    if (uniqueSubcats.length === 1) {
+        return uniqueSubcats[0];
+    }
+    return null;
+}
 /**
  * @description Outputs a markdown file with LLM token guidelines, extracting
  * description from $description and usage/rules from $extensions['org.primer.llm'].
@@ -89,7 +118,21 @@ export const markdownLlmGuidelines = (_a) => __awaiter(void 0, [_a], void 0, fun
     for (const category of Object.keys(grouped).sort()) {
         lines.push(`## ${formatCategoryName(category)}`, '');
         const categoryGuidelines = grouped[category];
-        // Group tokens with identical guidelines
+        // Check if all tokens in category share the same usage/rules AND there are multiple tokens
+        const usageRulesKeys = new Set(categoryGuidelines.map(createUsageRulesKey));
+        const sharedUsageRules = usageRulesKeys.size === 1 && categoryGuidelines.length > 1;
+        // If shared, output usage/rules once at category level
+        if (sharedUsageRules) {
+            const first = categoryGuidelines[0];
+            if (first.usage && first.usage.length > 0) {
+                lines.push(`**Usage:** ${first.usage.join(', ')}`);
+            }
+            if (first.rules) {
+                lines.push(`**Rules:** ${first.rules}`);
+            }
+            lines.push('');
+        }
+        // Group tokens with identical guidelines (description + usage + rules)
         const consolidatedGroups = new Map();
         for (const guideline of categoryGuidelines) {
             const key = createGuidelineKey(guideline);
@@ -100,20 +143,32 @@ export const markdownLlmGuidelines = (_a) => __awaiter(void 0, [_a], void 0, fun
         }
         for (const [, guidelinesGroup] of consolidatedGroups) {
             const first = guidelinesGroup[0];
+            const tokenNames = guidelinesGroup.map(g => g.name);
             if (guidelinesGroup.length > 1) {
                 // Multiple tokens share the same guidelines - consolidate
+                const subcategory = extractSubcategory(tokenNames);
+                if (subcategory) {
+                    lines.push(`### ${subcategory}`);
+                }
+                else {
+                    // No common subcategory - use "general" or skip heading if description serves as intro
+                    if (first.description && consolidatedGroups.size > 1) {
+                        lines.push(`### general`);
+                    }
+                }
                 if (first.description) {
                     lines.push(first.description);
-                    lines.push('');
-                }
-                if (first.usage && first.usage.length > 0) {
-                    lines.push(`**Usage:** ${first.usage.join(', ')}`);
                 }
-                if (first.rules) {
-                    lines.push(`**Rules:** ${first.rules}`);
+                // Only show usage/rules if not already shown at category level
+                if (!sharedUsageRules) {
+                    if (first.usage && first.usage.length > 0) {
+                        lines.push(`**Usage:** ${first.usage.join(', ')}`);
+                    }
+                    if (first.rules) {
+                        lines.push(`**Rules:** ${first.rules}`);
+                    }
                 }
-                lines.push('');
-                lines.push(`**Tokens:** ${guidelinesGroup.map(g => g.name).join(', ')}`);
+                lines.push(`**Tokens:** ${tokenNames.join(', ')}`);
                 lines.push('');
             }
             else {
@@ -122,11 +177,14 @@ export const markdownLlmGuidelines = (_a) => __awaiter(void 0, [_a], void 0, fun
                 if (first.description) {
                     lines.push(first.description);
                 }
-                if (first.usage && first.usage.length > 0) {
-                    lines.push(`**Usage:** ${first.usage.join(', ')}`);
-                }
-                if (first.rules) {
-                    lines.push(`**Rules:** ${first.rules}`);
+                // Only show usage/rules if not already shown at category level
+                if (!sharedUsageRules) {
+                    if (first.usage && first.usage.length > 0) {
+                        lines.push(`**Usage:** ${first.usage.join(', ')}`);
+                    }
+                    if (first.rules) {
+                        lines.push(`**Rules:** ${first.rules}`);
+                    }
                 }
                 lines.push('');
             }

package/dist/css/functional/themes/dark-colorblind-high-contrast.css

@@ -868,7 +868,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff;
+  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
@@ -1765,7 +1765,7 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff;
+    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/dark-colorblind.css

@@ -874,7 +874,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb;
+  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;
@@ -1771,7 +1771,7 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --dashboard-bgColor: var(--bgColor-inset);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb;
+    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
     --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-neutral-muted: 0.0625rem solid #3d444db3;

package/dist/css/functional/themes/dark-dimmed-high-contrast.css

@@ -871,7 +871,7 @@
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
-  --focus-outline: 2px solid #6cb6ff;
+  --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
@@ -1768,7 +1768,7 @@
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-emphasis);
-    --focus-outline: 2px solid #6cb6ff;
+    --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/dark-dimmed.css

@@ -887,7 +887,7 @@
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-  --focus-outline: 2px solid #316dca;
+  --focus-outline: 2px solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
   --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
   --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
@@ -1784,7 +1784,7 @@
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-    --focus-outline: 2px solid #316dca;
+    --focus-outline: 2px solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
     --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
     --button-primary-borderColor-active: var(--button-primary-borderColor-rest);

package/dist/css/functional/themes/dark-high-contrast.css

@@ -867,7 +867,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff;
+  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
@@ -1764,7 +1764,7 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff;
+    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/dark-tritanopia-high-contrast.css

@@ -868,7 +868,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff;
+  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
@@ -1765,7 +1765,7 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff;
+    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/dark-tritanopia.css

@@ -874,7 +874,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb;
+  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;
@@ -1771,7 +1771,7 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --dashboard-bgColor: var(--bgColor-inset);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb;
+    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
     --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-neutral-muted: 0.0625rem solid #3d444db3;

package/dist/css/functional/themes/dark.css

@@ -873,7 +873,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb;
+  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;
@@ -1770,7 +1770,7 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --dashboard-bgColor: var(--bgColor-inset);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb;
+    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
     --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-neutral-muted: 0.0625rem solid #3d444db3;

package/dist/css/functional/themes/light-colorblind-high-contrast.css

@@ -879,7 +879,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4;
+  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1776,7 +1776,7 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4;
+    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
     --progressBar-track-bgColor: var(--bgColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/light-colorblind.css

@@ -873,7 +873,7 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0969da;
+  --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: #d1d9e080;
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
@@ -1770,7 +1770,7 @@
     --diffBlob-deletionWord-fgColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0969da;
+    --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
     --overlay-borderColor: #d1d9e080;
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --tooltip-fgColor: var(--fgColor-onEmphasis);

package/dist/css/functional/themes/light-high-contrast.css

@@ -878,7 +878,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4;
+  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1775,7 +1775,7 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4;
+    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
     --progressBar-track-bgColor: var(--bgColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/light-tritanopia-high-contrast.css

@@ -879,7 +879,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4;
+  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1776,7 +1776,7 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4;
+    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
     --progressBar-track-bgColor: var(--bgColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/light-tritanopia.css

@@ -873,7 +873,7 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0969da;
+  --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: #d1d9e080;
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
@@ -1770,7 +1770,7 @@
     --diffBlob-deletionWord-fgColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0969da;
+    --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
     --overlay-borderColor: #d1d9e080;
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --tooltip-fgColor: var(--fgColor-onEmphasis);

package/dist/css/functional/themes/light.css

@@ -872,7 +872,7 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0969da;
+  --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: #d1d9e080;
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
@@ -1769,7 +1769,7 @@
     --diffBlob-deletionWord-fgColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0969da;
+    --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
     --overlay-borderColor: #d1d9e080;
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --tooltip-fgColor: var(--fgColor-onEmphasis);

package/dist/docs/functional/themes/dark-colorblind-high-contrast.json

@@ -38271,6 +38271,12 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
     "filePath": "src/tokens/functional/border/border.json5",
     "isSource": true,
     "original": {
@@ -38280,13 +38286,21 @@
         "width": "2px"
       },
       "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
       "key": "{focus.outline}"
     },
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
     "value": "2px solid #409eff",
-    "type": "border"
+    "type": "border",
+    "description": "Focus ring outline for keyboard navigation and accessibility."
   },
   "focus-outlineColor": {
     "key": "{focus.outlineColor}",

package/dist/docs/functional/themes/dark-colorblind.json

@@ -38271,6 +38271,12 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
     "filePath": "src/tokens/functional/border/border.json5",
     "isSource": true,
     "original": {
@@ -38280,13 +38286,21 @@
         "width": "2px"
       },
       "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
       "key": "{focus.outline}"
     },
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
     "value": "2px solid #1f6feb",
-    "type": "border"
+    "type": "border",
+    "description": "Focus ring outline for keyboard navigation and accessibility."
   },
   "focus-outlineColor": {
     "key": "{focus.outlineColor}",

package/dist/docs/functional/themes/dark-dimmed-high-contrast.json

@@ -38261,6 +38261,12 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
     "filePath": "src/tokens/functional/border/border.json5",
     "isSource": true,
     "original": {
@@ -38270,13 +38276,21 @@
         "width": "2px"
       },
       "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
       "key": "{focus.outline}"
     },
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
     "value": "2px solid #6cb6ff",
-    "type": "border"
+    "type": "border",
+    "description": "Focus ring outline for keyboard navigation and accessibility."
   },
   "focus-outlineColor": {
     "key": "{focus.outlineColor}",

package/dist/docs/functional/themes/dark-dimmed.json

@@ -38261,6 +38261,12 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
     "filePath": "src/tokens/functional/border/border.json5",
     "isSource": true,
     "original": {
@@ -38270,13 +38276,21 @@
         "width": "2px"
       },
       "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
       "key": "{focus.outline}"
     },
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
     "value": "2px solid #316dca",
-    "type": "border"
+    "type": "border",
+    "description": "Focus ring outline for keyboard navigation and accessibility."
   },
   "focus-outlineColor": {
     "key": "{focus.outlineColor}",

package/dist/docs/functional/themes/dark-high-contrast.json

@@ -38267,6 +38267,12 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
     "filePath": "src/tokens/functional/border/border.json5",
     "isSource": true,
     "original": {
@@ -38276,13 +38282,21 @@
         "width": "2px"
       },
       "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
       "key": "{focus.outline}"
     },
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
     "value": "2px solid #409eff",
-    "type": "border"
+    "type": "border",
+    "description": "Focus ring outline for keyboard navigation and accessibility."
   },
   "focus-outlineColor": {
     "key": "{focus.outlineColor}",

package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json

@@ -38267,6 +38267,12 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
     "filePath": "src/tokens/functional/border/border.json5",
     "isSource": true,
     "original": {
@@ -38276,13 +38282,21 @@
         "width": "2px"
       },
       "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
       "key": "{focus.outline}"
     },
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
     "value": "2px solid #409eff",
-    "type": "border"
+    "type": "border",
+    "description": "Focus ring outline for keyboard navigation and accessibility."
   },
   "focus-outlineColor": {
     "key": "{focus.outlineColor}",

package/dist/docs/functional/themes/dark-tritanopia.json

@@ -38269,6 +38269,12 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
     "filePath": "src/tokens/functional/border/border.json5",
     "isSource": true,
     "original": {
@@ -38278,13 +38284,21 @@
         "width": "2px"
       },
       "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
       "key": "{focus.outline}"
     },
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
     "value": "2px solid #1f6feb",
-    "type": "border"
+    "type": "border",
+    "description": "Focus ring outline for keyboard navigation and accessibility."
   },
   "focus-outlineColor": {
     "key": "{focus.outlineColor}",