@digicreon/mucss 1.0.0 → 1.2.0

package/documentation/mu.switch.md

@@ -1,6 +1,6 @@
 # µSwitch
 
-**µSwitch** describes the toggle switch controls available natively in [µCSS](.) via PicoCSS. Switches are standard checkboxes enhanced with `role="switch"`, which PicoCSS styles as visual toggle switches without any additional CSS or JavaScript.
+**µSwitch** describes the toggle switch controls available natively in [µCSS](.). Switches are standard checkboxes enhanced with `role="switch"`, which µCSS styles as visual toggle switches without any additional CSS or JavaScript.
 
 ---
 
@@ -107,4 +107,6 @@ Switches work well inside cards (`<article>`) for settings or preference panels.
 
 ---
 
-→ [Voir l'exemple](../examples/switch.html)
+> See also : [µCheckbox & Radio](mu.checkbox-radio.md) · [µForms](mu.forms.md)
+
+→ [See example](../examples/switch.html)

package/documentation/mu.table.md

@@ -1,6 +1,6 @@
 # µTable
 
-**µTable** provides enhanced table styles for the [µCSS](.) framework. It adds hover highlights, striped rows, bordered cells, compact padding, and fullwidth layout on top of PicoCSS's default table styling.
+**µTable** provides enhanced table styles for the [µCSS](.) framework. It adds hover highlights, striped rows, bordered cells, compact padding, and fullwidth layout on top of the default table styling.
 
 ---
 
@@ -116,8 +116,8 @@ All modifier classes can be combined freely. Common combinations:
 
 | Class              | Effect                                                                 |
 |--------------------|------------------------------------------------------------------------|
-| `.table-hover`     | Background highlight on row hover (`--pico-secondary-background`)      |
-| `.table-striped`   | Alternating background on odd rows (50% `--pico-secondary-background`) |
+| `.table-hover`     | Background highlight on row hover (`--mu-secondary-background`)      |
+| `.table-striped`   | Alternating background on odd rows (50% `--mu-secondary-background`) |
 | `.table-bordered`  | 1px solid border on table, `<th>`, and `<td>`                          |
 | `.table-compact`   | Reduced padding: `0.25rem 0.5rem`                                      |
 | `.table-fullwidth` | `width: 100%`                                                          |
@@ -138,10 +138,24 @@ For tables wider than their container, wrap them in a scrollable `<div>`:
 
 ---
 
-## Note on PicoCSS compatibility
+## Implementation note
 
-PicoCSS sets `background-color` on individual `<th>` and `<td>` cells rather than on `<tr>` rows. For this reason, `.table-hover` and `.table-striped` target `th` and `td` elements directly instead of `tr`. This ensures the hover and stripe backgrounds correctly override PicoCSS cell styles.
+The base styles set `background-color` on individual `<th>` and `<td>` cells rather than on `<tr>` rows. For this reason, `.table-hover` and `.table-striped` target `th` and `td` elements directly instead of `tr`. This ensures the hover and stripe backgrounds correctly override default cell styles.
+
+The `.table-bordered` variant uses `color-mix()` to blend `--mu-muted-color` (30%) with `--mu-muted-border-color` (70%) for visible but not heavy cell borders.
+
+---
+
+## Accessibility
+
+- Use `<caption>` to provide a descriptive title for the table.
+- Use `<thead>`, `<tbody>`, and `<tfoot>` to group rows semantically.
+- Use `scope="col"` on header cells in `<thead>` and `scope="row"` on row headers.
+- For complex tables, use `aria-describedby` to reference a longer description.
+- Avoid using tables for layout — only use them for tabular data.
 
 ---
 
-→ [Voir l'exemple](../examples/table.html)
+> See also : [µForms](mu.forms.md) · [µGrid](mu.grid.md)
+
+→ [See example](../examples/table.html)

package/documentation/mu.tabs.md

@@ -155,10 +155,12 @@ The active tab is indicated by the `aria-selected="true"` attribute on the `<a>`
 
 ---
 
-## Note on PicoCSS compatibility
+## Implementation note
 
-PicoCSS applies `list-style: square` to `ul li` elements. µTabs explicitly sets `list-style: none` on `.tabs` and `.tabs li` to neutralize this default and prevent bullet markers from appearing next to tab items.
+The base styles apply `list-style: square` to `ul li` elements. µTabs explicitly sets `list-style: none` on `.tabs` and `.tabs li` to neutralize this default and prevent bullet markers from appearing next to tab items.
 
 ---
 
-→ [Voir l'exemple](../examples/tabs.html)
+> See also : [µNav](mu.nav.md) · [µAccordion](mu.accordion.md)
+
+→ [See example](../examples/tabs.html)

package/documentation/mu.toast.md

@@ -0,0 +1,134 @@
+# µToast
+
+**µToast** is a fixed-position notification wrapper, part of the [µCSS](.) framework. It uses the existing [alert](mu.alert.md) component for content styling and adds 6 positioning options.
+
+---
+
+## Basic usage
+
+Wrap an `.alert` inside a `.toast` container with a position class:
+
+```html
+<div class="toast toast-top-right">
+    <div class="alert alert-success" role="alert">
+        <p>Changes saved.</p>
+    </div>
+</div>
+```
+
+---
+
+## Positions
+
+6 position classes are available:
+
+```html
+<div class="toast toast-top-right">...</div>
+<div class="toast toast-top-left">...</div>
+<div class="toast toast-top-center">...</div>
+<div class="toast toast-bottom-right">...</div>
+<div class="toast toast-bottom-left">...</div>
+<div class="toast toast-bottom-center">...</div>
+```
+
+| Class | Placement |
+|-------|-----------|
+| `.toast-top-right` | `top: 1rem; right: 1rem` |
+| `.toast-top-left` | `top: 1rem; left: 1rem` |
+| `.toast-top-center` | `top: 1rem; left: 50%; transform: translateX(-50%)` |
+| `.toast-bottom-right` | `bottom: 1rem; right: 1rem` |
+| `.toast-bottom-left` | `bottom: 1rem; left: 1rem` |
+| `.toast-bottom-center` | `bottom: 1rem; left: 50%; transform: translateX(-50%)` |
+
+---
+
+## Color variants
+
+Toasts reuse the alert color variants. All 11 color roles are available:
+
+```html
+<div class="toast toast-top-right">
+    <div class="alert alert-primary" role="alert"><p>Primary toast.</p></div>
+</div>
+
+<div class="toast toast-top-right">
+    <div class="alert alert-error" role="alert"><p>Error toast.</p></div>
+</div>
+```
+
+Available variants: `alert-primary`, `alert-secondary`, `alert-tertiary`, `alert-contrast`, `alert-accent`, `alert-success`, `alert-info`, `alert-warning`, `alert-error`, `alert-pop`, `alert-spark`.
+
+---
+
+## With title
+
+Use `.alert-title` for a bold heading inside the toast:
+
+```html
+<div class="toast toast-top-right">
+    <div class="alert alert-success" role="alert">
+        <span class="alert-title">Saved!</span>
+        <p>Your changes have been saved.</p>
+    </div>
+</div>
+```
+
+---
+
+## Dismissible
+
+Add `.alert-dismissible` and an `.alert-close` button:
+
+```html
+<div class="toast toast-top-right">
+    <div class="alert alert-info alert-dismissible" role="alert">
+        <p>This toast can be dismissed.</p>
+        <button class="alert-close" aria-label="Close" onclick="this.closest('.toast').remove()">&times;</button>
+    </div>
+</div>
+```
+
+---
+
+## CSS classes reference
+
+| Class | Description |
+|-------|-------------|
+| `.toast` | Fixed-position wrapper (`position: fixed`, `z-index: 1050`, `max-width: 350px`) |
+| `.toast-top-right` | Position top-right |
+| `.toast-top-left` | Position top-left |
+| `.toast-top-center` | Position top-center |
+| `.toast-bottom-right` | Position bottom-right |
+| `.toast-bottom-left` | Position bottom-left |
+| `.toast-bottom-center` | Position bottom-center |
+
+---
+
+## Responsive behavior
+
+On viewports narrower than 640px, all toast positions switch to full-width (`left: 1rem; right: 1rem; max-width: none`) to avoid content overflow on mobile devices.
+
+---
+
+## Styling details
+
+| Property | Value |
+|----------|-------|
+| Position | `fixed` |
+| Z-index | `1050` |
+| Max-width | `350px` (none on mobile) |
+| Spacing from edge | `1rem` |
+
+---
+
+## Accessibility
+
+- Use `role="alert"` on the inner alert element so screen readers announce the notification.
+- Dismissible toasts should include `aria-label="Close"` on the close button.
+- Auto-dismiss timing (e.g. 4 seconds) is the application's JS responsibility — µCSS provides only the CSS positioning.
+
+---
+
+> See also : [µAlert](mu.alert.md)
+
+→ [See example](../examples/toast.html)

package/documentation/mu.tooltip.md

@@ -1,18 +1,18 @@
 # µTooltip
 
-**µTooltip** fournit des infobulles CSS pures via l'attribut `data-tooltip`, styles par [PicoCSS](https://picocss.com) au sein du framework [µCSS](.). Aucun JavaScript n'est necessaire : les tooltips apparaissent au survol ou au focus.
+**µTooltip** provides pure CSS tooltips via the `data-tooltip` attribute, styled by [µCSS](.). No JavaScript is required: tooltips appear on hover or focus.
 
 ---
 
-## Utilisation de base
+## Basic usage
 
-Ajoutez l'attribut `data-tooltip` sur n'importe quel element HTML pour afficher une infobulle au survol. Par defaut, le tooltip apparait au-dessus de l'element.
+Add the `data-tooltip` attribute to any HTML element to display a tooltip on hover. By default, the tooltip appears above the element.
 
 ```html
 <span data-tooltip="This is a tooltip">Hover me</span>
 ```
 
-Pour un rendu visuel clair sur du texte inline, on peut ajouter un style de soulignement :
+For a clear visual rendering on inline text, you can add an underline style:
 
 ```html
 <span data-tooltip="This is a tooltip"
@@ -23,14 +23,14 @@ Pour un rendu visuel clair sur du texte inline, on peut ajouter un style de soul
 
 ## Placement
 
-L'attribut `data-placement` controle la position du tooltip. Quatre positions sont disponibles :
+The `data-placement` attribute controls the tooltip position. Four positions are available:
 
-| Valeur | Position |
-|--------|----------|
-| `top` | Au-dessus (par defaut) |
-| `bottom` | En dessous |
-| `left` | A gauche |
-| `right` | A droite |
+| Value | Position |
+|-------|----------|
+| `top` | Above (default) |
+| `bottom` | Below |
+| `left` | To the left |
+| `right` | To the right |
 
 ```html
 <span data-tooltip="Top tooltip" data-placement="top">Top</span>
@@ -41,22 +41,22 @@ L'attribut `data-placement` controle la position du tooltip. Quatre positions so
 
 ---
 
-## Sur des boutons
+## On buttons
 
-Les tooltips fonctionnent sur les boutons pour fournir un contexte supplementaire sur l'action.
+Tooltips work on buttons to provide additional context about the action.
 
 ```html
 <button class="btn btn-primary" data-tooltip="Save your changes">Save</button>
-<button class="btn btn-ghost btn-error"
+<button class="btn btn-outline btn-error"
         data-tooltip="This action cannot be undone"
         data-placement="bottom">Delete</button>
 ```
 
 ---
 
-## Sur des liens
+## On links
 
-Ajoutez un tooltip sur un lien pour decrire la destination ou l'action.
+Add a tooltip to a link to describe the destination or action.
 
 ```html
 <p>Visit the <a href="#" data-tooltip="Go to the homepage">homepage</a>
@@ -66,9 +66,9 @@ data-placement="bottom">documentation</a>.</p>
 
 ---
 
-## Sur des champs de formulaire
+## On form fields
 
-Les tooltips peuvent etre places sur des elements de formulaire pour guider l'utilisateur.
+Tooltips can be placed on form elements to guide the user.
 
 ```html
 <label>Username
@@ -80,19 +80,21 @@ Les tooltips peuvent etre places sur des elements de formulaire pour guider l'ut
 
 ---
 
-## Resume des attributs
+## Attribute summary
 
-| Attribut | Requis | Description |
-|----------|--------|-------------|
-| `data-tooltip` | Oui | Texte affiche dans l'infobulle |
-| `data-placement` | Non | Position : `top` (defaut), `bottom`, `left`, `right` |
+| Attribute | Required | Description |
+|-----------|----------|-------------|
+| `data-tooltip` | Yes | Text displayed in the tooltip |
+| `data-placement` | No | Position: `top` (default), `bottom`, `left`, `right` |
 
 ---
 
-## Accessibilite
+## Accessibility
 
-- Les tooltips sont accessibles au clavier via le focus (`:focus` en plus de `:hover`).
-- Le contenu du `data-tooltip` est lu par les technologies d'assistance.
-- Evitez de placer des informations essentielles uniquement dans un tooltip ; le contenu doit rester comprehensible sans interaction de survol.
+- Tooltips are keyboard accessible via focus (`:focus` in addition to `:hover`).
+- The `data-tooltip` content is read by assistive technologies.
+- Avoid placing essential information only in a tooltip; the content should remain understandable without hover interaction.
 
-→ [Voir l'exemple](../examples/tooltip.html)
+> See also : [µLink](mu.link.md)
+
+> [See example](../examples/tooltip.html)

package/documentation/mu.typography.md

@@ -1,12 +1,12 @@
 # µTypography
 
-**µTypography** regroupe les elements typographiques natifs HTML styles par [PicoCSS](https://picocss.com) au sein du framework [µCSS](.). Aucun fichier CSS supplementaire n'est necessaire : les titres, paragraphes, listes, citations, code et elements semantiques inline sont styles automatiquement.
+**µTypography** covers native HTML typographic elements styled by [µCSS](.). No additional CSS file is needed: headings, paragraphs, lists, quotes, code and inline semantic elements are styled automatically.
 
 ---
 
-## Titres
+## Headings
 
-Les six niveaux de titres HTML sont styles avec des tailles et graisses progressives.
+The six HTML heading levels are styled with progressive sizes and weights.
 
 ```html
 <h1>Heading 1</h1>
@@ -19,7 +19,7 @@ Les six niveaux de titres HTML sont styles avec des tailles et graisses progress
 
 ### Heading group
 
-L'element `<hgroup>` permet d'associer un titre principal a un sous-titre ou une accroche.
+The `<hgroup>` element allows associating a main heading with a subtitle or tagline.
 
 ```html
 <hgroup>
@@ -28,13 +28,13 @@ L'element `<hgroup>` permet d'associer un titre principal a un sous-titre ou une
 </hgroup>
 ```
 
-Le paragraphe a l'interieur de `<hgroup>` est affiche dans un style attenue (couleur secondaire, taille reduite).
+The paragraph inside `<hgroup>` is displayed in a muted style (secondary color, reduced size).
 
 ---
 
-## Paragraphes
+## Paragraphs
 
-Les paragraphes utilisent le style par defaut de PicoCSS avec un espacement vertical harmonieux.
+Paragraphs use the default µCSS style with harmonious vertical spacing.
 
 ```html
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
@@ -45,9 +45,9 @@ dolore eu fugiat nulla pariatur.</p>
 
 ---
 
-## Citations
+## Blockquotes
 
-L'element `<blockquote>` affiche une citation avec un style visuel distinct (bordure laterale, retrait). Un `<footer>` avec `<cite>` permet d'attribuer la source.
+The `<blockquote>` element displays a quote with a distinct visual style (side border, indentation). A `<footer>` with `<cite>` allows attributing the source.
 
 ```html
 <blockquote>
@@ -58,9 +58,9 @@ L'element `<blockquote>` affiche une citation avec un style visuel distinct (bor
 
 ---
 
-## Listes
+## Lists
 
-### Liste non ordonnee
+### Unordered list
 
 ```html
 <ul>
@@ -75,7 +75,7 @@ L'element `<blockquote>` affiche une citation avec un style visuel distinct (bor
 </ul>
 ```
 
-### Liste ordonnee
+### Ordered list
 
 ```html
 <ol>
@@ -85,7 +85,7 @@ L'element `<blockquote>` affiche une citation avec un style visuel distinct (bor
 </ol>
 ```
 
-### Liste de definitions
+### Definition list
 
 ```html
 <dl>
@@ -98,22 +98,22 @@ L'element `<blockquote>` affiche une citation avec un style visuel distinct (bor
 
 ---
 
-## Texte inline semantique
+## Inline semantic text
 
-PicoCSS style automatiquement les elements semantiques inline :
+µCSS automatically styles inline semantic elements:
 
-| Element | Rendu | Usage |
-|---------|-------|-------|
-| `<strong>` | **Gras** | Importance forte |
-| `<em>` | *Italique* | Emphase |
-| `<u>` | Souligne | Annotation |
-| `<small>` | Petit texte | Mentions legales, notes |
-| `<del>` | ~~Barre~~ | Texte supprime |
-| `<ins>` | Souligne | Texte insere |
-| `<abbr>` | Pointille | Abreviation (avec `title`) |
-| `<mark>` | Surligne | Texte mis en evidence |
-| `<sub>` | Indice | Formules, notes |
-| `<sup>` | Exposant | References, puissances |
+| Element | Rendering | Usage |
+|---------|-----------|-------|
+| `<strong>` | **Bold** | Strong importance |
+| `<em>` | *Italic* | Emphasis |
+| `<u>` | Underlined | Annotation |
+| `<small>` | Small text | Legal mentions, notes |
+| `<del>` | ~~Strikethrough~~ | Deleted text |
+| `<ins>` | Underlined | Inserted text |
+| `<abbr>` | Dotted | Abbreviation (with `title`) |
+| `<mark>` | Highlighted | Highlighted text |
+| `<sub>` | Subscript | Formulas, notes |
+| `<sup>` | Superscript | References, powers |
 
 ```html
 <p><strong>Bold text</strong> and <em>italic text</em> and <u>underlined text</u>.</p>
@@ -127,17 +127,17 @@ PicoCSS style automatiquement les elements semantiques inline :
 
 ## Code
 
-### Code inline
+### Inline code
 
-L'element `<code>` affiche du code dans une police monospace avec un fond legerement colore.
+The `<code>` element displays code in a monospace font with a slightly colored background.
 
 ```html
 <p>Inline <code>code element</code> within text.</p>
 ```
 
-### Bloc de code
+### Code block
 
-Le couple `<pre><code>` affiche un bloc de code preformate avec fond distinct et defilement horizontal si necessaire.
+The `<pre><code>` combination displays a preformatted code block with a distinct background and horizontal scrolling if needed.
 
 ```html
 <pre><code>&lt;div class="container"&gt;
@@ -148,9 +148,9 @@ Le couple `<pre><code>` affiche un bloc de code preformate avec fond distinct et
 
 ---
 
-## Clavier
+## Keyboard
 
-L'element `<kbd>` represente une touche ou combinaison de touches avec un style de touche physique.
+The `<kbd>` element represents a key or key combination with a physical key style.
 
 ```html
 <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>
@@ -158,9 +158,9 @@ L'element `<kbd>` represente une touche ou combinaison de touches avec un style
 
 ---
 
-## Separateur horizontal
+## Horizontal separator
 
-L'element `<hr>` affiche un trait fin separant deux blocs de contenu.
+The `<hr>` element displays a thin line separating two content blocks.
 
 ```html
 <p>Content above the separator.</p>
@@ -172,7 +172,7 @@ L'element `<hr>` affiche un trait fin separant deux blocs de contenu.
 
 ## Figure
 
-L'element `<figure>` encadre un contenu (tableau, image, etc.) avec une legende via `<figcaption>`.
+The `<figure>` element wraps content (table, image, etc.) with a caption via `<figcaption>`.
 
 ```html
 <figure>
@@ -186,11 +186,13 @@ L'element `<figure>` encadre un contenu (tableau, image, etc.) avec une legende
 
 ---
 
-## Accessibilite
+## Accessibility
 
-- Utiliser les niveaux de titres dans l'ordre hierarchique (`h1` > `h2` > `h3`...) pour la navigation au lecteur d'ecran.
-- L'attribut `title` sur `<abbr>` fournit la forme complete de l'abreviation aux technologies d'assistance.
-- `<blockquote>` avec `<cite>` permet aux lecteurs d'ecran d'identifier la source d'une citation.
-- L'element `<mark>` est annonce comme "surbrillance" par les lecteurs d'ecran.
+- Use heading levels in hierarchical order (`h1` > `h2` > `h3`...) for screen reader navigation.
+- The `title` attribute on `<abbr>` provides the full form of the abbreviation to assistive technologies.
+- `<blockquote>` with `<cite>` allows screen readers to identify the source of a quote.
+- The `<mark>` element is announced as "highlight" by screen readers.
 
-→ [Voir l'exemple](../examples/typography.html)
+> See also : [µLink](mu.link.md) · [µCode](mu.code.md)
+
+> [See example](../examples/typography.html)

package/documentation/mu.utilities.md

@@ -0,0 +1,83 @@
+# µUtilities
+
+**µUtilities** provides generic CSS utility classes in [µCSS](.). These classes can be applied to any element.
+
+---
+
+## Positioning
+
+Three classes for sticky and fixed positioning, defined in `css/mu.utilities.css`:
+
+| Class | Effect |
+|-------|--------|
+| `.sticky-top` | `position: sticky; top: 0` — stays in flow, sticks to the top on scroll |
+| `.fixed-top` | `position: fixed; top: 0; right: 0; left: 0` — always fixed to the viewport top |
+| `.fixed-bottom` | `position: fixed; bottom: 0; right: 0; left: 0` — fixed to the viewport bottom |
+
+### Usage examples
+
+**Sticky navigation bar** (recommended for navbars):
+
+```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="#">Home</a></li>
+        <li><a href="#">About</a></li>
+    </ul>
+</nav>
+```
+
+**Sticky table header**:
+
+```html
+<table>
+    <thead class="sticky-top">
+        <tr><th>Name</th><th>Email</th></tr>
+    </thead>
+    <tbody>…</tbody>
+</table>
+```
+
+**Sticky sidebar / table of contents**:
+
+```html
+<aside class="sticky-top" style="top: 1rem;">
+    <nav>
+        <ul>
+            <li><a href="#section-1">Section 1</a></li>
+            <li><a href="#section-2">Section 2</a></li>
+        </ul>
+    </nav>
+</aside>
+```
+
+**Fixed bottom action bar** (mobile):
+
+```html
+<div class="fixed-bottom" style="padding: 1rem; background: var(--mu-background-color);">
+    <button class="btn btn-primary" style="width: 100%;">Confirm</button>
+</div>
+```
+
+### Nav-specific overrides
+
+When used on a `<nav>`, these classes automatically add `z-index: 100` and `box-shadow` to elevate the navbar above content. See [µNav](mu.nav.md#sticky-and-fixed-navbars).
+
+### Notes
+
+- `.sticky-top` requires a scrollable ancestor — the element stays in the document flow and sticks when scrolled past.
+- `.fixed-top` and `.fixed-bottom` remove the element from the flow — add `padding-top` or `padding-bottom` on `<body>` to prevent content from being hidden behind.
+- Override the default `top: 0` on `.sticky-top` via inline style if you need an offset (e.g., `style="top: 1rem"`).
+
+---
+
+## Color utilities
+
+Text, background, and border color classes are documented in [µColors](mu.colors.md#utility-classes).
+
+---
+
+> See also : [µColors](mu.colors.md) · [µNav](mu.nav.md) · [µTable](mu.table.md)