@digicreon/mucss 1.0.0

package/documentation/mu.alert.md

@@ -0,0 +1,134 @@
+# µAlert
+
+**µAlert** is a notification banner component, part of the [µCSS](.) framework. It provides 8 color variants, an optional title, inline links, and a dismissible close button.
+
+---
+
+## Basic usage
+
+Apply `.alert` along with a color variant class to a `<div>`:
+
+```html
+<div class="alert alert-info">
+    <p>This is an informational alert.</p>
+</div>
+```
+
+---
+
+## Color variants
+
+All 8 color roles are available:
+
+```html
+<div class="alert alert-primary"><p>This is a <strong>primary</strong> alert.</p></div>
+<div class="alert alert-secondary"><p>This is a <strong>secondary</strong> alert.</p></div>
+<div class="alert alert-tertiary"><p>This is a <strong>tertiary</strong> alert.</p></div>
+<div class="alert alert-contrast"><p>This is a <strong>contrast</strong> alert.</p></div>
+<div class="alert alert-success"><p>This is a <strong>success</strong> alert.</p></div>
+<div class="alert alert-info"><p>This is an <strong>info</strong> alert.</p></div>
+<div class="alert alert-warning"><p>This is a <strong>warning</strong> alert.</p></div>
+<div class="alert alert-error"><p>This is an <strong>error</strong> alert.</p></div>
+```
+
+| Class | Text color | Background | Border |
+|-------|-----------|------------|--------|
+| `.alert-primary` | `--pico-primary` | `--pico-primary-background` | `--pico-primary` |
+| `.alert-secondary` | `--pico-secondary` | `--pico-secondary-background` | `--pico-secondary` |
+| `.alert-tertiary` | `--pico-tertiary` | `--pico-tertiary-background` | `--pico-tertiary` |
+| `.alert-contrast` | `--pico-contrast` | `--pico-contrast-background` | `--pico-contrast` |
+| `.alert-success` | `--pico-success` | `--pico-success-background` | `--pico-success` |
+| `.alert-info` | `--pico-info` | `--pico-info-background` | `--pico-info` |
+| `.alert-warning` | `--pico-warning` | `--pico-warning-background` | `--pico-warning` |
+| `.alert-error` | `--pico-error` | `--pico-error-background` | `--pico-error` |
+
+---
+
+## With title
+
+Add a `<span class="alert-title">` inside the alert for a bold heading:
+
+```html
+<div class="alert alert-success">
+    <span class="alert-title">Operation successful</span>
+    <p>Your changes have been saved. You can continue editing or return to the dashboard.</p>
+</div>
+
+<div class="alert alert-error">
+    <span class="alert-title">Something went wrong</span>
+    <p>Unable to process your request. Please try again later.</p>
+</div>
+```
+
+The `.alert-title` is displayed as a block element with `font-weight: 700` and a small bottom margin.
+
+---
+
+## Dismissible alerts
+
+Add `.alert-dismissible` to the alert and include a `.alert-close` button:
+
+```html
+<div class="alert alert-info alert-dismissible">
+    <span class="alert-title">Heads up!</span>
+    <p>This alert can be dismissed with the close button.</p>
+    <button class="alert-close" aria-label="Close" onclick="this.parentElement.remove()">&times;</button>
+</div>
+
+<div class="alert alert-warning alert-dismissible">
+    <p>A simple dismissible warning.</p>
+    <button class="alert-close" aria-label="Close" onclick="this.parentElement.remove()">&times;</button>
+</div>
+```
+
+- `.alert-dismissible` adds right padding (`3rem`) to make room for the close button.
+- `.alert-close` is absolutely positioned on the right side of the alert, centered vertically.
+- The close button inherits the alert's text color and transitions opacity on hover (0.6 to 1).
+
+---
+
+## With links
+
+Links inside alerts are styled with `font-weight: 600`, inherit the alert color, and have an underline:
+
+```html
+<div class="alert alert-primary">
+    <p>Check the <a href="#">documentation</a> for more details.</p>
+</div>
+```
+
+---
+
+## CSS classes reference
+
+| Class | Description |
+|-------|-------------|
+| `.alert` | Base alert container (padding, border-radius, margin-bottom) |
+| `.alert-{color}` | Color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`) |
+| `.alert-title` | Bold title block inside the alert |
+| `.alert-dismissible` | Adds right padding for the close button |
+| `.alert-close` | Close button, positioned absolutely at the right |
+
+---
+
+## Styling details
+
+| Property | Value |
+|----------|-------|
+| Padding | `0.75rem 1rem` |
+| Border radius | `0.375rem` |
+| Font size | `0.9375rem` |
+| Margin bottom | `1rem` |
+| Close button width | `3rem` |
+
+---
+
+## Accessibility
+
+- Use `aria-label="Close"` on the `.alert-close` button so screen readers announce its purpose.
+- The close button has a `:focus-visible` outline (`2px solid currentColor`) for keyboard navigation.
+- The dismiss behavior (removing the element) is handled by application JavaScript -- µCSS provides only the CSS styling.
+
+---
+
+→ [Voir l'exemple](../examples/alert.html)

package/documentation/mu.badge.md

@@ -0,0 +1,155 @@
+# µBadge
+
+**µBadge** is an inline label and counter component, part of the [µCSS](.) framework. It supports 8 color variants, outline style, pill shape, three sizes, and an attached positioning mode for notification counters.
+
+---
+
+## Basic usage
+
+Apply `.badge` along with a color variant class to a `<span>`:
+
+```html
+<span class="badge badge-primary">Primary</span>
+```
+
+The default badge (without a color class) uses `--pico-contrast` as its background color.
+
+---
+
+## Color variants (filled)
+
+All 8 color roles are available:
+
+```html
+<span class="badge badge-primary">Primary</span>
+<span class="badge badge-secondary">Secondary</span>
+<span class="badge badge-tertiary">Tertiary</span>
+<span class="badge badge-contrast">Contrast</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-error">Error</span>
+```
+
+| Class | Background | Text color | Border |
+|-------|-----------|------------|--------|
+| `.badge-primary` | `--pico-primary` | `--pico-primary-inverse` | `--pico-primary` |
+| `.badge-secondary` | `--pico-secondary` | `--pico-secondary-inverse` | `--pico-secondary` |
+| `.badge-tertiary` | `--pico-tertiary` | `--pico-tertiary-inverse` | `--pico-tertiary` |
+| `.badge-contrast` | `--pico-contrast` | `--pico-contrast-inverse` | `--pico-contrast` |
+| `.badge-success` | `--pico-success` | `--pico-success-inverse` | `--pico-success` |
+| `.badge-info` | `--pico-info` | `--pico-info-inverse` | `--pico-info` |
+| `.badge-warning` | `--pico-warning` | `--pico-warning-inverse` | `--pico-warning` |
+| `.badge-error` | `--pico-error` | `--pico-error-inverse` | `--pico-error` |
+
+---
+
+## Outline variant
+
+Add `.badge-outline` to remove the background and keep only the border and colored text:
+
+```html
+<span class="badge badge-outline badge-primary">Primary</span>
+<span class="badge badge-outline badge-secondary">Secondary</span>
+<span class="badge badge-outline badge-tertiary">Tertiary</span>
+<span class="badge badge-outline badge-contrast">Contrast</span>
+<span class="badge badge-outline badge-success">Success</span>
+<span class="badge badge-outline badge-info">Info</span>
+<span class="badge badge-outline badge-warning">Warning</span>
+<span class="badge badge-outline badge-error">Error</span>
+```
+
+The `.badge-outline` class sets `background-color: transparent` and changes the text color to match the role color.
+
+---
+
+## Pill shape
+
+Add `.badge-pill` for fully rounded corners (useful for counters and short labels):
+
+```html
+<span class="badge badge-primary badge-pill">12</span>
+<span class="badge badge-success badge-pill">99+</span>
+<span class="badge badge-error badge-pill">New</span>
+<span class="badge badge-outline badge-info badge-pill">Beta</span>
+```
+
+---
+
+## Sizes
+
+Three sizes are available:
+
+```html
+<span class="badge badge-primary badge-sm">Small</span>
+<span class="badge badge-primary">Default</span>
+<span class="badge badge-primary badge-lg">Large</span>
+```
+
+| Class | Font size | Padding |
+|-------|-----------|---------|
+| `.badge-sm` | `0.6875rem` | `0.15em 0.4em` |
+| *(default)* | `0.75rem` | `0.2em 0.55em` |
+| `.badge-lg` | `0.875rem` | `0.3em 0.7em` |
+
+---
+
+## Attached (notification counter)
+
+Use `.badge-attached` to position a badge as a notification counter on the corner of a parent element. The parent must have `position: relative`:
+
+```html
+<span style="position: relative; display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--pico-secondary-background); border-radius: 0.375rem;">
+    Inbox
+    <span class="badge badge-error badge-attached badge-pill">3</span>
+</span>
+
+<span style="position: relative; display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--pico-secondary-background); border-radius: 0.375rem;">
+    Notifications
+    <span class="badge badge-warning badge-attached badge-pill">12</span>
+</span>
+```
+
+The `.badge-attached` class uses absolute positioning (`top: -0.4em; right: -0.4em`) and a pill border-radius. It has a smaller font size (`0.625rem`) and minimum dimensions of `1.2em`.
+
+---
+
+## As links
+
+Badges can be rendered as `<a>` or `<button>` elements for clickable behavior:
+
+```html
+<a class="badge badge-primary" href="#">Clickable</a>
+<a class="badge badge-outline badge-success" href="#">Link badge</a>
+```
+
+Link and button badges remove text-decoration, use a pointer cursor, and reduce opacity to `0.85` on hover.
+
+---
+
+## CSS classes reference
+
+| Class | Description |
+|-------|-------------|
+| `.badge` | Base badge (inline-flex, padding, font-size, border-radius) |
+| `.badge-{color}` | Color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`) |
+| `.badge-outline` | Transparent background, colored text and border |
+| `.badge-pill` | Fully rounded corners (`border-radius: 50rem`) |
+| `.badge-sm` | Small size |
+| `.badge-lg` | Large size |
+| `.badge-attached` | Absolute positioning for notification counters |
+
+---
+
+## Styling details
+
+| Property | Value |
+|----------|-------|
+| Default border radius | `0.25rem` |
+| Font weight | `600` |
+| Line height | `1` |
+| Default font size | `0.75rem` |
+
+---
+
+→ [Voir l'exemple](../examples/badge.html)

package/documentation/mu.breadcrumb.md

@@ -0,0 +1,140 @@
+# µBreadcrumb
+
+**µBreadcrumb** is a navigation trail component, part of the [µCSS](.) framework. It provides multiple separator styles, a boxed variant, and proper ARIA semantics for accessible navigation.
+
+---
+
+## Basic usage
+
+Use a `<nav>` with `aria-label="Breadcrumb"` wrapping a `<ul class="breadcrumb">`. The last item represents the current page:
+
+```html
+<nav aria-label="Breadcrumb">
+    <ul class="breadcrumb">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Products</a></li>
+        <li><a href="#">Category</a></li>
+        <li aria-current="page">Current Page</li>
+    </ul>
+</nav>
+```
+
+The default separator between items is `/`.
+
+---
+
+## Separator styles
+
+Three alternative separator styles are available by adding a modifier class to the `<ul>`:
+
+### Arrow separator
+
+```html
+<nav aria-label="Breadcrumb">
+    <ul class="breadcrumb breadcrumb-arrow">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Library</a></li>
+        <li aria-current="page">Article</li>
+    </ul>
+</nav>
+```
+
+### Dot separator
+
+```html
+<nav aria-label="Breadcrumb">
+    <ul class="breadcrumb breadcrumb-dot">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Settings</a></li>
+        <li aria-current="page">Profile</li>
+    </ul>
+</nav>
+```
+
+### Chevron separator
+
+```html
+<nav aria-label="Breadcrumb">
+    <ul class="breadcrumb breadcrumb-chevron">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Dashboard</a></li>
+        <li><a href="#">Reports</a></li>
+        <li aria-current="page">Monthly</li>
+    </ul>
+</nav>
+```
+
+| Class | Separator character |
+|-------|-------------------|
+| *(default)* | `/` |
+| `.breadcrumb-arrow` | `>` (single right-pointing angle) |
+| `.breadcrumb-dot` | `*` (middle dot) |
+| `.breadcrumb-chevron` | `>>` (double right-pointing angle) |
+
+---
+
+## Boxed variant
+
+Add `.breadcrumb-boxed` for a background container with padding and rounded corners:
+
+```html
+<nav aria-label="Breadcrumb">
+    <ul class="breadcrumb breadcrumb-boxed">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Account</a></li>
+        <li aria-current="page">Settings</li>
+    </ul>
+</nav>
+```
+
+The boxed variant can be combined with any separator style:
+
+```html
+<nav aria-label="Breadcrumb">
+    <ul class="breadcrumb breadcrumb-boxed breadcrumb-arrow">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Projects</a></li>
+        <li aria-current="page">µCSS</li>
+    </ul>
+</nav>
+```
+
+---
+
+## CSS classes reference
+
+| Class | Description |
+|-------|-------------|
+| `.breadcrumb` | Base breadcrumb list (flex, no list-style, font-size 0.875rem) |
+| `.breadcrumb-arrow` | Uses `>` as separator |
+| `.breadcrumb-dot` | Uses `*` as separator |
+| `.breadcrumb-chevron` | Uses `>>` as separator |
+| `.breadcrumb-boxed` | Adds background, padding, and border-radius |
+
+---
+
+## Styling details
+
+| Property | Value |
+|----------|-------|
+| Font size | `0.875rem` |
+| Separator margin | `0 0.5rem` |
+| Separator color | `var(--pico-secondary)` at 60% opacity |
+| Link color | `var(--pico-primary)` |
+| Link hover | `var(--pico-primary-hover)` with underline |
+| Current page color | `var(--pico-secondary)` |
+| Boxed padding | `0.5rem 1rem` |
+| Boxed background | `var(--pico-secondary-background)` |
+| Boxed border radius | `0.375rem` |
+
+---
+
+## Accessibility
+
+- Wrap the breadcrumb in a `<nav>` element with `aria-label="Breadcrumb"`.
+- Mark the current page item with `aria-current="page"` (no `<a>` tag needed).
+- The last item and items with `aria-current` are automatically styled in the secondary color to indicate the active page.
+
+---
+
+→ [Voir l'exemple](../examples/breadcrumb.html)

package/documentation/mu.button.md

@@ -0,0 +1,147 @@
+# µButton
+
+**µButton** is a button component, part of the [µCSS](.) framework. It provides 8 color roles in filled and ghost variants, a link style, three sizes, and works on both `<button>` and `<a>` elements.
+
+---
+
+## Basic usage
+
+Apply `.btn` along with a color variant class:
+
+```html
+<button class="btn btn-primary">Primary</button>
+```
+
+The `.btn` class can also be applied to `<a>` elements to render links as buttons:
+
+```html
+<a class="btn btn-primary" href="#">Link as button</a>
+```
+
+---
+
+## Filled variants (8 colors)
+
+All 8 color roles are available as filled buttons:
+
+```html
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-secondary">Secondary</button>
+<button class="btn btn-tertiary">Tertiary</button>
+<button class="btn btn-contrast">Contrast</button>
+<button class="btn btn-success">Success</button>
+<button class="btn btn-info">Info</button>
+<button class="btn btn-warning">Warning</button>
+<button class="btn btn-error">Error</button>
+```
+
+Each filled button has a solid background, matching border, and an inverse text color. On hover, the background and border shift to the `-hover` variant of the color.
+
+| Class | Background | Text color | Hover background |
+|-------|-----------|------------|-----------------|
+| `.btn-primary` | `--pico-primary` | `--pico-primary-inverse` | `--pico-primary-hover` |
+| `.btn-secondary` | `--pico-secondary` | `--pico-secondary-inverse` | `--pico-secondary-hover` |
+| `.btn-tertiary` | `--pico-tertiary` | `--pico-tertiary-inverse` | `--pico-tertiary-hover` |
+| `.btn-contrast` | `--pico-contrast` | `--pico-contrast-inverse` | `--pico-contrast-hover` |
+| `.btn-success` | `--pico-success` | `--pico-success-inverse` | `--pico-success-hover` |
+| `.btn-info` | `--pico-info` | `--pico-info-inverse` | `--pico-info-hover` |
+| `.btn-warning` | `--pico-warning` | `--pico-warning-inverse` | `--pico-warning-hover` |
+| `.btn-error` | `--pico-error` | `--pico-error-inverse` | `--pico-error-hover` |
+
+---
+
+## Ghost variant
+
+Add `.btn-ghost` alongside a color class for a transparent background with visible border and colored text:
+
+```html
+<button class="btn btn-ghost btn-primary">Primary</button>
+<button class="btn btn-ghost btn-secondary">Secondary</button>
+<button class="btn btn-ghost btn-tertiary">Tertiary</button>
+<button class="btn btn-ghost btn-contrast">Contrast</button>
+<button class="btn btn-ghost btn-success">Success</button>
+<button class="btn btn-ghost btn-info">Info</button>
+<button class="btn btn-ghost btn-warning">Warning</button>
+<button class="btn btn-ghost btn-error">Error</button>
+```
+
+Ghost buttons have `background-color: transparent`, text color matching the role, and a matching border. On hover, opacity is reduced to `0.8`.
+
+---
+
+## Link style
+
+Use `.btn-link` for a button that looks like a text link (no background, no border, underlined):
+
+```html
+<button class="btn btn-link">Link button</button>
+```
+
+The link style uses `--pico-primary` as its text color and `--pico-primary-hover` on hover.
+
+---
+
+## Sizes
+
+Three sizes are available:
+
+```html
+<button class="btn btn-primary btn-sm">Small</button>
+<button class="btn btn-primary">Default</button>
+<button class="btn btn-primary btn-lg">Large</button>
+```
+
+| Class | Font size | Padding |
+|-------|-----------|---------|
+| `.btn-sm` | `0.8125rem` | `0.375rem 0.625rem` |
+| *(default)* | `1rem` | `0.5rem 1rem` |
+| `.btn-lg` | `1.125rem` | `0.75rem 1.25rem` |
+
+---
+
+## As links
+
+Any `<a>` element can use `.btn` classes to look like a button:
+
+```html
+<a class="btn btn-primary" href="#">Link as button</a>
+<a class="btn btn-ghost btn-success" href="#">Ghost link</a>
+<a class="btn btn-error btn-lg" href="#">Large link</a>
+```
+
+---
+
+## CSS classes reference
+
+| Class | Description |
+|-------|-------------|
+| `.btn` | Base button (inline-flex, padding, font-weight 600, border-radius, transitions) |
+| `.btn-{color}` | Filled color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`) |
+| `.btn-ghost` | Transparent background, colored border and text |
+| `.btn-link` | Looks like a text link (transparent, underlined, primary color) |
+| `.btn-sm` | Small size |
+| `.btn-lg` | Large size |
+
+---
+
+## Styling details
+
+| Property | Value |
+|----------|-------|
+| Border radius | `0.375rem` |
+| Font weight | `600` |
+| Line height | `1.5` |
+| Gap (for icons) | `0.5em` |
+| Transition | `background-color, border-color, color` at `0.15s ease-in-out` |
+
+---
+
+## Accessibility
+
+- Each color variant has a dedicated `:focus-visible` outline using the `--pico-{color}-focus` variable with a `2px` outline offset.
+- The `.btn-link` variant follows link color conventions for consistency with standard anchor styling.
+- Use `<button>` for actions and `<a>` for navigation to maintain proper semantics.
+
+---
+
+→ [Voir l'exemple](../examples/button.html)