@teacss/preset-standard 0.6.0 → 0.6.2

package/README.md

@@ -35,14 +35,32 @@ separate. `multiplerKeywords` remains a deprecated alias for
 ## Application shortcuts
 
 ```css
-@shortcut hstack "d:flex flex-direction:row align-items:center";
-@shortcut truncate "overflow:hidden text-overflow:ellipsis white-space:nowrap";
+@shortcut stack-row "d:flex flex-direction:row align-items:center";
+@shortcut text-truncate "overflow:hidden text-overflow:ellipsis white-space:nowrap";
 ```
 
 Declarations may live in the CSS entry, imported CSS, or CSS matched by
 `@source`. Conditions remain valid on use, and the last declaration of a name
 wins. Programmatic shortcuts use Core's generic `UserConfig` types.
 
+## Paired sizing and logical dividers
+
+For text-flow sizing, `size:4x`, `min-size:4x`, and `max-size:4x` set both
+inline and block sizes. For fixed geometry, use `dimensions:4x`,
+`min-dimensions:4x`, and `max-dimensions:4x` for width and height. These are
+ordinary Standard declarations. Values must be accepted by both underlying
+single-axis rules. Variables, arbitrary values, and suffix conditions work as
+they do on those rules. `size:screen` emits `100vi` and `100vb`;
+`dimensions:screen` emits `100vw` and `100vh`.
+
+`divide-inline-width:` and `divide-block-width:` draw on logical inline-end
+and block-end edges. `divide-x-width:` and `divide-y-width:` keep physical
+right and bottom edges. `divide-color:` and `divide-style:` supply common
+settings. `divide-inline-color/style:` and `divide-block-color/style:` override
+only the named logical axis. Color and style alone do not draw a divider; each
+axis needs its own width. To change axes at a breakpoint, set the old width to
+`0` and the new width explicitly.
+
 ## Preflight and themes
 
 Preflight emits low-specificity reset rules and theme variables. Set
@@ -90,26 +108,14 @@ for Safari/VoiceOver. The reset adds no brand palette or global motion policy.
 Element-local `reset-*` shortcuts belong to the optional Official preset;
 Standard does not register those classes.
 
-### Role palettes and mode regions
+### Global role palettes and color scheme
 
-Primary creates emphasis. Neutral builds the interface. Semantic colors communicate state.
+Standard has seven 12-step roles: primary → gray, neutral → sage, focused →
+neutral, success → jade, warning → amber, failure → red, and general → blue.
+Use numbered roles directly, such as `bg-color:primary-200 text-color:primary-950`.
+Official adds structure without background/hover/foreground color aliases.
 
-Standard provides seven 12-step roles: primary → gray, neutral → sage,
-focused → neutral, success → jade, warning → amber, failure → red, general → blue. Use
-`bg-color:primary-200 text-color:primary-950` directly. Neither Standard nor
-Official adds background/hover/foreground aliases; role steps already describe
-those uses. Keep palette selection in central configuration.
-
-The role order is primary, neutral, then the states: focused, success, warning,
-failure, general. Focused follows the resolved neutral scale at each step when
-no focused selection applies, including when `@focused` is omitted. Declaring
-`@focused` only enables choices; it does not change this fallback. A configured
-`data-css-focused` selection overrides it. Empty, unknown or undeclared selections
-return to the region’s neutral palette; `theme.rolePalettes.focused: []` clears
-independent choices. Application `@custom` overrides still take precedence in
-the base mapping.
-
-Declare selectable physical palettes in the CSS entry:
+The CSS entry registers the selectable built-in physical palettes:
 
 ```css
 @presets "standard,official";
@@ -123,43 +129,70 @@ Declare selectable physical palettes in the CSS entry:
 @teacss;
 ```
 
-Lists add available selections, not defaults. Repeated declarations/imports union
-and sort each role's names. Sources must be lowercase kebab-case physical palettes
-with all 12 base steps and no direct or transitive role references in any mode.
-Programmatic `theme.rolePalettes` has seven optional arrays; later arrays replace
-earlier arrays per role, and `[]` clears that role. It is global configuration,
-not a scale or a mode field. No DOM scanning is involved.
+Repeated/imported lists union and sort. They enable choices without changing
+defaults; removing every list for a role clears its choices. Only Standard's
+original built-in physical palette names are candidates. Overrides through
+`@custom` or `theme.colors` keep that identity; custom names remain available to
+ordinary color utilities but cannot become role candidates. Enabled palettes
+need all 12 effective steps and no direct/transitive role references, including
+mode overrides, `preflightBase`, and variable fallbacks. Candidate registration
+has no public Theme field; programmatic consumers load the CSS entry with
+`resolveEntryConfig()`.
 
 ```html
-<html data-css-primary="gray" data-css-neutral="sage" data-css-mode="dark">
-  <body>
-    <section data-css-primary="red" data-css-mode="light">
-      <p>Red / sage / light</p>
-      <article data-css-neutral="slate">Gray / slate / dark</article>
-    </section>
-  </body>
+<html data-css-primary="blue" data-css-neutral="slate" data-css-scheme="dark">
+  <body><p class="text-color:primary-900">Global blue / slate / dark</p></body>
 </html>
 ```
 
