mancha 0.23.1 → 0.24.1

package/docs/05_css.md

@@ -14,24 +14,47 @@ The minimal CSS rules provide a clean, readable default style for standard HTML
 - **H1-H6 Margin**: 1em 0 0.5em
 - **P, UL, OL Margin Bottom**: 1em
 
-## Basic CSS
+## CSS Reset
 
-The basic CSS rules provide a more comprehensive reset and set of defaults, widely based on Tailwind CSS Preflight. You can inject them using `injectCss(["basic"])` or by adding `css="basic"` to your script tag.
+The reset provides a comprehensive set of defaults, widely based on Tailwind CSS Preflight. It ships with the utility classes: adding `css="utils"` to your script tag, or calling `injectCss(["utils"])`, injects both.
 
 ### Key Features
-- **Box Sizing**: `border-box` globally
 - **Typography**: Default sans-serif font stack, consistent line-height
-- **Form Elements**: Inherit font styles, transparent backgrounds, `cursor: pointer` for buttons
-- **Media**: Images/videos max-width 100%
+- **Form Elements**: Inherit font styles and color from their container, with margin and padding zeroed; buttons also get a transparent background and `cursor: pointer`
 - **Dialog**: Default backdrop styling
 - **Resets**: Removes default margins/paddings from most block elements
 
+### Layout Effects
+
+The reset applies to **all of your markup**, not only to elements carrying utility classes, so plain HTML lays out differently once it is injected. The rules with layout, rather than merely typographic, consequences are:
+
+- `img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}` — media is no longer inline. `text-align:center` on a parent stops centering it, the inline baseline gap below images disappears, and images no longer flow alongside adjacent text.
+- `img,video{max-width:100%;height:auto}` — media never overflows its container. `height:auto` also overrides the HTML `height` attribute, so `<img width="300" height="100">` renders at the file's own aspect ratio instead of the requested one. Inside a flex row the same clamp lets an image shrink below its intrinsic size.
+- `*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}` — padding and border no longer add to an element's width. Default borders are also stripped, including those set through presentational HTML attributes, so `fieldset`, `iframe`, `img`, and `table` render without one until a border utility is applied. `hr` is the exception: the reset gives it back a 1px top border so horizontal rules stay visible.
+- `body{margin:0;…}` and `blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}` — the page loses its default gutter and headings, paragraphs, and other blocks no longer space themselves apart, so plain prose collapses into a single run of text until spacing utilities are applied.
+- `ol,ul,menu{list-style:none;margin:0;padding:0}` — bullets, numbers, and list indentation are gone; restore them with the `list-*` and padding utilities.
+- `button,input,optgroup,select,textarea{…;margin:0;padding:0}` — form controls lose their native margin and padding on top of inheriting the surrounding font and color, so inputs and text areas render flush against their content and need padding utilities to look clickable.
+- `button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none;cursor:pointer}` — buttons lose their native chrome entirely and must be styled explicitly.
+- `:disabled{cursor:default;pointer-events:none;opacity:0.75}` — beyond dimming, `pointer-events:none` is a behavioral change: disabled controls stop receiving hover, tooltip, and click handling. Tailwind Preflight only sets `cursor:default` here; the `pointer-events` and `opacity` declarations are mancha additions.
+
+Opt out per element with utilities, e.g. to stop a flex item from being shrunk by its siblings. The class belongs on the flex item itself — on a nested image it does nothing, because only direct children of the flex container are flex items:
+
+```html
+<div class="flex">
+  <div class="flex-none">
+    <img src="logo.svg" />
+  </div>
+</div>
+```
+
+The wrapper then keeps its content width, so the image is not shrunk. `flex-none` on the image itself is not enough even when the image is the direct flex child, because `max-width:100%` clamps it regardless of how flex sizes it. That clamp applies everywhere, not just in flex rows: an image in a container narrower than itself is scaled down to fit. Undo it with the arbitrary value `max-w-[none]` — there is no `max-w-none` utility.
+
 ## Utility CSS
 
 The utility CSS rules are inspired by Tailwind CSS. You can inject them using `injectCss(["utils"])` or by adding `css="utils"` to your script tag.
 
 This automatically includes:
