@digicreon/mucss 1.0.0 → 1.2.0

package/documentation/mu.embedded.md

@@ -0,0 +1,101 @@
+# µEmbedded
+
+**µEmbedded** describes the styling of embedded content in [µCSS](.): images (`<img>`), videos (`<video>`), audio (`<audio>`), SVG, and canvas.
+
+---
+
+## Usage
+
+Images are responsive by default:
+
+```html
+<img src="photo.jpg" alt="Description de la photo">
+```
+
+---
+
+## Images
+
+Images receive `max-width: 100%` and `height: auto`, making them responsive without any additional class:
+
+```html
+<img src="large-photo.jpg" alt="Photo responsive">
+```
+
+| Property | Value |
+|----------|-------|
+| `max-width` | `100%` |
+| `height` | `auto` |
+| `border-style` | `none` |
+
+The image never exceeds the width of its container and maintains its aspect ratio.
+
+---
+
+## Video and audio
+
+The `<video>` and `<audio>` elements are displayed as `inline-block`:
+
+```html
+<video controls>
+    <source src="video.mp4" type="video/mp4">
+</video>
+
+<audio controls>
+    <source src="audio.mp3" type="audio/mpeg">
+</audio>
+```
+
+An `<audio>` element without the `controls` attribute is hidden (`display: none`).
+
+---
+
+## SVG
+
+SVGs inherit the text color via `fill: currentColor`, making them automatically theme-aware:
+
+```html
+<svg width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 2L2 22h20L12 2z"/>
+</svg>
+```
+
+The SVG will adapt to the surrounding text color, including when toggling between light and dark modes.
+
+---
+
+## Canvas
+
+The `<canvas>` element is displayed as `inline-block`:
+
+```html
+<canvas width="300" height="150"></canvas>
+```
+
+---
+
+## Inside a figure
+
+Combine embedded content with `<figure>` to add a caption:
+
+```html
+<figure>
+    <img src="photo.jpg" alt="Paysage">
+    <figcaption>Un paysage de montagne</figcaption>
+</figure>
+```
+
+See [µFigure](mu.figure.md) for more details.
+
+---
+
+## Accessibility
+
+- Always provide a descriptive `alt` attribute on `<img>` elements. Use `alt=""` for decorative images.
+- Add subtitles (`<track>`) to `<video>` elements.
+- The `controls` attribute on `<audio>` and `<video>` is essential for accessibility.
+- Inline SVGs should have a `role="img"` and an `aria-label` or an internal `<title>`.
+
+---
+
+> See also : [µFigure](mu.figure.md) · [µTypography](mu.typography.md)

package/documentation/mu.figure.md

@@ -0,0 +1,82 @@
+# µFigure
+
+**µFigure** describes the styling of the `<figure>` element and its `<figcaption>` caption in [µCSS](.).
+
+---
+
+## Usage
+
+Wrap illustrative content in `<figure>` with a `<figcaption>` caption:
+
+```html
+<figure>
+    <img src="photo.jpg" alt="Paysage de montagne">
+    <figcaption>Vue depuis le sommet du col</figcaption>
+</figure>
+```
+
+---
+
+## Style
+
+The `<figure>` element is reset with no margins or padding. The `<figcaption>` caption uses a muted color:
+
+| Element | Property | Value |
+|---------|----------|-------|
+| `<figure>` | `display` | `block` |
+| `<figure>` | `margin` | `0` |
+| `<figure>` | `padding` | `0` |
+| `<figcaption>` | `padding` | `calc(var(--mu-spacing) * 0.5) 0` |
+| `<figcaption>` | `color` | `--mu-muted-color` |
+
+---
+
+## With an image
+
+```html
+<figure>
+    <img src="graphique.png" alt="Graphique des ventes">
+    <figcaption>Ventes trimestrielles 2024</figcaption>
+</figure>
+```
+
+The image is responsive by default (`max-width: 100%`, see [µEmbedded](mu.embedded.md)).
+
+---
+
+## With a code block
+
+`<figure>` can wrap a code block:
+
+```html
+<figure>
+    <pre><code>const greeting = "Hello, World!";
+console.log(greeting);</code></pre>
+    <figcaption>Exemple de code JavaScript</figcaption>
+</figure>
+```
+
+---
+
+## With a quote
+
+```html
+<figure>
+    <blockquote>
+        La simplicite est la sophistication supreme.
+    </blockquote>
+    <figcaption>Leonard de Vinci</figcaption>
+</figure>
+```
+
+---
+
+## Accessibility
+
+- Always provide an `alt` attribute on images contained within `<figure>`.
+- `<figcaption>` serves as an accessible caption; it is automatically associated with the `<figure>` by screen readers.
+- For figures without `<figcaption>`, add an `aria-label` on the `<figure>`.
+
+---
+
+> See also : [µEmbedded](mu.embedded.md) · [µCode](mu.code.md) · [µTypography](mu.typography.md)

