@digicreon/mucss 1.0.0 → 1.2.0

package/documentation/mu.link.md

@@ -0,0 +1,108 @@
+# µLink
+
+**µLink** describes the styling of hyperlinks (`<a>`) in [µCSS](.). Links use the theme's primary color with an animated underline, and support color variants.
+
+---
+
+## Usage
+
+A standard link uses the `<a>` tag without any additional class:
+
+```html
+<a href="#">Lien standard</a>
+```
+
+The link is displayed in `--mu-primary` color with a semi-transparent underline. On hover, the color darkens and the underline intensifies.
+
+---
+
+## Color variants
+
+Three variants are available via CSS classes:
+
+```html
+<a href="#">Lien primaire (defaut)</a>
+<a href="#" class="secondary">Lien secondaire</a>
+<a href="#" class="contrast">Lien contraste</a>
+```
+
+| Class | Color | Hover |
+|-------|-------|-------|
+| *(default)* | `--mu-primary` | `--mu-primary-hover` |
+| `.secondary` | `--mu-secondary` | `--mu-secondary-hover` |
+| `.contrast` | `--mu-contrast` | `--mu-contrast-hover` |
+
+---
+
+## States
+
+Links support several visual states:
+
+| State | Trigger | Effect |
+|-------|---------|--------|
+| Rest | — | Primary color, transparent underline |
+| Hover | `:hover` | Darker color, solid underline |
+| Active | `:active` | Same style as hover |
+| Focus | `:focus` | Same style as hover |
+| Focus visible | `:focus-visible` | Focus ring (`box-shadow`) |
+| Current | `aria-current` | Same style as hover |
+
+---
+
+## Link as button
+
+A link can be styled as a button with `role="button"`:
+
+```html
+<a href="#" role="button">Action</a>
+```
+
+The link then adopts the appearance of a button (see [µButton](mu.button.md)).
+
+---
+
+## `aria-current` attribute
+
+Use `aria-current` to indicate the active page in a navigation:
+
+```html
+<nav>
+    <ul>
+        <li><a href="/" aria-current="page">Accueil</a></li>
+        <li><a href="/about">A propos</a></li>
+    </ul>
+</nav>
+```
+
+The link with `aria-current` (except `aria-current="false"`) permanently receives the hover style.
+
+---
+
+## Underline
+
+The underline is managed via `text-decoration-color` for a subtle rendering:
+
+- **Rest**: underline with reduced opacity (`--mu-primary-underline`)
+- **Hover**: solid underline (`--mu-primary-hover-underline`)
+- **Offset**: `text-underline-offset: 0.125em`
+
+To disable the underline globally:
+
+```css
+a {
+    --mu-text-decoration: none;
+}
+```
+
+---
+
+## Accessibility
+
+- Links must have descriptive text or an `aria-label` for screen readers.
+- The focus ring (`:focus-visible`) is visible for keyboard navigation.
+- The color transition uses `var(--mu-transition)` (0.2s) for smooth visual feedback.
+- Avoid links without `href`; use `<button>` or `role="link"` with a keyboard handler.
+
+---
+
+> See also : [µButton](mu.button.md) · [µNav](mu.nav.md) · [µTypography](mu.typography.md)

package/documentation/mu.loading.md

@@ -1,6 +1,6 @@
 # µLoading
 
-**µLoading** describes the loading indicator states available natively in [µCSS](.) via PicoCSS. Loading states are activated using the standard `aria-busy="true"` attribute on any element, which displays an animated spinner without requiring any additional CSS class or JavaScript library.
+**µLoading** describes the loading indicator states available natively in [µCSS](.). Loading states are activated using the standard `aria-busy="true"` attribute on any element, which displays an animated spinner without requiring any additional CSS class or JavaScript library.
 
 ---
 
@@ -96,4 +96,6 @@ Any element that accepts `aria-busy` can display the loading indicator.
 
 ---
 