-- **CSS Reset** (Tailwind Preflight): box-sizing, typography, form resets, media defaults
+- **CSS Reset**: box-sizing, typography, form and media defaults applied to all of your markup — see [CSS Reset](#css-reset), in particular the layout effects on images, lists, and form controls
 - **Base utility classes**: spacing, sizing, colors, layout, typography, and more
 - **On-demand scanning**: responsive variants, orientation variants, pseudo-state variants, color opacity, custom bracket values, and dark mode are generated on-the-fly for only the classes actually used in your markup
 
@@ -156,19 +179,19 @@ You can also control the opacity of any color utility by appending `/{opacity}`
 
 | Utility | Description |
 | --- | --- |
-| `border` | `{"border":"1px solid"}` |
-| `border-none` | `{"border":"none"}` |
-| `border-solid` | `{"border-style":"solid"}` |
-| `border-dashed` | `{"border-style":"dashed"}` |
-| `border-dotted` | `{"border-style":"dotted"}` |
-| `border-collapse` | `{"border-collapse":"collapse"}` |
-| `rounded-none` | `{"border-radius":"0"}` |
-| `rounded` | `{"border-radius":".25rem"}` |
-| `rounded-sm` | `{"border-radius":".125rem"}` |
-| `rounded-md` | `{"border-radius":".375rem"}` |
-| `rounded-lg` | `{"border-radius":".5rem"}` |
-| `rounded-xl` | `{"border-radius":".75rem"}` |
-| `rounded-full` | `{"border-radius":"9999px"}` |
+| `border` | `border: 1px solid` |
+| `border-none` | `border: none` |
+| `border-solid` | `border-style: solid` |
+| `border-dashed` | `border-style: dashed` |
+| `border-dotted` | `border-style: dotted` |
+| `border-collapse` | `border-collapse: collapse` |
+| `rounded-none` | `border-radius: 0` |
+| `rounded` | `border-radius: .25rem` |
+| `rounded-sm` | `border-radius: .125rem` |
+| `rounded-md` | `border-radius: .375rem` |
+| `rounded-lg` | `border-radius: .5rem` |
+| `rounded-xl` | `border-radius: .75rem` |
+| `rounded-full` | `border-radius: 9999px` |
 | `border-{0-15}` | Border width in pixels (e.g., `border-0`, `border-1`, ..., `border-15`) |
 | `border-x-{0-15}` | Horizontal border width in pixels |
 | `border-y-{0-15}` | Vertical border width in pixels |
@@ -178,23 +201,23 @@ You can also control the opacity of any color utility by appending `/{opacity}`
 
 | Utility | Description |
 | --- | --- |
-| `shadow-2xs` | `{"box-shadow":"0 1px rgb(0 0 0 / 0.05)"}` |
-| `shadow-xs` | `{"box-shadow":"0 1px 2px 0 rgb(0 0 0 / 0.05)"}` |
-| `shadow` | `{"box-shadow":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"}` |
-| `shadow-sm` | `{"box-shadow":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"}` |
-| `shadow-md` | `{"box-shadow":"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"}` |
-| `shadow-lg` | `{"box-shadow":"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"}` |
-| `shadow-xl` | `{"box-shadow":"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"}` |
-| `shadow-2xl` | `{"box-shadow":"0 25px 50px -12px rgb(0 0 0 / 0.25)"}` |
-| `shadow-inner` | `{"box-shadow":"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"}` |
-| `shadow-none` | `{"box-shadow":"0 0 #0000"}` |
-| `ring` | `{"box-shadow":"var(--ring-inset, ) 0 0 0 3px rgb(59 130 246 / 0.5)"}` |
-| `ring-0` | `{"box-shadow":"var(--ring-inset, ) 0 0 0 0px rgb(59 130 246 / 0.5)"}` |
-| `ring-1` | `{"box-shadow":"var(--ring-inset, ) 0 0 0 1px rgb(59 130 246 / 0.5)"}` |
-| `ring-2` | `{"box-shadow":"var(--ring-inset, ) 0 0 0 2px rgb(59 130 246 / 0.5)"}` |
-| `ring-4` | `{"box-shadow":"var(--ring-inset, ) 0 0 0 4px rgb(59 130 246 / 0.5)"}` |
-| `ring-8` | `{"box-shadow":"var(--ring-inset, ) 0 0 0 8px rgb(59 130 246 / 0.5)"}` |
-| `ring-inset` | `{"--ring-inset":"inset"}` |
+| `shadow-2xs` | `box-shadow: 0 1px rgb(0 0 0 / 0.05)` |
+| `shadow-xs` | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` |
+| `shadow` | `box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` |
+| `shadow-sm` | `box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` |
+| `shadow-md` | `box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)` |
+| `shadow-lg` | `box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)` |
+| `shadow-xl` | `box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` |
+| `shadow-2xl` | `box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)` |
+| `shadow-inner` | `box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)` |
+| `shadow-none` | `box-shadow: 0 0 #0000` |
+| `ring` | `box-shadow: var(--ring-inset, ) 0 0 0 3px rgb(59 130 246 / 0.5)` |
+| `ring-0` | `box-shadow: var(--ring-inset, ) 0 0 0 0px rgb(59 130 246 / 0.5)` |
+| `ring-1` | `box-shadow: var(--ring-inset, ) 0 0 0 1px rgb(59 130 246 / 0.5)` |
+| `ring-2` | `box-shadow: var(--ring-inset, ) 0 0 0 2px rgb(59 130 246 / 0.5)` |
+| `ring-4` | `box-shadow: var(--ring-inset, ) 0 0 0 4px rgb(59 130 246 / 0.5)` |
+| `ring-8` | `box-shadow: var(--ring-inset, ) 0 0 0 8px rgb(59 130 246 / 0.5)` |
+| `ring-inset` | `--ring-inset: inset` |
 | `opacity-0` | Fully transparent |
 | `opacity-{5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100}` | Opacity values (multiples of 5) |
 
@@ -202,191 +225,191 @@ You can also control the opacity of any color utility by appending `/{opacity}`
 
 | Utility | Description |
 | --- | --- |
-| `outline` | `{"outline-style":"solid"}` |
-| `outline-none` | `{"outline":"2px solid transparent","outline-offset":"2px"}` |
-| `outline-dashed` | `{"outline-style":"dashed"}` |
-| `outline-dotted` | `{"outline-style":"dotted"}` |
-| `outline-double` | `{"outline-style":"double"}` |
-| `outline-0` | `{"outline-width":"0px"}` |
-| `outline-1` | `{"outline-width":"1px"}` |
-| `outline-2` | `{"outline-width":"2px"}` |
-| `outline-4` | `{"outline-width":"4px"}` |
-| `outline-8` | `{"outline-width":"8px"}` |
-| `outline-offset-0` | `{"outline-offset":"0px"}` |
-| `outline-offset-1` | `{"outline-offset":"1px"}` |
-| `outline-offset-2` | `{"outline-offset":"2px"}` |
-| `outline-offset-4` | `{"outline-offset":"4px"}` |
-| `outline-offset-8` | `{"outline-offset":"8px"}` |
+| `outline` | `outline-style: solid` |
+| `outline-none` | `outline: 2px solid transparent; outline-offset: 2px` |
+| `outline-dashed` | `outline-style: dashed` |
+| `outline-dotted` | `outline-style: dotted` |
+| `outline-double` | `outline-style: double` |
+| `outline-0` | `outline-width: 0px` |
+| `outline-1` | `outline-width: 1px` |
+| `outline-2` | `outline-width: 2px` |
+| `outline-4` | `outline-width: 4px` |
+| `outline-8` | `outline-width: 8px` |
+| `outline-offset-0` | `outline-offset: 0px` |
+| `outline-offset-1` | `outline-offset: 1px` |
+| `outline-offset-2` | `outline-offset: 2px` |
+| `outline-offset-4` | `outline-offset: 4px` |
+| `outline-offset-8` | `outline-offset: 8px` |
 
 ### Aspect Ratio
 
 | Utility | Description |
 | --- | --- |
