feat: add .sf-width-* content-width utility classes and rename .sf-is-skeleton to .sf-is-shimmer

.github/workflows/release.yml

@@ -171,7 +171,7 @@ jobs:
         run: |
           git config user.name  "github-actions[bot]"
           git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          git add package.json package-lock.json docs/roadmap.md docs/llm-guide.md CHANGELOG.md configurator/package.json configurator/package-lock.json
+          git add package.json package-lock.json docs/roadmap.md docs/llm-guide.md llms.txt CHANGELOG.md configurator/package.json configurator/package-lock.json
           if git diff --cached --quiet; then
             echo "Nothing to commit — version artifacts on main already match ${{ steps.ver.outputs.tag }}."
             echo "pushed=false" >> "$GITHUB_OUTPUT"

configurator/src/data/classes.generated.json

@@ -2005,12 +2005,12 @@
       "layer": "slashed.states"
     },
     {
-      "name": "sf-is-skeleton",
-      "selector": ".sf-is-skeleton",
+      "name": "sf-is-shimmer",
+      "selector": ".sf-is-shimmer",
       "kind": "state",
       "category": "State classes",
       "group": "LOADING / ASYNC FEEDBACK",
-      "description": "Skeleton loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements.",
+      "description": "Shimmer loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements. (Renamed from .sf-is-skeleton so \"skeleton\" refers only to the planned .sf-skeleton component.)",
       "optional": false,
       "layer": "slashed.states"
     },
@@ -3104,6 +3104,146 @@
       "optional": true,
       "layer": "slashed.utilities"
     },
+    {
+      "name": "sf-width-10",
+      "selector": ".sf-width-10",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-20",
+      "selector": ".sf-width-20",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-30",
+      "selector": ".sf-width-30",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-40",
+      "selector": ".sf-width-40",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-50",
+      "selector": ".sf-width-50",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-60",
+      "selector": ".sf-width-60",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-70",
+      "selector": ".sf-width-70",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-80",
+      "selector": ".sf-width-80",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-90",
+      "selector": ".sf-width-90",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-auto",
+      "selector": ".sf-width-auto",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-fit",
+      "selector": ".sf-width-fit",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-full",
+      "selector": ".sf-width-full",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-max",
+      "selector": ".sf-width-max",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
+    {
+      "name": "sf-width-min",
+      "selector": ".sf-width-min",
+      "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…",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
     {
       "name": "skip-link",
       "selector": ".skip-link",

core/states.css

@@ -72,12 +72,16 @@
      they filled — [aria-busy="true"] covers the semantic, and the visual
      is two lines to hand-roll in your own component CSS if you want it. */
 
-  img.sf-is-skeleton,
-  .sf-is-skeleton img {
+  /* Shimmer loading placeholder (was .sf-is-skeleton pre-Unreleased; renamed so
+     "skeleton" names only the planned .sf-skeleton component, not a state —
+     see docs/migration.md and roadmap.md #575). The class name now mirrors its
+     driving token, --sf-animation-shimmer. */
+  img.sf-is-shimmer,
+  .sf-is-shimmer img {
     opacity: 0 !important;
   }
 
-  .sf-is-skeleton {
+  .sf-is-shimmer {
     color:           transparent !important;
     background:      linear-gradient(
                        90deg,