@fluixi-ui/fx 0.1.0-alpha.2 → 0.1.0-alpha.4

package/README.md

@@ -119,6 +119,50 @@ the way mixing with white or black does. They need relative colour syntax
 (Chrome 119+, Safari 16.4+, Firefox 128+); for a wider floor use
 `mix(color, 'white', n)`.
 
+## Ready-made objects
+
+An `fx` value is a plain object, so a utility is just a named one — import it, spread
+it, merge it:
+
+```tsx
+import { flexBetween, muted, bordered, clickable, truncate, mergeFx } from '@fluixi-ui/fx';
+
+<div {...fxProps(() => mergeFx(bordered, clickable, { p: 3 }))} />
+```
+
+- **`utilities`** — the everyday one-liners: `flex*`, `fullWidth`, `stickyTop`,
+  `muted`, `bold`, `nowrap`, `bordered`, `rounded`, `pill`, `scrim`, `pointer`,
+  `clickable`, `focusRing`, `disabled`. The ones that carry a decision are the point:
+  `flexFill` includes the `min-width: 0` a flex child needs before its text will
+  truncate, `muted` is the token rather than a picked grey, `focusRing` is
+  `:focus-visible` only.
+- **`presets`** — the recipes that only work as a set: `truncate`, `lineClamp`,
+  `visuallyHidden`, `stack`, `row`, `center`, `scrollY`, `scrollbarHidden`,
+  `gradientText`, `aspect`.
+- **`variants`** — map a component's own props to `fx` without a ternary chain: later
+  groups win, `false` turns a defaulted group off.
+
+## Animation
+
+`keyframes()` defines an animation and returns its name; `animate()` writes the
+longhands. A bare second argument is the duration.
+
+```tsx
+const pulse = keyframes({ from: { opacity: 0.4 }, to: { opacity: 1 } });
+
+fx={animate(pulse, { repeat: 'infinite' })}
+fx={fadeIn('slow')}
+fx={slideIn('bottom', { distance: 16 })}
+```
+
+Stop values go through the resolver, so tokens work inside them, and the name is
+hashed from the resolved body so the same animation defined twice is one rule. The
+stock set — `fadeIn`/`fadeOut`, `scaleIn`/`scaleOut`, `slideIn`/`slideOut`, `spin`,
+`pulse`, `shimmer` — registers its rules on first use rather than on import.
+
+`animate` returns an object rather than the `animation` shorthand string, so it merges
+with what surrounds it instead of resetting the longhands it doesn't mention.
+
 ## How it lands on the page
 
 Flat declarations and every `base` value go to the `style` attribute — most `fx`
@@ -136,16 +180,26 @@ const { css, tokens } = collectFx();
 `<style data-fx-sheet data-fx-tokens="${tokens}">${css}</style>`;
 ```
 
-The client adopts that sheet instead of re-inserting its rules.
+The client adopts that sheet instead of re-inserting its rules. `resetFx()` clears a
+request's rules but keeps the animations — those are registered once at module scope,
+so dropping them would leave every request after the first naming an animation nobody
+emits.
 
 ## Composing
 
-`mergeFx` folds a component's own styling, its `slotProps`, and the consumer's
+`mergeFx` folds a component's own styling, its `sp` entries, and the consumer's
 `fx` into one object — later wins per property, selector blocks and breakpoint
 records merge rather than replace:
 
 ```tsx