-| `aspect-auto` | `{"aspect-ratio":"auto"}` |
-| `aspect-square` | `{"aspect-ratio":"1 / 1"}` |
-| `aspect-video` | `{"aspect-ratio":"16 / 9"}` |
+| `aspect-auto` | `aspect-ratio: auto` |
+| `aspect-square` | `aspect-ratio: 1 / 1` |
+| `aspect-video` | `aspect-ratio: 16 / 9` |
 
 ### Backdrop Filters
 
 | Utility | Description |
 | --- | --- |
-| `backdrop-blur-none` | `{"backdrop-filter":"blur(0)"}` |
-| `backdrop-blur-sm` | `{"backdrop-filter":"blur(4px)"}` |
-| `backdrop-blur` | `{"backdrop-filter":"blur(8px)"}` |
-| `backdrop-blur-md` | `{"backdrop-filter":"blur(12px)"}` |
-| `backdrop-blur-lg` | `{"backdrop-filter":"blur(16px)"}` |
-| `backdrop-blur-xl` | `{"backdrop-filter":"blur(24px)"}` |
-| `backdrop-blur-2xl` | `{"backdrop-filter":"blur(40px)"}` |
-| `backdrop-blur-3xl` | `{"backdrop-filter":"blur(64px)"}` |
+| `backdrop-blur-none` | `backdrop-filter: blur(0)` |
+| `backdrop-blur-sm` | `backdrop-filter: blur(4px)` |
+| `backdrop-blur` | `backdrop-filter: blur(8px)` |
+| `backdrop-blur-md` | `backdrop-filter: blur(12px)` |
+| `backdrop-blur-lg` | `backdrop-filter: blur(16px)` |
+| `backdrop-blur-xl` | `backdrop-filter: blur(24px)` |
+| `backdrop-blur-2xl` | `backdrop-filter: blur(40px)` |
+| `backdrop-blur-3xl` | `backdrop-filter: blur(64px)` |
 
 ### Transitions & Animations
 
 | Utility | Description |
 | --- | --- |
-| `transition-none` | `{"transition":"none"}` |
-| `transition` | `{"transition-property":"all","transition-timing-function":"ease-in-out","transition-duration":"var(--transition-duration, 150ms)"}` |
-| `transition-all` | `{"transition-property":"all","transition-timing-function":"ease-in-out","transition-duration":"var(--transition-duration, 150ms)"}` |
-| `transition-opacity` | `{"transition-property":"opacity","transition-timing-function":"ease-in-out","transition-duration":"var(--transition-duration, 150ms)"}` |
-| `transition-transform` | `{"transition-property":"transform","transition-timing-function":"ease-in-out","transition-duration":"var(--transition-duration, 150ms)"}` |
-| `transition-shadow` | `{"transition-property":"box-shadow","transition-timing-function":"ease-in-out","transition-duration":"var(--transition-duration, 150ms)"}` |
-| `transition-colors` | `{"transition-property":"color, background-color, border-color, text-decoration-color, fill, stroke","transition-timing-function":"ease-in-out","transition-duration":"var(--transition-duration, 150ms)"}` |
-| `animate-none` | `{"animation":"none"}` |
-| `animate-spin` | `{"animation":"spin 1s linear infinite"}` |
-| `animate-ping` | `{"animation":"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"}` |
-| `animate-pulse` | `{"animation":"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}` |
+| `transition-none` | `transition: none` |
+| `transition` | `transition-property: all; transition-timing-function: ease-in-out; transition-duration: var(--transition-duration, 150ms)` |
+| `transition-all` | `transition-property: all; transition-timing-function: ease-in-out; transition-duration: var(--transition-duration, 150ms)` |
+| `transition-opacity` | `transition-property: opacity; transition-timing-function: ease-in-out; transition-duration: var(--transition-duration, 150ms)` |
+| `transition-transform` | `transition-property: transform; transition-timing-function: ease-in-out; transition-duration: var(--transition-duration, 150ms)` |
+| `transition-shadow` | `transition-property: box-shadow; transition-timing-function: ease-in-out; transition-duration: var(--transition-duration, 150ms)` |
+| `transition-colors` | `transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: ease-in-out; transition-duration: var(--transition-duration, 150ms)` |
+| `animate-none` | `animation: none` |
+| `animate-spin` | `animation: spin 1s linear infinite` |
+| `animate-ping` | `animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite` |
+| `animate-pulse` | `animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite` |
 | `duration-{25,50,75,100,150,200,300,500,700,1000}` | Transition duration in milliseconds |
 
 ### Interactivity
 
 | Utility | Description |
 | --- | --- |