-→ [Voir l'exemple](../examples/loading.html)
+> See also : [µSpinner](mu.spinner.md) · [µSkeleton](mu.skeleton.md)
+
+→ [See example](../examples/loading.html)

package/documentation/mu.modal.md

@@ -1,6 +1,6 @@
 # µModal
 
-**µModal** provides size variants and a close button for native `<dialog>` modals, part of the [µCSS](.) framework. It builds on PicoCSS's dialog styling with small, large, and fullscreen options.
+**µModal** provides size variants and a close button for native `<dialog>` modals, part of the [µCSS](.) framework. It provides dialog styling with small, large, and fullscreen options.
 
 ---
 
@@ -30,12 +30,12 @@ Modals use the native HTML `<dialog>` element containing an `<article>`. Open wi
 
 ## Size variants
 
-4 sizes are available. Without a size class, the default PicoCSS dialog width applies.
+4 sizes are available. Without a size class, the default dialog width applies.
 
 | Class               | Max-width    | Description                          |
 |---------------------|--------------|--------------------------------------|
 | `.modal-sm`         | 400px        | Confirmations and simple prompts     |
-| *(default)*         | *(PicoCSS)*  | Suitable for most content            |
+| *(default)*         | *(default)*  | Suitable for most content            |
 | `.modal-lg`         | 900px        | Forms or detailed content            |
 | `.modal-fullscreen` | 100vw        | Full viewport, no border-radius      |
 
@@ -51,7 +51,7 @@ Size classes are applied on the `<dialog>` element, not on the inner `<article>`
 		<h3>Small modal</h3>
 		<p>This is a small modal (max-width: 400px). Ideal for confirmations and simple prompts.</p>
 		<footer>
-			<button class="btn btn-ghost btn-secondary"
+			<button class="btn btn-outline btn-secondary"
 				onclick="document.getElementById('modal-sm').close()">Cancel</button>
 			<button class="btn btn-primary"
 				onclick="document.getElementById('modal-sm').close()">Confirm</button>
@@ -79,7 +79,7 @@ Size classes are applied on the `<dialog>` element, not on the inner `<article>`
 		</div>
 		<label>Email <input type="email" placeholder="Email address"></label>
 		<footer>
-			<button class="btn btn-ghost btn-secondary"
+			<button class="btn btn-outline btn-secondary"
 				onclick="document.getElementById('modal-lg').close()">Cancel</button>
 			<button class="btn btn-success"
 				onclick="document.getElementById('modal-lg').close()">Save</button>
@@ -124,7 +124,7 @@ The `.modal-close` class styles a close button positioned absolutely in the top-
 | Position          | Absolute, top-right corner      |
 | Size              | 3rem x 3rem                     |
 | Background        | Transparent                     |
-| Color             | `--pico-secondary`              |
+| Color             | `--mu-secondary`              |
 | Opacity           | 0.6 (1 on hover)               |
 | Focus indicator   | 2px solid outline, 0.25rem radius |
 
@@ -160,4 +160,6 @@ Modals rely on the native `<dialog>` API. No JavaScript is bundled with µCSS --
 
 ---
 
-→ [Voir l'exemple](../examples/modal.html)
+> See also : [µButton](mu.button.md)
+
+→ [See example](../examples/modal.html)

package/documentation/mu.nav.md

@@ -0,0 +1,191 @@
+# µNav
+
+**µNav** provides the responsive navigation bar via the `<nav>` element in [µCSS](.). The navigation uses flexbox to distribute items, with automatic spacing and link styling. On mobile (< 640px), links collapse into a ☰ burger menu via a CSS-only checkbox hack.
+
+---
+
+## Usage
+
+A basic responsive navigation uses `<nav>` with a brand `<ul>`, a hidden checkbox, a burger label, and a `<ul class="navbar-menu">` for the links:
+
+```html
+<nav>
+    <ul><li><strong>Mon site</strong></li></ul>
+    <input type="checkbox" id="my-nav" class="navbar-toggle" hidden>
+    <label for="my-nav" class="navbar-burger">☰</label>
+    <ul class="navbar-menu">
+        <li><a href="#">Accueil</a></li>
+        <li><a href="#">A propos</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</nav>
+```
+
+On desktop, the burger is hidden and links display inline (flex row). On mobile, the burger appears and links are hidden until the user clicks ☰. Each burger needs a unique `id`/`for` pair.
+
+---
+
+## Navigation in a header
+
+Place `<nav>` inside a `<header>` with a `.container` for a full-width navigation bar:
+
+```html
+<header>
+    <nav class="container">
+        <ul><li><strong>µCSS</strong></li></ul>
+        <input type="checkbox" id="header-nav" class="navbar-toggle" hidden>
+        <label for="header-nav" class="navbar-burger">☰</label>
+        <ul class="navbar-menu">
+            <li><a href="#">Docs</a></li>
+            <li><a href="#">Exemples</a></li>
+            <li><a href="#" role="button">Telecharger</a></li>
+        </ul>
+    </nav>
+</header>
+```
+
+---
+
+## Links and buttons in nav
+
+All links inside `<nav>` have no underline (including on hover), whether in the brand area or in `.navbar-menu`. Buttons integrate automatically:
+
+```html
+<nav>
+    <ul><li><strong>App</strong></li></ul>
+    <input type="checkbox" id="nav-app" class="navbar-toggle" hidden>
+    <label for="nav-app" class="navbar-burger">☰</label>
+    <ul class="navbar-menu">
+        <li><a href="#">Lien</a></li>
+        <li><a href="#" role="button">Bouton</a></li>
+    </ul>
+</nav>
+```
+
+---
+
+## Customization variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--mu-nav-element-spacing-vertical` | `1rem` | Vertical padding of items |
+| `--mu-nav-element-spacing-horizontal` | `0.5rem` | Horizontal padding of items |
+| `--mu-nav-link-spacing-vertical` | `0.5rem` | Vertical padding of links |
+| `--mu-nav-link-spacing-horizontal` | `0.5rem` | Horizontal padding of links |
+| `--mu-nav-breadcrumb-divider` | `">"` | Breadcrumb separator |
+
+---
+
+## Dropdown in nav
+
+A dropdown menu can be integrated inside the `.navbar-menu` via `<details class="dropdown">`:
+
+```html
+<nav>
+    <ul><li><strong>App</strong></li></ul>
+    <input type="checkbox" id="nav-dd" class="navbar-toggle" hidden>
+    <label for="nav-dd" class="navbar-burger">☰</label>
+    <ul class="navbar-menu">
+        <li><a href="#">Accueil</a></li>
+        <li>
+            <details class="dropdown">
+                <summary>Menu</summary>
+                <ul>
+                    <li><a href="#">Option 1</a></li>
+                    <li><a href="#">Option 2</a></li>
+                </ul>
+            </details>
+        </li>
+    </ul>
+</nav>
+```
+
+---
+
+## Colored navbars
+
+Use `.bg-{role}` on the `<nav>` or on a parent element (e.g. `<header>`) — a gradient (same as [µHero](mu.hero.md)) is applied automatically, and text/links switch to inverse (light) color.
+
+Directly on `<nav>`:
+
+```html
+<nav class="bg-primary">
+    <ul><li><strong>Brand</strong></li></ul>
+    <input type="checkbox" id="nav-color" class="navbar-toggle" hidden>
+    <label for="nav-color" class="navbar-burger">☰</label>
+    <ul class="navbar-menu">
+        <li><a href="#">Accueil</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</nav>
+```
+
+For a full-width colored bar with a contained nav, place `.bg-{role}` on the parent `<header>`:
+
+```html
+<header class="bg-primary">
+    <nav class="container">
+        <ul><li><strong>Brand</strong></li></ul>
+        <input type="checkbox" id="nav-full" class="navbar-toggle" hidden>
+        <label for="nav-full" class="navbar-burger">☰</label>
+        <ul class="navbar-menu">
+            <li><a href="#">Accueil</a></li>
+            <li><a href="#">Contact</a></li>
+        </ul>
+    </nav>
+</header>
+```
+
+The gradient uses `color-mix(in oklch)` to darken the role color, ensuring good contrast with white text. On mobile, the dropdown uses standard dropdown colors (not the navbar background), so links remain readable.
+
+---
+
+## Active link
+
+Add `.active` to a link to bold it, indicating the current page:
+
+```html
+<ul class="navbar-menu">
+    <li><a href="#" class="active">Accueil</a></li>
+    <li><a href="#">A propos</a></li>
+    <li><a href="#">Contact</a></li>
+</ul>
+```
+
+---
+
+## Sticky and fixed navbars
+
+Use the utility classes `.sticky-top`, `.fixed-top`, or `.fixed-bottom` on a `<nav>`. When used on a nav, a `z-index` and `box-shadow` are added automatically:
+
+```html
+<nav class="sticky-top">
+    <ul><li><strong>Brand</strong></li></ul>
+    <input type="checkbox" id="nav-s" class="navbar-toggle" hidden>
+    <label for="nav-s" class="navbar-burger">☰</label>
+    <ul class="navbar-menu">
+        <li><a href="#" class="active">Accueil</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</nav>
+```
+
+- `.sticky-top` — stays in flow, sticks to the top on scroll (recommended for navbars)
+- `.fixed-top` — always fixed to the viewport top (content flows behind, add `padding-top` on body)
+- `.fixed-bottom` — fixed to the viewport bottom (useful for mobile action bars)
+
+These classes are generic utilities defined in `mu.utilities.css` and work on any element (e.g., sticky `<thead>`, sticky sidebar). See [µUtilities](mu.utilities.md).
+
+---
+
+## Accessibility
+
+- Use `<nav>` as a landmark element for the main navigation.
+- Add `aria-label` to distinguish multiple `<nav>` elements on the same page (e.g., `aria-label="Navigation principale"`).
+- Links in the nav are keyboard-accessible with visible focus (outline + border-radius).
+- For production use, add `aria-label="Menu"` to the burger label and manage `aria-expanded` via JavaScript.
+- For breadcrumbs, use `aria-label="breadcrumb"` on the `<nav>` (see [µBreadcrumb](mu.breadcrumb.md)).
+
+---
+
+> See also : [µBreadcrumb](mu.breadcrumb.md) · [µDropdown](mu.dropdown.md) · [µContainer](mu.container.md)

package/documentation/mu.pagination.md

@@ -193,4 +193,6 @@ On mobile (<640px), only `.pagination-prev`, `.pagination-next`, and `.active` i
 
 ---
 
-→ [Voir l'exemple](../examples/pagination.html)
+> See also : [µNav](mu.nav.md) · [µBreadcrumb](mu.breadcrumb.md)
+
+→ [See example](../examples/pagination.html)

package/documentation/mu.progress.md

@@ -1,12 +1,12 @@
 # µProgress
 
-**µProgress** adds 8 color variants to the native `<progress>` element, part of the [µCSS](.) framework. It uses `accent-color` and vendor-specific pseudo-elements for cross-browser compatibility.
+**µProgress** adds 11 color variants to the native `<progress>` element, part of the [µCSS](.) framework. It uses `accent-color` and vendor-specific pseudo-elements for cross-browser compatibility.
 
 ---
 
 ## Usage
 
-Apply a color class directly on a `<progress>` element to change the bar color. Without a color class, the default PicoCSS progress styling applies.
+Apply a color class directly on a `<progress>` element to change the bar color. Without a color class, the default progress styling applies.
 
 ```html
 <progress class="progress-primary" value="75" max="100">75%</progress>
@@ -18,20 +18,23 @@ The text content inside `<progress>` serves as a fallback for browsers that do n
 
 ## Color variants
 
-8 color classes are available, matching the µCSS color roles:
+11 color classes are available, matching the µCSS color roles:
 
 | Class                | Color variable       |
 |----------------------|----------------------|
-| `.progress-primary`  | `--pico-primary`     |
-| `.progress-secondary`| `--pico-secondary`   |
-| `.progress-tertiary` | `--pico-tertiary`    |
-| `.progress-contrast` | `--pico-contrast`    |
-| `.progress-success`  | `--pico-success`     |
-| `.progress-info`     | `--pico-info`        |
-| `.progress-warning`  | `--pico-warning`     |
-| `.progress-error`    | `--pico-error`       |
-
-### All 8 variants
+| `.progress-primary`  | `--mu-primary`     |
+| `.progress-secondary`| `--mu-secondary`   |
+| `.progress-tertiary` | `--mu-tertiary`    |
+| `.progress-contrast` | `--mu-contrast`    |
+| `.progress-accent`   | `--mu-accent`      |
+| `.progress-success`  | `--mu-success`     |
+| `.progress-info`     | `--mu-info`        |
+| `.progress-warning`  | `--mu-warning`     |
+| `.progress-error`    | `--mu-error`       |
+| `.progress-pop`      | `--mu-pop`         |
+| `.progress-spark`    | `--mu-spark`       |
+
+### All 11 variants
 
 ```html
 <label>Primary (75%)
@@ -58,6 +61,15 @@ The text content inside `<progress>` serves as a fallback for browsers that do n
 <label>Error (20%)
 	<progress class="progress-error" value="20" max="100">20%</progress>
 </label>
+<label>Accent (70%)
+	<progress class="progress-accent" value="70" max="100">70%</progress>
+</label>
+<label>Pop (55%)
+	<progress class="progress-pop" value="55" max="100">55%</progress>
+</label>
+<label>Spark (40%)
+	<progress class="progress-spark" value="40" max="100">40%</progress>
+</label>
 ```
 
 ---
@@ -105,10 +117,13 @@ Each color variant sets three properties for full browser support:
 | `.progress-secondary`| Secondary color progress bar         |
 | `.progress-tertiary` | Tertiary color progress bar          |
 | `.progress-contrast` | Contrast color progress bar          |
+| `.progress-accent`   | Accent color progress bar            |
 | `.progress-success`  | Success (green) progress bar         |
 | `.progress-info`     | Info (blue) progress bar             |
 | `.progress-warning`  | Warning (orange/yellow) progress bar |
 | `.progress-error`    | Error (red) progress bar             |
+| `.progress-pop`      | Pop (lighter accent) progress bar    |
+| `.progress-spark`    | Spark (lighter contrast) progress bar|
 
 ---
 
@@ -120,4 +135,6 @@ Each color variant sets three properties for full browser support:
 
 ---
 
-→ [Voir l'exemple](../examples/progress.html)
+> See also : [µLoading](mu.loading.md) · [µSpinner](mu.spinner.md)
+
+→ [See example](../examples/progress.html)

package/documentation/mu.range.md

@@ -1,6 +1,6 @@
 # µRange
 
-**µRange** describes the native range slider styling provided by [µCSS](.) via PicoCSS. Range sliders use the standard `<input type="range">` element, which PicoCSS styles with a custom track and thumb without any additional classes.
+**µRange** describes the native range slider styling provided by [µCSS](.). Range sliders use the standard `<input type="range">` element, which µCSS styles with a custom track and thumb without any additional classes.
 
 ---
 
@@ -100,4 +100,6 @@ Range sliders work well inside cards (`<article>`) for settings panels.
 
 ---
 
-→ [Voir l'exemple](../examples/range.html)
+> See also : [µForms](mu.forms.md)
+
+→ [See example](../examples/range.html)

package/documentation/mu.skeleton.md

@@ -0,0 +1,111 @@
+# µSkeleton
+
+**µSkeleton** is a loading placeholder component, part of the [µCSS](.) framework. It displays animated shimmer shapes that mimic the layout of content while it loads, reducing perceived loading time.
+
+---
+
+## Basic usage
+
+Apply `.skeleton` along with a shape variant class to a `<div>`:
+
+```html
+<div class="skeleton skeleton-text"></div>
+```
+
+---
+
+## Shapes
+
+### Text lines
+
+```html
+<div class="skeleton skeleton-text"></div>
+<div class="skeleton skeleton-text"></div>
+<div class="skeleton skeleton-text"></div>
+<div class="skeleton skeleton-text"></div>
+```
+
+The last `.skeleton-text` automatically shrinks to 75% width for a natural paragraph look.
+
+### Title
+
+```html
+<div class="skeleton skeleton-title"></div>
+```
+
+### Avatar
+
+```html
+<div class="skeleton skeleton-avatar"></div>
+```
+
+### Image
+
+```html
+<div class="skeleton skeleton-image"></div>
+```
+
+---
+
+## Composition
+
+Combine shapes to build skeleton layouts that mirror real content:
+
+```html
+<article>
+    <header>
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+            <div class="skeleton skeleton-avatar"></div>
+            <div style="flex: 1;">
+                <div class="skeleton skeleton-title"></div>
+                <div class="skeleton skeleton-text" style="width: 40%;"></div>
+            </div>
+        </div>
+    </header>
+    <div class="skeleton skeleton-image"></div>
+    <div class="skeleton skeleton-text"></div>
+    <div class="skeleton skeleton-text"></div>
+    <div class="skeleton skeleton-text"></div>
+</article>
+```
+
+---
+
+## CSS classes reference
+
+| Class | Description |
+|-------|-------------|
+| `.skeleton` | Base class (background, shimmer animation, transparent text) |
+| `.skeleton-text` | Text line — `height: 1em`, last child at 75% width |
+| `.skeleton-title` | Title block — `height: 1.5rem`, `width: 50%` |
+| `.skeleton-avatar` | Circle — `3rem × 3rem`, `border-radius: 50%` |
+| `.skeleton-image` | Image rectangle — `height: 12rem`, `border-radius: 0.5rem` |
+
+---
+
+## Styling details
+
+| Property | Value |
+|----------|-------|
+| Background | `var(--mu-secondary-background)` |
+| Animation | `mu-shimmer` — 1.5s ease-in-out infinite |
+| Border radius (base) | `0.25rem` |
+| Text line height | `1em` |
+| Text line spacing | `0.5rem` |
+| Title height | `1.5rem` |
+| Avatar size | `3rem` |
+| Image height | `12rem` |
+
+---
+
+## Accessibility
+
+- Skeleton elements use `pointer-events: none` and `user-select: none` to prevent interaction.
+- Text content inside `.skeleton` is hidden via `color: transparent` — screen readers will still read it if present, which can serve as a loading message.
+- The transition from skeleton to real content is the application's JS responsibility — µCSS provides only the CSS styling and animation.
+
+---
+
+> See also : [µLoading](mu.loading.md) · [µSpinner](mu.spinner.md)
+
+→ [See example](../examples/skeleton.html)

package/documentation/mu.spinner.md

@@ -1,6 +1,6 @@
 # µSpinner
 
-**µSpinner** is a lightweight CSS loading indicator, part of the [µCSS](.) framework. It provides an animated circular spinner available in 8 color variants and 3 sizes, with no JavaScript required.
+**µSpinner** is a lightweight CSS loading indicator, part of the [µCSS](.) framework. It provides an animated circular spinner available in 11 color variants and 3 sizes, with no JavaScript required.
 
 ---
 
@@ -18,31 +18,37 @@ The default spinner uses the primary color and a standard size of 1.5rem.
 
 ## Color variants
 
-µSpinner supports the 8 standard µCSS color roles. Add a color modifier class alongside `.spinner`:
+µSpinner supports the 11 standard µCSS color roles. Add a color modifier class alongside `.spinner`:
 
 ```html
 <span class="spinner spinner-primary"></span>
 <span class="spinner spinner-secondary"></span>
 <span class="spinner spinner-tertiary"></span>
 <span class="spinner spinner-contrast"></span>
+<span class="spinner spinner-accent"></span>
 <span class="spinner spinner-success"></span>
 <span class="spinner spinner-info"></span>
 <span class="spinner spinner-warning"></span>
 <span class="spinner spinner-error"></span>
+<span class="spinner spinner-pop"></span>
+<span class="spinner spinner-spark"></span>
 ```
 
 ### Color class reference
 
 | Class               | Color variable          |
 |---------------------|-------------------------|
-| `.spinner-primary`  | `--pico-primary`        |
-| `.spinner-secondary`| `--pico-secondary`      |
-| `.spinner-tertiary` | `--pico-tertiary`       |
-| `.spinner-contrast` | `--pico-contrast`       |
-| `.spinner-success`  | `--pico-success`        |
-| `.spinner-info`     | `--pico-info`           |
-| `.spinner-warning`  | `--pico-warning`        |
-| `.spinner-error`    | `--pico-error`          |
+| `.spinner-primary`  | `--mu-primary`        |
+| `.spinner-secondary`| `--mu-secondary`      |
+| `.spinner-tertiary` | `--mu-tertiary`       |
+| `.spinner-contrast` | `--mu-contrast`       |
+| `.spinner-accent`   | `--mu-accent`         |
+| `.spinner-success`  | `--mu-success`        |
+| `.spinner-info`     | `--mu-info`           |
+| `.spinner-warning`  | `--mu-warning`        |
+| `.spinner-error`    | `--mu-error`          |
+| `.spinner-pop`      | `--mu-pop`            |
+| `.spinner-spark`    | `--mu-spark`          |
 
 ---
 
@@ -85,7 +91,7 @@ A common pattern is placing a small spinner inside a disabled button to indicate
 
 ## How it works
 
-The spinner is a bordered `inline-block` element with a colored top border and a transparent-ish track (using `--pico-secondary-background`). It rotates continuously via the `mu-spin` keyframe animation (0.6s linear infinite).
+The spinner is a bordered `inline-block` element with a colored top border and a transparent-ish track (using `--mu-secondary-background`). It rotates continuously via the `mu-spin` keyframe animation (0.6s linear infinite).
 
 ---
 
@@ -99,4 +105,6 @@ The spinner is purely visual. For screen readers, pair it with appropriate text
 
 ---
 
-→ [Voir l'exemple](../examples/spinner.html)
+> See also : [µLoading](mu.loading.md) · [µSkeleton](mu.skeleton.md)
+
+→ [See example](../examples/spinner.html)