package/documentation/mu.forms-advanced.md

@@ -1,6 +1,6 @@
 # µForms (advanced)
 
-**µForms (advanced)** describes the specialized native input types styled by [µCSS](.) via PicoCSS. These include color pickers, date/time inputs, file uploads, search fields, and other input types, all styled automatically without additional classes.
+**µForms (advanced)** describes the specialized native input types styled by [µCSS](.). These include color pickers, date/time inputs, file uploads, search fields, and other input types, all styled automatically without additional classes.
 
 ---
 
@@ -18,7 +18,7 @@ The `<input type="color">` renders a native color picker widget.
 
 ## Date & time inputs
 
-PicoCSS styles all native date and time input types consistently.
+µCSS styles all native date and time input types consistently.
 
 ```html
 <label>Date
@@ -88,7 +88,7 @@ Wrap a search input and button inside a `<div role="search">` for a grouped sear
 
 ## Other input types
 
-PicoCSS styles several additional input types natively.
+µCSS styles several additional input types natively.
 
 ```html
 <label>Number
@@ -161,4 +161,6 @@ Use `aria-invalid` to indicate validation state visually. Add a `<small>` elemen
 
 ---
 
-→ [Voir l'exemple](../examples/forms-advanced.html)
+> See also : [µForms](mu.forms.md) · [µGroup](mu.group.md)
+
+→ [See example](../examples/forms-advanced.html)

package/documentation/mu.forms.md

@@ -1,12 +1,12 @@
 # µForms
 
-**µForms** extends PicoCSS form controls with size variants and validation states, part of the [µCSS](.) framework. It applies to `<input>`, `<textarea>`, and `<select>` elements.
+**µForms** provides form controls with size variants and validation states, part of the [µCSS](.) framework. It applies to `<input>`, `<textarea>`, and `<select>` elements.
 
 ---
 
 ## Input sizes
 
-Two size modifiers adjust padding and font size. Without a size class, the default PicoCSS styling applies.
+Two size modifiers adjust padding and font size. Without a size class, the default styling applies.
 
 ```html
 <label>Small input
@@ -25,7 +25,7 @@ Two size modifiers adjust padding and font size. Without a size class, the defau
 | Class       | Padding                  | Font size     | Applies to                       |
 |-------------|--------------------------|---------------|----------------------------------|
 | `.input-sm` | `0.375rem 0.625rem`      | `0.8125rem`   | `input`, `textarea`, `select`    |
-| *(default)* | *(PicoCSS default)*      | *(default)*   | `input`, `textarea`, `select`    |
+| *(default)* | *(default)*              | *(default)*   | `input`, `textarea`, `select`    |
 | `.input-lg` | `0.75rem 1rem`           | `1.125rem`    | `input`, `textarea`, `select`    |
 
 ### Textarea sizes
@@ -60,7 +60,7 @@ Two size modifiers adjust padding and font size. Without a size class, the defau
 
 ## Validation states
 
-µForms provides two validation classes that set border color and focus ring color. For error states, use the native `aria-invalid="true"` attribute (handled by PicoCSS).
+µForms provides two validation classes that set border color and focus ring color. For error states, use the native `aria-invalid="true"` attribute (built-in).
 
 ```html
 <label>Success
@@ -78,9 +78,9 @@ Two size modifiers adjust padding and font size. Without a size class, the defau
 
 | Class / Attribute        | Border color          | Focus ring color          |
 |--------------------------|-----------------------|---------------------------|
-| `.input-success`         | `--pico-success`      | `--pico-success-focus`    |
-| `.input-warning`         | `--pico-warning`      | `--pico-warning-focus`    |
-| `aria-invalid="true"`    | *(PicoCSS built-in)*  | *(PicoCSS built-in)*     |
+| `.input-success`         | `--mu-success`      | `--mu-success-focus`    |
+| `.input-warning`         | `--mu-warning`      | `--mu-warning-focus`    |
+| `aria-invalid="true"`    | *(built-in)*          | *(built-in)*             |
 
 ### Validation on textarea
 
@@ -138,10 +138,12 @@ Size and validation classes can be used together on the same element:
 
 ## Accessibility
 
-- Use `aria-invalid="true"` for error states (PicoCSS native support).
+- Use `aria-invalid="true"` for error states (native support).
 - Always wrap form controls inside `<label>` elements for proper association.
 - Validation colors supplement, but do not replace, text-based error messages.
 
 ---
 
-→ [Voir l'exemple](../examples/forms.html)
+> See also : [µForms (advanced)](mu.forms-advanced.md) · [µGroup](mu.group.md) · [µCheckbox & Radio](mu.checkbox-radio.md)
+
+→ [See example](../examples/forms.html)

package/documentation/mu.grid.md

@@ -1,6 +1,6 @@
 # µGrid
 
-**µGrid** is a lightweight flexbox-based 12-column responsive grid system, part of the [µCSS](.) framework. It provides a Bootstrap-compatible grid fallback for CSS frameworks that lack a built-in responsive grid (such as PicoCSS).
+**µGrid** is a lightweight flexbox-based 12-column responsive grid system, part of the [µCSS](.) framework. It provides a Bootstrap-compatible grid fallback for CSS frameworks that lack a built-in responsive grid (such as PicoCSS v2).
 
 **Weight:** ~4 KB uncompressed, ~1 KB gzipped.
 
@@ -173,3 +173,9 @@ When showing a `.row` that was previously hidden, use `d-{bp}-flex` instead of `
 - **No auto-sizing columns**: `.col` (without a number) is not supported.
 - **No `row-cols-*`**: automatic column count per row is not supported.
 - **No flex alignment utilities**: `justify-content-*`, `align-items-*` are not included.
+
+---
+
+> See also : [µContainer](mu.container.md)
+
+> [See example](../examples/grid.html)

package/documentation/mu.group.md

@@ -1,12 +1,12 @@
 # µGroup
 
-**µGroup** permet de regrouper visuellement des champs de formulaire et des boutons en une seule ligne, grace a l'attribut `role="group"` style par [PicoCSS](https://picocss.com) au sein du framework [µCSS](.). Les elements groupes partagent des bordures communes et s'alignent horizontalement.
+**µGroup** allows visually grouping form fields and buttons on a single line, using the `role="group"` attribute styled by [µCSS](.). Grouped elements share common borders and align horizontally.
 
 ---
 
-## Groupe de boutons
+## Button group
 
-L'attribut `role="group"` sur un conteneur regroupe les boutons en une barre horizontale avec des bordures fusionnees.
+The `role="group"` attribute on a container groups buttons into a horizontal bar with merged borders.
 
 ```html
 <div role="group">
@@ -18,9 +18,9 @@ L'attribut `role="group"` sur un conteneur regroupe les boutons en une barre hor
 
 ---
 
-## Input + bouton
+## Input + button
 
-Combinez un champ de saisie et un bouton dans un meme groupe pour creer un formulaire inline compact.
+Combine an input field and a button in the same group to create a compact inline form.
 
 ```html
 <div role="group">
@@ -31,9 +31,9 @@ Combinez un champ de saisie et un bouton dans un meme groupe pour creer un formu
 
 ---
 
-## Groupe de recherche
+## Search group
 
-Utilisez `role="search"` pour un groupe semantiquement identifie comme zone de recherche. Le rendu visuel est identique a `role="group"`.
+Use `role="search"` for a group semantically identified as a search area. The visual rendering is identical to `role="group"`.
 
 ```html
 <div role="search">
@@ -44,9 +44,9 @@ Utilisez `role="search"` pour un groupe semantiquement identifie comme zone de r
 
 ---
 
-## Input + select + bouton
+## Input + select + button
 
-Un groupe peut contenir plus de deux elements, par exemple un `<select>`, un `<input>` et un `<button>`.
+A group can contain more than two elements, for example a `<select>`, an `<input>` and a `<button>`.
 
 ```html
 <div role="group">
@@ -62,9 +62,9 @@ Un groupe peut contenir plus de deux elements, par exemple un `<select>`, un `<i
 
 ---
 
-## Boutons outline
+## Outline buttons
 
-Les boutons `.outline` fonctionnent egalement dans un groupe, offrant un style de barre de selection (toggle bar).
+`.outline` buttons also work within a group, providing a toggle bar style.
 
 ```html
 <div role="group">
@@ -76,27 +76,29 @@ Les boutons `.outline` fonctionnent egalement dans un groupe, offrant un style d
 
 ---
 
-## Resume des roles
+## Role summary
 
-| Attribut | Usage |
-|----------|-------|
-| `role="group"` | Groupe generique (boutons, inputs, selects) |
-| `role="search"` | Groupe de recherche (semantique) |
+| Attribute | Usage |
+|-----------|-------|
+| `role="group"` | Generic group (buttons, inputs, selects) |
+| `role="search"` | Search group (semantic) |
 
-## Elements supportes dans un groupe
+## Supported elements in a group
 
-| Element | Comportement |
-|---------|-------------|
-| `<button>` | Bouton d'action |
-| `<input>` | Champ de saisie (text, email, search, number, etc.) |
-| `<select>` | Liste de selection |
+| Element | Behavior |
+|---------|----------|
+| `<button>` | Action button |
+| `<input>` | Input field (text, email, search, number, etc.) |
+| `<select>` | Selection list |
 
 ---
 
-## Accessibilite
+## Accessibility
 
-- `role="group"` informe les technologies d'assistance que les elements sont lies et forment un ensemble logique.
-- `role="search"` identifie semantiquement la zone comme fonctionnalite de recherche, ce qui aide la navigation au lecteur d'ecran.
-- Les elements du groupe restent accessibles individuellement au clavier (navigation par `Tab`).
+- `role="group"` informs assistive technologies that the elements are related and form a logical set.
+- `role="search"` semantically identifies the area as a search feature, which helps screen reader navigation.
+- Elements within the group remain individually accessible via keyboard (`Tab` navigation).
 
-→ [Voir l'exemple](../examples/group.html)
+> See also : [µForms](mu.forms.md) · [µButton](mu.button.md)
+
+> [See example](../examples/group.html)

package/documentation/mu.hero.md

@@ -0,0 +1,200 @@
+# µHero
+
+**µHero** is a full-width hero section component, part of the [µCSS](.) framework. It provides 11 color roles with gradient backgrounds, badges, call-to-action buttons, and responsive sizing.
+
+---
+
+## Basic usage
+
+Apply `.hero` along with a color variant class to a `<section>`. Use an inner `.container` for content width:
+
+```html
+<section class="hero hero-primary">
+    <div class="container">
+        <h1>Title</h1>
+        <p class="hero-tagline">Tagline text</p>
+    </div>
+</section>
+```
+
+The hero must be placed **outside** `<main class="container">` for full-width rendering.
+
+---
+
+## Color variants (11 colors)
+
+All 11 color roles are available:
+
+```html
+<section class="hero hero-primary">...</section>
+<section class="hero hero-secondary">...</section>
+<section class="hero hero-tertiary">...</section>
+<section class="hero hero-contrast">...</section>
+<section class="hero hero-success">...</section>
+<section class="hero hero-info">...</section>
+<section class="hero hero-warning">...</section>
+<section class="hero hero-error">...</section>
+<section class="hero hero-accent">...</section>
+<section class="hero hero-pop">...</section>
+<section class="hero hero-spark">...</section>
+```
+
+Each variant defines `--hero-color` and `--hero-text` using the corresponding `--mu-{role}` and `--mu-{role}-inverse` variables (bridge pattern).
+
+| Class | Background | Text color |
+|-------|-----------|------------|
+| `.hero-primary` | `--mu-primary` | `--mu-primary-inverse` |
+| `.hero-secondary` | `--mu-secondary` | `--mu-secondary-inverse` |
+| `.hero-tertiary` | `--mu-tertiary` | `--mu-tertiary-inverse` |
+| `.hero-contrast` | `--mu-contrast` | `--mu-contrast-inverse` |
+| `.hero-success` | `--mu-success` | `--mu-success-inverse` |
+| `.hero-info` | `--mu-info` | `--mu-info-inverse` |
+| `.hero-warning` | `--mu-warning` | `--mu-warning-inverse` |
+| `.hero-error` | `--mu-error` | `--mu-error-inverse` |
+| `.hero-accent` | `--mu-accent` | `--mu-accent-inverse` |
+| `.hero-pop` | `--mu-pop` | `--mu-pop-inverse` |
+| `.hero-spark` | `--mu-spark` | `--mu-spark-inverse` |
+
+---
+
+## Full hero
+
+A complete hero with title, tagline, subtitle, badges and action buttons:
+
+```html
+<section class="hero hero-primary">
+    <div class="container">
+        <h1>My Project</h1>
+        <p class="hero-tagline">A short description of the project</p>
+        <p class="hero-subtitle">Additional details about the project</p>
+        <div class="hero-badges">
+            <span class="badge badge-pill">Feature 1</span>
+            <span class="badge badge-pill">Feature 2</span>
+            <span class="badge badge-pill">Feature 3</span>
+        </div>
+        <div class="hero-actions">
+            <a class="btn btn-primary" href="#">Get Started</a>
+            <a class="btn btn-secondary" href="#">GitHub</a>
+        </div>
+    </div>
+</section>
+```
+
+---
+
+## Tagline and subtitle
+
+- `.hero-tagline` — Larger text (1.35rem), opacity 0.9
+- `.hero-subtitle` — Smaller text (1.05rem), opacity 0.75
+
+---
+
+## Badges
+
+Wrap `.badge` elements inside `.hero-badges` for a centered flex row with semi-transparent white background:
+
+```html
+<div class="hero-badges">
+    <span class="badge badge-pill">Badge 1</span>
+    <span class="badge badge-pill">Badge 2</span>
+</div>
+```
+
+---
+
+## Action buttons
+
+Wrap `.btn` elements inside `.hero-actions`. Inside a hero, buttons are styled to contrast with the gradient background:
+
+- `.btn-primary` — White background, hero color text (inverted)
+- `.btn-secondary` — Semi-transparent white background, inherited text color
+
+```html
+<div class="hero-actions">
+    <a class="btn btn-primary" href="#">Primary action</a>
+    <a class="btn btn-secondary" href="#">Secondary action</a>
+</div>
+```
+
+---
+
+## Flat variant
+
+Use `.hero-flat` for a solid background without gradient:
+
+```html
+<section class="hero hero-primary hero-flat">
+    <div class="container">
+        <h1>Flat Hero</h1>
+        <p class="hero-tagline">Solid color background</p>
+    </div>
+</section>
+```
+
+---
+
+## Left-aligned variant
+
+Use `.hero-start` for left-aligned content:
+
+```html
+<section class="hero hero-primary hero-start">
+    <div class="container">
+        <h1>Left-Aligned</h1>
+        <p class="hero-tagline">Content aligned to the start</p>
+    </div>
+</section>
+```
+
+---
+
+## CSS classes reference
+
+| Class | Description |
+|-------|-------------|
+| `.hero` | Base hero section (centered, padded, gradient background) |
+| `.hero-{color}` | Color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`, `accent`, `pop`, `spark`) |
+| `.hero-tagline` | Tagline text (1.35rem, opacity 0.9) |
+| `.hero-subtitle` | Subtitle text (1.05rem, opacity 0.75) |
+| `.hero-badges` | Flex container for badges |
+| `.hero-actions` | Flex container for CTA buttons |
+| `.hero-flat` | Solid background without gradient |
+| `.hero-start` | Left-aligned content |
+
+---
+
+## Styling details
+
+| Property | Value |
+|----------|-------|
+| Padding | `4rem 0 3rem` (default), `3rem 0 2rem` (mobile), `5rem 0 4rem` (desktop) |
+| Gradient | `linear-gradient(135deg, color-mix(in oklch, --hero-color 80%, #000) 0%, color-mix(in oklch, --hero-color 50%, #000) 100%)` |
+| Title size | `3.5rem` (default), `2.5rem` (mobile), `4rem` (desktop) |
+| Badge background | `rgba(255, 255, 255, 0.2)` with `backdrop-filter: blur(4px)` |
+
+---
+
+## Responsive
+
+The hero adapts across three breakpoints:
+
+| Breakpoint | Title | Tagline | Padding |
+|------------|-------|---------|---------|
+| < 640px | 2.5rem | 1.15rem | 3rem / 2rem |
+| 640–960px | 3.5rem | 1.35rem | 4rem / 3rem |
+| > 960px | 4rem | 1.5rem | 5rem / 4rem |
+
+---
+
+## Accessibility
+
+- Use semantic `<section>` elements for heroes
+- Use `<h1>` for the main title
+- Action links use `.btn` classes which include `:focus-visible` outlines
+- Color contrast is ensured via `--mu-{role}-inverse` text colors
+
+---
+
+> See also : [µButton](mu.button.md) · [µBadge](mu.badge.md)
+
+→ [See example](../examples/hero.html)