@teacss/preset-standard 0.3.0

package/LICENSE

@@ -0,0 +1,22 @@
+# MIT License
+
+Copyright (c) 2021-PRESENT Anthony Fu <https://github.com/antfu>
+Copyright (c) 2026-PRESENT Billgo <hi@billgo.me>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,271 @@
+# @teacss/preset-standard
+
+**The standard TeaCSS vocabulary.**
+
+## Purpose
+
+`@teacss/preset-standard` is the official general-purpose vocabulary for
+application authors who want TeaCSS utilities for layout, spacing, sizing,
+typography, color, interaction, and related everyday CSS. It provides the
+preset factory, theme defaults, condition aliases, shortcuts, preflights,
+public value constants, and Standard-specific class-merge metadata.
+
+This package defines vocabulary and preset behavior, not the engine or config
+loader: `@teacss/core` owns parsing, rule matching, and CSS generation, while
+`@teacss/config` resolves CSS-entry directives for integrations. The
+`article:base` long-form content utility and the
+`icon:<collection>-<icon>` vocabulary remain opt-in features of
+`@teacss/preset-articles` and `@teacss/preset-icons`; this preset does not
+bundle either one.
+
+## Usage
+
+```sh
+bun add @teacss/preset-standard
+```
+
+```css
+@preset "standard";
+@source "./src/**/*.{ts,tsx}";
+@teacss;
+```
+
+```ts
+import { cn } from "@teacss/preset-standard/merge";
+
+cn("p:4 d:flex", "p:8"); // "d:flex p:8"
+cn("p:4", "p:invalid"); // "p:invalid"
+cn("reset:li", "reset:ul"); // "reset:ul"
+cn("float:left", "reset:li"); // "float:left reset:li"
+cn("reset:li", "float:left"); // "reset:li float:left"
+```
+
+Property value constants are available from the dedicated public entry:
+
+```ts
+import { boxDecorationValues, globalKeywords, multiplierKeywords } from "@teacss/preset-standard/constants";
+```
+
+Each `*Values` export contains only the property's common values.
+`globalKeywords` is exported separately; the preset's rule layer adds those
+CSS-wide keywords centrally at runtime. `multiplierKeywords` is the supported
+name for the `1x` through `9x` scale; the misspelled `multiplerKeywords` export
+remains as a deprecated compatibility alias.
+
+## Layout Shortcuts
+
+Official preset-owned shortcuts use bare class names without `:`. This preset
+includes four fixed, theme-neutral flexbox shortcuts:
+
+| Shortcut | Expansion |
+| --- | --- |
+| `hstack` | `d:flex flex-direction:row align-items:center` |
+| `vstack` | `d:flex flex-direction:column` |
+| `center` | `d:flex align-items:center justify-content:center` |
+| `inline-center` | `d:inline-flex align-items:center justify-content:center` |
+
+They emit in the built-in `shortcuts` layer. Compose spacing, sizing, wrapping,
+and responsive changes with ordinary utilities; the later `utilities` layer can
+override a shortcut default:
+
+```html
+<div class="hstack gap:3x flex-direction:column@sm">
+  ...
+</div>
+```
+
+The four layout shortcuts are one mutually exclusive merge family when their
+conditions and importance are equal. They add no gap, size, wrapping, theme, or
+component styling.
+
+## Text Shortcut
+
+`truncate` is the fixed single-line truncation Shortcut:
+
+```txt
+truncate -> overflow:hidden text-overflow:ellipsis white-space:nowrap
+```
+
+It emits in the built-in `shortcuts` layer, so later ordinary utilities can
+override any default. The existing `text-overflow:truncate` utilities-layer
+composite utility remains supported.
+
+## Skeleton Shortcut
+
+`skeleton` is the fixed visual loading-placeholder Shortcut. It has this exact
+TeaCSS expansion:
+
+```txt
+radius:1x
+border-style:none!
+bg-image:none!
+bg-clip:border-box!
+shadow:none!
+box-decoration-break:clone!
+text-color:transparent!
+outline-style:none!
+user-select:none!
+pointer-events:none!
+cursor:default!
+animation:skeleton!
+
+vis:hidden!@::after
+vis:hidden!@::before
+vis:hidden!@>*
+
+d:block@empty
+h:3x@empty
+
+radius-l:inherit@[:where(:first-child)]
+radius-r:inherit@[:where(:nth-last-child(2))]
+
+line-height:1@[:where([data-inline-skeleton])]
+font-family:sans@[:where([data-inline-skeleton])]
+```
+
+Use the bare class on an empty block placeholder or on an inline placeholder
+whose text supplies its shape:
+
+```html
+<div class="skeleton" aria-hidden="true"></div>
+<span class="skeleton" data-inline-skeleton aria-hidden="true">Loading</span>
+```
+
+Empty skeletons become blocks with a `3x` height. Direct children and the two
+pseudo-elements are hidden, and `data-inline-skeleton` applies a direct line
+height of `1` plus the standard sans family. The structural conditions inherit
+the left radius on a first child and the right radius on a second-to-last
+child. `animation:skeleton!` reuses the standard gray skeleton animation.
+Core emits these components in rule-priority order, so the generated CSS uses
+several `.skeleton` rules instead of one contiguous block. The
+`@keyframes skeleton` rule remains top-level and unconditional: outer
+conditions and `!` apply only to the shortcut declarations, and later
+interaction-reset rules may appear after the keyframes.
+
+The Shortcut emits in the built-in `shortcuts` layer. Its important visual
+reset declarations intentionally resist ordinary non-important utilities;
+non-important radius, empty sizing, and inline typography declarations retain
+normal layer precedence. CSS does not add loading or accessibility semantics,
+so components remain responsible for `aria-busy`, `aria-hidden`, `inert`, and
+replacement-content behavior where appropriate. There are no `skeleton:*`
+variants or compatibility aliases.
+
+## Preflight
+
+The standard preset emits a low-specificity foundational reset and its theme
+CSS variables by default. The reset applies `border-box` sizing to every
+element, its `::before` and `::after` pseudo-elements, and `::backdrop`; it also
+sets every element's margin and padding to zero and establishes a zero-width
+solid border. The document root and shadow host receive a `1.5` line height,
+text-size and tab normalization, the configurable `--font-family-sans` stack,
+normal font feature and variation settings, and a transparent tap highlight. In
+the programmatic preset API,
+`preflight: false` disables both. `preflight: "on-demand"` keeps the foundational
+reset while limiting theme variables to keys referenced by generated utilities
+or by the reset itself.
+
+The `reset:*` utilities apply explicit element-specific deltas on top of that
+foundational preflight. They cover headings (`reset:h1` through `reset:h6`),
+links and controls
+(`reset:a|button|select|input-text|textarea`), and lists
+(`reset:li|ol|ul|menu`). The deltas remove selected browser defaults with
+explicit declarations without repeating the preflight's shared box-model,
+spacing, border, or inherited tap-highlight baseline. They do not expose a
+generic CSS `all` reset, emit
+focus/state/placeholder selector rules, or reset `outline`. Use
+`reset:input-text` only on text-like inputs, and use `reset:button` for
+button-like input types. A generic `reset:input` is intentionally unsupported so
+callers do not apply one broad profile across checkboxes, radios, file inputs,
+and other specialized controls.
+
+This is a TeaCSS-specific subset inspired by the
+[Radix Themes 3.3.0 Reset](https://github.com/radix-ui/themes/blob/3.3.0/packages/radix-ui-themes/src/components/reset.css),
+adapted to named atomic profiles and TeaCSS merge semantics rather than copied
+as a component class. These element-specific rules are not emitted by the
+preflight. They still generate when `preflight: false` disables the automatic
+baseline, but then emit only the element-specific delta; provide an equivalent
+baseline when a complete reset is required. Root and shadow-host defaults are
+preflight-only.
+
+The merger uses parsed utility shape and declared footprints; it does not ask
+the generator whether a value is supported. An unsupported or empty later value
+can therefore replace an earlier token and then emit no CSS. Reset profiles form
+one opaque merge family: one `reset:*` can replace another, but the merger does
+not expand their declarations into conflicts with unrelated utilities. An
+important utility removes a non-important overlap only when its footprint fully
+covers the token being removed; partial shorthand/longhand overlaps survive.
+
+The `/merge` entry exports the self-contained `pluginStandard`, a lazy
+standard-only `cn`, and the compatibility `createStandardMerger()` factory.
+`pluginStandard` publishes resolver-family scope metadata so unrelated repeated
+static prefixes stay on the linear merge path.
+Compose official plugins directly when building a unified merger:
+
+```sh
+bun add @teacss/classes @teacss/preset-icons
+```
+
+```ts
+import { createMerger } from "@teacss/classes";
+import { pluginIcon } from "@teacss/preset-icons/merge";
+import { pluginStandard } from "@teacss/preset-standard/merge";
+
+const cn = createMerger({ plugins: [pluginStandard, pluginIcon] });
+```
+
+Existing code may still use
+`createStandardMerger({ plugins: [pluginIcon] })`; it delegates to that
+same direct plugin composition without hidden transforms or metadata. The
+zero-config `cn` from this package remains standard-only. The application
+`cn` from `teacss` includes the official icon plugin by default.
+
+## Vocabulary
+
+The preset covers layout, spacing, sizing, positioning, typography, color,
+border, shadow, transform, transition, animation, SVG, accessibility, and
+interaction utilities.
+
+Bare keywords are a closed standard-preset vocabulary:
+
+```txt
+static relative absolute fixed sticky
+hstack vstack center inline-center
+truncate skeleton
+mask-g-linear mask-g-radial mask-g-conic
+divide-x divide-y
+backdrop-grayscale backdrop-invert backdrop-sepia
+space-x-reverse space-y-reverse space-a-reverse space-c-reverse
+```
+
+The five position keywords are direct utilities; their `position:*` forms
+remain supported and share the same merge footprint. The layout keywords are
+fixed shortcuts. `truncate` is the fixed single-line text Shortcut, and
+`skeleton` is the fixed visual loading-placeholder Shortcut. The mask keywords
+activate additive generated-mask families. The divide keywords create `1px`
+physical separators. The backdrop keywords apply their filter at `100%`. The
+spacing keywords are independent reverse modifiers that coexist with
+`space-*:<size>`. Do not infer other bare utilities from CSS keywords.
+
+Withdrawn draft property names are not retained as compatibility utilities.
+Use `scroll-initial-target:*`, not `scroll-start-target:*`; the removed Grid 3
+proposal names `item-direction:*`, `item-track:*`, `item-wrap:*`,
+`item-cross:*`, and `item-pack:*` generate no CSS.
+
+Values support theme references, arbitrary values, CSS-wide keywords, the
+trailing `!` important marker, and stacked `@` conditions.
+Conditions are suffix-only: write `p:4@hover` or `content:empty@::before`, not
+property-side forms such as `hover:p:4` or `before:content:empty`.
+Representable suffix/self conditions, query-bearing at-rule parents, and media
+types such as `@!print` support `@!` negation. Prefix relations/direction, target
+combinators, pseudo-elements, and at-rules without a negatable prelude such as
+`@starting-style` remain unmatched when negated.
+
+Color theme data is split into `colors` for stepped palette tokens such
+as `--color-red-500` and `semanticColors` for role tokens such as
+`--color-background`, `--color-foreground`, `--color-border`, and
+`--color-emphasis`. Mode
+overrides can define either namespace.
+
+## Status
+
+Pre-1.0. Keep tests and docs aligned when adding or changing utilities.

package/dist/constants-MShYHs2x.js

@@ -0,0 +1 @@
+const e=[`inherit`,`initial`,`revert`,`revert-layer`,`unset`],t=`px.pt.pc.in.cm.mm.q.rpx.%.em.rem.ex.rex.ch.rch.cap.rcap.ic.ric.lh.rlh.vw.vh.vi.vb.vmin.vmax.svw.svh.svi.svb.svmin.svmax.lvw.lvh.lvi.lvb.lvmin.lvmax.dvw.dvh.dvi.dvb.dvmin.dvmax.cqw.cqh.cqi.cqb.cqmin.cqmax`.split(`.`),n=`(?:${t.filter(e=>e!==`rpx`&&e!==`%`).join(`|`)})`,r=`(?:%|${t.filter(e=>e!==`rpx`&&e!==`%`).join(`|`)})`,i=new Set(`transparent.aliceblue.antiquewhite.aqua.aquamarine.azure.beige.bisque.black.blanchedalmond.blue.blueviolet.brown.burlywood.cadetblue.chartreuse.chocolate.coral.cornflowerblue.cornsilk.crimson.cyan.darkblue.darkcyan.darkgoldenrod.darkgray.darkgreen.darkgrey.darkkhaki.darkmagenta.darkolivegreen.darkorange.darkorchid.darkred.darksalmon.darkseagreen.darkslateblue.darkslategray.darkslategrey.darkturquoise.darkviolet.deeppink.deepskyblue.dimgray.dimgrey.dodgerblue.firebrick.floralwhite.forestgreen.fuchsia.gainsboro.ghostwhite.gold.goldenrod.gray.green.greenyellow.grey.honeydew.hotpink.indianred.indigo.ivory.khaki.lavender.lavenderblush.lawngreen.lemonchiffon.lightblue.lightcoral.lightcyan.lightgoldenrodyellow.lightgray.lightgreen.lightgrey.lightpink.lightsalmon.lightseagreen.lightskyblue.lightslategray.lightslategrey.lightsteelblue.lightyellow.lime.limegreen.linen.magenta.maroon.mediumaquamarine.mediumblue.mediumorchid.mediumpurple.mediumseagreen.mediumslateblue.mediumspringgreen.mediumturquoise.mediumvioletred.midnightblue.mintcream.mistyrose.moccasin.navajowhite.navy.oldlace.olive.olivedrab.orange.orangered.orchid.palegoldenrod.palegreen.paleturquoise.palevioletred.papayawhip.peachpuff.peru.pink.plum.powderblue.purple.rebeccapurple.red.rosybrown.royalblue.saddlebrown.salmon.sandybrown.seagreen.seashell.sienna.silver.skyblue.slateblue.slategray.slategrey.snow.springgreen.steelblue.tan.teal.thistle.tomato.turquoise.violet.wheat.white.whitesmoke.yellow.yellowgreen`.split(`.`));export{e as a,i,n,t as r,r as t};