-| `cursor-pointer` | `{"cursor":"pointer"}` |
-| `cursor-wait` | `{"cursor":"wait"}` |
-| `cursor-not-allowed` | `{"cursor":"not-allowed"}` |
-| `select-none` | `{"user-select":"none"}` |
-| `select-all` | `{"user-select":"all"}` |
-| `pointer-events-auto` | `{"pointer-events":"auto"}` |
-| `pointer-events-none` | `{"pointer-events":"none"}` |
-| `resize` | `{"resize":"both"}` |
-| `resize-x` | `{"resize":"horizontal"}` |
-| `resize-y` | `{"resize":"vertical"}` |
-| `resize-none` | `{"resize":"none"}` |
+| `cursor-pointer` | `cursor: pointer` |
+| `cursor-wait` | `cursor: wait` |
+| `cursor-not-allowed` | `cursor: not-allowed` |
+| `select-none` | `user-select: none` |
+| `select-all` | `user-select: all` |
+| `pointer-events-auto` | `pointer-events: auto` |
+| `pointer-events-none` | `pointer-events: none` |
+| `resize` | `resize: both` |
+| `resize-x` | `resize: horizontal` |
+| `resize-y` | `resize: vertical` |
+| `resize-none` | `resize: none` |
 
 ### Typography
 
 | Utility | Description |
 | --- | --- |
-| `font-mono` | `{"font-family":"monospace"}` |
-| `font-sans` | `{"font-family":"sans-serif"}` |
-| `font-serif` | `{"font-family":"serif"}` |
-| `font-cursive` | `{"font-family":"cursive"}` |
-| `text-xs` | `{"font-size":".75rem","line-height":"calc(1 / 0.75)"}` |
-| `text-sm` | `{"font-size":".875rem","line-height":"calc(1.25 / 0.875)"}` |
-| `text-base` | `{"font-size":"1rem","line-height":"calc(1.5 / 1)"}` |
-| `text-lg` | `{"font-size":"1.125rem","line-height":"calc(1.75 / 1.125)"}` |
-| `text-xl` | `{"font-size":"1.25rem","line-height":"calc(1.75 / 1.25)"}` |
-| `text-2xl` | `{"font-size":"1.5rem","line-height":"calc(2 / 1.5)"}` |
-| `text-3xl` | `{"font-size":"1.875rem","line-height":"calc(2.25 / 1.875)"}` |
-| `text-4xl` | `{"font-size":"2.25rem","line-height":"calc(2.5 / 2.25)"}` |
-| `text-5xl` | `{"font-size":"3rem","line-height":"1"}` |
-| `text-6xl` | `{"font-size":"3.75rem","line-height":"1"}` |
-| `text-7xl` | `{"font-size":"4.5rem","line-height":"1"}` |
-| `font-thin` | `{"font-weight":100}` |
-| `font-extralight` | `{"font-weight":200}` |
-| `font-light` | `{"font-weight":300}` |
-| `font-normal` | `{"font-weight":400}` |
-| `font-medium` | `{"font-weight":500}` |
-| `font-semibold` | `{"font-weight":600}` |
-| `font-bold` | `{"font-weight":700}` |
-| `font-extrabold` | `{"font-weight":800}` |
-| `font-black` | `{"font-weight":900}` |
-| `italic` | `{"font-style":"italic"}` |
-| `not-italic` | `{"font-style":"normal"}` |
-| `tracking-tighter` | `{"letter-spacing":"-0.05em"}` |
-| `tracking-tight` | `{"letter-spacing":"-0.025em"}` |
-| `tracking-normal` | `{"letter-spacing":"0"}` |
-| `tracking-wide` | `{"letter-spacing":"0.025em"}` |
-| `tracking-wider` | `{"letter-spacing":"0.05em"}` |
-| `tracking-widest` | `{"letter-spacing":"0.1em"}` |
-| `leading-none` | `{"line-height":"1"}` |
-| `leading-tight` | `{"line-height":"1.25"}` |
-| `leading-snug` | `{"line-height":"1.375"}` |
-| `leading-normal` | `{"line-height":"1.5"}` |
-| `leading-relaxed` | `{"line-height":"1.625"}` |
-| `leading-loose` | `{"line-height":"2"}` |
-| `text-left` | `{"text-align":"left"}` |
-| `text-right` | `{"text-align":"right"}` |
-| `text-center` | `{"text-align":"center"}` |
-| `text-justify` | `{"text-align":"justify"}` |
-| `underline` | `{"text-decoration":"underline"}` |
-| `decoration-none` | `{"text-decoration":"none"}` |
-| `line-through` | `{"text-decoration":"line-through"}` |
-| `uppercase` | `{"text-transform":"uppercase"}` |
-| `lowercase` | `{"text-transform":"lowercase"}` |
-| `capitalize` | `{"text-transform":"capitalize"}` |
-| `truncate` | `{"white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}` |
-| `text-elipsis` | `{"text-overflow":"ellipsis"}` |
-| `text-clip` | `{"text-overflow":"clip"}` |
-| `text-wrap` | `{"text-wrap":"wrap"}` |
-| `text-nowrap` | `{"text-wrap":"nowrap"}` |
-| `text-balance` | `{"text-wrap":"balance"}` |
-| `text-pretty` | `{"text-wrap":"pretty"}` |
-| `whitespace-normal` | `{"white-space":"normal"}` |
-| `whitespace-nowrap` | `{"white-space":"nowrap"}` |
-| `whitespace-pre` | `{"white-space":"pre"}` |
-| `whitespace-pre-line` | `{"white-space":"pre-line"}` |
-| `whitespace-pre-wrap` | `{"white-space":"pre-wrap"}` |
-| `whitespace-break-spaces` | `{"white-space":"break-spaces"}` |
+| `font-mono` | `font-family: monospace` |
+| `font-sans` | `font-family: sans-serif` |
+| `font-serif` | `font-family: serif` |
+| `font-cursive` | `font-family: cursive` |
+| `text-xs` | `font-size: .75rem; line-height: calc(1 / 0.75)` |
+| `text-sm` | `font-size: .875rem; line-height: calc(1.25 / 0.875)` |
+| `text-base` | `font-size: 1rem; line-height: calc(1.5 / 1)` |
+| `text-lg` | `font-size: 1.125rem; line-height: calc(1.75 / 1.125)` |
+| `text-xl` | `font-size: 1.25rem; line-height: calc(1.75 / 1.25)` |
+| `text-2xl` | `font-size: 1.5rem; line-height: calc(2 / 1.5)` |
+| `text-3xl` | `font-size: 1.875rem; line-height: calc(2.25 / 1.875)` |
+| `text-4xl` | `font-size: 2.25rem; line-height: calc(2.5 / 2.25)` |
+| `text-5xl` | `font-size: 3rem; line-height: 1` |
+| `text-6xl` | `font-size: 3.75rem; line-height: 1` |
+| `text-7xl` | `font-size: 4.5rem; line-height: 1` |
+| `font-thin` | `font-weight: 100` |
+| `font-extralight` | `font-weight: 200` |
+| `font-light` | `font-weight: 300` |
+| `font-normal` | `font-weight: 400` |
+| `font-medium` | `font-weight: 500` |
+| `font-semibold` | `font-weight: 600` |
+| `font-bold` | `font-weight: 700` |
+| `font-extrabold` | `font-weight: 800` |
+| `font-black` | `font-weight: 900` |
+| `italic` | `font-style: italic` |
+| `not-italic` | `font-style: normal` |
+| `tracking-tighter` | `letter-spacing: -0.05em` |
+| `tracking-tight` | `letter-spacing: -0.025em` |
+| `tracking-normal` | `letter-spacing: 0` |
+| `tracking-wide` | `letter-spacing: 0.025em` |
+| `tracking-wider` | `letter-spacing: 0.05em` |
+| `tracking-widest` | `letter-spacing: 0.1em` |
+| `leading-none` | `line-height: 1` |
+| `leading-tight` | `line-height: 1.25` |
+| `leading-snug` | `line-height: 1.375` |
+| `leading-normal` | `line-height: 1.5` |
+| `leading-relaxed` | `line-height: 1.625` |
+| `leading-loose` | `line-height: 2` |
+| `text-left` | `text-align: left` |
+| `text-right` | `text-align: right` |
+| `text-center` | `text-align: center` |
+| `text-justify` | `text-align: justify` |
+| `underline` | `text-decoration: underline` |
+| `decoration-none` | `text-decoration: none` |
+| `line-through` | `text-decoration: line-through` |
+| `uppercase` | `text-transform: uppercase` |
+| `lowercase` | `text-transform: lowercase` |
+| `capitalize` | `text-transform: capitalize` |
+| `truncate` | `white-space: nowrap; overflow: hidden; text-overflow: ellipsis` |
+| `text-elipsis` | `text-overflow: ellipsis` |
+| `text-clip` | `text-overflow: clip` |
+| `text-wrap` | `text-wrap: wrap` |
+| `text-nowrap` | `text-wrap: nowrap` |
+| `text-balance` | `text-wrap: balance` |
+| `text-pretty` | `text-wrap: pretty` |
+| `whitespace-normal` | `white-space: normal` |
+| `whitespace-nowrap` | `white-space: nowrap` |
+| `whitespace-pre` | `white-space: pre` |
+| `whitespace-pre-line` | `white-space: pre-line` |
+| `whitespace-pre-wrap` | `white-space: pre-wrap` |
+| `whitespace-break-spaces` | `white-space: break-spaces` |
 
 ### Flexbox & Layout
 
 | Utility | Description |
 | --- | --- |
