diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json
index 04aa215d..142d2470 100644
--- a/configurator/src/data/api-index.generated.json
+++ b/configurator/src/data/api-index.generated.json
@@ -2,7 +2,7 @@
   "_sync": {
     "generatedBy": "configurator/scripts/sync-api.mjs",
     "source": "docs/api-index.json",
-    "tokensHash": "d99951a174ca",
+    "tokensHash": "db509cdc88a8",
     "bundles": [
       "full",
       "optimal"
@@ -2571,7 +2571,7 @@
       "category": "Core tokens",
       "group": "action",
       "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.",
-      "note": "Deep action shade for high-contrast contexts.",
+      "note": "Deep action shade — alias of --sf-color-action-600.",
       "value": "var(--sf-color-action-600)",
       "aliasOf": "--sf-color-action-600",
       "registered": false,
@@ -2592,7 +2592,7 @@
       "category": "Core tokens",
       "group": "action",
       "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.",
-      "note": "Light action shade for soft accents.",
+      "note": "Light action shade for soft accents — alias of --sf-color-action-400.",
       "value": "var(--sf-color-action-400)",
       "aliasOf": "--sf-color-action-400",
       "registered": false,
@@ -2697,7 +2697,7 @@
       "category": "Core tokens",
       "group": "action",
       "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.",
-      "note": "Near-black action shade for maximum contrast on light surfaces.",
+      "note": "Near-black action shade for maximum contrast on light surfaces — alias of --sf-color-action-950.",
       "value": "var(--sf-color-action-950)",
       "aliasOf": "--sf-color-action-950",
       "registered": false,
@@ -2718,7 +2718,7 @@
       "category": "Core tokens",
       "group": "action",
       "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.",
-      "note": "Near-white action shade for maximum contrast on dark surfaces.",
+      "note": "Near-white action shade — alias of --sf-color-action-50.",
       "value": "var(--sf-color-action-50)",
       "aliasOf": "--sf-color-action-50",
       "registered": false,
@@ -2739,7 +2739,7 @@
       "category": "Core tokens",
       "group": "action",
       "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.",
-      "note": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "note": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-action-a5.",
       "value": "var(--sf-color-action-a5)",
       "aliasOf": "--sf-color-action-a5",
       "registered": false,
@@ -2760,7 +2760,7 @@
       "category": "Core tokens",
       "group": "action",
       "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.",
-      "note": "Extra-dark action shade.",
+      "note": "Extra-dark action shade — alias of --sf-color-action-800.",
       "value": "var(--sf-color-action-800)",
       "aliasOf": "--sf-color-action-800",
       "registered": false,
@@ -2781,7 +2781,7 @@
       "category": "Core tokens",
       "group": "action",
       "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.",
-      "note": "Extra-light action shade.",
+      "note": "Extra-light action shade — alias of --sf-color-action-200.",
       "value": "var(--sf-color-action-200)",
       "aliasOf": "--sf-color-action-200",
       "registered": false,
@@ -3285,7 +3285,7 @@
       "category": "Core tokens",
       "group": "base",
       "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.",
-      "note": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "note": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-base-a5.",
       "value": "var(--sf-color-base-a5)",
       "aliasOf": "--sf-color-base-a5",
       "registered": false,
@@ -4566,7 +4566,7 @@
       "category": "Core tokens",
       "group": "neutral",
       "description": "Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.",
-      "note": "Deep neutral shade for high-contrast contexts.",
+      "note": "Deep neutral shade — alias of --sf-color-neutral-600.",
       "value": "var(--sf-color-neutral-600)",
       "aliasOf": "--sf-color-neutral-600",
       "registered": false,
@@ -4713,7 +4713,7 @@
       "category": "Core tokens",
       "group": "neutral",
       "description": "Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.",
-      "note": "Near-white neutral shade.",
+      "note": "Near-white neutral shade — alias of --sf-color-neutral-50.",
       "value": "var(--sf-color-neutral-50)",
       "aliasOf": "--sf-color-neutral-50",
       "registered": false,
@@ -4734,7 +4734,7 @@
       "category": "Core tokens",
       "group": "neutral",
       "description": "Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.",
-      "note": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "note": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-neutral-a5.",
       "value": "var(--sf-color-neutral-a5)",
       "aliasOf": "--sf-color-neutral-a5",
       "registered": false,
@@ -4755,7 +4755,7 @@
       "category": "Core tokens",
       "group": "neutral",
       "description": "Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.",
-      "note": "Extra-dark neutral shade.",
+      "note": "Extra-dark neutral shade — alias of --sf-color-neutral-800.",
       "value": "var(--sf-color-neutral-800)",
       "aliasOf": "--sf-color-neutral-800",
       "registered": false,
@@ -4776,7 +4776,7 @@
       "category": "Core tokens",
       "group": "neutral",
       "description": "Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.",
-      "note": "Extra-light neutral shade.",
+      "note": "Extra-light neutral shade — alias of --sf-color-neutral-200.",
       "value": "var(--sf-color-neutral-200)",
       "aliasOf": "--sf-color-neutral-200",
       "registered": false,
@@ -5217,7 +5217,7 @@
       "category": "Core tokens",
       "group": "primary",
       "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.",
-      "note": "Deep primary shade.",
+      "note": "Deep primary shade — alias of --sf-color-primary-600.",
       "value": "var(--sf-color-primary-600)",
       "aliasOf": "--sf-color-primary-600",
       "registered": false,
@@ -5364,7 +5364,7 @@
       "category": "Core tokens",
       "group": "primary",
       "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.",
-      "note": "Near-white primary shade.",
+      "note": "Near-white primary shade — alias of --sf-color-primary-50.",
       "value": "var(--sf-color-primary-50)",
       "aliasOf": "--sf-color-primary-50",
       "registered": false,
@@ -5385,7 +5385,7 @@
       "category": "Core tokens",
       "group": "primary",
       "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.",
-      "note": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "note": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-primary-a5.",
       "value": "var(--sf-color-primary-a5)",
       "aliasOf": "--sf-color-primary-a5",
       "registered": false,
@@ -5406,7 +5406,7 @@
       "category": "Core tokens",
       "group": "primary",
       "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.",
-      "note": "Extra-dark primary shade.",
+      "note": "Extra-dark primary shade — alias of --sf-color-primary-800.",
       "value": "var(--sf-color-primary-800)",
       "aliasOf": "--sf-color-primary-800",
       "registered": false,
@@ -5427,7 +5427,7 @@
       "category": "Core tokens",
       "group": "primary",
       "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.",
-      "note": "Extra-light primary shade.",
+      "note": "Extra-light primary shade — alias of --sf-color-primary-200.",
       "value": "var(--sf-color-primary-200)",
       "aliasOf": "--sf-color-primary-200",
       "registered": false,
@@ -5889,7 +5889,7 @@
       "category": "Core tokens",
       "group": "secondary",
       "description": "Semantic secondary-color scale derived from --sf-color-secondary.",
-      "note": "Deep secondary shade.",
+      "note": "Deep secondary shade — alias of --sf-color-secondary-600.",
       "value": "var(--sf-color-secondary-600)",
       "aliasOf": "--sf-color-secondary-600",
       "registered": false,
@@ -6036,7 +6036,7 @@
       "category": "Core tokens",
       "group": "secondary",
       "description": "Semantic secondary-color scale derived from --sf-color-secondary.",
-      "note": "Near-white secondary shade.",
+      "note": "Near-white secondary shade — alias of --sf-color-secondary-50.",
       "value": "var(--sf-color-secondary-50)",
       "aliasOf": "--sf-color-secondary-50",
       "registered": false,
@@ -6057,7 +6057,7 @@
       "category": "Core tokens",
       "group": "secondary",
       "description": "Semantic secondary-color scale derived from --sf-color-secondary.",
-      "note": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "note": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-secondary-a5.",
       "value": "var(--sf-color-secondary-a5)",
       "aliasOf": "--sf-color-secondary-a5",
       "registered": false,
@@ -6078,7 +6078,7 @@
       "category": "Core tokens",
       "group": "secondary",
       "description": "Semantic secondary-color scale derived from --sf-color-secondary.",
-      "note": "Extra-dark secondary shade.",
+      "note": "Extra-dark secondary shade — alias of --sf-color-secondary-800.",
       "value": "var(--sf-color-secondary-800)",
       "aliasOf": "--sf-color-secondary-800",
       "registered": false,
@@ -6099,7 +6099,7 @@
       "category": "Core tokens",
       "group": "secondary",
       "description": "Semantic secondary-color scale derived from --sf-color-secondary.",
-      "note": "Extra-light secondary shade.",
+      "note": "Extra-light secondary shade — alias of --sf-color-secondary-200.",
       "value": "var(--sf-color-secondary-200)",
       "aliasOf": "--sf-color-secondary-200",
       "registered": false,
@@ -6771,7 +6771,7 @@
       "category": "Core tokens",
       "group": "tertiary",
       "description": "Semantic tertiary-color scale derived from --sf-color-tertiary.",
-      "note": "Deep tertiary shade.",
+      "note": "Deep tertiary shade — alias of --sf-color-tertiary-600.",
       "value": "var(--sf-color-tertiary-600)",
       "aliasOf": "--sf-color-tertiary-600",
       "registered": false,
@@ -6918,7 +6918,7 @@
       "category": "Core tokens",
       "group": "tertiary",
       "description": "Semantic tertiary-color scale derived from --sf-color-tertiary.",
-      "note": "Near-white tertiary shade.",
+      "note": "Near-white tertiary shade — alias of --sf-color-tertiary-50.",
       "value": "var(--sf-color-tertiary-50)",
       "aliasOf": "--sf-color-tertiary-50",
       "registered": false,
@@ -6939,7 +6939,7 @@
       "category": "Core tokens",
       "group": "tertiary",
       "description": "Semantic tertiary-color scale derived from --sf-color-tertiary.",
-      "note": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "note": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-tertiary-a5.",
       "value": "var(--sf-color-tertiary-a5)",
       "aliasOf": "--sf-color-tertiary-a5",
       "registered": false,
@@ -6960,7 +6960,7 @@
       "category": "Core tokens",
       "group": "tertiary",
       "description": "Semantic tertiary-color scale derived from --sf-color-tertiary.",
-      "note": "Extra-dark tertiary shade.",
+      "note": "Extra-dark tertiary shade — alias of --sf-color-tertiary-800.",
       "value": "var(--sf-color-tertiary-800)",
       "aliasOf": "--sf-color-tertiary-800",
       "registered": false,
@@ -6981,7 +6981,7 @@
       "category": "Core tokens",
       "group": "tertiary",
       "description": "Semantic tertiary-color scale derived from --sf-color-tertiary.",
-      "note": "Extra-light tertiary shade.",
+      "note": "Extra-light tertiary shade — alias of --sf-color-tertiary-200.",
       "value": "var(--sf-color-tertiary-200)",
       "aliasOf": "--sf-color-tertiary-200",
       "registered": false,
diff --git a/configurator/src/data/classes.generated.json b/configurator/src/data/classes.generated.json
index b7afc728..efcbf803 100644
--- a/configurator/src/data/classes.generated.json
+++ b/configurator/src/data/classes.generated.json
@@ -3120,7 +3120,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 10% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3130,7 +3130,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 20% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3140,7 +3140,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 30% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3150,7 +3150,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 40% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3160,7 +3160,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 50% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3170,7 +3170,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 60% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3180,7 +3180,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 70% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3190,7 +3190,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 80% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3200,7 +3200,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 90% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3210,7 +3210,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Intrinsic auto width (inline-size:auto) — sizes to the box’s normal layout.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3220,7 +3220,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Width sized to its own content (fit-content).",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3230,7 +3230,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Full width, uncapped (inline-size:100%, max-inline-size:none).",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3240,7 +3240,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Widest content-driven width (max-content) — grows to full intrinsic width, no wrapping.",
       "optional": true,
       "layer": "slashed.utilities"
     },
@@ -3250,7 +3250,7 @@
       "kind": "utility",
       "category": "Utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Narrowest content-driven width (min-content) — shrinks to the longest unbreakable content.",
       "optional": true,
       "layer": "slashed.utilities"
     },
