@digicreon/mucss 1.0.0

package/documentation/mu.table.md

@@ -0,0 +1,147 @@
+# µ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.
+
+---
+
+## Usage
+
+Apply one or more modifier classes directly on the `<table>` element:
+
+```html
+<table class="table-hover">
+    <thead>
+        <tr><th>Name</th><th>Role</th><th>Status</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>Alice</td><td>Developer</td><td>Active</td></tr>
+        <tr><td>Bob</td><td>Designer</td><td>Active</td></tr>
+        <tr><td>Charlie</td><td>Manager</td><td>Away</td></tr>
+    </tbody>
+</table>
+```
+
+---
+
+## Variants
+
+### Hover
+
+Highlights a row when the user hovers over it.
+
+```html
+<table class="table-hover">
+    ...
+</table>
+```
+
+### Striped
+
+Applies an alternating background on odd rows for better readability.
+
+```html
+<table class="table-striped">
+    ...
+</table>
+```
+
+### Bordered
+
+Adds a 1px border around the table and every cell.
+
+```html
+<table class="table-bordered">
+    ...
+</table>
+```
+
+### Compact
+
+Reduces cell padding to `0.25rem 0.5rem` for denser data display.
+
+```html
+<table class="table-compact">
+    ...
+</table>
+```
+
+### Fullwidth
+
+Forces the table to take up 100% of its container width.
+
+```html
+<table class="table-fullwidth">
+    ...
+</table>
+```
+
+---
+
+## Combining variants
+
+All modifier classes can be combined freely. Common combinations:
+
+```html
+<!-- Hover + bordered + fullwidth -->
+<table class="table-hover table-bordered table-fullwidth">
+    <thead>
+        <tr><th>ID</th><th>Name</th><th>Email</th><th>Role</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>Developer</td></tr>
+        <tr><td>2</td><td>Bob</td><td>bob@example.com</td><td>Designer</td></tr>
+    </tbody>
+</table>
+
+<!-- Compact + bordered + fullwidth -->
+<table class="table-compact table-bordered table-fullwidth">
+    <thead>
+        <tr><th>Key</th><th>Value</th><th>Type</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>host</td><td>localhost</td><td>string</td></tr>
+        <tr><td>port</td><td>8080</td><td>integer</td></tr>
+    </tbody>
+</table>
+
+<!-- Striped + hover + bordered + fullwidth -->
+<table class="table-striped table-hover table-bordered table-fullwidth">
+    ...
+</table>
+```
+
+---
+
+## Class reference
+
+| Class              | Effect                                                                 |
+|--------------------|------------------------------------------------------------------------|
+| `.table-hover`     | Background highlight on row hover (`--pico-secondary-background`)      |
+| `.table-striped`   | Alternating background on odd rows (50% `--pico-secondary-background`) |
+| `.table-bordered`  | 1px solid border on table, `<th>`, and `<td>`                          |
+| `.table-compact`   | Reduced padding: `0.25rem 0.5rem`                                      |
+| `.table-fullwidth` | `width: 100%`                                                          |
+
+---
+
+## Responsive tables
+
+For tables wider than their container, wrap them in a scrollable `<div>`:
+
+```html
+<div style="overflow-x: auto;">
+    <table class="table-bordered table-fullwidth">
+        ...
+    </table>
+</div>
+```
+
+---
+
+## Note on PicoCSS compatibility
+
+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.
+
+---
+
+→ [Voir l'exemple](../examples/table.html)

package/documentation/mu.tabs.md

@@ -0,0 +1,164 @@
+# µTabs
+
+**µTabs** is a tab navigation component for the [µCSS](.) framework. It supports standard underlined tabs and pill-style tabs, with options for alignment and fullwidth layout. Tab switching behavior is left to the application's JavaScript.
+
+---
+
+## Usage
+
+Create a `<ul>` with the `.tabs` class. Each tab is an `<a>` inside a `<li>`. Mark the active tab with `aria-selected="true"`.
+
+```html
+<ul class="tabs" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true">Dashboard</a></li>
+    <li><a href="#" role="tab">Profile</a></li>
+    <li><a href="#" role="tab">Settings</a></li>
+</ul>
+```
+
+The active tab displays a colored bottom border and bold text. Inactive tabs show a subtle secondary color that changes on hover.
+
+---
+
+## Variants
+
+### Standard tabs
+
+The default style uses an underline indicator with a bottom border.
+
+```html
+<ul class="tabs" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true">Dashboard</a></li>
+    <li><a href="#" role="tab">Profile</a></li>
+    <li><a href="#" role="tab">Settings</a></li>
+</ul>
+```
+
+### Pill tabs
+
+Add `.tabs-pills` for a rounded pill style. The active tab gets a filled background instead of an underline.
+
+```html
+<ul class="tabs tabs-pills" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true">Overview</a></li>
+    <li><a href="#" role="tab">Details</a></li>
+    <li><a href="#" role="tab">Reviews</a></li>
+</ul>
+```
+
+---
+
+## Alignment
+
+### Centered
+
+```html
+<ul class="tabs tabs-centered" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true">Home</a></li>
+    <li><a href="#" role="tab">About</a></li>
+    <li><a href="#" role="tab">Contact</a></li>
+</ul>
+```
+
+### End-aligned (right)
+
+```html
+<ul class="tabs tabs-end" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true">Home</a></li>
+    <li><a href="#" role="tab">About</a></li>
+    <li><a href="#" role="tab">Contact</a></li>
+</ul>
+```
+
+### Fullwidth
+
+Each tab takes equal width, filling the entire container.
+
+```html
+<ul class="tabs tabs-fullwidth" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true">Tab A</a></li>
+    <li><a href="#" role="tab">Tab B</a></li>
+    <li><a href="#" role="tab">Tab C</a></li>
+</ul>
+```
+
+---
+
+## Combining modifiers
+
+Modifiers can be combined freely. Common combinations:
+
+```html
+<!-- Centered pills -->
+<ul class="tabs tabs-pills tabs-centered" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true">Overview</a></li>
+    <li><a href="#" role="tab">Details</a></li>
+    <li><a href="#" role="tab">Reviews</a></li>
+</ul>
+
+<!-- Fullwidth pills -->
+<ul class="tabs tabs-pills tabs-fullwidth" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true">Day</a></li>
+    <li><a href="#" role="tab">Week</a></li>
+    <li><a href="#" role="tab">Month</a></li>
+</ul>
+```
+
+---
+
+## Tab panels
+
+µTabs does not include JavaScript. Panel switching is the application's responsibility. A typical pattern uses `data-tab` and `data-tab-panel` attributes with the `hidden` attribute:
+
+```html
+<ul class="tabs" role="tablist">
+    <li><a href="#" role="tab" aria-selected="true" data-tab="std-1">Dashboard</a></li>
+    <li><a href="#" role="tab" data-tab="std-2">Profile</a></li>
+    <li><a href="#" role="tab" data-tab="std-3">Settings</a></li>
+</ul>
+<div data-tab-panel="std-1">Dashboard content — overview of your account activity.</div>
+<div data-tab-panel="std-2" hidden>Profile content — manage your personal information.</div>
+<div data-tab-panel="std-3" hidden>Settings content — configure your preferences.</div>
+```
+
+---
+
+## Class reference
+
+| Class              | Effect                                                        |
+|--------------------|---------------------------------------------------------------|
+| `.tabs`            | Base flex container with bottom border, removes list-style    |
+| `.tabs-pills`      | Pill variant: no bottom border, rounded backgrounds           |
+| `.tabs-centered`   | Center-align tabs (`justify-content: center`)                 |
+| `.tabs-end`        | Right-align tabs (`justify-content: flex-end`)                |
+| `.tabs-fullwidth`  | Equal-width tabs filling the container (`flex: 1` on `<li>`)  |
+
+---
+
+## Active state
+
+The active tab is indicated by the `aria-selected="true"` attribute on the `<a>` element:
+
+| Style    | Active appearance                                                       |
+|----------|-------------------------------------------------------------------------|
+| Standard | Primary-colored bottom border, `font-weight: 600`, primary text color   |
+| Pills    | Filled primary background, inverse text color, no border                |
+
+---
+
+## Accessibility
+
+- Use `role="tablist"` on the `<ul>` container.
+- Use `role="tab"` on each `<a>` element.
+- Set `aria-selected="true"` on the active tab and `aria-selected="false"` (or omit) on inactive tabs.
+- Associate panels with `role="tabpanel"` and `aria-labelledby` for full WAI-ARIA compliance.
+
+---
+
+## Note on PicoCSS compatibility
+
+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.
+
+---
+
+→ [Voir l'exemple](../examples/tabs.html)

package/documentation/mu.tooltip.md

@@ -0,0 +1,98 @@
+# µ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.
+
+---
+
+## Utilisation de base
+
+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.
+
+```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 :
+
+```html
+<span data-tooltip="This is a tooltip"
+      style="text-decoration: underline dotted; cursor: help;">this text</span>
+```
+
+---
+
+## Placement
+
+L'attribut `data-placement` controle la position du tooltip. Quatre positions sont disponibles :
+
+| Valeur | Position |
+|--------|----------|
+| `top` | Au-dessus (par defaut) |
+| `bottom` | En dessous |
+| `left` | A gauche |
+| `right` | A droite |
+
+```html
+<span data-tooltip="Top tooltip" data-placement="top">Top</span>
+<span data-tooltip="Bottom tooltip" data-placement="bottom">Bottom</span>
+<span data-tooltip="Left tooltip" data-placement="left">Left</span>
+<span data-tooltip="Right tooltip" data-placement="right">Right</span>
+```
+
+---
+
+## Sur des boutons
+
+Les tooltips fonctionnent sur les boutons pour fournir un contexte supplementaire sur l'action.
+
+```html
+<button class="btn btn-primary" data-tooltip="Save your changes">Save</button>
+<button class="btn btn-ghost btn-error"
+        data-tooltip="This action cannot be undone"
+        data-placement="bottom">Delete</button>
+```
+
+---
+
+## Sur des liens
+
+Ajoutez un tooltip sur un lien pour decrire la destination ou l'action.
+
+```html
+<p>Visit the <a href="#" data-tooltip="Go to the homepage">homepage</a>
+or check the <a href="#" data-tooltip="Read the full documentation"
+data-placement="bottom">documentation</a>.</p>
+```
+
+---
+
+## Sur des champs de formulaire
+
+Les tooltips peuvent etre places sur des elements de formulaire pour guider l'utilisateur.
+
+```html
+<label>Username
+    <input type="text"
+           data-tooltip="Must be 3-20 characters"
+           placeholder="Enter username">
+</label>
+```
+
+---
+
+## Resume des attributs
+
+| Attribut | Requis | Description |
+|----------|--------|-------------|
+| `data-tooltip` | Oui | Texte affiche dans l'infobulle |
+| `data-placement` | Non | Position : `top` (defaut), `bottom`, `left`, `right` |
+
+---
+
+## Accessibilite
+
+- 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.
+
+→ [Voir l'exemple](../examples/tooltip.html)

package/documentation/mu.typography.md

@@ -0,0 +1,196 @@
+# µ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.
+
+---
+
+## Titres
+
+Les six niveaux de titres HTML sont styles avec des tailles et graisses progressives.
+
+```html
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+```
+
+### Heading group
+
+L'element `<hgroup>` permet d'associer un titre principal a un sous-titre ou une accroche.
+
+```html
+<hgroup>
+    <h2>Main heading</h2>
+    <p>Subtitle or tagline below the heading.</p>
+</hgroup>
+```
+
+Le paragraphe a l'interieur de `<hgroup>` est affiche dans un style attenue (couleur secondaire, taille reduite).
+
+---
+
+## Paragraphes
+
+Les paragraphes utilisent le style par defaut de PicoCSS avec un espacement vertical harmonieux.
+
+```html
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua.</p>
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+dolore eu fugiat nulla pariatur.</p>
+```
+
+---
+
+## Citations
+
+L'element `<blockquote>` affiche une citation avec un style visuel distinct (bordure laterale, retrait). Un `<footer>` avec `<cite>` permet d'attribuer la source.
+
+```html
+<blockquote>
+    "Design is not just what it looks like and feels like. Design is how it works."
+    <footer><cite>Steve Jobs</cite></footer>
+</blockquote>
+```
+
+---
+
+## Listes
+
+### Liste non ordonnee
+
+```html
+<ul>
+    <li>First item</li>
+    <li>Second item
+        <ul>
+            <li>Nested item A</li>
+            <li>Nested item B</li>
+        </ul>
+    </li>
+    <li>Third item</li>
+</ul>
+```
+
+### Liste ordonnee
+
+```html
+<ol>
+    <li>Step one</li>
+    <li>Step two</li>
+    <li>Step three</li>
+</ol>
+```
+
+### Liste de definitions
+
+```html
+<dl>
+    <dt>Term</dt>
+    <dd>Definition of the term.</dd>
+    <dt>Another term</dt>
+    <dd>Another definition.</dd>
+</dl>
+```
+
+---
+
+## Texte inline semantique
+
+PicoCSS style automatiquement les elements semantiques inline :
+
+| 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 |
+
+```html
+<p><strong>Bold text</strong> and <em>italic text</em> and <u>underlined text</u>.</p>
+<p><small>Small text</small> and <del>deleted text</del> and <ins>inserted text</ins>.</p>
+<p><abbr title="Cascading Style Sheets">CSS</abbr> is an abbreviation.</p>
+<p><mark>Highlighted text</mark> using the mark element.</p>
+<p>Text with <sub>subscript</sub> and <sup>superscript</sup>.</p>
+```
+
+---
+
+## Code
+
+### Code inline
+
+L'element `<code>` affiche du code dans une police monospace avec un fond legerement colore.
+
+```html
+<p>Inline <code>code element</code> within text.</p>
+```
+
+### Bloc de code
+
+Le couple `<pre><code>` affiche un bloc de code preformate avec fond distinct et defilement horizontal si necessaire.
+
+```html
+<pre><code>&lt;div class="container"&gt;
+  &lt;h1&gt;Hello World&lt;/h1&gt;
+  &lt;p&gt;This is a code block.&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+```
+
+---
+
+## Clavier
+
+L'element `<kbd>` represente une touche ou combinaison de touches avec un style de touche physique.
+
+```html
+<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>
+```
+
+---
+
+## Separateur horizontal
+
+L'element `<hr>` affiche un trait fin separant deux blocs de contenu.
+
+```html
+<p>Content above the separator.</p>
+<hr>
+<p>Content below the separator.</p>
+```
+
+---
+
+## Figure
+
+L'element `<figure>` encadre un contenu (tableau, image, etc.) avec une legende via `<figcaption>`.
+
+```html
+<figure>
+    <table>
+        <thead><tr><th>Name</th><th>Value</th></tr></thead>
+        <tbody><tr><td>Alpha</td><td>100</td></tr></tbody>
+    </table>
+    <figcaption>Figure 1 — A table inside a figure element.</figcaption>
+</figure>
+```
+
+---
+
+## Accessibilite
+
+- 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.
+
+→ [Voir l'exemple](../examples/typography.html)

package/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@digicreon/mucss",
+	"version": "1.0.0",
+	"description": "µCSS — A CSS framework built on PicoCSS v2",
+	"main": "dist/mu.css",
+	"style": "dist/mu.css",
+	"files": [
+		"dist/",
+		"documentation/",
+		"README.md"
+	],
+	"keywords": [
+		"css",
+		"framework",
+		"picocss",
+		"responsive",
+		"grid",
+		"components",
+		"dark-mode",
+		"accessible"
+	],
+	"homepage": "https://www.mucss.org",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Digicreon/muCSS.git"
+	},
+	"bugs": {
+		"url": "https://github.com/Digicreon/muCSS/issues"
+	},
+	"license": "MIT"
+}