-Any of the seven `data-css-<role>` attributes, `data-css-mode`, or configured mode
-alias starts a region. Each of its eight dimensions uses the same selection order:
-**own attribute → root HTML attribute → configured default**. Intermediate
-regions are ignored. Plain descendants inherit until the next region. Empty,
-unknown, or undeclared values explicitly select the configured default and block
-root fallback. Removing the last marker rejoins the enclosing region. Runtime
-attribute changes need no regeneration. `data-css-theme` has no TeaCSS meaning.
-
-`@dark` / `@light` test the final styled target's region; pseudo-elements use their
-host. No explicit mode activates neither condition. `defaultMode` names the base
-palette; `@os-dark` / `@os-light` remain independent media queries.
-`modeSelectors: { dark: ".night", light: ".day" }` adds aliases; explicit mode
-attributes win, both aliases select neutral mode, and neither alias is implicit.
-Programmatic mode names preserve case, spaces and punctuation; empty names, NUL
-and unpaired surrogates are rejected.
+Only html role attributes, `data-css-scheme` and configured mode aliases select
+colors. Descendants inherit; the same markers on descendants have no effect.
+Missing, empty, unknown or undeclared role values use configured defaults.
+Focused defaults to final global neutral while preserving explicit default
+step overrides. Valid root focused selection chooses an independent palette.
+Changing root attributes switches registered candidates without regenerating CSS.
+
+`@dark` / `@light` inspect html for every final target, including pseudo-elements.
+Without a valid explicit mode, neither condition activates, even when `defaultMode` is
+dark; `defaultMode` names the base table. OS conditions remain independent media
+queries. `modeSelectors: { dark: ".night", light: ".day" }` adds optional aliases
+on html. Canonical `data-css-scheme` wins even when empty/invalid; conflicting
+aliases select neither mode. Aliases are never implicit. Mode names preserve
+case, spaces and punctuation; empty names, NUL and unpaired surrogates are invalid.
+
+Theme output uses zero-specificity ordinary html selectors: base variables once,
+mode differences, then independent role mappings. Each role/candidate mapping is
+emitted once, without multiplying it by modes or other roles. `preflightRoot`
+adds explicit re-declaration targets that always use html selections; it does not
+enable local colors. On-demand preflight retains the consumed dependency closure
+through all registered candidates and effective modes. With preflight disabled,
+root mode conditions still work but the application supplies variables.
 
 Global `@custom` sets scales and colors; `@custom dark` changes colors only.
-Whole-theme variants are unsupported. `@custom theme ...` and `theme.themes`
-are errors. Palette selection never changes spacing, radii or shadow templates.
+Whole-theme variants and role scheme blocks are unsupported. Color selection
+never resets inherited spacing or changes radius/shadow geometry.
+
+### Spacing scaling
+
+The default chain is `--scaling → --spacing → default 1x…9x`:
+
+```css
+--spacing: calc(0.25rem * var(--scaling, 1));
+--spacing-1x: var(--spacing);
+--spacing-5x: calc(var(--spacing) * 6);
+```
+
+Set the existing variable utility on html, such as `$scaling:0.5@sm`, to halve
+numeric and default named spacing at the configured `sm` breakpoint (768px by
+default). Named multipliers remain `1,2,3,4,6,8,10,12,16`. Only the base formula
+reads scaling; no extra multiplier or default `--scaling` declaration is emitted.
+
+A root override of `--spacing` replaces the base formula and also changes default
+named steps. Explicit named overrides remain final values; reference `--spacing`
+to make a custom step follow the chain. Fixed lengths and unrelated scales are
+unchanged. Variables resolve where declared, so a descendant-only scaling change
+does not recompute inherited root spacing. Existing `preflightRoot` follows normal
+CSS re-declaration semantics. No density configuration or additional rule is needed.
 
 ### Relationship markers
 
@@ -181,7 +214,7 @@ Names are case-sensitive. Group remains descendant matching, peer uses `~`.
 `@lang-<tag>` compares the complete root `html:root[lang]` value, ignoring ASCII
 case without trimming. Here `@lang-zh` matches and `@lang-en` does not.
 `zh`, `zh-CN`, and `zh-Hans` are independent: `@lang-zh` does not match a root
-value of `zh-CN`. Local `lang`, theme, and mode regions do not override the root
+value of `zh-CN`. Local `lang` and descendant color markers do not override the root
 language.
 Root elements, descendants, targets, and pseudo-elements share this condition.
 