diff --git a/dist/css-custom-data.json b/dist/css-custom-data.json
index 33cc860a..afe9ff85 100644
--- a/dist/css-custom-data.json
+++ b/dist/css-custom-data.json
@@ -618,12 +618,12 @@
     },
     {
       "name": "--sf-color-action-darker",
-      "description": "Deep action shade for high-contrast contexts.\n\nDefault: `var(--sf-color-action-600)`",
+      "description": "Deep action shade — alias of --sf-color-action-600.\n\nDefault: `var(--sf-color-action-600)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-action-lighter",
-      "description": "Light action shade for soft accents.\n\nDefault: `var(--sf-color-action-400)`",
+      "description": "Light action shade for soft accents — alias of --sf-color-action-400.\n\nDefault: `var(--sf-color-action-400)`",
       "syntax": "*"
     },
     {
@@ -648,27 +648,27 @@
     },
     {
       "name": "--sf-color-action-superdark",
-      "description": "Near-black action shade for maximum contrast on light surfaces.\n\nDefault: `var(--sf-color-action-950)`",
+      "description": "Near-black action shade for maximum contrast on light surfaces — alias of --sf-color-action-950.\n\nDefault: `var(--sf-color-action-950)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-action-superlight",
-      "description": "Near-white action shade for maximum contrast on dark surfaces.\n\nDefault: `var(--sf-color-action-50)`",
+      "description": "Near-white action shade — alias of --sf-color-action-50.\n\nDefault: `var(--sf-color-action-50)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-action-tint",
-      "description": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds.\n\nDefault: `var(--sf-color-action-a5)`",
+      "description": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-action-a5.\n\nDefault: `var(--sf-color-action-a5)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-action-xdark",
-      "description": "Extra-dark action shade.\n\nDefault: `var(--sf-color-action-800)`",
+      "description": "Extra-dark action shade — alias of --sf-color-action-800.\n\nDefault: `var(--sf-color-action-800)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-action-xlight",
-      "description": "Extra-light action shade.\n\nDefault: `var(--sf-color-action-200)`",
+      "description": "Extra-light action shade — alias of --sf-color-action-200.\n\nDefault: `var(--sf-color-action-200)`",
       "syntax": "*"
     },
     {
@@ -788,7 +788,7 @@
     },
     {
       "name": "--sf-color-base-tint",
-      "description": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds.\n\nDefault: `var(--sf-color-base-a5)`",
+      "description": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-base-a5.\n\nDefault: `var(--sf-color-base-a5)`",
       "syntax": "*"
     },
     {
@@ -1093,7 +1093,7 @@
     },
     {
       "name": "--sf-color-neutral-darker",
-      "description": "Deep neutral shade for high-contrast contexts.\n\nDefault: `var(--sf-color-neutral-600)`",
+      "description": "Deep neutral shade — alias of --sf-color-neutral-600.\n\nDefault: `var(--sf-color-neutral-600)`",
       "syntax": "*"
     },
     {
@@ -1128,22 +1128,22 @@
     },
     {
       "name": "--sf-color-neutral-superlight",
-      "description": "Near-white neutral shade.\n\nDefault: `var(--sf-color-neutral-50)`",
+      "description": "Near-white neutral shade — alias of --sf-color-neutral-50.\n\nDefault: `var(--sf-color-neutral-50)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-neutral-tint",
-      "description": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds.\n\nDefault: `var(--sf-color-neutral-a5)`",
+      "description": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-neutral-a5.\n\nDefault: `var(--sf-color-neutral-a5)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-neutral-xdark",
-      "description": "Extra-dark neutral shade.\n\nDefault: `var(--sf-color-neutral-800)`",
+      "description": "Extra-dark neutral shade — alias of --sf-color-neutral-800.\n\nDefault: `var(--sf-color-neutral-800)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-neutral-xlight",
-      "description": "Extra-light neutral shade.\n\nDefault: `var(--sf-color-neutral-200)`",
+      "description": "Extra-light neutral shade — alias of --sf-color-neutral-200.\n\nDefault: `var(--sf-color-neutral-200)`",
       "syntax": "*"
     },
     {
@@ -1248,7 +1248,7 @@
     },
     {
       "name": "--sf-color-primary-darker",
-      "description": "Deep primary shade.\n\nDefault: `var(--sf-color-primary-600)`",
+      "description": "Deep primary shade — alias of --sf-color-primary-600.\n\nDefault: `var(--sf-color-primary-600)`",
       "syntax": "*"
     },
     {
@@ -1283,22 +1283,22 @@
     },
     {
       "name": "--sf-color-primary-superlight",
-      "description": "Near-white primary shade.\n\nDefault: `var(--sf-color-primary-50)`",
+      "description": "Near-white primary shade — alias of --sf-color-primary-50.\n\nDefault: `var(--sf-color-primary-50)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-primary-tint",
-      "description": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds.\n\nDefault: `var(--sf-color-primary-a5)`",
+      "description": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-primary-a5.\n\nDefault: `var(--sf-color-primary-a5)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-primary-xdark",
-      "description": "Extra-dark primary shade.\n\nDefault: `var(--sf-color-primary-800)`",
+      "description": "Extra-dark primary shade — alias of --sf-color-primary-800.\n\nDefault: `var(--sf-color-primary-800)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-primary-xlight",
-      "description": "Extra-light primary shade.\n\nDefault: `var(--sf-color-primary-200)`",
+      "description": "Extra-light primary shade — alias of --sf-color-primary-200.\n\nDefault: `var(--sf-color-primary-200)`",
       "syntax": "*"
     },
     {
@@ -1408,7 +1408,7 @@
     },
     {
       "name": "--sf-color-secondary-darker",
-      "description": "Deep secondary shade.\n\nDefault: `var(--sf-color-secondary-600)`",
+      "description": "Deep secondary shade — alias of --sf-color-secondary-600.\n\nDefault: `var(--sf-color-secondary-600)`",
       "syntax": "*"
     },
     {
@@ -1443,22 +1443,22 @@
     },
     {
       "name": "--sf-color-secondary-superlight",
-      "description": "Near-white secondary shade.\n\nDefault: `var(--sf-color-secondary-50)`",
+      "description": "Near-white secondary shade — alias of --sf-color-secondary-50.\n\nDefault: `var(--sf-color-secondary-50)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-secondary-tint",
-      "description": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds.\n\nDefault: `var(--sf-color-secondary-a5)`",
+      "description": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-secondary-a5.\n\nDefault: `var(--sf-color-secondary-a5)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-secondary-xdark",
-      "description": "Extra-dark secondary shade.\n\nDefault: `var(--sf-color-secondary-800)`",
+      "description": "Extra-dark secondary shade — alias of --sf-color-secondary-800.\n\nDefault: `var(--sf-color-secondary-800)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-secondary-xlight",
-      "description": "Extra-light secondary shade.\n\nDefault: `var(--sf-color-secondary-200)`",
+      "description": "Extra-light secondary shade — alias of --sf-color-secondary-200.\n\nDefault: `var(--sf-color-secondary-200)`",
       "syntax": "*"
     },
     {
@@ -1618,7 +1618,7 @@
     },
     {
       "name": "--sf-color-tertiary-darker",
-      "description": "Deep tertiary shade.\n\nDefault: `var(--sf-color-tertiary-600)`",
+      "description": "Deep tertiary shade — alias of --sf-color-tertiary-600.\n\nDefault: `var(--sf-color-tertiary-600)`",
       "syntax": "*"
     },
     {
@@ -1653,22 +1653,22 @@
     },
     {
       "name": "--sf-color-tertiary-superlight",
-      "description": "Near-white tertiary shade.\n\nDefault: `var(--sf-color-tertiary-50)`",
+      "description": "Near-white tertiary shade — alias of --sf-color-tertiary-50.\n\nDefault: `var(--sf-color-tertiary-50)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-tertiary-tint",
-      "description": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds.\n\nDefault: `var(--sf-color-tertiary-a5)`",
+      "description": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-tertiary-a5.\n\nDefault: `var(--sf-color-tertiary-a5)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-tertiary-xdark",
-      "description": "Extra-dark tertiary shade.\n\nDefault: `var(--sf-color-tertiary-800)`",
+      "description": "Extra-dark tertiary shade — alias of --sf-color-tertiary-800.\n\nDefault: `var(--sf-color-tertiary-800)`",
       "syntax": "*"
     },
     {
       "name": "--sf-color-tertiary-xlight",
-      "description": "Extra-light tertiary shade.\n\nDefault: `var(--sf-color-tertiary-200)`",
+      "description": "Extra-light tertiary shade — alias of --sf-color-tertiary-200.\n\nDefault: `var(--sf-color-tertiary-200)`",
       "syntax": "*"
     },
     {
diff --git a/docs/api-index.json b/docs/api-index.json
index 94e1c870..29d97692 100644
--- a/docs/api-index.json
+++ b/docs/api-index.json
@@ -3253,7 +3253,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "action",
-      "description": "Deep action shade for high-contrast contexts.",
+      "description": "Deep action shade — alias of --sf-color-action-600.",
       "value": "var(--sf-color-action-600)",
       "aliasOf": "--sf-color-action-600",
       "registered": false,
@@ -3279,7 +3279,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "action",
-      "description": "Light action shade for soft accents.",
+      "description": "Light action shade for soft accents — alias of --sf-color-action-400.",
       "value": "var(--sf-color-action-400)",
       "aliasOf": "--sf-color-action-400",
       "registered": false,
@@ -3409,7 +3409,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "action",
-      "description": "Near-black action shade for maximum contrast on light surfaces.",
+      "description": "Near-black action shade for maximum contrast on light surfaces — alias of --sf-color-action-950.",
       "value": "var(--sf-color-action-950)",
       "aliasOf": "--sf-color-action-950",
       "registered": false,
@@ -3435,7 +3435,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "action",
-      "description": "Near-white action shade for maximum contrast on dark surfaces.",
+      "description": "Near-white action shade — alias of --sf-color-action-50.",
       "value": "var(--sf-color-action-50)",
       "aliasOf": "--sf-color-action-50",
       "registered": false,
@@ -3461,7 +3461,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "action",
-      "description": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "description": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-action-a5.",
       "value": "var(--sf-color-action-a5)",
       "aliasOf": "--sf-color-action-a5",
       "registered": false,
@@ -3487,7 +3487,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "action",
-      "description": "Extra-dark action shade.",
+      "description": "Extra-dark action shade — alias of --sf-color-action-800.",
       "value": "var(--sf-color-action-800)",
       "aliasOf": "--sf-color-action-800",
       "registered": false,
@@ -3513,7 +3513,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "action",
-      "description": "Extra-light action shade.",
+      "description": "Extra-light action shade — alias of --sf-color-action-200.",
       "value": "var(--sf-color-action-200)",
       "aliasOf": "--sf-color-action-200",
       "registered": false,
@@ -4137,7 +4137,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "base",
-      "description": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "description": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-base-a5.",
       "value": "var(--sf-color-base-a5)",
       "aliasOf": "--sf-color-base-a5",
       "registered": false,
@@ -5723,7 +5723,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "neutral",
-      "description": "Deep neutral shade for high-contrast contexts.",
+      "description": "Deep neutral shade — alias of --sf-color-neutral-600.",
       "value": "var(--sf-color-neutral-600)",
       "aliasOf": "--sf-color-neutral-600",
       "registered": false,
@@ -5905,7 +5905,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "neutral",
-      "description": "Near-white neutral shade.",
+      "description": "Near-white neutral shade — alias of --sf-color-neutral-50.",
       "value": "var(--sf-color-neutral-50)",
       "aliasOf": "--sf-color-neutral-50",
       "registered": false,
@@ -5931,7 +5931,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "neutral",
-      "description": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "description": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-neutral-a5.",
       "value": "var(--sf-color-neutral-a5)",
       "aliasOf": "--sf-color-neutral-a5",
       "registered": false,
@@ -5957,7 +5957,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "neutral",
-      "description": "Extra-dark neutral shade.",
+      "description": "Extra-dark neutral shade — alias of --sf-color-neutral-800.",
       "value": "var(--sf-color-neutral-800)",
       "aliasOf": "--sf-color-neutral-800",
       "registered": false,
@@ -5983,7 +5983,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "neutral",
-      "description": "Extra-light neutral shade.",
+      "description": "Extra-light neutral shade — alias of --sf-color-neutral-200.",
       "value": "var(--sf-color-neutral-200)",
       "aliasOf": "--sf-color-neutral-200",
       "registered": false,
@@ -6529,7 +6529,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "primary",
-      "description": "Deep primary shade.",
+      "description": "Deep primary shade — alias of --sf-color-primary-600.",
       "value": "var(--sf-color-primary-600)",
       "aliasOf": "--sf-color-primary-600",
       "registered": false,
@@ -6711,7 +6711,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "primary",
-      "description": "Near-white primary shade.",
+      "description": "Near-white primary shade — alias of --sf-color-primary-50.",
       "value": "var(--sf-color-primary-50)",
       "aliasOf": "--sf-color-primary-50",
       "registered": false,
@@ -6737,7 +6737,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "primary",
-      "description": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "description": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-primary-a5.",
       "value": "var(--sf-color-primary-a5)",
       "aliasOf": "--sf-color-primary-a5",
       "registered": false,
@@ -6763,7 +6763,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "primary",
-      "description": "Extra-dark primary shade.",
+      "description": "Extra-dark primary shade — alias of --sf-color-primary-800.",
       "value": "var(--sf-color-primary-800)",
       "aliasOf": "--sf-color-primary-800",
       "registered": false,
@@ -6789,7 +6789,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "primary",
-      "description": "Extra-light primary shade.",
+      "description": "Extra-light primary shade — alias of --sf-color-primary-200.",
       "value": "var(--sf-color-primary-200)",
       "aliasOf": "--sf-color-primary-200",
       "registered": false,
@@ -7361,7 +7361,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "secondary",
-      "description": "Deep secondary shade.",
+      "description": "Deep secondary shade — alias of --sf-color-secondary-600.",
       "value": "var(--sf-color-secondary-600)",
       "aliasOf": "--sf-color-secondary-600",
       "registered": false,
@@ -7543,7 +7543,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "secondary",
-      "description": "Near-white secondary shade.",
+      "description": "Near-white secondary shade — alias of --sf-color-secondary-50.",
       "value": "var(--sf-color-secondary-50)",
       "aliasOf": "--sf-color-secondary-50",
       "registered": false,
@@ -7569,7 +7569,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "secondary",
-      "description": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "description": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-secondary-a5.",
       "value": "var(--sf-color-secondary-a5)",
       "aliasOf": "--sf-color-secondary-a5",
       "registered": false,
@@ -7595,7 +7595,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "secondary",
-      "description": "Extra-dark secondary shade.",
+      "description": "Extra-dark secondary shade — alias of --sf-color-secondary-800.",
       "value": "var(--sf-color-secondary-800)",
       "aliasOf": "--sf-color-secondary-800",
       "registered": false,
@@ -7621,7 +7621,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "secondary",
-      "description": "Extra-light secondary shade.",
+      "description": "Extra-light secondary shade — alias of --sf-color-secondary-200.",
       "value": "var(--sf-color-secondary-200)",
       "aliasOf": "--sf-color-secondary-200",
       "registered": false,
@@ -8453,7 +8453,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "tertiary",
-      "description": "Deep tertiary shade.",
+      "description": "Deep tertiary shade — alias of --sf-color-tertiary-600.",
       "value": "var(--sf-color-tertiary-600)",
       "aliasOf": "--sf-color-tertiary-600",
       "registered": false,
@@ -8635,7 +8635,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "tertiary",
-      "description": "Near-white tertiary shade.",
+      "description": "Near-white tertiary shade — alias of --sf-color-tertiary-50.",
       "value": "var(--sf-color-tertiary-50)",
       "aliasOf": "--sf-color-tertiary-50",
       "registered": false,
@@ -8661,7 +8661,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "tertiary",
-      "description": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+      "description": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-tertiary-a5.",
       "value": "var(--sf-color-tertiary-a5)",
       "aliasOf": "--sf-color-tertiary-a5",
       "registered": false,
@@ -8687,7 +8687,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "tertiary",
-      "description": "Extra-dark tertiary shade.",
+      "description": "Extra-dark tertiary shade — alias of --sf-color-tertiary-800.",
       "value": "var(--sf-color-tertiary-800)",
       "aliasOf": "--sf-color-tertiary-800",
       "registered": false,
@@ -8713,7 +8713,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "tertiary",
-      "description": "Extra-light tertiary shade.",
+      "description": "Extra-light tertiary shade — alias of --sf-color-tertiary-200.",
       "value": "var(--sf-color-tertiary-200)",
       "aliasOf": "--sf-color-tertiary-200",
       "registered": false,
@@ -26415,7 +26415,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 10% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26437,7 +26437,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 20% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26459,7 +26459,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 30% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26481,7 +26481,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 40% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26503,7 +26503,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 50% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26525,7 +26525,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 60% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26547,7 +26547,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 70% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26569,7 +26569,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 80% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26591,7 +26591,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Caps width at 90% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26613,7 +26613,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Intrinsic auto width (inline-size:auto) — sizes to the box’s normal layout.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26635,7 +26635,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Width sized to its own content (fit-content).",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26657,7 +26657,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Full width, uncapped (inline-size:100%, max-inline-size:none).",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26679,7 +26679,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Widest content-driven width (max-content) — grows to full intrinsic width, no wrapping.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
@@ -26701,7 +26701,7 @@
       "category": "Utilities",
       "area": "utilities",
       "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
-      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
+      "description": "Narrowest content-driven width (min-content) — shrinks to the longest unbreakable content.",
       "isVariant": false,
       "baseClass": null,
       "optional": true,
diff --git a/docs/api-index.md b/docs/api-index.md
index ea0acb94..45cb3e28 100644
--- a/docs/api-index.md
+++ b/docs/api-index.md
@@ -133,17 +133,17 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-action-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.05)` | 5% opacity action tint. Barely-there hover highlight. |
 | `--sf-color-action-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.50)` | 50% opacity action tint. Mid-transparency badge or overlay. |
 | `--sf-color-action-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.80)` | 80% opacity action tint. |
-| `--sf-color-action-darker` | PUBLIC | consumption | color | `var(--sf-color-action-600)` | Deep action shade for high-contrast contexts. |
-| `--sf-color-action-lighter` | PUBLIC | consumption | color | `var(--sf-color-action-400)` | Light action shade for soft accents. |
+| `--sf-color-action-darker` | PUBLIC | consumption | color | `var(--sf-color-action-600)` | Deep action shade — alias of --sf-color-action-600. |
+| `--sf-color-action-lighter` | PUBLIC | consumption | color | `var(--sf-color-action-400)` | Light action shade for soft accents — alias of --sf-color-action-400. |
 | `--sf-color-action-muted` | PUBLIC | consumption | color | `var(--sf-color-action-a30)` | Medium action fill — outlined button hover backgrounds. |
 | `--sf-color-action-source-dark` | PUBLIC | knob | color | `oklch(0.70 0.198 235)` | Registered <color> dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without <color> registration the browser cannot interpolate and transitions snap at 50%. |
 | `--sf-color-action-source-light` | PUBLIC | knob | color | `oklch(0.50 0.22 235)` | OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes. |
 | `--sf-color-action-subtle` | PUBLIC | consumption | color | `var(--sf-color-action-a10)` | Lightest action tint — selected rows, active nav, chips. |
-| `--sf-color-action-superdark` | PUBLIC | consumption | color | `var(--sf-color-action-950)` | Near-black action shade for maximum contrast on light surfaces. |
-| `--sf-color-action-superlight` | PUBLIC | consumption | color | `var(--sf-color-action-50)` | Near-white action shade for maximum contrast on dark surfaces. |
-| `--sf-color-action-tint` | PUBLIC | consumption | color | `var(--sf-color-action-a5)` | Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
-| `--sf-color-action-xdark` | PUBLIC | consumption | color | `var(--sf-color-action-800)` | Extra-dark action shade. |
-| `--sf-color-action-xlight` | PUBLIC | consumption | color | `var(--sf-color-action-200)` | Extra-light action shade. |
+| `--sf-color-action-superdark` | PUBLIC | consumption | color | `var(--sf-color-action-950)` | Near-black action shade for maximum contrast on light surfaces — alias of --sf-color-action-950. |
+| `--sf-color-action-superlight` | PUBLIC | consumption | color | `var(--sf-color-action-50)` | Near-white action shade — alias of --sf-color-action-50. |
+| `--sf-color-action-tint` | PUBLIC | consumption | color | `var(--sf-color-action-a5)` | Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-action-a5. |
+| `--sf-color-action-xdark` | PUBLIC | consumption | color | `var(--sf-color-action-800)` | Extra-dark action shade — alias of --sf-color-action-800. |
+| `--sf-color-action-xlight` | PUBLIC | consumption | color | `var(--sf-color-action-200)` | Extra-light action shade — alias of --sf-color-action-200. |
 | `--sf-color-base` | PUBLIC | consumption | color | `light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))` | Mode-adaptive base surface color. Drives the page canvas and the surface elevation family; not an interactive/brand role. |
 | `--sf-color-base--active` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h)` | Pressed/active surface derived from --sf-color-base for subtle background interactions. |
 | `--sf-color-base--hover` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h)` | Hover-state surface derived from --sf-color-base for subtle background interactions. |