-| `flex` | `{"display":"flex"}` |
-| `flex-1` | `{"flex":"1 1 0%"}` |
-| `flex-inline` | `{"display":"inline-flex"}` |
-| `flex-row` | `{"flex-direction":"row"}` |
-| `flex-col` | `{"flex-direction":"column"}` |
-| `flex-row-reverse` | `{"flex-direction":"row-reverse"}` |
-| `flex-col-reverse` | `{"flex-direction":"column-reverse"}` |
-| `flex-wrap` | `{"flex-wrap":"wrap"}` |
-| `flex-wrap-reverse` | `{"flex-wrap":"wrap-reverse"}` |
-| `flex-nowrap` | `{"flex-wrap":"nowrap"}` |
-| `justify-start` | `{"justify-content":"flex-start"}` |
-| `justify-end` | `{"justify-content":"flex-end"}` |
-| `justify-center` | `{"justify-content":"center"}` |
-| `justify-between` | `{"justify-content":"space-between"}` |
-| `justify-around` | `{"justify-content":"space-around"}` |
-| `justify-evenly` | `{"justify-content":"space-evenly"}` |
-| `justify-stretch` | `{"justify-content":"stretch"}` |
-| `items-start` | `{"align-items":"flex-start"}` |
-| `items-end` | `{"align-items":"flex-end"}` |
-| `items-center` | `{"align-items":"center"}` |
-| `items-stretch` | `{"align-items":"stretch"}` |
-| `flex-grow` | `{"flex-grow":1}` |
-| `flex-shrink` | `{"flex-shrink":1}` |
-| `flex-none` | `{"flex":"none"}` |
-| `flex-auto` | `{"flex":"1 1 auto"}` |
-| `flex-initial` | `{"flex":"0 1 auto"}` |
-| `grow` | `{"flex-grow":"1"}` |
-| `grow-0` | `{"flex-grow":"0"}` |
-| `shrink` | `{"flex-shrink":"1"}` |
-| `shrink-0` | `{"flex-shrink":"0"}` |
-| `self-auto` | `{"align-self":"auto"}` |
-| `self-start` | `{"align-self":"flex-start"}` |
-| `self-end` | `{"align-self":"flex-end"}` |
-| `self-center` | `{"align-self":"center"}` |
-| `self-stretch` | `{"align-self":"stretch"}` |
-| `self-baseline` | `{"align-self":"baseline"}` |
-| `content-normal` | `{"align-content":"normal"}` |
-| `content-start` | `{"align-content":"flex-start"}` |
-| `content-end` | `{"align-content":"flex-end"}` |
-| `content-center` | `{"align-content":"center"}` |
-| `content-between` | `{"align-content":"space-between"}` |
-| `content-around` | `{"align-content":"space-around"}` |
-| `content-evenly` | `{"align-content":"space-evenly"}` |
-| `content-stretch` | `{"align-content":"stretch"}` |
-| `items-baseline` | `{"align-items":"baseline"}` |
+| `flex` | `display: flex` |
+| `flex-1` | `flex: 1 1 0%` |
+| `flex-inline` | `display: inline-flex` |
+| `flex-row` | `flex-direction: row` |
+| `flex-col` | `flex-direction: column` |
+| `flex-row-reverse` | `flex-direction: row-reverse` |
+| `flex-col-reverse` | `flex-direction: column-reverse` |
+| `flex-wrap` | `flex-wrap: wrap` |
+| `flex-wrap-reverse` | `flex-wrap: wrap-reverse` |
+| `flex-nowrap` | `flex-wrap: nowrap` |
+| `justify-start` | `justify-content: flex-start` |
+| `justify-end` | `justify-content: flex-end` |
+| `justify-center` | `justify-content: center` |
+| `justify-between` | `justify-content: space-between` |
+| `justify-around` | `justify-content: space-around` |
+| `justify-evenly` | `justify-content: space-evenly` |
+| `justify-stretch` | `justify-content: stretch` |
+| `items-start` | `align-items: flex-start` |
+| `items-end` | `align-items: flex-end` |
+| `items-center` | `align-items: center` |
+| `items-stretch` | `align-items: stretch` |
+| `flex-grow` | `flex-grow: 1` |
+| `flex-shrink` | `flex-shrink: 1` |
+| `flex-none` | `flex: none` |
+| `flex-auto` | `flex: 1 1 auto` |
+| `flex-initial` | `flex: 0 1 auto` |
+| `grow` | `flex-grow: 1` |
+| `grow-0` | `flex-grow: 0` |
+| `shrink` | `flex-shrink: 1` |
+| `shrink-0` | `flex-shrink: 0` |
+| `self-auto` | `align-self: auto` |
+| `self-start` | `align-self: flex-start` |
+| `self-end` | `align-self: flex-end` |
+| `self-center` | `align-self: center` |
+| `self-stretch` | `align-self: stretch` |
+| `self-baseline` | `align-self: baseline` |
+| `content-normal` | `align-content: normal` |
+| `content-start` | `align-content: flex-start` |
+| `content-end` | `align-content: flex-end` |
+| `content-center` | `align-content: center` |
+| `content-between` | `align-content: space-between` |
+| `content-around` | `align-content: space-around` |
+| `content-evenly` | `align-content: space-evenly` |
+| `content-stretch` | `align-content: stretch` |
+| `items-baseline` | `align-items: baseline` |
 | `gap-0` | No gap |
 | `gap-{1-512}` | Gap in rem units (0.25rem increments) |
 | `gap-{1-512}px` | Gap in pixels |
