diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 88b4cca5..84bc2841 100644 --- a/.github/workflows/release.yml +++ b/.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" diff --git a/configurator/src/data/classes.generated.json b/configurator/src/data/classes.generated.json index e09ad391..6e6ecb76 100644 --- a/configurator/src/data/classes.generated.json +++ b/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", diff --git a/core/states.css b/core/states.css index bc073bbd..380aa1dc 100644 --- a/core/states.css +++ b/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, diff --git a/demo/index.html b/demo/index.html index f66d0efd..c03fcbf7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1426,11 +1426,11 @@

States (states.css)

-

.sf-is-skeleton

+

.sf-is-shimmer

-
-
-
+
+
+
@@ -4031,8 +4031,8 @@

State classes (.sf-is-*)

-
.sf-is-skeleton public

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.

-
skeleton
+
.sf-is-shimmer public

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.)

+
shimmer
.sf-is-success public

Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback.

@@ -4146,6 +4146,66 @@

Utilities 33.sf-sticky--s public

Sticky positioning with an extra small gap (--sf-space-s) above the header-aware offset.

sticky header
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.

+
+
.sf-touch-target public

Opt-in WCAG 2.5.5 minimum hit area — enforces a 44px min-block/inline-size on a control you own. Counterpart to the automatic floor, which only backstops controls with no class.

+
+
+
+
.sf-width-10 public

Caps the element at 10% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
10%
+
+
+
.sf-width-20 public

Caps the element at 20% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
20%
+
+
+
.sf-width-30 public

Caps the element at 30% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
30%
+
+
+
.sf-width-40 public

Caps the element at 40% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
40%
+
+
+
.sf-width-50 public

Caps the element at 50% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
50%
+
+
+
.sf-width-60 public

Caps the element at 60% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
60%
+
+
+
.sf-width-70 public

Caps the element at 70% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
70%
+
+
+
.sf-width-80 public

Caps the element at 80% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
80%
+
+
+
.sf-width-90 public

Caps the element at 90% of the content column (--sf-content-width) and centres it; inline-size:100% lets it shrink on narrow parents.

+
90%
+
+
+
.sf-width-full public

Full width (100%), uncapped (max-inline-size: none).

+
full
+
+
+
.sf-width-auto public

Intrinsic auto width (inline-size: auto) — the element sizes to its normal-flow default.

+
auto
+
+
+
.sf-width-fit public

Shrink-to-fit width (fit-content) — as wide as its content, up to the available space.

+
fit-content
+
+
+
.sf-width-min public

Minimum-content width (min-content) — as narrow as the content's longest unbreakable run.

+
min-content
+
+
+
.sf-width-max public

Maximum-content width (max-content) — as wide as the content prefers, without wrapping.

+
max-content
+
.sf-text-2xl public

Applies the 2xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.

.sf-text-2xl
@@ -4222,10 +4282,6 @@

Accessibility .sf-focus-shadow public

Applies the standard focus ring as a box-shadow to any element. Use on custom controls where the native :focus-visible ring doesn't render correctly.

-
-
.sf-touch-target public

Opt-in WCAG 2.5.5 minimum hit area — enforces a 44px min-block/inline-size on a control you own. Counterpart to the automatic floor, which only backstops controls with no class.

-
-
.skip-link public

Accessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in <body>.

@@ -5021,7 +5077,7 @@