@@ -167,7 +167,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-base-source-dark` | PUBLIC | knob | color | `oklch(0.22 0.003 250)` | Registered <color> dark counterpart of --sf-color-base. Keep near-black for dark-mode surfaces and elevation offsets. |
 | `--sf-color-base-source-light` | PUBLIC | knob | color | `oklch(0.96 0.006 250)` | OKLCH source color for the light-mode base surface. Keep near-white so --sf-color-bg, --sf-color-surface, and raised/inset levels have room to separate. |
 | `--sf-color-base-subtle` | PUBLIC | consumption | color | `var(--sf-color-base-a10)` | Subtle base-surface tint for low-emphasis backgrounds. |
-| `--sf-color-base-tint` | PUBLIC | consumption | color | `var(--sf-color-base-a5)` | Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
+| `--sf-color-base-tint` | PUBLIC | consumption | color | `var(--sf-color-base-a5)` | Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-base-a5. |
 | `--sf-color-bg` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) calc(l + 0.02) c h)` | Base page / component background. The canvas all other surfaces layer on top of. |
 | `--sf-color-bg--active` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.12)` | Background tint for pressed/active interactive elements. |
 | `--sf-color-bg--disabled` | PUBLIC | consumption | color | `var(--sf-color-inset)` | Background for disabled interactive elements. |
@@ -228,17 +228,17 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-neutral-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.05)` | 5% opacity neutral tint. |
 | `--sf-color-neutral-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.50)` | 50% opacity neutral tint. |
 | `--sf-color-neutral-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.80)` | 80% opacity neutral tint. |