@@ -411,7 +434,7 @@ You can also control the opacity of any color utility by appending `/{opacity}`
 
 | Utility | Description |
 | --- | --- |
-| `grid` | `{"display":"grid"}` |
+| `grid` | `display: grid` |
 | `grid-cols-{1-12}` | `grid-template-columns: repeat(n, minmax(0, 1fr))` |
 | `grid-cols-none` | `grid-template-columns: none` |
 | `col-span-{1-12}` | `grid-column: span n / span n` |
@@ -431,20 +454,20 @@ You can also control the opacity of any color utility by appending `/{opacity}`
 
 | Utility | Description |
 | --- | --- |
-| `relative` | `{"position":"relative"}` |
-| `fixed` | `{"position":"fixed"}` |
-| `absolute` | `{"position":"absolute"}` |
-| `sticky` | `{"position":"sticky"}` |
-| `object-contain` | `{"object-fit":"contain"}` |
-| `object-cover` | `{"object-fit":"cover"}` |
-| `object-fill` | `{"object-fit":"fill"}` |
-| `object-none` | `{"object-fit":"none"}` |
-| `inset-0` | `{"inset":"0"}` |
-| `inset-auto` | `{"inset":"auto"}` |
-| `inset-x-0` | `{"left":"0","right":"0"}` |
-| `inset-y-0` | `{"top":"0","bottom":"0"}` |
-| `inset-x-auto` | `{"left":"auto","right":"auto"}` |
-| `inset-y-auto` | `{"top":"auto","bottom":"auto"}` |
+| `relative` | `position: relative` |
+| `fixed` | `position: fixed` |
+| `absolute` | `position: absolute` |
+| `sticky` | `position: sticky` |
+| `object-contain` | `object-fit: contain` |
+| `object-cover` | `object-fit: cover` |
+| `object-fill` | `object-fit: fill` |
+| `object-none` | `object-fit: none` |
+| `inset-0` | `inset: 0` |
+| `inset-auto` | `inset: auto` |
+| `inset-x-0` | `left: 0; right: 0` |
+| `inset-y-0` | `top: 0; bottom: 0` |
+| `inset-x-auto` | `left: auto; right: auto` |
+| `inset-y-auto` | `top: auto; bottom: auto` |
 | `top-{0-512}`, `bottom-{0-512}`, `left-{0-512}`, `right-{0-512}` | Position in rem units (0.25rem increments) |
 | `top-{0-512}px`, `bottom-{0-512}px`, `left-{0-512}px`, `right-{0-512}px` | Position in pixels |
 | `top-{1-100}%`, `bottom-{1-100}%`, `left-{1-100}%`, `right-{1-100}%` | Position in percentages |