Design tokens 7
--sf-z-tooltip
- + diff --git a/docs/api-audit-checklist.md b/docs/api-audit-checklist.md index 9d20d159..dbe63db3 100644 --- a/docs/api-audit-checklist.md +++ b/docs/api-audit-checklist.md @@ -218,7 +218,7 @@ Realna wartość; rozważ okrojenie liczby wariantów lub przeniesienie do `full - [x] `.sf-is-selected` — ZOSTAJE `opt` - [x] `.sf-is-highlighted` — ZOSTAJE `opt` - [x] `.sf-is-empty` — ZOSTAJE (bez zmian tej rundy) `opt` -- [x] `.sf-is-skeleton` — ZOSTAJE (świadoma decyzja usera — brak natywnego odpowiednika) `opt` +- [x] `.sf-is-shimmer` (renamed from the former skeleton state, #575) — ZOSTAJE (świadoma decyzja usera — brak natywnego odpowiednika) `opt` **Bilans końcowy:** 28 → **15** w `states.css` + **2** przeniesione do `utilities.css` (17 łącznie zostaje, 11 usuniętych). Kaskadowo usunięte też: tokeny `--sf-current-font-weight`, `--sf-state-pending-opacity`, i 4 rejestracje `@property` (`--sf-is-active/-current/-pressed/-open`) — wszystkie osierocone przez usunięcie jedynego konsumenta. diff --git a/docs/api-index.json b/docs/api-index.json index fb0e5cd6..47fa5d25 100644 --- a/docs/api-index.json +++ b/docs/api-index.json @@ -25,14 +25,14 @@ "optimal" ], "counts": { - "total": 1054, + "total": 1068, "by_type": { - "class": 313, + "class": 327, "token": 741 }, "by_tier": { "INTERNAL": 1, - "PUBLIC": 1004, + "PUBLIC": 1018, "PUBLIC-ADVANCED": 49 }, "by_role": { @@ -40,8 +40,8 @@ "knob": 253 }, "tokens": 741, - "classes": 313, - "sf_classes": 290, + "classes": 327, + "sf_classes": 304, "is_classes": 15, "unprefixed_classes": 8, "by_category": { @@ -58,7 +58,7 @@ "Print": 4, "State classes": 15, "Theme utilities": 3, - "Utilities": 33 + "Utilities": 47 } }, "schema": { @@ -23870,16 +23870,16 @@ ] }, { - "name": "sf-is-skeleton", + "name": "sf-is-shimmer", "type": "class", "tier": "PUBLIC", - "selector": ".sf-is-skeleton", + "selector": ".sf-is-shimmer", "prefix": "sf-is", "kind": "state", "category": "State classes", "area": "states", "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.)", "isVariant": false, "baseClass": null, "optional": false, @@ -26382,6 +26382,314 @@ "full" ] }, + { + "name": "sf-width-10", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-10", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-20", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-20", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-30", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-30", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-40", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-40", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-50", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-50", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-60", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-60", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-70", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-70", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-80", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-80", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-90", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-90", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-auto", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-auto", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-fit", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-fit", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-full", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-full", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-max", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-max", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, + { + "name": "sf-width-min", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-width-min", + "prefix": "sf", + "kind": "utility", + "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…", + "isVariant": false, + "baseClass": null, + "optional": true, + "layer": "slashed.utilities", + "sourceFiles": [ + "optional/utilities.css" + ], + "bundles": [ + "full" + ] + }, { "name": "skip-link", "type": "class", diff --git a/docs/api-index.md b/docs/api-index.md index 624e573b..2f2f3f2f 100644 --- a/docs/api-index.md +++ b/docs/api-index.md @@ -10,11 +10,11 @@ and a short description. The machine-readable companion (with all columns) is [registry.json](registry.json); for the tier contract see [architecture.md](architecture.md). -**1054 elements** — 741 tokens, 313 classes. +**1068 elements** — 741 tokens, 327 classes. | Tier | Count | Meaning | |---|---|---| -| PUBLIC | 1004 | Everyday surface. SemVer-stable. | +| PUBLIC | 1018 | Everyday surface. SemVer-stable. | | PUBLIC-ADVANCED | 49 | Same SemVer guarantee; niche/powerful. | | INTERNAL | 1 | Implementation detail; may change without a major bump. | @@ -781,7 +781,7 @@ and a short description. The machine-readable companion (with all columns) is | `--sf-surface-bg-size` | PUBLIC | knob | surface | `cover` | background-size for the .sf-surface-bg image. Default: cover. | | `--sf-surface-color` | PUBLIC | consumption | surface | `var(--sf-color-base)` | Input for the generic .sf-surface macro. Set any color (including palette shades); the macro derives background, auto-contrast foreground, and the contextual token set from it. | -## Classes (313) +## Classes (327) ### Accessibility (9) @@ -1095,7 +1095,7 @@ and a short description. The machine-readable companion (with all columns) is | `.sf-is-invalid` | PUBLIC | state | VALIDATION / FEEDBACK | Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to sf-is-error; the name signals form-field context. | | `.sf-is-loading` | PUBLIC | state | LOADING / ASYNC FEEDBACK | Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results. | | `.sf-is-selected` | PUBLIC | state | SELECTED / HIGHLIGHTED | Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles. | -| `.sf-is-skeleton` | PUBLIC | state | LOADING / ASYNC FEEDBACK | 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. | +| `.sf-is-shimmer` | PUBLIC | state | LOADING / ASYNC FEEDBACK | 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.) | | `.sf-is-success` | PUBLIC | state | VALIDATION / FEEDBACK | Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback. | | `.sf-is-valid` | PUBLIC | state | VALIDATION / FEEDBACK | Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to sf-is-success; the name signals form-field context. | | `.sf-is-warning` | PUBLIC | state | VALIDATION / FEEDBACK | Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts. | @@ -1108,7 +1108,7 @@ and a short description. The machine-readable companion (with all columns) is | `.sf-theme-light` | PUBLIC | theme | — | Forces light colour scheme on the element and its subtree (class alias of [data-theme="light"]). | | `.sf-theme-transition` | PUBLIC | theme | — | Opt-in animated light/dark theme crossfade. Apply to (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration. | -### Utilities (33) +### Utilities (47) | Class | Tier | Kind | Group | Description | |---|---|---|---|---| @@ -1145,4 +1145,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… | diff --git a/docs/classes.md b/docs/classes.md index 84cf7b29..06c3ebd6 100644 --- a/docs/classes.md +++ b/docs/classes.md @@ -3,7 +3,7 @@ > **Generated** from source by `scripts/gen-class-reference.js` — > run `npm run docs:classes` to refresh. Do not edit by hand. -**290 .sf-classes, 15 .sf-is-classes.** Every `.sf-*` layout/macro class and `.sf-is-*` state class. +**304 .sf-classes, 15 .sf-is-classes.** Every `.sf-*` layout/macro class and `.sf-is-*` state class. See [architecture.md](architecture.md) for layer order and naming conventions. ## Layout primitives (`core/layout.css`) @@ -233,7 +233,7 @@ See [architecture.md](architecture.md) for layer order and naming conventions. | `.sf-is-invalid` | | `.sf-is-loading` | | `.sf-is-selected` | -| `.sf-is-skeleton` | +| `.sf-is-shimmer` | | `.sf-is-success` | | `.sf-is-valid` | | `.sf-is-warning` | @@ -348,7 +348,7 @@ See [architecture.md](architecture.md) for layer order and naming conventions. ## Utilities (`optional/utilities.css`) -34 classes. +48 classes. | Class | |---| @@ -386,4 +386,18 @@ See [architecture.md](architecture.md) for layer order and naming conventions. | `.sf-text-xl` | | `.sf-text-xs` | | `.sf-visible` | +| `.sf-width-10` | +| `.sf-width-20` | +| `.sf-width-30` | +| `.sf-width-40` | +| `.sf-width-50` | +| `.sf-width-60` | +| `.sf-width-70` | +| `.sf-width-80` | +| `.sf-width-90` | +| `.sf-width-auto` | +| `.sf-width-fit` | +| `.sf-width-full` | +| `.sf-width-max` | +| `.sf-width-min` | diff --git a/docs/llm-guide.md b/docs/llm-guide.md index faf67047..4eecc086 100644 --- a/docs/llm-guide.md +++ b/docs/llm-guide.md @@ -1004,6 +1004,7 @@ Small opt-in helpers (all `optional/utilities.css`): - `.sf-marker--{family}` — colour `::marker` on an arbitrary list, `family` = `primary` / `secondary` / `tertiary` / `action` (brand/action only; set `::marker { color }` yourself for anything else). A `:not(.sf-prose *)` guard leaves `.sf-prose` markers to `--sf-prose-marker-color`. Works on the `