-| `--sf-color-neutral-darker` | PUBLIC | consumption | color | `var(--sf-color-neutral-600)` | Deep neutral shade for high-contrast contexts. |
+| `--sf-color-neutral-darker` | PUBLIC | consumption | color | `var(--sf-color-neutral-600)` | Deep neutral shade — alias of --sf-color-neutral-600. |
 | `--sf-color-neutral-lighter` | PUBLIC | consumption | color | `var(--sf-color-neutral-400)` | Light neutral shade for soft accents — alias of --sf-color-neutral-400. |
 | `--sf-color-neutral-muted` | PUBLIC | consumption | color | `var(--sf-color-neutral-a30)` | Muted neutral fill for low-emphasis contexts. |
 | `--sf-color-neutral-source-dark` | PUBLIC | knob | color | `oklch(0.69 0.0225 260)` | Registered <color> dark counterpart of --sf-color-neutral. |
 | `--sf-color-neutral-source-light` | PUBLIC | knob | color | `oklch(0.52 0.025 260)` | OKLCH lightness source for the neutral color. |
 | `--sf-color-neutral-subtle` | PUBLIC | consumption | color | `var(--sf-color-neutral-a10)` | Lightest neutral semantic tint. |
 | `--sf-color-neutral-superdark` | PUBLIC | consumption | color | `var(--sf-color-neutral-950)` | Near-black neutral shade for maximum contrast on light surfaces — alias of --sf-color-neutral-950. |