@@ -455,108 +478,108 @@ You can also control the opacity of any color utility by appending `/{opacity}`
 
 | Utility | Description |
 | --- | --- |
-| `block` | `{"display":"block"}` |
-| `contents` | `{"display":"contents"}` |
-| `hidden` | `{"display":"none"}` |
-| `inline` | `{"display":"inline"}` |
-| `visible` | `{"visibility":"visible"}` |
-| `invisible` | `{"visibility":"hidden"}` |
-| `collapse` | `{"visibility":"collapse"}` |
+| `block` | `display: block` |
+| `contents` | `display: contents` |
+| `hidden` | `display: none` |
+| `inline` | `display: inline` |
+| `visible` | `visibility: visible` |
+| `invisible` | `visibility: hidden` |
+| `collapse` | `visibility: collapse` |
 
 ### Overflow & Scrolling
 
 | Utility | Description |
 | --- | --- |
-| `overflow-auto` | `{"overflow":"auto"}` |
-| `overflow-x-auto` | `{"overflow-x":"auto"}` |
-| `overflow-y-auto` | `{"overflow-y":"auto"}` |
-| `overflow-hidden` | `{"overflow":"hidden"}` |
-| `overflow-x-hidden` | `{"overflow-x":"hidden"}` |
-| `overflow-y-hidden` | `{"overflow-y":"hidden"}` |
-| `overflow-visible` | `{"overflow":"visible"}` |
-| `overscroll-auto` | `{"overscroll-behavior":"auto"}` |
-| `overscroll-contain` | `{"overscroll-behavior":"contain"}` |
-| `overscroll-none` | `{"overscroll-behavior":"none"}` |
-| `overscroll-x-auto` | `{"overscroll-behavior-x":"auto"}` |
-| `overscroll-x-contain` | `{"overscroll-behavior-x":"contain"}` |
-| `overscroll-x-none` | `{"overscroll-behavior-x":"none"}` |
-| `overscroll-y-auto` | `{"overscroll-behavior-y":"auto"}` |
-| `overscroll-y-contain` | `{"overscroll-behavior-y":"contain"}` |
-| `overscroll-y-none` | `{"overscroll-behavior-y":"none"}` |
+| `overflow-auto` | `overflow: auto` |
+| `overflow-x-auto` | `overflow-x: auto` |
+| `overflow-y-auto` | `overflow-y: auto` |
+| `overflow-hidden` | `overflow: hidden` |
+| `overflow-x-hidden` | `overflow-x: hidden` |
+| `overflow-y-hidden` | `overflow-y: hidden` |
+| `overflow-visible` | `overflow: visible` |
+| `overscroll-auto` | `overscroll-behavior: auto` |
+| `overscroll-contain` | `overscroll-behavior: contain` |
+| `overscroll-none` | `overscroll-behavior: none` |
+| `overscroll-x-auto` | `overscroll-behavior-x: auto` |
+| `overscroll-x-contain` | `overscroll-behavior-x: contain` |
+| `overscroll-x-none` | `overscroll-behavior-x: none` |
+| `overscroll-y-auto` | `overscroll-behavior-y: auto` |
+| `overscroll-y-contain` | `overscroll-behavior-y: contain` |
+| `overscroll-y-none` | `overscroll-behavior-y: none` |
 
 ### Backgrounds
 
 | Utility | Description |
 | --- | --- |
-| `bg-auto` | `{"background-size":"auto"}` |
-| `bg-cover` | `{"background-size":"cover"}` |
-| `bg-contain` | `{"background-size":"contain"}` |
-| `bg-center` | `{"background-position":"center"}` |
-| `bg-top` | `{"background-position":"top"}` |
-| `bg-bottom` | `{"background-position":"bottom"}` |
-| `bg-left` | `{"background-position":"left"}` |
-| `bg-right` | `{"background-position":"right"}` |
-| `bg-left-top` | `{"background-position":"left top"}` |
-| `bg-left-bottom` | `{"background-position":"left bottom"}` |
-| `bg-right-top` | `{"background-position":"right top"}` |
-| `bg-right-bottom` | `{"background-position":"right bottom"}` |
-| `bg-no-repeat` | `{"background-repeat":"no-repeat"}` |
-| `bg-fixed` | `{"background-attachment":"fixed"}` |
-| `bg-local` | `{"background-attachment":"local"}` |
-| `bg-scroll` | `{"background-attachment":"scroll"}` |
+| `bg-auto` | `background-size: auto` |
+| `bg-cover` | `background-size: cover` |
+| `bg-contain` | `background-size: contain` |
+| `bg-center` | `background-position: center` |
+| `bg-top` | `background-position: top` |
+| `bg-bottom` | `background-position: bottom` |
+| `bg-left` | `background-position: left` |
+| `bg-right` | `background-position: right` |
+| `bg-left-top` | `background-position: left top` |
+| `bg-left-bottom` | `background-position: left bottom` |
+| `bg-right-top` | `background-position: right top` |
+| `bg-right-bottom` | `background-position: right bottom` |
+| `bg-no-repeat` | `background-repeat: no-repeat` |
+| `bg-fixed` | `background-attachment: fixed` |
+| `bg-local` | `background-attachment: local` |
+| `bg-scroll` | `background-attachment: scroll` |
 
 ### Lists
 
 | Utility | Description |
 | --- | --- |
-| `list-none` | `{"list-style-type":"none"}` |
-| `list-disc` | `{"list-style-type":"disc"}` |
-| `list-decimal` | `{"list-style-type":"decimal"}` |
+| `list-none` | `list-style-type: none` |
+| `list-disc` | `list-style-type: disc` |
+| `list-decimal` | `list-style-type: decimal` |
 
 ### Vertical Alignment
 
 | Utility | Description |
 | --- | --- |