@@ -235,7 +268,7 @@ explicit display and overflow can override `line-clamp`'s corresponding declarat
 ## Value and composition boundaries
 
 - Logical border width/style pairs accept two arbitrary components, such as
-  `border-a-width:[1px_2px]`; physical x/y and single-edge forms accept one.
+  `border-inline-width:[1px_2px]`; physical x/y and single-edge forms accept one.
 - `[…]` keeps structurally valid arbitrary CSS, including
   `animation-name:[var(--name)]`. It does not guarantee browser support.
 - Custom-variable values and `font-palette` use the shared structural checks;
@@ -247,7 +280,11 @@ explicit display and overflow can override `line-clamp`'s corresponding declarat
   `shadow:$shadow-card` reads a complete raw variable without recoloring;
   `box-shadow:[…]` replaces the whole composed surface.
 - Named animations quote their decoded CSS names to avoid shorthand keyword
-  ambiguity. Numeric zero iteration counts remain zero.
+  ambiguity. Numeric zero iteration counts remain zero. `animation:spin` rotates
+  at `1s linear infinite`; `animation:spinner` fades a spinner leaf from opacity
+  `1` to `.25` at `800ms linear infinite`. Duration, timing, and iteration
+  utilities override these defaults. Gate decorative motion with `@motion-safe`
+  or stop it with `animation:none@motion-reduce`.
 - Bare background/mask sizes cannot be negative.
 - Border-spacing axis variables do not inherit into nested tables.
 - Gradient properties are registered on demand, retaining shared fallbacks
@@ -260,7 +297,7 @@ exactly `on`, with ordinary importance and suffix conditions:
 
 ```txt
 mask-g-linear:on mask-g-radial:on mask-g-conic:on
-space-x-reverse:on space-y-reverse:on space-a-reverse:on space-c-reverse:on
+space-x-reverse:on space-y-reverse:on space-inline-reverse:on space-block-reverse:on
 ```
 
 Use `divide-x-width:1` / `divide-y-width:1` for 1px child dividers. The former

package/dist/index.d.ts

@@ -64,7 +64,6 @@ declare function transformerCompileClass(options?: CompileClassOptions): SourceC
 type ColorPalette = Record<string, Record<string, string>>;
 /** Semantic color roles emitted as `--color-<role>` variables. */
 type SemanticColors = Record<string, string | number>;
-type ColorRole = "primary" | "neutral" | "focused" | "success" | "warning" | "failure" | "general";
 interface ThemeAnimation {
   keyframes?: Record<string, string>;
   durations?: Record<string, string>;
@@ -77,8 +76,6 @@ interface Theme {
   colors?: ColorPalette;
   /** Application semantic colors. Presets supply an empty namespace. */
   semanticColors?: SemanticColors;
-  /** Physical palettes available through each data-css-<role> attribute. Lists replace per role. */
-  rolePalettes?: Partial<Record<ColorRole, readonly string[]>>;
   breakpoint?: Record<string, string>;
   container?: Record<string, string>;
   spacing?: Record<string, string>;
@@ -103,7 +100,7 @@ interface Theme {
   /**
    * Non-default mode color overrides. `theme.colors` and
    * `theme.semanticColors` are the default mode; each entry here (e.g. `dark`)
-   * contributes to the complete mapping for its `data-css-mode` region (or a
+   * contributes to the complete mapping for its `data-css-scheme` on html (or a
    * configured `dark`/`light` alias). Only declare values that differ. OS
    * preference uses `@os-dark` / `@os-light`.
    */
@@ -113,19 +110,19 @@ interface Theme {
   }>;
   /** The mode whose palette is `theme.colors` (need not appear in `modes`). @default "light" */
   defaultMode?: string;
-  /** Additional declaration points inside every mode/palette region; roots always receive the complete mapping. */
+  /** Additional declaration points that re-declare the complete theme selected on html. */
   preflightRoot?: Arrayable<string>;
   /** Additional CSS custom properties merged after the default theme-derived preflight variables */
   preflightBase?: Record<string, string | number>;
 }
 type CustomRule = Rule<Theme>;
-/** Optional region-marker aliases for `dark` / `light`; canonical `data-css-mode` takes precedence. */
+/** Optional html selector aliases for `dark` / `light`; canonical `data-css-scheme` takes precedence. */
 interface ModeSelectors {
   dark?: string;
   light?: string;
 }
 interface PresetStandardOptions extends PresetOptions {
-  /** Add `dark` / `light` region aliases, e.g. `{ dark: ".night" }`; no aliases are enabled by default. */
+  /** Add `dark` / `light` html aliases, e.g. `{ dark: ".night" }`; no aliases are enabled by default. */
   modeSelectors?: ModeSelectors;
   /**
    * Container sizes for the `@container-*` conditions, merged over the default