-| `--sf-color-neutral-superlight` | PUBLIC | consumption | color | `var(--sf-color-neutral-50)` | Near-white neutral shade. |
-| `--sf-color-neutral-tint` | PUBLIC | consumption | color | `var(--sf-color-neutral-a5)` | Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
-| `--sf-color-neutral-xdark` | PUBLIC | consumption | color | `var(--sf-color-neutral-800)` | Extra-dark neutral shade. |
-| `--sf-color-neutral-xlight` | PUBLIC | consumption | color | `var(--sf-color-neutral-200)` | Extra-light neutral shade. |
+| `--sf-color-neutral-superlight` | PUBLIC | consumption | color | `var(--sf-color-neutral-50)` | Near-white neutral shade — alias of --sf-color-neutral-50. |
+| `--sf-color-neutral-tint` | PUBLIC | consumption | color | `var(--sf-color-neutral-a5)` | Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-neutral-a5. |
+| `--sf-color-neutral-xdark` | PUBLIC | consumption | color | `var(--sf-color-neutral-800)` | Extra-dark neutral shade — alias of --sf-color-neutral-800. |
+| `--sf-color-neutral-xlight` | PUBLIC | consumption | color | `var(--sf-color-neutral-200)` | Extra-light neutral shade — alias of --sf-color-neutral-200. |
 | `--sf-color-overlay` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) l c h / 0.9)` | Overlay surface for floating panels, sheets, and modals. |
 | `--sf-color-primary` | PUBLIC | consumption | color | `light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Primary brand palette color. Independent from --sf-color-action by default; override either source token to couple or separate brand and action roles. |
 | `--sf-color-primary--active` | PUBLIC | consumption | color | `var(--sf-color-primary-xdark)` | Primary color at pressed/active brightness. |
