Skip to content

Commit 15e4854

Browse files
jackgranatowskijackgranatowski
authored
Merge pull request #650 from codeslash-dev/claude/session-n8kqqf
feat: add .sf-width-* content-width utility classes and rename .sf-is-skeleton to .sf-is-shimmer
2 parents 9f472c7 + 4fc269e commit 15e4854

26 files changed

Lines changed: 1478 additions & 54 deletions

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ jobs:
171171
run: |
172172
git config user.name "github-actions[bot]"
173173
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
174-
git add package.json package-lock.json docs/roadmap.md docs/llm-guide.md CHANGELOG.md configurator/package.json configurator/package-lock.json
174+
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
175175
if git diff --cached --quiet; then
176176
echo "Nothing to commit — version artifacts on main already match ${{ steps.ver.outputs.tag }}."
177177
echo "pushed=false" >> "$GITHUB_OUTPUT"

‎configurator/src/data/classes.generated.json‎

Lines changed: 143 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2005,12 +2005,12 @@
20052005
"layer": "slashed.states"
20062006
},
20072007
{
2008-
"name": "sf-is-skeleton",
2009-
"selector": ".sf-is-skeleton",
2008+
"name": "sf-is-shimmer",
2009+
"selector": ".sf-is-shimmer",
20102010
"kind": "state",
20112011
"category": "State classes",
20122012
"group": "LOADING / ASYNC FEEDBACK",
2013-
"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.",
2013+
"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.)",
20142014
"optional": false,
20152015
"layer": "slashed.states"
20162016
},
@@ -3104,6 +3104,146 @@
31043104
"optional": true,
31053105
"layer": "slashed.utilities"
31063106
},
3107+
{
3108+
"name": "sf-width-10",
3109+
"selector": ".sf-width-10",
3110+
"kind": "utility",
3111+
"category": "Utilities",
3112+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3113+
"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…",
3114+
"optional": true,
3115+
"layer": "slashed.utilities"
3116+
},
3117+
{
3118+
"name": "sf-width-20",
3119+
"selector": ".sf-width-20",
3120+
"kind": "utility",
3121+
"category": "Utilities",
3122+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3123+
"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…",
3124+
"optional": true,
3125+
"layer": "slashed.utilities"
3126+
},
3127+
{
3128+
"name": "sf-width-30",
3129+
"selector": ".sf-width-30",
3130+
"kind": "utility",
3131+
"category": "Utilities",
3132+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3133+
"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…",
3134+
"optional": true,
3135+
"layer": "slashed.utilities"
3136+
},
3137+
{
3138+
"name": "sf-width-40",
3139+
"selector": ".sf-width-40",
3140+
"kind": "utility",
3141+
"category": "Utilities",
3142+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3143+
"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…",
3144+
"optional": true,
3145+
"layer": "slashed.utilities"
3146+
},
3147+
{
3148+
"name": "sf-width-50",
3149+
"selector": ".sf-width-50",
3150+
"kind": "utility",
3151+
"category": "Utilities",
3152+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3153+
"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…",
3154+
"optional": true,
3155+
"layer": "slashed.utilities"
3156+
},
3157+
{
3158+
"name": "sf-width-60",
3159+
"selector": ".sf-width-60",
3160+
"kind": "utility",
3161+
"category": "Utilities",
3162+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3163+
"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…",
3164+
"optional": true,
3165+
"layer": "slashed.utilities"
3166+
},
3167+
{
3168+
"name": "sf-width-70",
3169+
"selector": ".sf-width-70",
3170+
"kind": "utility",
3171+
"category": "Utilities",
3172+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3173+
"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…",
3174+
"optional": true,
3175+
"layer": "slashed.utilities"
3176+
},
3177+
{
3178+
"name": "sf-width-80",
3179+
"selector": ".sf-width-80",
3180+
"kind": "utility",
3181+
"category": "Utilities",
3182+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3183+
"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…",
3184+
"optional": true,
3185+
"layer": "slashed.utilities"
3186+
},
3187+
{
3188+
"name": "sf-width-90",
3189+
"selector": ".sf-width-90",
3190+
"kind": "utility",
3191+
"category": "Utilities",
3192+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3193+
"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…",
3194+
"optional": true,
3195+
"layer": "slashed.utilities"
3196+
},
3197+
{
3198+
"name": "sf-width-auto",
3199+
"selector": ".sf-width-auto",
3200+
"kind": "utility",
3201+
"category": "Utilities",
3202+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3203+
"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…",
3204+
"optional": true,
3205+
"layer": "slashed.utilities"
3206+
},
3207+
{
3208+
"name": "sf-width-fit",
3209+
"selector": ".sf-width-fit",
3210+
"kind": "utility",
3211+
"category": "Utilities",
3212+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3213+
"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…",
3214+
"optional": true,
3215+
"layer": "slashed.utilities"
3216+
},
3217+
{
3218+
"name": "sf-width-full",
3219+
"selector": ".sf-width-full",
3220+
"kind": "utility",
3221+
"category": "Utilities",
3222+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3223+
"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…",
3224+
"optional": true,
3225+
"layer": "slashed.utilities"
3226+
},
3227+
{
3228+
"name": "sf-width-max",
3229+
"selector": ".sf-width-max",
3230+
"kind": "utility",
3231+
"category": "Utilities",
3232+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3233+
"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…",
3234+
"optional": true,
3235+
"layer": "slashed.utilities"
3236+
},
3237+
{
3238+
"name": "sf-width-min",
3239+
"selector": ".sf-width-min",
3240+
"kind": "utility",
3241+
"category": "Utilities",
3242+
"group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
3243+
"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…",
3244+
"optional": true,
3245+
"layer": "slashed.utilities"
3246+
},
31073247
{
31083248
"name": "skip-link",
31093249
"selector": ".skip-link",

‎core/states.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,16 @@
7272
they filled — [aria-busy="true"] covers the semantic, and the visual
7373
is two lines to hand-roll in your own component CSS if you want it. */
7474

75-
img.sf-is-skeleton,
76-
.sf-is-skeleton img {
75+
/* Shimmer loading placeholder (was .sf-is-skeleton pre-Unreleased; renamed so
76+
"skeleton" names only the planned .sf-skeleton component, not a state —
77+
see docs/migration.md and roadmap.md #575). The class name now mirrors its
78+
driving token, --sf-animation-shimmer. */
79+
img.sf-is-shimmer,
80+
.sf-is-shimmer img {
7781
opacity: 0 !important;
7882
}
7983

80-
.sf-is-skeleton {
84+
.sf-is-shimmer {
8185
color: transparent !important;
8286
background: linear-gradient(
8387
90deg,

0 commit comments

Comments
 (0)