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

package/dist/lib/scales.js

@@ -118,6 +118,10 @@ export const PROP_SCALE = (() => {
     map['fontFamily'] = 'fontFamily';
     map['transitionDuration'] = 'duration';
     map['animationDuration'] = 'duration';
+    // Delays are the same kind of value as durations — without this a bare `100` would
+    // serialize unitless, which CSS drops.
+    map['transitionDelay'] = 'duration';
+    map['animationDelay'] = 'duration';
     map['transitionTimingFunction'] = 'easing';
     map['animationTimingFunction'] = 'easing';
     map['opacity'] = 'opacity';
@@ -218,5 +222,9 @@ export function resolveValue(property, value) {
 export function cssProperty(name) {
     if (name.startsWith('--'))
         return name;
-    return name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+    // A vendor prefix keeps its leading dash: `webkitLineClamp` is `-webkit-line-clamp`,
+    // and camel-to-kebab alone would emit `webkit-line-clamp`, which no browser reads.
+    return name
+        .replace(/^(webkit|moz|ms|o)(?=[A-Z])/, '-$1')
+        .replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 }

package/dist/lib/selectors.d.ts

@@ -63,6 +63,15 @@ export declare const SELECTORS: {
     _selection: {
         selector: string;
     };
+    _scrollbar: {
+        selector: string;
+    };
+    _scrollbarThumb: {
+        selector: string;
+    };
+    _scrollbarTrack: {
+        selector: string;
+    };
     _first: {
         selector: string;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../src/lib/selectors.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCmB,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,SAAS,CAAC;AAEjD,KAAK,MAAM,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;AAEhC;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,SAAS,WAAW,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;AAEtF,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,IAAI,WAAW,CAE7D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,WAAW,GAAG,aAAa,CAE7D;AAED,6EAA6E;AAC7E,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAe3D;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAO3E"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../src/lib/selectors.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCmB,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,SAAS,CAAC;AAEjD,KAAK,MAAM,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;AAEhC;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,SAAS,WAAW,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;AAEtF,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,IAAI,WAAW,CAE7D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,WAAW,GAAG,aAAa,CAE7D;AAED,6EAA6E;AAC7E,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAe3D;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAO3E"}

package/dist/lib/selectors.js

@@ -22,6 +22,10 @@ export const SELECTORS = {
     _after: { selector: '&::after' },
     _placeholder: { selector: '&::placeholder' },
     _selection: { selector: '&::selection' },
+    // Scrollbar styling has no standard selector, and the closed set is the only way in.
+    _scrollbar: { selector: '&::-webkit-scrollbar' },
+    _scrollbarThumb: { selector: '&::-webkit-scrollbar-thumb' },
+    _scrollbarTrack: { selector: '&::-webkit-scrollbar-track' },
     _first: { selector: '&:first-child' },
     _last: { selector: '&:last-child' },
     _odd: { selector: '&:nth-child(odd)' },

package/dist/lib/sheet.d.ts

@@ -4,6 +4,13 @@ import type { FxResult } from './types.js';
  * fitted entirely inline never reach the stylesheet at all.
  */
 export declare function insertFx(result: FxResult): void;
+/**
+ * Register an `@keyframes` rule. Kept apart from the per-render rules because it has a
+ * different lifetime: `keyframes()` is called once at module scope, while `insertFx`
+ * runs per element. Held in a map so a server that resets between requests still emits
+ * the animation — see `resetFx`.
+ */
+export declare function registerKeyframes(name: string, body: string): void;
 /**
  * Everything inserted so far, for a server render to emit into `<head>`. Render
  * the result as `<style data-fx-sheet data-fx-tokens="…">`; the client adopts it.

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/lib/sheet.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAmC3C;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAgB/C;AAMD;;;GAGG;AACH,wBAAgB,SAAS,IAAI;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAK3D;AAED,uFAAuF;AACvF,wBAAgB,OAAO,IAAI,IAAI,CAK9B"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/lib/sheet.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoC3C;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAgB/C;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAelE;AAMD;;;GAGG;AACH,wBAAgB,SAAS,IAAI;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAO3D;AAED,uFAAuF;AACvF,wBAAgB,OAAO,IAAI,IAAI,CAQ9B"}

package/dist/lib/sheet.js

@@ -3,6 +3,7 @@ const SHEET_ATTRIBUTE = 'data-fx-sheet';
 const TOKENS_ATTRIBUTE = 'data-fx-tokens';
 const inserted = new Set();
 const collected = [];
+const keyframeRules = new Map();
 let sheet = null;
 /**
  * Find or create the sheet. A server-rendered sheet is adopted rather than
@@ -51,6 +52,28 @@ export function insertFx(result) {
     element.appendChild(document.createTextNode(wrap(result.rules)));
     element.setAttribute(TOKENS_ATTRIBUTE, [...inserted].join(','));
 }
+/**
+ * Register an `@keyframes` rule. Kept apart from the per-render rules because it has a
+ * different lifetime: `keyframes()` is called once at module scope, while `insertFx`
+ * runs per element. Held in a map so a server that resets between requests still emits
+ * the animation — see `resetFx`.
+ */
+export function registerKeyframes(name, body) {
+    if (keyframeRules.has(name))
+        return;
+    keyframeRules.set(name, `@keyframes ${name}{${body}}`);
+    if (typeof document === 'undefined') {
+        inserted.add(name);
+        return;
+    }
+    // Adopt first: the server sheet's token list may already name this animation.
+    const element = styleElement();
+    if (inserted.has(name))
+        return;
+    inserted.add(name);
+    element.appendChild(document.createTextNode(wrap(keyframeRules.get(name))));
+    element.setAttribute(TOKENS_ATTRIBUTE, [...inserted].join(','));
+}
 function wrap(rules) {
     return `@layer flx.fx{${rules}}`;
 }
@@ -59,8 +82,10 @@ function wrap(rules) {
  * the result as `<style data-fx-sheet data-fx-tokens="…">`; the client adopts it.
  */
 export function collectFx() {
+    const animations = [...keyframeRules.values()].map(wrap).join('');
+    const body = `${animations}${collected.join('')}`;
     return {
-        css: collected.length ? `${LAYER_ORDER}${collected.join('')}` : '',
+        css: body ? `${LAYER_ORDER}${body}` : '',
         tokens: [...inserted].join(','),
     };
 }
@@ -68,6 +93,10 @@ export function collectFx() {
 export function resetFx() {
     inserted.clear();
     collected.length = 0;
+    // Keyframes survive: they are registered once at module scope, so dropping them
+    // would leave every request after the first naming an animation nobody emits.
+    for (const name of keyframeRules.keys())
+        inserted.add(name);
     if (sheet && sheet.isConnected)
         sheet.remove();
     sheet = null;

package/dist/lib/slots.d.ts

@@ -0,0 +1,19 @@
+import type { FxProp } from './types.js';
+/**
+ * Reaching a compound component's parts.
+ *
+ *   `sp={{ header: { sticky: true, fx: { gap: 2 } } }}`   a part's full props
+ *   `fx={{ p: 4, sp: { header: { gap: 2 } } }}`           only its styles
+ *
+ * `fx.sp` keeps styling a whole component in one object; `sp` is the general
+ * channel, since a part takes props and styling is one of them.
+ */
+/** The styles `fx.sp` addresses to one part. */
+export declare function slotFx(fx: FxProp, slot: string): FxProp;
+/**
+ * What a part is spread with: its `sp` entry, with the `fx.sp` shorthand merged
+ * under its own `fx`. `sp.<part>.fx` wins — it names the part exactly. A
+ * component's own defaults merge in at the call site.
+ */
+export declare function slot(name: string, fx: FxProp, sp: object | undefined): Record<string, unknown>;
+//# sourceMappingURL=slots.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../src/lib/slots.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAW,MAAM,YAAY,CAAC;AAElD;;;;;;;;GAQG;AAEH,gDAAgD;AAChD,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAGvD;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAO9F"}

package/dist/lib/slots.js

@@ -0,0 +1,29 @@
+import { mergeFx } from './merge.js';
+/**
+ * Reaching a compound component's parts.
+ *
+ *   `sp={{ header: { sticky: true, fx: { gap: 2 } } }}`   a part's full props
+ *   `fx={{ p: 4, sp: { header: { gap: 2 } } }}`           only its styles
+ *
+ * `fx.sp` keeps styling a whole component in one object; `sp` is the general
+ * channel, since a part takes props and styling is one of them.
+ */
+/** The styles `fx.sp` addresses to one part. */
+export function slotFx(fx, slot) {
+    const slots = mergeFx(fx).sp;
+    return slots?.[slot];
+}
+/**
+ * What a part is spread with: its `sp` entry, with the `fx.sp` shorthand merged
+ * under its own `fx`. `sp.<part>.fx` wins — it names the part exactly. A
+ * component's own defaults merge in at the call site.
+ */
+export function slot(name, fx, sp) {
+    // A slots type is an interface of named optional parts, not a Record, so it is read
+    // positionally. The user-facing typing is on the component's own `sp` prop.
+    const own = sp?.[name];
+    const shorthand = slotFx(fx, name);
+    if (!shorthand)
+        return own ?? {};
+    return { ...own, fx: mergeFx(shorthand, own?.['fx']) };
+}

package/dist/lib/types.d.ts

@@ -21,7 +21,7 @@ export type RadiusValue = RadiusToken | number | Raw;
 export type ShadowValue = ShadowToken | Raw;
 export type BorderWidthValue = BorderWidthToken | number | Raw;
 /** The value type a property accepts, decided by the scale it belongs to. */
-type ValueFor<K> = K extends SpaceProp ? SpaceValue : K extends SizeProp ? SizeValue : K extends ColorProp ? ColorValue : K extends RadiusProp ? RadiusValue : K extends BorderWidthProp ? BorderWidthValue : K extends UnitlessProp ? number | Raw : K extends 'boxShadow' ? ShadowValue : K extends 'fontSize' ? FontSizeToken | number | Raw : K extends 'fontWeight' ? FontWeightToken | number | Raw : K extends 'lineHeight' ? LineHeightToken | number | Raw : K extends 'letterSpacing' ? LetterSpacingToken | number | Raw : K extends 'fontFamily' ? FontFamilyToken | Raw : K extends 'transitionDuration' | 'animationDuration' ? DurationToken | number | Raw : K extends 'transitionTimingFunction' | 'animationTimingFunction' ? EasingToken | Raw : K extends 'opacity' ? OpacityToken | number | Raw : K extends 'zIndex' ? ZIndexToken | number | Raw : string | number;
+type ValueFor<K> = K extends SpaceProp ? SpaceValue : K extends SizeProp ? SizeValue : K extends ColorProp ? ColorValue : K extends RadiusProp ? RadiusValue : K extends BorderWidthProp ? BorderWidthValue : K extends UnitlessProp ? number | Raw : K extends 'boxShadow' ? ShadowValue : K extends 'fontSize' ? FontSizeToken | number | Raw : K extends 'fontWeight' ? FontWeightToken | number | Raw : K extends 'lineHeight' ? LineHeightToken | number | Raw : K extends 'letterSpacing' ? LetterSpacingToken | number | Raw : K extends 'fontFamily' ? FontFamilyToken | Raw : K extends 'transitionDuration' | 'animationDuration' | 'transitionDelay' | 'animationDelay' ? DurationToken | number | Raw : K extends 'transitionTimingFunction' | 'animationTimingFunction' ? EasingToken | Raw : K extends 'opacity' ? OpacityToken | number | Raw : K extends 'zIndex' ? ZIndexToken | number | Raw : string | number;
 /**
  * Every writable CSS property, taken from `CSSStyleDeclaration` — the string-valued
  * members are exactly the properties, which drops its methods and `length`.
@@ -75,11 +75,23 @@ export type ContainerQuery = {
 } & {
     [K in `(${string}`]?: FxObject;
 };
+/**
+ * Styles for a compound component's parts, keyed by the slot names that component
+ * documents. It carries styles only — a part's other props go through the `sp` prop.
+ */
+export type FxSlots = {
+    [slot: string]: FxProp;
+};
 /** A style object: declarations plus nested selector blocks, arbitrarily deep. */
 export type FxObject = FxDeclarations & {
     [K in SelectorKey]?: FxObject;
 } & {
     _container?: ContainerQuery;
+    /**
+     * Styles addressed to a compound component's parts, so one `fx` can dress the
+     * whole thing. Stripped before resolution — it never reaches CSS.
+     */
+    sp?: FxSlots;
 };
 /**
  * What an `fx` prop accepts. The array form composes conditionally

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

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

package/dist/lib/utilities.d.ts

@@ -0,0 +1,98 @@
+import type { FxObject } from './types.js';
+/**
+ * Everyday `fx` objects, ready to import and merge.
+ *
+ * An `fx` value is a plain object, so a utility is just a named one — nothing is
+ * generated, nothing is resolved until it reaches an element, and anything merged
+ * after it wins:
+ *
+ *   fx={mergeFx(flexBetween, gapped(3), { p: 4 })}
+ *   fx={{ ...card, ...muted }}
+ *
+ * The line for including one: it's typed several times a week, or it carries a
+ * decision — a token, a browser trap, the `min-width: 0` that flex needs before
+ * text will truncate. `{ display: 'flex' }` is here because it's typed constantly;
+ * a name for every CSS property is not, since that's a second vocabulary for the
+ * same thing.
+ *
+ * Multi-declaration recipes live next door in `presets` (`truncate`, `lineClamp`,
+ * `visuallyHidden`, `stack`, `scrollY`, …).
+ */
+export declare const flex: FxObject;
+export declare const inlineFlex: FxObject;
+export declare const grid: FxObject;
+export declare const block: FxObject;
+export declare const inlineBlock: FxObject;
+export declare const hidden: FxObject;
+/** Out of sight but still laid out — unlike `hidden`, which collapses the box. */
+export declare const invisible: FxObject;
+export declare const flexRow: FxObject;
+export declare const flexColumn: FxObject;
+export declare const flexWrap: FxObject;
+export declare const flexCenter: FxObject;
+export declare const flexBetween: FxObject;
+export declare const flexEnd: FxObject;
+export declare const flexStart: FxObject;
+export declare const alignCenter: FxObject;
+/**
+ * Take the free space. `minWidth: 0` because a flex child defaults to `min-width:
+ * auto`, which refuses to shrink below its content — the reason a long string blows
+ * out a row instead of truncating.
+ */
+export declare const flexFill: FxObject;
+/** The same shrink fix on its own, for a child you don't want to grow. */
+export declare const minW0: FxObject;
+/** Hold your size while siblings take the space. */
+export declare const flexNone: FxObject;
+export declare const fullWidth: FxObject;
+export declare const fullHeight: FxObject;
+export declare const fullSize: FxObject;
+export declare const fillViewport: FxObject;
+export declare const relative: FxObject;
+export declare const absolute: FxObject;
+export declare const fixed: FxObject;
+/** Sticks to the top of its scroll container, above the content it passes. */
+export declare const stickyTop: FxObject;
+export declare const textCenter: FxObject;
+export declare const textStart: FxObject;
+export declare const textEnd: FxObject;
+export declare const nowrap: FxObject;
+export declare const medium: FxObject;
+export declare const semibold: FxObject;
+export declare const bold: FxObject;
+export declare const uppercase: FxObject;
+export declare const capitalize: FxObject;
+/** Secondary text, on the token rather than a hand-picked grey. */
+export declare const muted: FxObject;
+/** Break anywhere rather than let a URL or an ID push the layout wide. */
+export declare const breakWords: FxObject;
+/**
+ * Fixed-width digits, so numbers in a column line up and a live counter stops
+ * jittering as its digits change.
+ */
+export declare const tabularNums: FxObject;
+export declare const bordered: FxObject;
+export declare const borderTop: FxObject;
+export declare const borderBottom: FxObject;
+export declare const rounded: FxObject;
+export declare const pill: FxObject;
+export declare const circle: FxObject;
+/** A full-window scrim, at the layer overlays expect. */
+export declare const scrim: FxObject;
+export declare const pointer: FxObject;
+export declare const notAllowed: FxObject;
+/** Nothing here reacts — clicks pass through to whatever is behind. */
+export declare const inert: FxObject;
+/**
+ * The clickable-but-not-a-button recipe: pointer, no text selection on a
+ * double-click, and no grey flash on iOS.
+ */
+export declare const clickable: FxObject;
+/**
+ * The library's focus ring, for something you've made focusable yourself.
+ * `:focus-visible`, so a mouse click doesn't ring it — only keyboard focus does.
+ */
+export declare const focusRing: FxObject;
+/** Reads as unavailable and stops responding, without the `disabled` attribute. */
+export declare const disabled: FxObject;
+//# sourceMappingURL=utilities.d.ts.map

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

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

package/dist/lib/utilities.js

@@ -0,0 +1,114 @@
+/**
+ * Everyday `fx` objects, ready to import and merge.
+ *
+ * An `fx` value is a plain object, so a utility is just a named one — nothing is
+ * generated, nothing is resolved until it reaches an element, and anything merged
+ * after it wins:
+ *
+ *   fx={mergeFx(flexBetween, gapped(3), { p: 4 })}
+ *   fx={{ ...card, ...muted }}
+ *
+ * The line for including one: it's typed several times a week, or it carries a
+ * decision — a token, a browser trap, the `min-width: 0` that flex needs before
+ * text will truncate. `{ display: 'flex' }` is here because it's typed constantly;
+ * a name for every CSS property is not, since that's a second vocabulary for the
+ * same thing.
+ *
+ * Multi-declaration recipes live next door in `presets` (`truncate`, `lineClamp`,
+ * `visuallyHidden`, `stack`, `scrollY`, …).
+ */
+/* Display */
+export const flex = { display: 'flex' };
+export const inlineFlex = { display: 'inline-flex' };
+export const grid = { display: 'grid' };
+export const block = { display: 'block' };
+export const inlineBlock = { display: 'inline-block' };
+export const hidden = { display: 'none' };
+/** Out of sight but still laid out — unlike `hidden`, which collapses the box. */
+export const invisible = { visibility: 'hidden' };
+/* Flex arrangement */
+export const flexRow = { display: 'flex', flexDirection: 'row' };
+export const flexColumn = { display: 'flex', flexDirection: 'column' };
+export const flexWrap = { display: 'flex', flexWrap: 'wrap' };
+export const flexCenter = { display: 'flex', alignItems: 'center', justifyContent: 'center' };
+export const flexBetween = { display: 'flex', alignItems: 'center', justifyContent: 'space-between' };
+export const flexEnd = { display: 'flex', alignItems: 'center', justifyContent: 'flex-end' };
+export const flexStart = { display: 'flex', alignItems: 'flex-start' };
+export const alignCenter = { alignItems: 'center' };
+/**
+ * Take the free space. `minWidth: 0` because a flex child defaults to `min-width:
+ * auto`, which refuses to shrink below its content — the reason a long string blows
+ * out a row instead of truncating.
+ */
+export const flexFill = { flexGrow: 1, flexBasis: 0, minWidth: 0 };
+/** The same shrink fix on its own, for a child you don't want to grow. */
+export const minW0 = { minWidth: 0 };
+/** Hold your size while siblings take the space. */
+export const flexNone = { flexShrink: 0 };
+/* Size */
+export const fullWidth = { width: '100%' };
+export const fullHeight = { height: '100%' };
+export const fullSize = { width: '100%', height: '100%' };
+export const fillViewport = { minHeight: '100dvh' };
+/* Position */
+export const relative = { position: 'relative' };
+export const absolute = { position: 'absolute' };
+export const fixed = { position: 'fixed' };
+/** Sticks to the top of its scroll container, above the content it passes. */
+export const stickyTop = { position: 'sticky', top: 0, zIndex: 'sticky' };
+/* Text */
+export const textCenter = { textAlign: 'center' };
+export const textStart = { textAlign: 'start' };
+export const textEnd = { textAlign: 'end' };
+export const nowrap = { whiteSpace: 'nowrap' };
+export const medium = { fontWeight: 'medium' };
+export const semibold = { fontWeight: 'semibold' };
+export const bold = { fontWeight: 'bold' };
+export const uppercase = { textTransform: 'uppercase' };
+export const capitalize = { textTransform: 'capitalize' };
+/** Secondary text, on the token rather than a hand-picked grey. */
+export const muted = { color: 'fgMuted' };
+/** Break anywhere rather than let a URL or an ID push the layout wide. */
+export const breakWords = { overflowWrap: 'anywhere', wordBreak: 'break-word' };
+/**
+ * Fixed-width digits, so numbers in a column line up and a live counter stops
+ * jittering as its digits change.
+ */
+export const tabularNums = { fontVariantNumeric: 'tabular-nums' };
+/* Surface */
+export const bordered = { borderWidth: 'thin', borderStyle: 'solid', borderColor: 'border' };
+export const borderTop = { borderTopWidth: 'thin', borderTopStyle: 'solid', borderTopColor: 'border' };
+export const borderBottom = { borderBottomWidth: 'thin', borderBottomStyle: 'solid', borderBottomColor: 'border' };
+export const rounded = { borderRadius: 'md' };
+export const pill = { borderRadius: 'full' };
+export const circle = { borderRadius: 'full', aspectRatio: '1' };
+/** A full-window scrim, at the layer overlays expect. */
+export const scrim = { position: 'fixed', inset: 0, backgroundColor: 'overlay', zIndex: 'overlay' };
+/* Interaction */
+export const pointer = { cursor: 'pointer' };
+export const notAllowed = { cursor: 'not-allowed' };
+/** Nothing here reacts — clicks pass through to whatever is behind. */
+export const inert = { pointerEvents: 'none' };
+/**
+ * The clickable-but-not-a-button recipe: pointer, no text selection on a
+ * double-click, and no grey flash on iOS.
+ */
+export const clickable = {
+    cursor: 'pointer',
+    userSelect: 'none',
+    webkitTapHighlightColor: 'transparent',
+};
+/**
+ * The library's focus ring, for something you've made focusable yourself.
+ * `:focus-visible`, so a mouse click doesn't ring it — only keyboard focus does.
+ */
+export const focusRing = {
+    _focusVisible: {
+        outlineWidth: 'thick',
+        outlineStyle: 'solid',
+        outlineColor: 'focusRing',
+        outlineOffset: '2px',
+    },
+};
+/** Reads as unavailable and stops responding, without the `disabled` attribute. */
+export const disabled = { opacity: 0.5, pointerEvents: 'none', cursor: 'not-allowed' };

package/dist/lib/variants.d.ts

@@ -0,0 +1,41 @@
+import type { FxObject, FxProp } from './types.js';
+/**
+ * Map a component's props to `fx`.
+ *
+ * A component with a `tone` and a `size` ends up writing the same lookup by hand every
+ * time, usually as a ternary chain that is hard to extend and easy to get out of sync
+ * with the prop type. This is that lookup, once:
+ *
+ *   const panel = variants({
+ *     base: { p: 3, radius: 'md' },
+ *     variants: {
+ *       tone: { neutral: { bg: 'surface' }, danger: { bg: 'dangerSubtle' } },
+ *       size: { sm: { p: 2 }, lg: { p: 4 } },
+ *     },
+ *     defaults: { tone: 'neutral' },
+ *   });
+ *
+ *   panel({ tone: 'danger' });   // FxObject
+ *
+ * Later groups win over earlier ones, and `base` loses to all of them — declaration
+ * order in the config is the precedence. The result is an ordinary `FxObject`, so a
+ * caller's own `fx` still merges over it at the element.
+ */
+/** A group of mutually exclusive options, e.g. `{ sm: …, md: … }`. */
+export type VariantGroup = Record<string, FxProp>;
+export interface VariantConfig<G extends Record<string, VariantGroup>> {
+    /** Applied first, under every selected variant. */
+    base?: FxProp;
+    /** The groups themselves, in precedence order. */
+    variants: G;
+    /** Used for any group the caller leaves out. */
+    defaults?: {
+        [K in keyof G]?: keyof G[K] & string;
+    };
+}
+/** What a variant function accepts: one option per group, or nothing. */
+export type VariantSelection<G extends Record<string, VariantGroup>> = {
+    [K in keyof G]?: (keyof G[K] & string) | false | null | undefined;
+};
+export declare function variants<G extends Record<string, VariantGroup>>(config: VariantConfig<G>): (selection?: VariantSelection<G>) => FxObject;
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/lib/variants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,sEAAsE;AACtE,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC;IACnE,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,EAAE,CAAC,CAAC;IACZ,gDAAgD;IAChD,QAAQ,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM;KAAE,CAAC;CACrD;AAED,yEAAyE;AACzE,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,IAAI;KACpE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS;CAClE,CAAC;AAEF,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,EAC7D,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,GACvB,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,QAAQ,CAgB/C"}

package/dist/lib/variants.js

@@ -0,0 +1,16 @@
+import { mergeFx } from './merge.js';
+export function variants(config) {
+    const groups = Object.keys(config.variants);
+    return (selection) => {
+        const parts = [config.base];
+        for (const group of groups) {
+            const chosen = selection?.[group] ?? config.defaults?.[group];
+            // `false` selects nothing on purpose — it is how a caller turns a defaulted
+            // group off without knowing which option the default was.
+            if (chosen == null || chosen === false)
+                continue;
+            parts.push(config.variants[group][chosen]);
+        }
+        return mergeFx(...parts);
+    };
+}