@@ -259,17 +259,17 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-primary-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) l c h / 0.05)` | 5% opacity primary tint. |
 | `--sf-color-primary-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) l c h / 0.50)` | 50% opacity primary tint. |
 | `--sf-color-primary-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) l c h / 0.80)` | 80% opacity primary tint. |
-| `--sf-color-primary-darker` | PUBLIC | consumption | color | `var(--sf-color-primary-600)` | Deep primary shade. |
+| `--sf-color-primary-darker` | PUBLIC | consumption | color | `var(--sf-color-primary-600)` | Deep primary shade — alias of --sf-color-primary-600. |
 | `--sf-color-primary-lighter` | PUBLIC | consumption | color | `var(--sf-color-primary-400)` | Light primary shade for soft accents — alias of --sf-color-primary-400. |
 | `--sf-color-primary-muted` | PUBLIC | consumption | color | `var(--sf-color-primary-a30)` | Muted primary fill. |
 | `--sf-color-primary-source-dark` | PUBLIC | knob | color | `oklch(0.715 0.243 264)` | Registered <color> dark counterpart of --sf-color-primary. |
 | `--sf-color-primary-source-light` | PUBLIC | knob | color | `oklch(0.47 0.27 264)` | OKLCH lightness source for the primary color. |
 | `--sf-color-primary-subtle` | PUBLIC | consumption | color | `var(--sf-color-primary-a10)` | Lightest primary semantic tint. |
 | `--sf-color-primary-superdark` | PUBLIC | consumption | color | `var(--sf-color-primary-950)` | Near-black primary shade for maximum contrast on light surfaces — alias of --sf-color-primary-950. |
-| `--sf-color-primary-superlight` | PUBLIC | consumption | color | `var(--sf-color-primary-50)` | Near-white primary shade. |
-| `--sf-color-primary-tint` | PUBLIC | consumption | color | `var(--sf-color-primary-a5)` | Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
-| `--sf-color-primary-xdark` | PUBLIC | consumption | color | `var(--sf-color-primary-800)` | Extra-dark primary shade. |
-| `--sf-color-primary-xlight` | PUBLIC | consumption | color | `var(--sf-color-primary-200)` | Extra-light primary shade. |
+| `--sf-color-primary-superlight` | PUBLIC | consumption | color | `var(--sf-color-primary-50)` | Near-white primary shade — alias of --sf-color-primary-50. |
+| `--sf-color-primary-tint` | PUBLIC | consumption | color | `var(--sf-color-primary-a5)` | Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-primary-a5. |
+| `--sf-color-primary-xdark` | PUBLIC | consumption | color | `var(--sf-color-primary-800)` | Extra-dark primary shade — alias of --sf-color-primary-800. |
+| `--sf-color-primary-xlight` | PUBLIC | consumption | color | `var(--sf-color-primary-200)` | Extra-light primary shade — alias of --sf-color-primary-200. |
 | `--sf-color-raised` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) calc(l + 0.04) c h)` | Elevated card surface that floats above the page background. |
 | `--sf-color-scheme` | PUBLIC | knob | color | `light dark` | Preferred color scheme hint (light / dark / normal). Sent to the browser to influence UA chrome styling. |
 | `--sf-color-secondary` | PUBLIC | consumption | color | `light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Raw secondary palette token for the secondary brand color. |
@@ -291,17 +291,17 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-secondary-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) l c h / 0.05)` | 5% opacity secondary tint. |
 | `--sf-color-secondary-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) l c h / 0.50)` | 50% opacity secondary tint. |
 | `--sf-color-secondary-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) l c h / 0.80)` | 80% opacity secondary tint. |
-| `--sf-color-secondary-darker` | PUBLIC | consumption | color | `var(--sf-color-secondary-600)` | Deep secondary shade. |
+| `--sf-color-secondary-darker` | PUBLIC | consumption | color | `var(--sf-color-secondary-600)` | Deep secondary shade — alias of --sf-color-secondary-600. |
 | `--sf-color-secondary-lighter` | PUBLIC | consumption | color | `var(--sf-color-secondary-400)` | Light secondary shade for soft accents — alias of --sf-color-secondary-400. |
 | `--sf-color-secondary-muted` | PUBLIC | consumption | color | `var(--sf-color-secondary-a30)` | Muted secondary fill. |
 | `--sf-color-secondary-source-dark` | PUBLIC | knob | color | `oklch(0.84 0.036 264)` | Registered <color> dark counterpart of --sf-color-secondary. |
 | `--sf-color-secondary-source-light` | PUBLIC | knob | color | `oklch(0.22 0.04 264)` | OKLCH lightness source for the secondary color. |
 | `--sf-color-secondary-subtle` | PUBLIC | consumption | color | `var(--sf-color-secondary-a10)` | Lightest secondary semantic tint. |
 | `--sf-color-secondary-superdark` | PUBLIC | consumption | color | `var(--sf-color-secondary-950)` | Near-black secondary shade for maximum contrast on light surfaces — alias of --sf-color-secondary-950. |
-| `--sf-color-secondary-superlight` | PUBLIC | consumption | color | `var(--sf-color-secondary-50)` | Near-white secondary shade. |
-| `--sf-color-secondary-tint` | PUBLIC | consumption | color | `var(--sf-color-secondary-a5)` | Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
-| `--sf-color-secondary-xdark` | PUBLIC | consumption | color | `var(--sf-color-secondary-800)` | Extra-dark secondary shade. |
-| `--sf-color-secondary-xlight` | PUBLIC | consumption | color | `var(--sf-color-secondary-200)` | Extra-light secondary shade. |
+| `--sf-color-secondary-superlight` | PUBLIC | consumption | color | `var(--sf-color-secondary-50)` | Near-white secondary shade — alias of --sf-color-secondary-50. |
+| `--sf-color-secondary-tint` | PUBLIC | consumption | color | `var(--sf-color-secondary-a5)` | Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-secondary-a5. |
+| `--sf-color-secondary-xdark` | PUBLIC | consumption | color | `var(--sf-color-secondary-800)` | Extra-dark secondary shade — alias of --sf-color-secondary-800. |
+| `--sf-color-secondary-xlight` | PUBLIC | consumption | color | `var(--sf-color-secondary-200)` | Extra-light secondary shade — alias of --sf-color-secondary-200. |
 | `--sf-color-selection-bg` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-action-source-light) l c h / 0.28), oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55) )` | Background color applied to browser text selections. |
 | `--sf-color-selection-bg--alt` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55), oklch(from var(--sf-color-action-source-light) l c h / 0.28) )` | Alt selection background — the inverse-scheme highlight fill for surfaces that deliberately flip colour scheme (e.g. a dark hero in light mode). |
 | `--sf-color-selection-text` | PUBLIC | knob | color | `inherit` | Text color inside browser text selections. |