-resolveFx(mergeFx(componentOwn, slotProps.body?.fx, props.fx));
+resolveFx(mergeFx(componentOwn, sp.body?.fx, props.fx));
+```
+
+A compound component reaches its parts with `slot`, which takes both channels: the
+part's own `sp` entry, and the styles a caller addressed to it through `fx.sp`.
+
+```tsx
+<PageBody {...slot('body', local.fx, local.sp)} />
 ```
 
 ## Binding it to an element

package/dist/index.d.ts

@@ -6,5 +6,12 @@ export * from './lib/sheet.js';
 export * from './lib/merge.js';
 export * from './lib/color.js';
 export * from './lib/props.js';
+export * from './lib/slots.js';
+export * from './lib/presets.js';
+export * from './lib/keyframes.js';
+export * from './lib/animations.js';
+export * from './lib/utilities.js';
+export * from './lib/variants.js';
+export { vars } from '@fluixi-ui/tokens/vars';
 export { hash } from './lib/hash.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAIlC,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -6,4 +6,13 @@ export * from './lib/sheet.js';
 export * from './lib/merge.js';
 export * from './lib/color.js';
 export * from './lib/props.js';
+export * from './lib/slots.js';
+export * from './lib/presets.js';
+export * from './lib/keyframes.js';
+export * from './lib/animations.js';
+export * from './lib/utilities.js';
+export * from './lib/variants.js';
+// The token map, re-exported so the escape hatches — a raw `style`, an inline SVG, a
+// canvas — can reach the same values without a second package import.
+export { vars } from '@fluixi-ui/tokens/vars';
 export { hash } from './lib/hash.js';

package/dist/lib/animations.d.ts

@@ -0,0 +1,55 @@
+import { type AnimationOptions } from './keyframes.js';
+import type { FxObject, SizeValue } from './types.js';
+/**
+ * The stock animations, as `fx` objects you can use directly or merge into one.
+ *
+ * Each is a function so the options stay open — `fadeIn('slow')`, `spin({ duration:
+ * 1200 })` — and so the `@keyframes` rule is registered on FIRST USE rather than on
+ * import. A module-scope `keyframes()` call in this file would put every animation's
+ * rule in the sheet of every app that imports anything from the package.
+ *
+ * They compose like any other `fx` object, and what merges after them wins:
+ *
+ *   fx={mergeFx(fadeIn(), { p: 4 })}
+ *
+ * None of them opts out of motion for you: what "reduced motion" means depends on the
+ * animation (a decorative fade should stop, a loading spinner mostly shouldn't). Say it
+ * where you use it — `fx={{ ...pulse(), _motionReduce: { animationName: 'none' } }}`.
+ */
+/** A bare duration is the common case, so it's accepted in place of the options. */
+type Options = AnimationOptions | AnimationOptions['duration'];
+export declare const fadeIn: (options?: Options) => FxObject;
+export declare const fadeOut: (options?: Options) => FxObject;
+/** The overlay/menu entrance: a fade with a slight scale, rather than a pop. */
+export declare const scaleIn: (options?: Options) => FxObject;
+export declare const scaleOut: (options?: Options) => FxObject;
+/** Loaders: linear, or the rotation visibly eases and looks like it's stalling. */
+export declare const spin: (options?: Options) => FxObject;
+/** Attention without movement — safe where a transform would reflow or distract. */
+export declare const pulse: (options?: Options) => FxObject;
+export type SlideEdge = 'top' | 'bottom' | 'left' | 'right';
+export interface SlideOptions extends AnimationOptions {
+    /** How far it travels. A number is pixels. */
+    distance?: SizeValue;
+}
+/**
+ * Slide in from an edge, fading as it goes. The edge is where it comes FROM, so
+ * `slideIn('bottom')` rises into place.
+ *
+ * The keyframes depend on the distance, so this can't be a fixed pair like the
+ * others — each distance is its own rule, deduped by the usual hash.
+ */
+export declare function slideIn(from: SlideEdge, options?: SlideOptions): FxObject;
+/** The reverse: `slideOut('top')` leaves upward. */
+export declare function slideOut(to: SlideEdge, options?: SlideOptions): FxObject;
+/**
+ * The loading sweep. Unlike the others this carries its own paint — the animation is
+ * only the moving half, and a bare `backgroundPosition` animation over an element with
+ * no gradient does nothing at all.
+ *
+ * It animates `background-position`, which doesn't invalidate layout, and leans on the
+ * token colours so it follows the theme.
+ */
+export declare function shimmer(options?: Options): FxObject;
+export {};
+//# sourceMappingURL=animations.d.ts.map

package/dist/lib/animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../src/lib/animations.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,gBAAgB,EAAsB,MAAM,gBAAgB,CAAC;AAC/F,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEtD;;;;;;;;;;;;;;;GAeG;AAEH,oFAAoF;AACpF,KAAK,OAAO,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;AAiB/D,eAAO,MAAM,MAAM,aATA,OAAO,KAAQ,QASkD,CAAC;AAErF,eAAO,MAAM,OAAO,aAXD,OAAO,KAAQ,QAWmD,CAAC;AAEtF,gFAAgF;AAChF,eAAO,MAAM,OAAO,aAdD,OAAO,KAAQ,QAiBjC,CAAC;AAEF,eAAO,MAAM,QAAQ,aAnBF,OAAO,KAAQ,QAsBjC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,IAAI,aAzBE,OAAO,KAAQ,QA4BjC,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,KAAK,aA/BC,OAAO,KAAQ,QAkCjC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAY5D,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,YAAiB,GAAG,QAAQ,CAU7E;AAED,oDAAoD;AACpD,wBAAgB,QAAQ,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,GAAE,YAAiB,GAAG,QAAQ,CAU5E;AAOD;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,OAAO,GAAE,OAAY,GAAG,QAAQ,CAMvD"}

package/dist/lib/animations.js

@@ -0,0 +1,73 @@
+import { vars } from '@fluixi-ui/tokens/vars';
+import { animate, keyframes } from './keyframes.js';
+function toConfig(options) {
+    return typeof options === 'object' ? options : { duration: options };
+}
+function animation(steps, defaults = {}) {
+    let name;
+    return (options = {}) => animate((name ??= keyframes(steps)), { ...defaults, ...toConfig(options) });
+}
+/**
+ * Enter animations hold both ends: without `fill` the element sits at its final
+ * style before the animation starts, which shows as a flash of the finished state.
+ */
+const ENTER = { fill: 'both' };
+export const fadeIn = animation({ from: { opacity: 0 }, to: { opacity: 1 } }, ENTER);
+export const fadeOut = animation({ from: { opacity: 1 }, to: { opacity: 0 } }, ENTER);
+/** The overlay/menu entrance: a fade with a slight scale, rather than a pop. */
+export const scaleIn = animation({ from: { opacity: 0, transform: 'scale(0.96)' }, to: { opacity: 1, transform: 'scale(1)' } }, ENTER);
+export const scaleOut = animation({ from: { opacity: 1, transform: 'scale(1)' }, to: { opacity: 0, transform: 'scale(0.96)' } }, ENTER);
+/** Loaders: linear, or the rotation visibly eases and looks like it's stalling. */
+export const spin = animation({ from: { transform: 'rotate(0deg)' }, to: { transform: 'rotate(360deg)' } }, { duration: 800, easing: 'linear', repeat: 'infinite' });
+/** Attention without movement — safe where a transform would reflow or distract. */
+export const pulse = animation({ '0%': { opacity: 1 }, '50%': { opacity: 0.5 }, '100%': { opacity: 1 } }, { duration: 1500, repeat: 'infinite' });
+/** How far a slide travels when nothing says otherwise. Enough to read as motion. */
+const SLIDE_DISTANCE = 8;
+const OFFSET = {
+    top: (d) => `translateY(-${d})`,
+    bottom: (d) => `translateY(${d})`,
+    left: (d) => `translateX(-${d})`,
+    right: (d) => `translateX(${d})`,
+};
+/**
+ * Slide in from an edge, fading as it goes. The edge is where it comes FROM, so
+ * `slideIn('bottom')` rises into place.
+ *
+ * The keyframes depend on the distance, so this can't be a fixed pair like the
+ * others — each distance is its own rule, deduped by the usual hash.
+ */
+export function slideIn(from, options = {}) {
+    const { distance = SLIDE_DISTANCE, ...rest } = options;
+    const offset = OFFSET[from](typeof distance === 'number' ? `${distance}px` : distance);
+    const name = keyframes({
+        from: { opacity: 0, transform: offset },
+        to: { opacity: 1, transform: 'translate(0)' },
+    });
+    return animate(name, { ...ENTER, ...rest });
+}
+/** The reverse: `slideOut('top')` leaves upward. */
+export function slideOut(to, options = {}) {
+    const { distance = SLIDE_DISTANCE, ...rest } = options;
+    const offset = OFFSET[to](typeof distance === 'number' ? `${distance}px` : distance);
+    const name = keyframes({
+        from: { opacity: 1, transform: 'translate(0)' },
+        to: { opacity: 0, transform: offset },
+    });
+    return animate(name, { ...ENTER, ...rest });
+}
+const shimmerRun = animation({ from: { backgroundPosition: '200% 0' }, to: { backgroundPosition: '-200% 0' } }, { duration: 1500, easing: 'linear', repeat: 'infinite' });
+/**
+ * The loading sweep. Unlike the others this carries its own paint — the animation is
+ * only the moving half, and a bare `backgroundPosition` animation over an element with
+ * no gradient does nothing at all.
+ *
+ * It animates `background-position`, which doesn't invalidate layout, and leans on the
+ * token colours so it follows the theme.
+ */
+export function shimmer(options = {}) {
+    return {
+        backgroundImage: `linear-gradient(90deg, ${vars.color.bgSubtle} 25%, ${vars.color.bgMuted} 37%, ${vars.color.bgSubtle} 63%)`,
+        backgroundSize: '400% 100%',
+        ...shimmerRun(options),
+    };
+}

package/dist/lib/keyframes.d.ts

@@ -0,0 +1,70 @@
+import type { DurationToken, EasingToken } from './scales.js';
+import type { FxDeclarations, FxObject } from './types.js';
+/**
+ * Animation stops. `from`/`to` for the two-stop case, percentages for the rest —
+ * exactly what CSS accepts, so there is nothing to translate in your head.
+ *
+ * A stop is flat declarations only: selectors and breakpoints have no meaning
+ * inside `@keyframes`, and the type says so rather than dropping them silently.
+ */
+export type KeyframeSteps = {
+    from?: FxDeclarations;
+    to?: FxDeclarations;
+} & {
+    [K in `${number}%`]?: FxDeclarations;
+};
+/**
+ * Define an animation and get its name back.
+ *
+ * ```tsx
+ * const pulse = keyframes({ from: { opacity: 0.4 }, to: { opacity: 1 } });
+ *
+ * <Box fx={{ animationName: pulse, animationDuration: 600, animationIterationCount: 'infinite' }} />
+ * ```
+ *
+ * The name is hashed from the resolved stops, so defining the same animation twice —
+ * in two packages, or in a component rendered a hundred times — is one rule. Values
+ * go through the same resolver as `fx`, so tokens work inside a stop.
+ *
+ * Call it at module scope. It registers a rule for the life of the process, which is
+ * what an animation definition is; calling it per render would hash the same body
+ * over and over for nothing.
+ */
+export declare function keyframes(steps: KeyframeSteps): string;
+/** Keeps the token union's autocomplete while still accepting any raw CSS value. */
+type Raw = string & {};
+export interface AnimationOptions {
+    /** A duration token or milliseconds. Defaults to `normal`. */
+    duration?: DurationToken | number | Raw;
+    /** An easing token or any timing function. Defaults to `standard`. */
+    easing?: EasingToken | Raw;
+    delay?: DurationToken | number | Raw;
+    /** Iteration count. `'infinite'` for a loop. */
+    repeat?: number | 'infinite';
+    direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    /** Which end the animation holds outside its run. CSS defaults to `none`. */
+    fill?: 'none' | 'forwards' | 'backwards' | 'both';
+    /** Hold at the current frame — for an animation driven by state. */
+    paused?: boolean;
+}
+/**
+ * The longhands for running an animation, in one call.
+ *
+ * ```tsx
+ * <Box fx={animate(pulse, { repeat: 'infinite' })} />
+ * <Box fx={animate(slideIn, 'slow')} />
+ * <Box fx={mergeFx(animate(pulse, 600), { bg: 'primary' })} />
+ * ```
+ *
+ * A bare second argument is the duration, since that's the one you always set.
+ * Duration and easing default to the `normal`/`standard` tokens — a CSS animation
+ * with no duration doesn't run at all, and that silence is hard to debug. Everything
+ * else is left off unless you ask for it, so what lands is what CSS would do.
+ *
+ * It returns a plain object rather than the `animation` shorthand string, so it
+ * merges with, and can be overridden by, the properties around it — a shorthand
+ * would silently reset the longhands it doesn't mention.
+ */
+export declare function animate(name: string, options?: AnimationOptions | AnimationOptions['duration']): FxObject;
+export {};
+//# sourceMappingURL=keyframes.d.ts.map

package/dist/lib/keyframes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["../../src/lib/keyframes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG;KAAG,CAAC,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,EAAE,cAAc;CAAE,CAAC;AAE7C;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAYtD;AAED,oFAAoF;AACpF,KAAK,GAAG,GAAG,MAAM,GAAG,EAAE,CAAC;AAEvB,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,GAAG,CAAC;IACxC,sEAAsE;IACtE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,GAAG,CAAC;IACrC,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,mBAAmB,CAAC;IACrE,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC;IAClD,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,gBAAgB,GAAG,gBAAgB,CAAC,UAAU,CAAM,GAC5D,QAAQ,CAcV"}

package/dist/lib/keyframes.js

@@ -0,0 +1,63 @@
+import { hash } from './hash.js';
+import { resolveFx } from './resolve.js';
+import { registerKeyframes } from './sheet.js';
+/**
+ * Define an animation and get its name back.
+ *
+ * ```tsx
+ * const pulse = keyframes({ from: { opacity: 0.4 }, to: { opacity: 1 } });
+ *
+ * <Box fx={{ animationName: pulse, animationDuration: 600, animationIterationCount: 'infinite' }} />
+ * ```
+ *
+ * The name is hashed from the resolved stops, so defining the same animation twice —
+ * in two packages, or in a component rendered a hundred times — is one rule. Values
+ * go through the same resolver as `fx`, so tokens work inside a stop.
+ *
+ * Call it at module scope. It registers a rule for the life of the process, which is
+ * what an animation definition is; calling it per render would hash the same body
+ * over and over for nothing.
+ */
+export function keyframes(steps) {
+    const body = Object.keys(steps)
+        .map((stop) => {
+        const declarations = resolveFx(steps[stop]).style;
+        return declarations ? `${stop}{${declarations}}` : '';
+    })
+        .join('');
+    // Named after the body, not the call site: two identical definitions collapse.
+    const name = `fx-${hash(body)}`;
+    registerKeyframes(name, body);
+    return name;
+}
+/**
+ * The longhands for running an animation, in one call.
+ *
+ * ```tsx
+ * <Box fx={animate(pulse, { repeat: 'infinite' })} />
+ * <Box fx={animate(slideIn, 'slow')} />
+ * <Box fx={mergeFx(animate(pulse, 600), { bg: 'primary' })} />
+ * ```
+ *
+ * A bare second argument is the duration, since that's the one you always set.
+ * Duration and easing default to the `normal`/`standard` tokens — a CSS animation
+ * with no duration doesn't run at all, and that silence is hard to debug. Everything
+ * else is left off unless you ask for it, so what lands is what CSS would do.
+ *
+ * It returns a plain object rather than the `animation` shorthand string, so it
+ * merges with, and can be overridden by, the properties around it — a shorthand
+ * would silently reset the longhands it doesn't mention.
+ */
+export function animate(name, options = {}) {
+    const config = typeof options === 'object' ? options : { duration: options };
+    return {
+        animationName: name,
+        animationDuration: config.duration ?? 'normal',
+        animationTimingFunction: config.easing ?? 'standard',
+        ...(config.delay == null ? {} : { animationDelay: config.delay }),
+        ...(config.repeat == null ? {} : { animationIterationCount: config.repeat }),
+        ...(config.direction == null ? {} : { animationDirection: config.direction }),
+        ...(config.fill == null ? {} : { animationFillMode: config.fill }),
+        ...(config.paused ? { animationPlayState: 'paused' } : {}),
+    };
+}

package/dist/lib/merge.d.ts

@@ -1,7 +1,7 @@
 import type { FxObject, FxProp } from './types.js';
 /**
  * Combine style objects, later winning per property. Used to fold a component's
- * own styling, its `slotProps`, and the consumer's `fx` into one object before
+ * own styling, its `sp`, and the consumer's `fx` into one object before
  * resolving — so all three compose instead of clobbering.
  */
 export declare function mergeFx(...inputs: FxProp[]): FxObject;

package/dist/lib/merge.js

@@ -32,7 +32,7 @@ function mergeInto(target, source) {
 }
 /**
  * Combine style objects, later winning per property. Used to fold a component's
- * own styling, its `slotProps`, and the consumer's `fx` into one object before
+ * own styling, its `sp`, and the consumer's `fx` into one object before
  * resolving — so all three compose instead of clobbering.
  */
 export function mergeFx(...inputs) {

package/dist/lib/presets.d.ts

@@ -0,0 +1,67 @@
+import type { FxObject, SizeValue, SpaceValue } from './types.js';
+/**
+ * Ready-made `fx` objects for the patterns that take several declarations to express.
+ *
+ * These earn a name because the declarations only work together — `truncate` is three
+ * properties and dropping one silently does nothing, `visuallyHidden` is the clip
+ * recipe, `lineClamp` needs the `-webkit-*` trio. One-liners are deliberately absent:
+ * `{ display: 'flex' }` is already short, and a preset for it would only be a second
+ * vocabulary for the same thing.
+ *
+ * Each returns a plain `FxObject`, so they compose with `mergeFx`, nest inside `sp`,
+ * and are overridden by whatever the caller passes after them:
+ *
+ *   fx={mergeFx(stack(3), props.fx)}
+ */
+/** Column flex with a gap. */
+export declare function stack(gap?: SpaceValue): FxObject;
+/** Row flex with a gap, centred on the cross axis — the toolbar/label default. */
+export declare function row(gap?: SpaceValue): FxObject;
+/** Centre a single child both ways. */
+export declare const center: FxObject;
+/** Cover the nearest positioned ancestor. */
+export declare const absoluteFill: FxObject;
+/** Fixed box. One argument is a square. */
+export declare function size(width: SizeValue, height?: SizeValue): FxObject;
+/** Fixed square — `size(n)` under a name that says why. */
+export declare function square(edge: SizeValue): FxObject;
+/** Hold a ratio while the width is driven by the layout. */
+export declare function aspect(ratio: number | string): FxObject;
+/** One line, ellipsised. All three declarations are required for the effect. */
+export declare const truncate: FxObject;
+/**
+ * Ellipsis after `lines` lines. Still the `-webkit-box` recipe in every engine —
+ * `line-clamp` proper is not broadly supported yet.
+ */
+export declare function lineClamp(lines: number): FxObject;
+/**
+ * A scroll region. `overscrollBehavior` stops the scroll chaining to the page when
+ * the region hits its end, which is the part people forget.
+ */
+export declare function scrollY(maxHeight?: SizeValue): FxObject;
+/** Horizontal counterpart of {@link scrollY}. */
+export declare function scrollX(maxWidth?: SizeValue): FxObject;
+/**
+ * Out of sight, still read aloud. `display: none` and `visibility: hidden` both take
+ * it out of the accessibility tree, which is the opposite of the point.
+ */
+export declare const visuallyHidden: FxObject;
+/** Text that should not be selected by a drag — handles, chrome, controls. */
+export declare const noSelect: FxObject;
+/**
+ * Scroll without a visible scrollbar. Three vendors, three mechanisms, and the WebKit
+ * one is a pseudo-element rather than a property — which is why `_scrollbar` exists in
+ * the selector set.
+ */
+export declare const scrollbarHidden: FxObject;
+/**
+ * Paint text with a background. `background-clip: text` needs its WebKit twin (the
+ * resolver mirrors that) and the fill colour has to be transparent for the background
+ * to show through — `color: transparent` alone leaves WebKit painting the glyphs.
+ */
+export declare function gradientText(image: string): FxObject;
+/** Kill the grey flash iOS paints over a tapped element. */
+export declare const noTapHighlight: FxObject;
+/** Momentum scrolling on older iOS; inert everywhere else. */
+export declare const touchScroll: FxObject;
+//# sourceMappingURL=presets.d.ts.map

package/dist/lib/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/lib/presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAElE;;;;;;;;;;;;;GAaG;AAEH,8BAA8B;AAC9B,wBAAgB,KAAK,CAAC,GAAG,GAAE,UAAc,GAAG,QAAQ,CAEnD;AAED,kFAAkF;AAClF,wBAAgB,GAAG,CAAC,GAAG,GAAE,UAAc,GAAG,QAAQ,CAEjD;AAED,uCAAuC;AACvC,eAAO,MAAM,MAAM,EAAE,QAAoD,CAAC;AAE1E,6CAA6C;AAC7C,eAAO,MAAM,YAAY,EAAE,QAA6C,CAAC;AAEzE,2CAA2C;AAC3C,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,GAAE,SAAiB,GAAG,QAAQ,CAE1E;AAED,2DAA2D;AAC3D,wBAAgB,MAAM,CAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAEhD;AAED,4DAA4D;AAC5D,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAEvD;AAED,gFAAgF;AAChF,eAAO,MAAM,QAAQ,EAAE,QAItB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAOjD;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAEvD;AAED,iDAAiD;AACjD,wBAAgB,OAAO,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAEtD;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,QAU5B,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,QAAQ,EAAE,QAAiC,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,QAIjB,CAAC;AAEd;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAOpD;AAED,4DAA4D;AAC5D,eAAO,MAAM,cAAc,EAAE,QAAiE,CAAC;AAE/F,8DAA8D;AAC9D,eAAO,MAAM,WAAW,EAAE,QAA2D,CAAC"}

package/dist/lib/presets.js

@@ -0,0 +1,111 @@
+/**
+ * Ready-made `fx` objects for the patterns that take several declarations to express.
+ *
+ * These earn a name because the declarations only work together — `truncate` is three
+ * properties and dropping one silently does nothing, `visuallyHidden` is the clip
+ * recipe, `lineClamp` needs the `-webkit-*` trio. One-liners are deliberately absent:
+ * `{ display: 'flex' }` is already short, and a preset for it would only be a second
+ * vocabulary for the same thing.
+ *
+ * Each returns a plain `FxObject`, so they compose with `mergeFx`, nest inside `sp`,
+ * and are overridden by whatever the caller passes after them:
+ *
+ *   fx={mergeFx(stack(3), props.fx)}
+ */
+/** Column flex with a gap. */
+export function stack(gap = 0) {
+    return { display: 'flex', flexDirection: 'column', gap };
+}
+/** Row flex with a gap, centred on the cross axis — the toolbar/label default. */
+export function row(gap = 0) {
+    return { display: 'flex', flexDirection: 'row', alignItems: 'center', gap };
+}
+/** Centre a single child both ways. */
+export const center = { display: 'grid', placeItems: 'center' };
+/** Cover the nearest positioned ancestor. */
+export const absoluteFill = { position: 'absolute', inset: 0 };
+/** Fixed box. One argument is a square. */
+export function size(width, height = width) {
+    return { width, height };
+}
+/** Fixed square — `size(n)` under a name that says why. */
+export function square(edge) {
+    return size(edge);
+}
+/** Hold a ratio while the width is driven by the layout. */
+export function aspect(ratio) {
+    return { aspectRatio: String(ratio) };
+}
+/** One line, ellipsised. All three declarations are required for the effect. */
+export const truncate = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+/**
+ * Ellipsis after `lines` lines. Still the `-webkit-box` recipe in every engine —
+ * `line-clamp` proper is not broadly supported yet.
+ */
+export function lineClamp(lines) {
+    return {
+        display: '-webkit-box',
+        webkitBoxOrient: 'vertical',
+        webkitLineClamp: lines,
+        overflow: 'hidden',
+    };
+}
+/**
+ * A scroll region. `overscrollBehavior` stops the scroll chaining to the page when
+ * the region hits its end, which is the part people forget.
+ */
+export function scrollY(maxHeight) {
+    return { overflowY: 'auto', overscrollBehavior: 'contain', ...(maxHeight == null ? {} : { maxHeight }) };
+}
+/** Horizontal counterpart of {@link scrollY}. */
+export function scrollX(maxWidth) {
+    return { overflowX: 'auto', overscrollBehavior: 'contain', ...(maxWidth == null ? {} : { maxWidth }) };
+}
+/**
+ * Out of sight, still read aloud. `display: none` and `visibility: hidden` both take
+ * it out of the accessibility tree, which is the opposite of the point.
+ */
+export const visuallyHidden = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    margin: '-1px',
+    padding: 0,
+    border: '0',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    clipPath: 'inset(50%)',
+};
+/** Text that should not be selected by a drag — handles, chrome, controls. */
+export const noSelect = { userSelect: 'none' };
+/**
+ * Scroll without a visible scrollbar. Three vendors, three mechanisms, and the WebKit
+ * one is a pseudo-element rather than a property — which is why `_scrollbar` exists in
+ * the selector set.
+ */
+export const scrollbarHidden = {
+    scrollbarWidth: 'none',
+    msOverflowStyle: 'none',
+    _scrollbar: { display: 'none' },
+};
+/**
+ * Paint text with a background. `background-clip: text` needs its WebKit twin (the
+ * resolver mirrors that) and the fill colour has to be transparent for the background
+ * to show through — `color: transparent` alone leaves WebKit painting the glyphs.
+ */
+export function gradientText(image) {
+    return {
+        backgroundImage: image,
+        backgroundClip: 'text',
+        color: 'transparent',
+        webkitTextFillColor: 'transparent',
+    };
+}
+/** Kill the grey flash iOS paints over a tapped element. */
+export const noTapHighlight = { webkitTapHighlightColor: 'transparent' };
+/** Momentum scrolling on older iOS; inert everywhere else. */
+export const touchScroll = { webkitOverflowScrolling: 'touch' };

package/dist/lib/resolve.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/lib/resolve.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAqB,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA+ItE;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAkBjD"}
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/lib/resolve.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAqB,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAuKtE;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAkBjD"}

package/dist/lib/resolve.js

@@ -5,6 +5,8 @@ import { composeSelectors, isSelectorKey, selectorEntry } from './selectors.js';
 const BREAKPOINTS = breakpoint;
 const ROOT = ['&'];
 const CONTAINER_KEY = '_container';
+/** Slot styles are read by the component, not by the resolver — never a property. */
+const SLOTS_KEY = 'sp';
 function isPlainObject(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -57,6 +59,8 @@ function walk(object, selectors, atRules, buckets) {
         const value = object[name];
         if (value == null || value === false)
             continue;
+        if (name === SLOTS_KEY)
+            continue;
         if (name === CONTAINER_KEY) {
             if (isPlainObject(value))
                 walkContainer(value, selectors, atRules, buckets);
@@ -114,7 +118,26 @@ function walkContainer(query, selectors, atRules, buckets) {
         walk(block, selectors, [...atRules, `@container ${name}${condition}`], buckets);
     }
 }
+/**
+ * Properties Safari still only understands prefixed. Written before the standard name
+ * so the standard one wins wherever it is supported, and kept to the handful that
+ * actually need it — this is not a general autoprefixer, and a stale entry here is a
+ * declaration shipped to every user forever.
+ */
+const MIRRORED = {
+    backdropFilter: 'webkitBackdropFilter',
+    backgroundClip: 'webkitBackgroundClip',
+    maskImage: 'webkitMaskImage',
+    userSelect: 'webkitUserSelect',
+    appearance: 'webkitAppearance',
+    hyphens: 'webkitHyphens',
+    textSizeAdjust: 'webkitTextSizeAdjust',
+};
 function declare(bucket, property, value) {
+    const prefixed = MIRRORED[property];
+    if (prefixed) {
+        bucket.declarations.set(prefixed, `${cssProperty(prefixed)}:${resolveValue(property, value)}`);
+    }
     bucket.declarations.set(property, `${cssProperty(property)}:${resolveValue(property, value)}`);
 }
 /**

package/dist/lib/scales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../src/lib/scales.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../src/lib/scales.ts"],"names":[],"mappings":"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"}