-| `align-baseline` | `{"vertical-align":"baseline"}` |
-| `align-top` | `{"vertical-align":"top"}` |
-| `align-middle` | `{"vertical-align":"middle"}` |
-| `align-bottom` | `{"vertical-align":"bottom"}` |
-| `align-text-top` | `{"vertical-align":"text-top"}` |
-| `align-text-bottom` | `{"vertical-align":"text-bottom"}` |
+| `align-baseline` | `vertical-align: baseline` |
+| `align-top` | `vertical-align: top` |
+| `align-middle` | `vertical-align: middle` |
+| `align-bottom` | `vertical-align: bottom` |
+| `align-text-top` | `vertical-align: text-top` |
+| `align-text-bottom` | `vertical-align: text-bottom` |
 
 ### Viewport Sizing
 
 | Utility | Description |
 | --- | --- |
-| `min-h-screen` | `{"min-height":"100vh"}` |
-| `max-h-screen` | `{"max-height":"100vh"}` |
-| `min-w-screen` | `{"min-width":"100vw"}` |
-| `h-dvh` | `{"height":"100dvh"}` |
-| `h-svh` | `{"height":"100svh"}` |
-| `h-lvh` | `{"height":"100lvh"}` |
-| `w-dvw` | `{"width":"100dvw"}` |
-| `w-svw` | `{"width":"100svw"}` |
-| `w-lvw` | `{"width":"100lvw"}` |
-| `min-h-dvh` | `{"min-height":"100dvh"}` |
-| `min-h-svh` | `{"min-height":"100svh"}` |
-| `min-h-lvh` | `{"min-height":"100lvh"}` |
+| `min-h-screen` | `min-height: 100vh` |
+| `max-h-screen` | `max-height: 100vh` |
+| `min-w-screen` | `min-width: 100vw` |
+| `h-dvh` | `height: 100dvh` |
+| `h-svh` | `height: 100svh` |
+| `h-lvh` | `height: 100lvh` |
+| `w-dvw` | `width: 100dvw` |
+| `w-svw` | `width: 100svw` |
+| `w-lvw` | `width: 100lvw` |
+| `min-h-dvh` | `min-height: 100dvh` |
+| `min-h-svh` | `min-height: 100svh` |
+| `min-h-lvh` | `min-height: 100lvh` |
 
 ### Accessibility
 
 | Utility | Description |
 | --- | --- |
-| `sr-only` | `{"position":"absolute","width":"1px","height":"1px","padding":"0","margin":"-1px","overflow":"hidden","clip":"rect(0, 0, 0, 0)","white-space":"nowrap","border-width":"0"}` |
-| `not-sr-only` | `{"position":"static","width":"auto","height":"auto","padding":"0","margin":"0","overflow":"visible","clip":"auto","white-space":"normal"}` |
+| `sr-only` | `position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0` |
+| `not-sr-only` | `position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal` |
 
 ### Other Utilities
 
 | Utility | Description |
 | --- | --- |
-| `no-underline` | `{"text-decoration":"none"}` |
-| `grid` | `{"display":"grid"}` |
-| `box-border` | `{"box-sizing":"border-box"}` |
-| `box-content` | `{"box-sizing":"content-box"}` |
-| `appearance-none` | `{"appearance":"none","-webkit-appearance":"none","-moz-appearance":"none"}` |
+| `no-underline` | `text-decoration: none` |
+| `grid` | `display: grid` |
+| `box-border` | `box-sizing: border-box` |
+| `box-content` | `box-sizing: content-box` |
+| `appearance-none` | `appearance: none; -webkit-appearance: none; -moz-appearance: none` |
 | `text-{0-99}px` | Font size in pixels (e.g., `text-12px`, `text-16px`) |
 | `text-{0-24.75}rem` | Font size in rem units (0.25rem increments) |
 
@@ -597,18 +620,13 @@ Custom values support pseudo-states, responsive breakpoints, and dark mode:
 <div class="hover:w-[200px] md:max-w-[900px] dark:bg-[#333]">
 ```
 
-### Limitations
+### Binding
 
-**Static classes only**: Custom values work with the `class` attribute, not `:class`:
+Rules are injected as Mancha renders the classes, so custom values work in the `class` attribute and in `:class` alike, including values that only appear after a state change.
 
-```html
-<!-- ✓ Works -->
-<div class="w-[133px]">
+Markup that Mancha did not render is the exception: it is never scanned, so call `scanAndInject(root)` after inserting it yourself.
 
-<!-- ✗ Not supported - use inline styles instead -->
-<div :class="'w-[133px]'">
-<div :attr:style="'width: ' + dynamicWidth">
-```
+### Limitations
 
 **Browser only**: Custom values require the CSSStyleSheet API and are not available in Worker or SSR environments.
 
@@ -621,7 +639,21 @@ Custom values support pseudo-states, responsive breakpoints, and dark mode:
 
 ### Dynamic Content
 
-For content added after initial load, call `injectCss(["custom"])` again to scan and inject new on-demand values.
+Content rendered by Mancha is scanned automatically. Markup produced by anything else (raw `innerHTML`, a third-party widget) is not, so scan it yourself with `scanAndInject(root)`:
+
+```js
+import { scanAndInject } from "mancha/browser";
+
+widget.mount(container); // Third-party code writes into the container.
+scanAndInject(container);
+```
+
+Re-scanning an already-scanned tree is safe: each rule is injected once, and rules are re-injected if the stylesheet element is removed from the document.
+
+Two limitations:
+
+- **ESM only**: `scanAndInject` is exported from the module build, not from the global bundle loaded via a `<script>` tag.
+- **No shadow DOM**: `querySelectorAll` does not pierce a shadow root, so scanning a host element finds nothing inside it. Scanning the shadow root itself does inject rules, but they land in the main document's stylesheet, where shadow-boundary scoping stops them from applying. Style shadow content with its own stylesheet instead.
 
 ---