@@ -333,17 +333,17 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-tertiary-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) l c h / 0.05)` | 5% opacity tertiary tint. |
 | `--sf-color-tertiary-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) l c h / 0.50)` | 50% opacity tertiary tint. |
 | `--sf-color-tertiary-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) l c h / 0.80)` | 80% opacity tertiary tint. |
-| `--sf-color-tertiary-darker` | PUBLIC | consumption | color | `var(--sf-color-tertiary-600)` | Deep tertiary shade. |
+| `--sf-color-tertiary-darker` | PUBLIC | consumption | color | `var(--sf-color-tertiary-600)` | Deep tertiary shade — alias of --sf-color-tertiary-600. |
 | `--sf-color-tertiary-lighter` | PUBLIC | consumption | color | `var(--sf-color-tertiary-400)` | Light tertiary shade for soft accents — alias of --sf-color-tertiary-400. |
 | `--sf-color-tertiary-muted` | PUBLIC | consumption | color | `var(--sf-color-tertiary-a30)` | Muted tertiary fill. |
 | `--sf-color-tertiary-source-dark` | PUBLIC | knob | color | `oklch(0.74 0.198 295)` | Registered <color> dark counterpart of --sf-color-tertiary. |
 | `--sf-color-tertiary-source-light` | PUBLIC | knob | color | `oklch(0.42 0.22 295)` | OKLCH lightness source for the tertiary color. |
 | `--sf-color-tertiary-subtle` | PUBLIC | consumption | color | `var(--sf-color-tertiary-a10)` | Lightest tertiary semantic tint. |
 | `--sf-color-tertiary-superdark` | PUBLIC | consumption | color | `var(--sf-color-tertiary-950)` | Near-black tertiary shade for maximum contrast on light surfaces — alias of --sf-color-tertiary-950. |
-| `--sf-color-tertiary-superlight` | PUBLIC | consumption | color | `var(--sf-color-tertiary-50)` | Near-white tertiary shade. |
-| `--sf-color-tertiary-tint` | PUBLIC | consumption | color | `var(--sf-color-tertiary-a5)` | Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
-| `--sf-color-tertiary-xdark` | PUBLIC | consumption | color | `var(--sf-color-tertiary-800)` | Extra-dark tertiary shade. |
-| `--sf-color-tertiary-xlight` | PUBLIC | consumption | color | `var(--sf-color-tertiary-200)` | Extra-light tertiary shade. |
+| `--sf-color-tertiary-superlight` | PUBLIC | consumption | color | `var(--sf-color-tertiary-50)` | Near-white tertiary shade — alias of --sf-color-tertiary-50. |
+| `--sf-color-tertiary-tint` | PUBLIC | consumption | color | `var(--sf-color-tertiary-a5)` | Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-tertiary-a5. |
+| `--sf-color-tertiary-xdark` | PUBLIC | consumption | color | `var(--sf-color-tertiary-800)` | Extra-dark tertiary shade — alias of --sf-color-tertiary-800. |
+| `--sf-color-tertiary-xlight` | PUBLIC | consumption | color | `var(--sf-color-tertiary-200)` | Extra-light tertiary shade — alias of --sf-color-tertiary-200. |
 | `--sf-color-text` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )` | Primary text color. Contrasts against --sf-color-bg for body copy. |
 | `--sf-color-text--disabled` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h) )` | Text color for disabled UI elements. Intentionally low contrast. |
 | `--sf-color-text--inverse` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4), 0.98) c h), oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h) )` | Text color for use on dark/inverted backgrounds. |
@@ -1146,18 +1146,18 @@ and a short description. The machine-readable companion (with all columns) is
 | `.sf-text-xl` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
 | `.sf-text-xs` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
 | `.sf-visible` | PUBLIC | utility | VISIBILITY HELPERS (.sf-invisible / .sf-visible) | Visibility helper (optional/utilities.css) — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent. |
-| `.sf-width-10` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-20` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-30` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-40` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-50` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-60` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-70` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-80` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-90` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-auto` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-fit` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-full` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-max` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
-| `.sf-width-min` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
+| `.sf-width-10` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 10% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-20` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 20% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-30` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 30% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-40` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 40% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-50` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 50% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-60` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 60% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-70` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 70% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-80` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 80% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-90` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Caps width at 90% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents. |
+| `.sf-width-auto` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Intrinsic auto width (inline-size:auto) — sizes to the box’s normal layout. |
+| `.sf-width-fit` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Width sized to its own content (fit-content). |
+| `.sf-width-full` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Full width, uncapped (inline-size:100%, max-inline-size:none). |
+| `.sf-width-max` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Widest content-driven width (max-content) — grows to full intrinsic width, no wrapping. |
+| `.sf-width-min` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Narrowest content-driven width (min-content) — shrinks to the longest unbreakable content. |
 
diff --git a/docs/token-annotations.json b/docs/token-annotations.json
index ea8113aa..56c2420f 100644
--- a/docs/token-annotations.json
+++ b/docs/token-annotations.json
@@ -190,18 +190,18 @@
     "--sf-color-action-muted": "Medium action fill — outlined button hover backgrounds.",
     "--sf-color-action--hover": "Action color at hover brightness.",
     "--sf-color-action--active": "Action color at pressed/active brightness.",
-    "--sf-color-action-darker": "Deep action shade for high-contrast contexts.",
-    "--sf-color-action-lighter": "Light action shade for soft accents.",
-    "--sf-color-action-tint": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
-    "--sf-color-action-xdark": "Extra-dark action shade.",
-    "--sf-color-action-xlight": "Extra-light action shade.",
-    "--sf-color-action-superdark": "Near-black action shade for maximum contrast on light surfaces.",
-    "--sf-color-action-superlight": "Near-white action shade for maximum contrast on dark surfaces.",
+    "--sf-color-action-darker": "Deep action shade — alias of --sf-color-action-600.",
+    "--sf-color-action-lighter": "Light action shade for soft accents — alias of --sf-color-action-400.",
+    "--sf-color-action-tint": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-action-a5.",
+    "--sf-color-action-xdark": "Extra-dark action shade — alias of --sf-color-action-800.",
+    "--sf-color-action-xlight": "Extra-light action shade — alias of --sf-color-action-200.",
+    "--sf-color-action-superdark": "Near-black action shade for maximum contrast on light surfaces — alias of --sf-color-action-950.",
+    "--sf-color-action-superlight": "Near-white action shade — alias of --sf-color-action-50.",
     "--sf-color-base-subtle": "Subtle base-surface tint for low-emphasis backgrounds.",
     "--sf-color-base-muted": "Medium base-surface fill for muted containers or overlays.",
     "--sf-color-base--hover": "Hover-state surface derived from --sf-color-base for subtle background interactions.",
     "--sf-color-base--active": "Pressed/active surface derived from --sf-color-base for subtle background interactions.",
-    "--sf-color-base-tint": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "--sf-color-base-tint": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-base-a5.",
     "--sf-color-selection-bg": "Background color applied to browser text selections.",
     "--sf-color-mark-bg": "Background color for highlighted <mark> elements.",
     "--sf-color-code-text": "Text color for inline code and monospace preformatted text.",
@@ -519,13 +519,13 @@
     "--sf-color-neutral-muted": "Muted neutral fill for low-emphasis contexts.",
     "--sf-color-neutral--hover": "Neutral color at hover brightness.",
     "--sf-color-neutral--active": "Neutral color at pressed/active brightness.",
-    "--sf-color-neutral-darker": "Deep neutral shade for high-contrast contexts.",
+    "--sf-color-neutral-darker": "Deep neutral shade — alias of --sf-color-neutral-600.",
     "--sf-color-neutral-lighter": "Light neutral shade for soft accents — alias of --sf-color-neutral-400.",
-    "--sf-color-neutral-tint": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
-    "--sf-color-neutral-xdark": "Extra-dark neutral shade.",
-    "--sf-color-neutral-xlight": "Extra-light neutral shade.",
+    "--sf-color-neutral-tint": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-neutral-a5.",
+    "--sf-color-neutral-xdark": "Extra-dark neutral shade — alias of --sf-color-neutral-800.",
+    "--sf-color-neutral-xlight": "Extra-light neutral shade — alias of --sf-color-neutral-200.",
     "--sf-color-neutral-superdark": "Near-black neutral shade for maximum contrast on light surfaces — alias of --sf-color-neutral-950.",
-    "--sf-color-neutral-superlight": "Near-white neutral shade.",
+    "--sf-color-neutral-superlight": "Near-white neutral shade — alias of --sf-color-neutral-50.",
     "--sf-color-primary-50": "Lightest primary tint.",
     "--sf-color-primary-100": "Very light primary shade.",
     "--sf-color-primary-200": "Light primary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds.",
@@ -546,13 +546,13 @@
     "--sf-color-primary-muted": "Muted primary fill.",
     "--sf-color-primary--hover": "Primary color at hover brightness.",
     "--sf-color-primary--active": "Primary color at pressed/active brightness.",
