@digicreon/mucss 1.2.0 → 1.4.1

package/documentation/mu.grid.md

@@ -8,15 +8,16 @@
 
 ## Breakpoints
 
-µGrid uses a mobile-first approach with 4 breakpoints:
+µGrid uses a mobile-first approach with 5 breakpoints:
 
 | Name | Prefix | Min-width | Typical use          |
 |------|--------|-----------|----------------------|
 | —    | *(none)* | 0       | Mobile (default)     |
-| sm   | `-sm-` | 640px     | Mobile landscape     |
-| md   | `-md-` | 960px     | Tablet               |
-| lg   | `-lg-` | 1200px    | Desktop              |
-| xl   | `-xl-` | 1400px    | Large desktop        |
+| sm   | `-sm-` | 576px     | Mobile landscape     |
+| md   | `-md-` | 768px     | Tablet               |
+| lg   | `-lg-` | 1024px    | Desktop              |
+| xl   | `-xl-` | 1280px    | Large desktop        |
+| xxl  | `-xxl-`| 1536px    | Extra-large desktop  |
 
 All classes without a breakpoint prefix apply to all screen sizes. Prefixed classes apply from the specified breakpoint and up.
 
@@ -168,8 +169,7 @@ When showing a `.row` that was previously hidden, use `d-{bp}-flex` instead of `
 
 µGrid uses the same class naming conventions as Bootstrap 5. Main differences:
 
-- **4 breakpoints** instead of 5: Bootstrap's `xl` and `xxl` are merged into `xl`.
-- **Breakpoint values differ slightly**: `sm` is 640px (vs 576px), `md` is 960px (vs 768px).
+- **Breakpoint values differ slightly** from Bootstrap: `lg` is 1024px (vs 992px), `xl` is 1280px (vs 1200px), `xxl` is 1536px (vs 1400px).
 - **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.

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 the default table styling.
+**µTable** provides enhanced table styles for the [µCSS](.) framework. It adds hover highlights, striped rows, bordered cells, and compact padding on top of the default table styling.
 
 ---
 
@@ -65,16 +65,6 @@ Reduces cell padding to `0.25rem 0.5rem` for denser data display.
 </table>
 ```
 
-### Fullwidth
-
-Forces the table to take up 100% of its container width.
-
-```html
-<table class="table-fullwidth">
-    ...
-</table>
-```
-
 ---
 
 ## Combining variants
@@ -82,8 +72,8 @@ Forces the table to take up 100% of its container width.
 All modifier classes can be combined freely. Common combinations:
 
 ```html
-<!-- Hover + bordered + fullwidth -->
-<table class="table-hover table-bordered table-fullwidth">
+<!-- Hover + bordered -->
+<table class="table-hover table-bordered">
     <thead>
         <tr><th>ID</th><th>Name</th><th>Email</th><th>Role</th></tr>
     </thead>
@@ -93,8 +83,8 @@ All modifier classes can be combined freely. Common combinations:
     </tbody>
 </table>
 
-<!-- Compact + bordered + fullwidth -->
-<table class="table-compact table-bordered table-fullwidth">
+<!-- Compact + bordered -->
+<table class="table-compact table-bordered">
     <thead>
         <tr><th>Key</th><th>Value</th><th>Type</th></tr>
     </thead>
@@ -104,8 +94,8 @@ All modifier classes can be combined freely. Common combinations:
     </tbody>
 </table>
 
-<!-- Striped + hover + bordered + fullwidth -->
-<table class="table-striped table-hover table-bordered table-fullwidth">
+<!-- Striped + hover + bordered -->
+<table class="table-striped table-hover table-bordered">
     ...
 </table>
 ```
@@ -120,7 +110,6 @@ All modifier classes can be combined freely. Common combinations:
 | `.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%`                                                          |
 
 ---
 
@@ -130,7 +119,7 @@ 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 class="table-bordered">
         ...
     </table>
 </div>

package/documentation/mu.var.md

@@ -0,0 +1,53 @@
+# µVar
+
+**µVar** styles the `<var>` HTML element to match the appearance of `<code>`, `<kbd>`, and `<samp>` in [µCSS](.). PicoCSS does not style `<var>`, so this component fills the gap.
+
+---
+
+## Usage
+
+Use `<var>` to represent a variable name in code or a mathematical expression:
+
+```html
+<p>Set <var>x</var> to the return value of <code>getData()</code>.</p>
+```
+
+No class is needed — the styling applies directly to the `<var>` element.
+
+---
+
+## Styling details
+
+| Property | Value |
+|----------|-------|
+| Font family | `--mu-font-family-monospace` |
+| Font size | `0.875em` |
+| Font style | `italic` |
+| Padding | `0.375rem` |
+| Border radius | `--mu-border-radius` |
+| Background | `--mu-code-background-color` |
+| Color | `--mu-code-color` |
+
+The italic style distinguishes `<var>` from `<code>`, `<kbd>`, and `<samp>`.
+
+---
+
+## Comparison
+
+| Element | Semantic meaning | Italic |
+|---------|-----------------|--------|
+| `<code>` | Code fragment | No |
+| `<kbd>` | Keyboard input | No |
+| `<samp>` | Program output | No |
+| `<var>` | Variable or placeholder | Yes |
+
+---
+
+## Accessibility
+
+- Use `<var>` only for variable names or placeholders — not for general emphasis (use `<em>` instead).
+- Screen readers may announce `<var>` differently depending on the browser, helping distinguish it from surrounding code.
+
+---
+
+> See also : [Typography](../examples/typography.html)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@digicreon/mucss",
-	"version": "1.2.0",
+	"version": "1.4.1",
 	"description": "µCSS — Full-featured themeable CSS framework.",
 	"main": "dist/mu.css",
 	"style": "dist/mu.css",