@teacss/preset-standard 0.3.8 → 0.4.0

package/README.md

@@ -151,6 +151,44 @@ so components remain responsible for `aria-busy`, `aria-hidden`, `inert`, and
 replacement-content behavior where appropriate. There are no `skeleton:*`
 variants or compatibility aliases.
 
+## Arrow Shortcuts
+
+Two families draw a directional mark on the element's `::after`.
+
+`chevron-up`, `chevron-down`, `chevron-left`, and `chevron-right` are stroked: a
+square showing only its right and bottom borders, so the visible ink is one
+corner, rotated until that corner points where the name says. The corner rests
+pointing south-east and `rotate` turns clockwise, so `chevron-down` is 45deg and
+each further quarter turn moves one step round.
+
+`triangle-up`, `triangle-down`, `triangle-left`, and `triangle-right` are solid:
+the same box filled and clipped to three corners. `clip-path` rather than the
+zero-size border trick, so `w` and `h` still mean the mark's size and `bg-color`
+still means its color, and both families compose with the same utilities.
+
+```html
+<span class="chevron-right">Continue</span>
+<span class="triangle-down">More</span>
+```
+
+The mark follows the surrounding text color, and `display:inline-block` sizes it
+on an ordinary inline host rather than only inside a flex row. Neither family
+carries spacing, opacity, or a size beyond the square.
+
+Every declaration lands on the host's `::after`, so a utility aimed at the mark
+carries an `@::after` condition; a bare one styles the host box instead. The
+mark inherits the host's color, so `text-color:` needs no condition:
+
+```html
+<span class="hstack gap:2x triangle-right w:4@::after opacity:80@::after">More</span>
+<span class="triangle-up text-color:red-700">Rising</span>
+```
+
+`transition-property:transform` covers `rotate` in this preset, so a state that
+re-rotates a mark animates, and `motion-reduce` turns that off. All eight are one
+mutually exclusive merge family, because they own the same `::after`:
+`cn("chevron-up", "triangle-down")` keeps only the later.
+
 ## Preflight
 
 The standard preset emits a low-specificity foundational reset and its theme
@@ -252,6 +290,8 @@ Bare keywords are a closed standard-preset vocabulary:
 ```txt
 hstack vstack centered inline-centered
 truncate skeleton
+chevron-up chevron-down chevron-left chevron-right
+triangle-up triangle-down triangle-left triangle-right
 sr-only sr-visible
 transition-none transition-all transition-colors transition-opacity transition-shadow transition-transform
 reset-heading reset-list