-    "--sf-color-primary-darker": "Deep primary shade.",
+    "--sf-color-primary-darker": "Deep primary shade — alias of --sf-color-primary-600.",
     "--sf-color-primary-lighter": "Light primary shade for soft accents — alias of --sf-color-primary-400.",
-    "--sf-color-primary-tint": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
-    "--sf-color-primary-xdark": "Extra-dark primary shade.",
-    "--sf-color-primary-xlight": "Extra-light primary shade.",
+    "--sf-color-primary-tint": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-primary-a5.",
+    "--sf-color-primary-xdark": "Extra-dark primary shade — alias of --sf-color-primary-800.",
+    "--sf-color-primary-xlight": "Extra-light primary shade — alias of --sf-color-primary-200.",
     "--sf-color-primary-superdark": "Near-black primary shade for maximum contrast on light surfaces — alias of --sf-color-primary-950.",
-    "--sf-color-primary-superlight": "Near-white primary shade.",
+    "--sf-color-primary-superlight": "Near-white primary shade — alias of --sf-color-primary-50.",
     "--sf-color-secondary-50": "Lightest secondary tint.",
     "--sf-color-secondary-100": "Very light secondary shade.",
     "--sf-color-secondary-200": "Light secondary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds.",
@@ -573,13 +573,13 @@
     "--sf-color-secondary-muted": "Muted secondary fill.",
     "--sf-color-secondary--hover": "Secondary color at hover brightness.",
     "--sf-color-secondary--active": "Secondary color at pressed/active brightness.",
-    "--sf-color-secondary-darker": "Deep secondary shade.",
+    "--sf-color-secondary-darker": "Deep secondary shade — alias of --sf-color-secondary-600.",
     "--sf-color-secondary-lighter": "Light secondary shade for soft accents — alias of --sf-color-secondary-400.",
-    "--sf-color-secondary-tint": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
-    "--sf-color-secondary-xdark": "Extra-dark secondary shade.",
-    "--sf-color-secondary-xlight": "Extra-light secondary shade.",
+    "--sf-color-secondary-tint": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-secondary-a5.",
+    "--sf-color-secondary-xdark": "Extra-dark secondary shade — alias of --sf-color-secondary-800.",
+    "--sf-color-secondary-xlight": "Extra-light secondary shade — alias of --sf-color-secondary-200.",
     "--sf-color-secondary-superdark": "Near-black secondary shade for maximum contrast on light surfaces — alias of --sf-color-secondary-950.",
-    "--sf-color-secondary-superlight": "Near-white secondary shade.",
+    "--sf-color-secondary-superlight": "Near-white secondary shade — alias of --sf-color-secondary-50.",
     "--sf-color-tertiary-50": "Lightest tertiary tint.",
     "--sf-color-tertiary-100": "Very light tertiary shade.",
     "--sf-color-tertiary-200": "Light tertiary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds.",
@@ -600,13 +600,13 @@
     "--sf-color-tertiary-muted": "Muted tertiary fill.",
     "--sf-color-tertiary--hover": "Tertiary color at hover brightness.",
     "--sf-color-tertiary--active": "Tertiary color at pressed/active brightness.",
-    "--sf-color-tertiary-darker": "Deep tertiary shade.",
+    "--sf-color-tertiary-darker": "Deep tertiary shade — alias of --sf-color-tertiary-600.",
     "--sf-color-tertiary-lighter": "Light tertiary shade for soft accents — alias of --sf-color-tertiary-400.",
-    "--sf-color-tertiary-tint": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
-    "--sf-color-tertiary-xdark": "Extra-dark tertiary shade.",
-    "--sf-color-tertiary-xlight": "Extra-light tertiary shade.",
+    "--sf-color-tertiary-tint": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds — alias of --sf-color-tertiary-a5.",
+    "--sf-color-tertiary-xdark": "Extra-dark tertiary shade — alias of --sf-color-tertiary-800.",
+    "--sf-color-tertiary-xlight": "Extra-light tertiary shade — alias of --sf-color-tertiary-200.",
     "--sf-color-tertiary-superdark": "Near-black tertiary shade for maximum contrast on light surfaces — alias of --sf-color-tertiary-950.",
-    "--sf-color-tertiary-superlight": "Near-white tertiary shade.",
+    "--sf-color-tertiary-superlight": "Near-white tertiary shade — alias of --sf-color-tertiary-50.",
     "--sf-color-code-bg": "Background for inline <code> elements. Usually a subtle tint of the inset surface.",
     "--sf-color-link--underline": "Color of the link underline decoration. Defaults to a semi-transparent variant of the link color.",
     "--sf-color-text--on-inverse": "Accessible foreground for text on inverted (dark-on-light / light-on-dark) backgrounds.",
@@ -1156,6 +1156,20 @@
     "sf-sticky--s": "Sticky positioning with an extra small gap (--sf-space-s) above the header-aware offset.",
     "sf-sticky--m": "Sticky positioning with an extra medium gap (--sf-space-m) above the header-aware offset.",
     "sf-sticky--l": "Sticky positioning with an extra large gap (--sf-space-l) above the header-aware offset.",
+    "sf-width-10": "Caps width at 10% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-20": "Caps width at 20% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-30": "Caps width at 30% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-40": "Caps width at 40% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-50": "Caps width at 50% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-60": "Caps width at 60% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-70": "Caps width at 70% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-80": "Caps width at 80% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-90": "Caps width at 90% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.",
+    "sf-width-full": "Full width, uncapped (inline-size:100%, max-inline-size:none).",
+    "sf-width-auto": "Intrinsic auto width (inline-size:auto) — sizes to the box’s normal layout.",
+    "sf-width-fit": "Width sized to its own content (fit-content).",
+    "sf-width-min": "Narrowest content-driven width (min-content) — shrinks to the longest unbreakable content.",
+    "sf-width-max": "Widest content-driven width (max-content) — grows to full intrinsic width, no wrapping.",
     "sf-divide": "Rules between direct children (a border on each child after the first), reusing .sf-divider's tokens — no per-gap markup needed.",
     "sf-divide--vertical": "Vertical rules between direct children (inline-start borders), for row/horizontal layouts.",
     "sf-theme-light": "Forces light colour scheme on the element and its subtree (class alias of [data-theme=\"light\"]).",
diff --git a/llms.txt b/llms.txt
index 7bcbebbf..3076fccf 100644
--- a/llms.txt
+++ b/llms.txt
@@ -541,20 +541,20 @@ Generated from source by `npm run docs` — do not edit by hand. Full prose guid
 - `.sf-text-xl` — Applies the xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
 - `.sf-text-xs` — Applies the xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
 - `.sf-visible` — Visibility helper (optional/utilities.css) — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.
-- `.sf-width-10` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-20` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-30` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-40` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-50` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-60` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-70` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-80` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-90` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-auto` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-fit` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-full` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-max` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
-- `.sf-width-min` — Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…
+- `.sf-width-10` — Caps width at 10% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-20` — Caps width at 20% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-30` — Caps width at 30% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-40` — Caps width at 40% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-50` — Caps width at 50% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-60` — Caps width at 60% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-70` — Caps width at 70% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-80` — Caps width at 80% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-90` — Caps width at 90% of the content column (--sf-content-width), centred in normal flow; shrinks below the cap on narrower parents.
+- `.sf-width-auto` — Intrinsic auto width (inline-size:auto) — sizes to the box’s normal layout.
+- `.sf-width-fit` — Width sized to its own content (fit-content).
+- `.sf-width-full` — Full width, uncapped (inline-size:100%, max-inline-size:none).
+- `.sf-width-max` — Widest content-driven width (max-content) — grows to full intrinsic width, no wrapping.
+- `.sf-width-min` — Narrowest content-driven width (min-content) — shrinks to the longest unbreakable content.
 
 ### State classes (15)