@craft-ts/style 0.7.0-beta.15

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@craft-ts/style",
+  "version": "0.7.0-beta.15",
+  "description": "Typed design tokens, CSS custom properties and build-time style emission for CraftTS",
+  "author": "Romain Geffrault",
+  "license": "MIT",
+  "homepage": "https://craft-ts.github.io/craft/",
+  "bugs": {
+    "url": "https://github.com/craft-ts/craft-ts/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/craft-ts/craft-ts.git"
+  },
+  "peerDependencies": {
+    "@craft-ts/core": "^0.7.0-beta.0",
+    "tslib": "^2.3.0"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./vite": {
+      "types": "./src/plugin/vite.d.ts",
+      "default": "./src/plugin/vite.js"
+    }
+  },
+  "module": "./src/index.js"
+}

package/src/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * `@craft-ts/style` — the whole style vocabulary.
+ *
+ * Tokens, kinds, typed custom properties, the generated property table, axes,
+ * sheets and context obligations. The core carries two opaque channels for it
+ * and interprets neither; every piece of CSS meaning lives here.
+ *
+ * The build-time emitter is a separate entry point (`@craft-ts/style/vite`) so
+ * that importing the vocabulary never drags Node APIs into the browser bundle.
+ */
+export * from './lib/tokens/index.ts';
+export * from './lib/kinds.ts';
+export * from './lib/css-vars.ts';
+export * from './lib/props/index.ts';
+export * from './lib/axes/index.ts';
+export * from './lib/obligations.ts';
+export * from './lib/styles.ts';
+//# sourceMappingURL=index.d.ts.map

package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/style/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC"}

package/src/index.js

@@ -0,0 +1,18 @@
+/**
+ * `@craft-ts/style` — the whole style vocabulary.
+ *
+ * Tokens, kinds, typed custom properties, the generated property table, axes,
+ * sheets and context obligations. The core carries two opaque channels for it
+ * and interprets neither; every piece of CSS meaning lives here.
+ *
+ * The build-time emitter is a separate entry point (`@craft-ts/style/vite`) so
+ * that importing the vocabulary never drags Node APIs into the browser bundle.
+ */
+export * from "./lib/tokens/index.js";
+export * from "./lib/kinds.js";
+export * from "./lib/css-vars.js";
+export * from "./lib/props/index.js";
+export * from "./lib/axes/index.js";
+export * from "./lib/obligations.js";
+export * from "./lib/styles.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/style/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC","sourcesContent":["/**\n * `@craft-ts/style` — the whole style vocabulary.\n *\n * Tokens, kinds, typed custom properties, the generated property table, axes,\n * sheets and context obligations. The core carries two opaque channels for it\n * and interprets neither; every piece of CSS meaning lives here.\n *\n * The build-time emitter is a separate entry point (`@craft-ts/style/vite`) so\n * that importing the vocabulary never drags Node APIs into the browser bundle.\n */\nexport * from './lib/tokens/index.ts';\nexport * from './lib/kinds.ts';\nexport * from './lib/css-vars.ts';\nexport * from './lib/props/index.ts';\nexport * from './lib/axes/index.ts';\nexport * from './lib/obligations.ts';\nexport * from './lib/styles.ts';\n"]}

package/src/lib/axes/define.d.ts

@@ -0,0 +1,115 @@
+/**
+ * The axes an application defines for itself.
+ *
+ * Four constructors, and each one closes its set at construction: what comes
+ * back is a record of points, so a name that does not exist is a missing
+ * property rather than a condition the browser silently drops.
+ */
+import type { AnyKind, SyntaxOf } from '../kinds.ts';
+import type { LengthValue } from '../tokens/units.ts';
+import { type AxisPoint, type AnyAxisPoint } from './types.ts';
+/**
+ * A point that sits on an ordered axis, and on which side of it.
+ *
+ * A plain breakpoint is a lower bound: `bp.md` means "from md up". `above` and
+ * `below` make the bound explicit so that an empty intersection — a rule no
+ * viewport can ever match — is detectable instead of shipped.
+ */
+export interface RangePoint<Axis extends string, Point extends string, Bound extends 'above' | 'below' = 'above'> extends AxisPoint<Axis, Point> {
+    readonly order: number;
+    readonly bound: Bound;
+}
+/**
+ * Breakpoints take **built conditions**, never strings:
+ * `at.minInlineSize(unit.rem(40))` and not `'(min-width: 40rem)'`.
+ *
+ * They live under `at` because `minInlineSize` is also a CSS property in the
+ * generated table. Same collision as `px` the unit versus `px` the padding
+ * helper, settled the same way.
+ */
+export declare const at: {
+    readonly minInlineSize: (value: LengthValue) => {
+        minInlineSize: LengthValue;
+    };
+};
+export type BreakpointSpec = {
+    readonly minInlineSize: LengthValue;
+};
+export type Breakpoints<Points extends Readonly<Record<string, BreakpointSpec>>> = {
+    readonly [Key in keyof Points & string]: RangePoint<'viewport', Key>;
+};
+/**
+ * Breakpoints are indexed by declaration order.
+ *
+ * The order is what lets the matrix reduce by interval — two children cutting
+ * at `md` and `lg` produce three viewport cells, not four — and what lets a
+ * dead rule be recognised. Declare them ascending; nothing else can infer it.
+ */
+export declare function defineBreakpoints<const Points extends Readonly<Record<string, BreakpointSpec>>>(points: Points): Breakpoints<Points>;
+/** From this breakpoint up. The same thing a bare breakpoint already means. */
+export declare const above: <Axis extends string, Point extends string>(point: RangePoint<Axis, Point, "above" | "below">) => RangePoint<Axis, Point, "above">;
+/** Strictly below this breakpoint. */
+export declare const below: <Axis extends string, Point extends string>(point: RangePoint<Axis, Point, "above" | "below">) => RangePoint<Axis, Point, "below">;
+declare const WRITES: unique symbol;
+/**
+ * An axis that may only write custom properties of one kind.
+ *
+ * This is the one reduction the matrix can make without analysing anything: an
+ * axis constrained to `<color>` cannot move a box, so it crosses additively
+ * with the axes that do. The constraint is checked where it is cheap — at the
+ * call site of `when` — rather than by reading the emitted CSS afterwards.
+ */
+export interface ConstrainedAxisPoint<Axis extends string, Point extends string, Syntax extends string> extends AxisPoint<Axis, Point> {
+    readonly [WRITES]?: Syntax;
+}
+export type WritesSyntaxOf<Point> = typeof WRITES extends keyof Point ? Point extends {
+    readonly [WRITES]?: infer Syntax extends string;
+} ? Syntax : never : never;
+/** `defineAxis('theme', [...], { writes: onlyVarsOfKind(kind.color) })`. */
+export declare const onlyVarsOfKind: <Kind extends AnyKind>(kind: Kind) => {
+    readonly writes: readonly [SyntaxOf<Kind>];
+};
+export interface AxisOptions<Syntax extends string = never> {
+    readonly writes?: readonly [Syntax];
+}
+export type DefinedAxis<Name extends string, Values extends readonly string[], Syntax extends string> = {
+    readonly [Value in Values[number]]: [Syntax] extends [never] ? AxisPoint<Name, Value> : ConstrainedAxisPoint<Name, Value, Syntax>;
+};
+/**
+ * A generic axis driven by an attribute, with an optional write constraint.
+ *
+ * `defineStateAxis` is this without the constraint; it stays a separate name
+ * because a state axis is the common case and reads better without options.
+ */
+export declare function defineAxis<const Name extends string, const Values extends readonly string[], const Syntax extends string = never>(name: Name, values: Values, options?: AxisOptions<Syntax>): DefinedAxis<Name, Values, Syntax>;
+/**
+ * A state axis emits `data-{prefix}='{state}'` — something a driver can set and
+ * a component can render. An axis whose points nothing can reach has no place
+ * in the matrix.
+ *
+ * The attribute-value form, rather than one attribute per state, is what makes
+ * the states mutually exclusive by construction: an element cannot be two of
+ * them at once, so the matrix does not have to be told.
+ */
+export declare function defineStateAxis<const Prefix extends string, const States extends readonly string[]>(prefix: Prefix, states: States): DefinedAxis<Prefix, States, never>;
+export type ContainerBreakpoints<Name extends string, Points extends Readonly<Record<string, BreakpointSpec>>> = {
+    readonly [Key in keyof Points & string]: RangePoint<`container.${Name}`, Key>;
+};
+export interface ContainerSpec {
+    readonly name: string;
+    readonly type: 'inline-size' | 'size' | 'scroll-state';
+}
+/**
+ * A container axis is closed at the element that declares the container.
+ *
+ * It answers "how wide is my box", which nobody above the container can change,
+ * so the axis must not propagate past it — otherwise every ancestor inherits
+ * scenarios it has no way to affect. The pruning lives in the matrix; this is
+ * where the boundary is named.
+ */
+export declare function defineContainer<const Name extends string, const Points extends Readonly<Record<string, BreakpointSpec>>>(container: {
+    readonly name: Name;
+    readonly type: ContainerSpec['type'];
+}, points: Points): ContainerBreakpoints<Name, Points>;
+export type { AnyAxisPoint };
+//# sourceMappingURL=define.d.ts.map

package/src/lib/axes/define.d.ts.map

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

package/src/lib/axes/define.js

@@ -0,0 +1,81 @@
+import { axisPoint } from "./types.js";
+/**
+ * Breakpoints take **built conditions**, never strings:
+ * `at.minInlineSize(unit.rem(40))` and not `'(min-width: 40rem)'`.
+ *
+ * They live under `at` because `minInlineSize` is also a CSS property in the
+ * generated table. Same collision as `px` the unit versus `px` the padding
+ * helper, settled the same way.
+ */
+export const at = {
+    minInlineSize: (value) => ({ minInlineSize: value }),
+};
+/**
+ * Breakpoints are indexed by declaration order.
+ *
+ * The order is what lets the matrix reduce by interval — two children cutting
+ * at `md` and `lg` produce three viewport cells, not four — and what lets a
+ * dead rule be recognised. Declare them ascending; nothing else can infer it.
+ */
+export function defineBreakpoints(points) {
+    return Object.fromEntries(Object.entries(points).map(([name, { minInlineSize }], index) => [
+        name,
+        axisPoint('viewport', name, `@media (min-width: ${minInlineSize.css})`, {
+            kind: 'resize',
+            minInlineSize: minInlineSize.css,
+        }, { order: index + 1, bound: 'above' }),
+    ]));
+}
+/** From this breakpoint up. The same thing a bare breakpoint already means. */
+export const above = (point) => ({ ...point, bound: 'above' });
+/** Strictly below this breakpoint. */
+export const below = (point) => ({
+    ...point,
+    bound: 'below',
+    open: point.open.replace(/^@media \(min-width: (.*)\)$/, '@media not (min-width: $1)'),
+});
+/** `defineAxis('theme', [...], { writes: onlyVarsOfKind(kind.color) })`. */
+export const onlyVarsOfKind = (kind) => ({ writes: [kind.syntax] });
+/**
+ * A generic axis driven by an attribute, with an optional write constraint.
+ *
+ * `defineStateAxis` is this without the constraint; it stays a separate name
+ * because a state axis is the common case and reads better without options.
+ */
+export function defineAxis(name, values, options = {}) {
+    return Object.fromEntries(values.map((value) => [
+        value,
+        axisPoint(name, value, `&[data-${name}='${value}']`, { kind: 'setAttribute', name: `data-${name}`, value }, options.writes ? { writes: options.writes } : {}),
+    ]));
+}
+/**
+ * A state axis emits `data-{prefix}='{state}'` — something a driver can set and
+ * a component can render. An axis whose points nothing can reach has no place
+ * in the matrix.
+ *
+ * The attribute-value form, rather than one attribute per state, is what makes
+ * the states mutually exclusive by construction: an element cannot be two of
+ * them at once, so the matrix does not have to be told.
+ */
+export function defineStateAxis(prefix, states) {
+    return defineAxis(prefix, states);
+}
+/**
+ * A container axis is closed at the element that declares the container.
+ *
+ * It answers "how wide is my box", which nobody above the container can change,
+ * so the axis must not propagate past it — otherwise every ancestor inherits
+ * scenarios it has no way to affect. The pruning lives in the matrix; this is
+ * where the boundary is named.
+ */
+export function defineContainer(container, points) {
+    return Object.fromEntries(Object.entries(points).map(([name, { minInlineSize }], index) => [
+        name,
+        axisPoint(`container.${container.name}`, name, `@container ${container.name} (min-width: ${minInlineSize.css})`, {
+            kind: 'resizeContainer',
+            container: container.name,
+            minInlineSize: minInlineSize.css,
+        }, { order: index + 1, bound: 'above', container: container.name }),
+    ]));
+}
+//# sourceMappingURL=define.js.map

package/src/lib/axes/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../libs/style/src/lib/axes/define.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,EAAqC,MAAM,YAAY,CAAC;AAkB1E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG;IAChB,aAAa,EAAE,CAAC,KAAkB,EAAE,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;CACzD,CAAC;AAUX;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB,CAE/B,MAAc;IACd,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;QAC/D,IAAI;QACJ,SAAS,CACP,UAAU,EACV,IAAI,EACJ,sBAAsB,aAAa,CAAC,GAAG,GAAG,EAC1C;YACE,IAAI,EAAE,QAAQ;YACd,aAAa,EAAE,aAAa,CAAC,GAAG;SACjC,EACD,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CACrC;KACF,CAAC,CACoB,CAAC;AAC3B,CAAC;AAED,+EAA+E;AAC/E,MAAM,CAAC,MAAM,KAAK,GAAG,CACnB,KAAiD,EACf,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;AAEtE,sCAAsC;AACtC,MAAM,CAAC,MAAM,KAAK,GAAG,CACnB,KAAiD,EACf,EAAE,CAAC,CAAC;IACtC,GAAG,KAAK;IACR,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CACtB,8BAA8B,EAC9B,4BAA4B,CAC7B;CACF,CAAC,CAAC;AA4BH,4EAA4E;AAC5E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,IAAU,EACsC,EAAE,CAClD,CAAC,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAU,CAAC;AAgBvC;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAKxB,IAAU,EACV,MAAc,EACd,UAA+B,EAAE;IAEjC,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;QACpB,KAAK;QACL,SAAS,CACP,IAAI,EACJ,KAAK,EACL,UAAU,IAAI,KAAK,KAAK,IAAI,EAC5B,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,IAAI,EAAE,EAAE,KAAK,EAAE,EACrD,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CACjD;KACF,CAAC,CACkC,CAAC;AACzC,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAG7B,MAAc,EAAE,MAAc;IAC9B,OAAO,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACpC,CAAC;AAgBD;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAI7B,SAAwE,EACxE,MAAc;IAEd,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;QAC/D,IAAI;QACJ,SAAS,CACP,aAAa,SAAS,CAAC,IAAI,EAAE,EAC7B,IAAI,EACJ,cAAc,SAAS,CAAC,IAAI,gBAAgB,aAAa,CAAC,GAAG,GAAG,EAChE;YACE,IAAI,EAAE,iBAAiB;YACvB,SAAS,EAAE,SAAS,CAAC,IAAI;YACzB,aAAa,EAAE,aAAa,CAAC,GAAG;SACjC,EACD,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,IAAI,EAAE,CAChE;KACF,CAAC,CACmC,CAAC;AAC1C,CAAC","sourcesContent":["/**\n * The axes an application defines for itself.\n *\n * Four constructors, and each one closes its set at construction: what comes\n * back is a record of points, so a name that does not exist is a missing\n * property rather than a condition the browser silently drops.\n */\nimport type { AnyKind, SyntaxOf } from '../kinds.ts';\nimport type { LengthValue } from '../tokens/units.ts';\nimport { axisPoint, type AxisPoint, type AnyAxisPoint } from './types.ts';\n\n/**\n * A point that sits on an ordered axis, and on which side of it.\n *\n * A plain breakpoint is a lower bound: `bp.md` means \"from md up\". `above` and\n * `below` make the bound explicit so that an empty intersection — a rule no\n * viewport can ever match — is detectable instead of shipped.\n */\nexport interface RangePoint<\n  Axis extends string,\n  Point extends string,\n  Bound extends 'above' | 'below' = 'above',\n> extends AxisPoint<Axis, Point> {\n  readonly order: number;\n  readonly bound: Bound;\n}\n\n/**\n * Breakpoints take **built conditions**, never strings:\n * `at.minInlineSize(unit.rem(40))` and not `'(min-width: 40rem)'`.\n *\n * They live under `at` because `minInlineSize` is also a CSS property in the\n * generated table. Same collision as `px` the unit versus `px` the padding\n * helper, settled the same way.\n */\nexport const at = {\n  minInlineSize: (value: LengthValue) => ({ minInlineSize: value }),\n} as const;\n\nexport type BreakpointSpec = { readonly minInlineSize: LengthValue };\n\nexport type Breakpoints<\n  Points extends Readonly<Record<string, BreakpointSpec>>,\n> = {\n  readonly [Key in keyof Points & string]: RangePoint<'viewport', Key>;\n};\n\n/**\n * Breakpoints are indexed by declaration order.\n *\n * The order is what lets the matrix reduce by interval — two children cutting\n * at `md` and `lg` produce three viewport cells, not four — and what lets a\n * dead rule be recognised. Declare them ascending; nothing else can infer it.\n */\nexport function defineBreakpoints<\n  const Points extends Readonly<Record<string, BreakpointSpec>>,\n>(points: Points): Breakpoints<Points> {\n  return Object.fromEntries(\n    Object.entries(points).map(([name, { minInlineSize }], index) => [\n      name,\n      axisPoint(\n        'viewport',\n        name,\n        `@media (min-width: ${minInlineSize.css})`,\n        {\n          kind: 'resize',\n          minInlineSize: minInlineSize.css,\n        },\n        { order: index + 1, bound: 'above' },\n      ),\n    ]),\n  ) as Breakpoints<Points>;\n}\n\n/** From this breakpoint up. The same thing a bare breakpoint already means. */\nexport const above = <Axis extends string, Point extends string>(\n  point: RangePoint<Axis, Point, 'above' | 'below'>,\n): RangePoint<Axis, Point, 'above'> => ({ ...point, bound: 'above' });\n\n/** Strictly below this breakpoint. */\nexport const below = <Axis extends string, Point extends string>(\n  point: RangePoint<Axis, Point, 'above' | 'below'>,\n): RangePoint<Axis, Point, 'below'> => ({\n  ...point,\n  bound: 'below',\n  open: point.open.replace(\n    /^@media \\(min-width: (.*)\\)$/,\n    '@media not (min-width: $1)',\n  ),\n});\n\n// ─── constrained axes ───────────────────────────────────────────────────────\n\ndeclare const WRITES: unique symbol;\n\n/**\n * An axis that may only write custom properties of one kind.\n *\n * This is the one reduction the matrix can make without analysing anything: an\n * axis constrained to `<color>` cannot move a box, so it crosses additively\n * with the axes that do. The constraint is checked where it is cheap — at the\n * call site of `when` — rather than by reading the emitted CSS afterwards.\n */\nexport interface ConstrainedAxisPoint<\n  Axis extends string,\n  Point extends string,\n  Syntax extends string,\n> extends AxisPoint<Axis, Point> {\n  readonly [WRITES]?: Syntax;\n}\n\nexport type WritesSyntaxOf<Point> = typeof WRITES extends keyof Point\n  ? Point extends { readonly [WRITES]?: infer Syntax extends string }\n    ? Syntax\n    : never\n  : never;\n\n/** `defineAxis('theme', [...], { writes: onlyVarsOfKind(kind.color) })`. */\nexport const onlyVarsOfKind = <Kind extends AnyKind>(\n  kind: Kind,\n): { readonly writes: readonly [SyntaxOf<Kind>] } =>\n  ({ writes: [kind.syntax] }) as never;\n\nexport interface AxisOptions<Syntax extends string = never> {\n  readonly writes?: readonly [Syntax];\n}\n\nexport type DefinedAxis<\n  Name extends string,\n  Values extends readonly string[],\n  Syntax extends string,\n> = {\n  readonly [Value in Values[number]]: [Syntax] extends [never]\n    ? AxisPoint<Name, Value>\n    : ConstrainedAxisPoint<Name, Value, Syntax>;\n};\n\n/**\n * A generic axis driven by an attribute, with an optional write constraint.\n *\n * `defineStateAxis` is this without the constraint; it stays a separate name\n * because a state axis is the common case and reads better without options.\n */\nexport function defineAxis<\n  const Name extends string,\n  const Values extends readonly string[],\n  const Syntax extends string = never,\n>(\n  name: Name,\n  values: Values,\n  options: AxisOptions<Syntax> = {},\n): DefinedAxis<Name, Values, Syntax> {\n  return Object.fromEntries(\n    values.map((value) => [\n      value,\n      axisPoint(\n        name,\n        value,\n        `&[data-${name}='${value}']`,\n        { kind: 'setAttribute', name: `data-${name}`, value },\n        options.writes ? { writes: options.writes } : {},\n      ),\n    ]),\n  ) as DefinedAxis<Name, Values, Syntax>;\n}\n\n/**\n * A state axis emits `data-{prefix}='{state}'` — something a driver can set and\n * a component can render. An axis whose points nothing can reach has no place\n * in the matrix.\n *\n * The attribute-value form, rather than one attribute per state, is what makes\n * the states mutually exclusive by construction: an element cannot be two of\n * them at once, so the matrix does not have to be told.\n */\nexport function defineStateAxis<\n  const Prefix extends string,\n  const States extends readonly string[],\n>(prefix: Prefix, states: States): DefinedAxis<Prefix, States, never> {\n  return defineAxis(prefix, states);\n}\n\n// ─── container axes ─────────────────────────────────────────────────────────\n\nexport type ContainerBreakpoints<\n  Name extends string,\n  Points extends Readonly<Record<string, BreakpointSpec>>,\n> = {\n  readonly [Key in keyof Points & string]: RangePoint<`container.${Name}`, Key>;\n};\n\nexport interface ContainerSpec {\n  readonly name: string;\n  readonly type: 'inline-size' | 'size' | 'scroll-state';\n}\n\n/**\n * A container axis is closed at the element that declares the container.\n *\n * It answers \"how wide is my box\", which nobody above the container can change,\n * so the axis must not propagate past it — otherwise every ancestor inherits\n * scenarios it has no way to affect. The pruning lives in the matrix; this is\n * where the boundary is named.\n */\nexport function defineContainer<\n  const Name extends string,\n  const Points extends Readonly<Record<string, BreakpointSpec>>,\n>(\n  container: { readonly name: Name; readonly type: ContainerSpec['type'] },\n  points: Points,\n): ContainerBreakpoints<Name, Points> {\n  return Object.fromEntries(\n    Object.entries(points).map(([name, { minInlineSize }], index) => [\n      name,\n      axisPoint(\n        `container.${container.name}`,\n        name,\n        `@container ${container.name} (min-width: ${minInlineSize.css})`,\n        {\n          kind: 'resizeContainer',\n          container: container.name,\n          minInlineSize: minInlineSize.css,\n        },\n        { order: index + 1, bound: 'above', container: container.name },\n      ),\n    ]),\n  ) as ContainerBreakpoints<Name, Points>;\n}\n\nexport type { AnyAxisPoint };\n"]}

package/src/lib/axes/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types.ts';
+export * from './standard.ts';
+export * from './define.ts';
+//# sourceMappingURL=index.d.ts.map

package/src/lib/axes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/style/src/lib/axes/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/src/lib/axes/index.js

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./standard.js";
+export * from "./define.js";
+//# sourceMappingURL=index.js.map

package/src/lib/axes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/style/src/lib/axes/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC","sourcesContent":["export * from './types.ts';\nexport * from './standard.ts';\nexport * from './define.ts';\n"]}

package/src/lib/axes/standard.d.ts

@@ -0,0 +1,85 @@
+/**
+ * The axes the platform defines, shipped closed.
+ *
+ * Property access only — `scrollState.stuck.blockEnd`, never
+ * `scrollState.stuck('block-end')`. A typo is
+ * `Property 'blockEndd' does not exist`, and not a container query the browser
+ * parses, ignores, and never mentions again.
+ *
+ * `descendant.*` is the **only** door to `:has()`. Free-form `:has()` reaches
+ * across a component boundary, so a component's visual states would depend on
+ * markup it does not own — which is exactly the thing the matrix cannot model.
+ * The combinators that stay inside a component (`+`, `~`, `:nth-child`) are not
+ * restricted; `no-free-has` enforces the rest.
+ */
+import { type AxisPoint } from './types.ts';
+/**
+ * The user's preferred colour scheme.
+ *
+ * Named `scheme` and not `colorScheme`, which the generated table already uses
+ * for the `color-scheme` **property** — a different thing: the property tells
+ * the UA which schemes the page supports, the axis asks which one the user
+ * wants. Fourth collision settled the same way as `px`, `color` and
+ * `minInlineSize`; here the shorter distinct name reads better than a namespace.
+ *
+ * `base` is implicit on every axis: it is the absence of a condition. There is
+ * therefore no `scheme.light` — writing light styles unconditionally and
+ * overriding them in dark is the one spelling.
+ */
+export declare const scheme: {
+    readonly dark: AxisPoint<"scheme", "dark">;
+};
+export declare const motion: {
+    readonly reduced: AxisPoint<"motion", "reduced">;
+};
+export declare const forcedColors: {
+    readonly active: AxisPoint<"forcedColors", "active">;
+};
+export declare const contrast: {
+    readonly more: AxisPoint<"contrast", "more">;
+};
+/**
+ * The three groups are separate axes, not one.
+ *
+ * An element can be stuck *and* snapped at the same time, so folding them into
+ * a single axis would make the matrix claim combinations are impossible when
+ * they are not. Within one group the points are mutually exclusive, which is
+ * what the reduction in wave 5 would rely on.
+ */
+export declare const scrollState: {
+    readonly stuck: {
+        readonly none: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly blockStart: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly blockEnd: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly inlineStart: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly inlineEnd: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+    };
+    readonly snapped: {
+        readonly none: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly block: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly inline: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly both: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+    };
+    readonly scrollable: {
+        readonly none: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly blockStart: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly blockEnd: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly inlineStart: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+        readonly inlineEnd: AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string>;
+    };
+};
+/**
+ * The only entry point to `:has()`.
+ *
+ * Each entry is its own axis with a single point, because "a descendant is
+ * invalid" and "a descendant has focus" are independent — one axis with three
+ * points would say they exclude each other.
+ */
+export declare const descendant: {
+    readonly userInvalid: AxisPoint<`descendant.${string}`, "present">;
+    readonly focusVisible: AxisPoint<`descendant.${string}`, "present">;
+    readonly checked: AxisPoint<`descendant.${string}`, "present">;
+};
+/** Every standard point, for the specs that assert each one has a driver. */
+export declare const STANDARD_AXES: readonly (AxisPoint<"scheme", "dark"> | AxisPoint<"motion", "reduced"> | AxisPoint<"forcedColors", "active"> | AxisPoint<"contrast", "more"> | AxisPoint<"scrollState.stuck" | "scrollState.snapped" | "scrollState.scrollable", string> | AxisPoint<`descendant.${string}`, "present">)[];
+//# sourceMappingURL=standard.d.ts.map

package/src/lib/axes/standard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../../../../libs/style/src/lib/axes/standard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAa,KAAK,SAAS,EAAe,MAAM,YAAY,CAAC;AAcpE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM;mBACgD,SAAS,CACxE,QAAQ,EACR,MAAM,CACP;CACO,CAAC;AAEX,eAAO,MAAM,MAAM;sBAMZ,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEX,eAAO,MAAM,YAAY;qBAMlB,SAAS,CAAC,cAAc,EAAE,QAAQ,CAAC;CAChC,CAAC;AAEX,eAAO,MAAM,QAAQ;mBAC4C,SAAS,CACtE,UAAU,EACV,MAAM,CACP;CACO,CAAC;AAoBX;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;CAyCd,CAAC;AAcX;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;;;;CAQb,CAAC;AAEX,6EAA6E;AAC7E,eAAO,MAAM,aAAa,4RAShB,CAAC"}

package/src/lib/axes/standard.js

@@ -0,0 +1,109 @@
+/**
+ * The axes the platform defines, shipped closed.
+ *
+ * Property access only — `scrollState.stuck.blockEnd`, never
+ * `scrollState.stuck('block-end')`. A typo is
+ * `Property 'blockEndd' does not exist`, and not a container query the browser
+ * parses, ignores, and never mentions again.
+ *
+ * `descendant.*` is the **only** door to `:has()`. Free-form `:has()` reaches
+ * across a component boundary, so a component's visual states would depend on
+ * markup it does not own — which is exactly the thing the matrix cannot model.
+ * The combinators that stay inside a component (`+`, `~`, `:nth-child`) are not
+ * restricted; `no-free-has` enforces the rest.
+ */
+import { axisPoint } from "./types.js";
+const media = (axis, name, feature, value) => axisPoint(axis, name, `@media (${feature}: ${value})`, {
+    kind: 'emulateMedia',
+    feature,
+    value,
+});
+/**
+ * The user's preferred colour scheme.
+ *
+ * Named `scheme` and not `colorScheme`, which the generated table already uses
+ * for the `color-scheme` **property** — a different thing: the property tells
+ * the UA which schemes the page supports, the axis asks which one the user
+ * wants. Fourth collision settled the same way as `px`, `color` and
+ * `minInlineSize`; here the shorter distinct name reads better than a namespace.
+ *
+ * `base` is implicit on every axis: it is the absence of a condition. There is
+ * therefore no `scheme.light` — writing light styles unconditionally and
+ * overriding them in dark is the one spelling.
+ */
+export const scheme = {
+    dark: media('scheme', 'dark', 'prefers-color-scheme', 'dark'),
+};
+export const motion = {
+    reduced: media('motion', 'reduced', 'prefers-reduced-motion', 'reduce'),
+};
+export const forcedColors = {
+    active: media('forcedColors', 'active', 'forced-colors', 'active'),
+};
+export const contrast = {
+    more: media('contrast', 'more', 'prefers-contrast', 'more'),
+};
+// ─── scroll state ───────────────────────────────────────────────────────────
+// `@container scroll-state(...)`. Reading it requires a
+// `container-type: scroll-state` ancestor, which only `provides(containerType.scrollState)`
+// can lay down — so a sheet cannot query a state nobody made queryable.
+const scrollStatePoint = (group, name, value, to) => axisPoint(`scrollState.${group}`, name, `@container scroll-state(${group}: ${value})`, { kind: 'scroll', to });
+/**
+ * The three groups are separate axes, not one.
+ *
+ * An element can be stuck *and* snapped at the same time, so folding them into
+ * a single axis would make the matrix claim combinations are impossible when
+ * they are not. Within one group the points are mutually exclusive, which is
+ * what the reduction in wave 5 would rely on.
+ */
+export const scrollState = {
+    stuck: {
+        none: scrollStatePoint('stuck', 'none', 'none', 'start'),
+        blockStart: scrollStatePoint('stuck', 'blockStart', 'block-start', 'start'),
+        blockEnd: scrollStatePoint('stuck', 'blockEnd', 'block-end', 'end'),
+        inlineStart: scrollStatePoint('stuck', 'inlineStart', 'inline-start', 'start'),
+        inlineEnd: scrollStatePoint('stuck', 'inlineEnd', 'inline-end', 'end'),
+    },
+    snapped: {
+        none: scrollStatePoint('snapped', 'none', 'none', 'start'),
+        block: scrollStatePoint('snapped', 'block', 'block', 'snap'),
+        inline: scrollStatePoint('snapped', 'inline', 'inline', 'snap'),
+        both: scrollStatePoint('snapped', 'both', 'both', 'snap'),
+    },
+    scrollable: {
+        none: scrollStatePoint('scrollable', 'none', 'none', 'start'),
+        blockStart: scrollStatePoint('scrollable', 'blockStart', 'block-start', 'end'),
+        blockEnd: scrollStatePoint('scrollable', 'blockEnd', 'block-end', 'start'),
+        inlineStart: scrollStatePoint('scrollable', 'inlineStart', 'inline-start', 'end'),
+        inlineEnd: scrollStatePoint('scrollable', 'inlineEnd', 'inline-end', 'start'),
+    },
+};
+// ─── descendant state ───────────────────────────────────────────────────────
+const descendantPoint = (name, selector, state) => axisPoint(`descendant.${name}`, 'present', `&:has(${selector})`, {
+    kind: 'descendantState',
+    state,
+});
+/**
+ * The only entry point to `:has()`.
+ *
+ * Each entry is its own axis with a single point, because "a descendant is
+ * invalid" and "a descendant has focus" are independent — one axis with three
+ * points would say they exclude each other.
+ */
+export const descendant = {
+    userInvalid: descendantPoint('userInvalid', ':user-invalid', 'user-invalid'),
+    focusVisible: descendantPoint('focusVisible', ':focus-visible', 'focus-visible'),
+    checked: descendantPoint('checked', ':checked', 'checked'),
+};
+/** Every standard point, for the specs that assert each one has a driver. */
+export const STANDARD_AXES = [
+    ...Object.values(scheme),
+    ...Object.values(motion),
+    ...Object.values(forcedColors),
+    ...Object.values(contrast),
+    ...Object.values(scrollState.stuck),
+    ...Object.values(scrollState.snapped),
+    ...Object.values(scrollState.scrollable),
+    ...Object.values(descendant),
+];
+//# sourceMappingURL=standard.js.map

package/src/lib/axes/standard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard.js","sourceRoot":"","sources":["../../../../../../libs/style/src/lib/axes/standard.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The axes the platform defines, shipped closed.\n *\n * Property access only — `scrollState.stuck.blockEnd`, never\n * `scrollState.stuck('block-end')`. A typo is\n * `Property 'blockEndd' does not exist`, and not a container query the browser\n * parses, ignores, and never mentions again.\n *\n * `descendant.*` is the **only** door to `:has()`. Free-form `:has()` reaches\n * across a component boundary, so a component's visual states would depend on\n * markup it does not own — which is exactly the thing the matrix cannot model.\n * The combinators that stay inside a component (`+`, `~`, `:nth-child`) are not\n * restricted; `no-free-has` enforces the rest.\n */\nimport { axisPoint, type AxisPoint, type Driver } from './types.ts';\n\nconst media = (\n  axis: string,\n  name: string,\n  feature: Extract<Driver, { kind: 'emulateMedia' }>['feature'],\n  value: string,\n) =>\n  axisPoint(axis, name, `@media (${feature}: ${value})`, {\n    kind: 'emulateMedia',\n    feature,\n    value,\n  });\n\n/**\n * The user's preferred colour scheme.\n *\n * Named `scheme` and not `colorScheme`, which the generated table already uses\n * for the `color-scheme` **property** — a different thing: the property tells\n * the UA which schemes the page supports, the axis asks which one the user\n * wants. Fourth collision settled the same way as `px`, `color` and\n * `minInlineSize`; here the shorter distinct name reads better than a namespace.\n *\n * `base` is implicit on every axis: it is the absence of a condition. There is\n * therefore no `scheme.light` — writing light styles unconditionally and\n * overriding them in dark is the one spelling.\n */\nexport const scheme = {\n  dark: media('scheme', 'dark', 'prefers-color-scheme', 'dark') as AxisPoint<\n    'scheme',\n    'dark'\n  >,\n} as const;\n\nexport const motion = {\n  reduced: media(\n    'motion',\n    'reduced',\n    'prefers-reduced-motion',\n    'reduce',\n  ) as AxisPoint<'motion', 'reduced'>,\n} as const;\n\nexport const forcedColors = {\n  active: media(\n    'forcedColors',\n    'active',\n    'forced-colors',\n    'active',\n  ) as AxisPoint<'forcedColors', 'active'>,\n} as const;\n\nexport const contrast = {\n  more: media('contrast', 'more', 'prefers-contrast', 'more') as AxisPoint<\n    'contrast',\n    'more'\n  >,\n} as const;\n\n// ─── scroll state ───────────────────────────────────────────────────────────\n// `@container scroll-state(...)`. Reading it requires a\n// `container-type: scroll-state` ancestor, which only `provides(containerType.scrollState)`\n// can lay down — so a sheet cannot query a state nobody made queryable.\n\nconst scrollStatePoint = (\n  group: 'stuck' | 'snapped' | 'scrollable',\n  name: string,\n  value: string,\n  to: 'start' | 'end' | 'snap',\n) =>\n  axisPoint(\n    `scrollState.${group}`,\n    name,\n    `@container scroll-state(${group}: ${value})`,\n    { kind: 'scroll', to },\n  );\n\n/**\n * The three groups are separate axes, not one.\n *\n * An element can be stuck *and* snapped at the same time, so folding them into\n * a single axis would make the matrix claim combinations are impossible when\n * they are not. Within one group the points are mutually exclusive, which is\n * what the reduction in wave 5 would rely on.\n */\nexport const scrollState = {\n  stuck: {\n    none: scrollStatePoint('stuck', 'none', 'none', 'start'),\n    blockStart: scrollStatePoint('stuck', 'blockStart', 'block-start', 'start'),\n    blockEnd: scrollStatePoint('stuck', 'blockEnd', 'block-end', 'end'),\n    inlineStart: scrollStatePoint(\n      'stuck',\n      'inlineStart',\n      'inline-start',\n      'start',\n    ),\n    inlineEnd: scrollStatePoint('stuck', 'inlineEnd', 'inline-end', 'end'),\n  },\n  snapped: {\n    none: scrollStatePoint('snapped', 'none', 'none', 'start'),\n    block: scrollStatePoint('snapped', 'block', 'block', 'snap'),\n    inline: scrollStatePoint('snapped', 'inline', 'inline', 'snap'),\n    both: scrollStatePoint('snapped', 'both', 'both', 'snap'),\n  },\n  scrollable: {\n    none: scrollStatePoint('scrollable', 'none', 'none', 'start'),\n    blockStart: scrollStatePoint(\n      'scrollable',\n      'blockStart',\n      'block-start',\n      'end',\n    ),\n    blockEnd: scrollStatePoint('scrollable', 'blockEnd', 'block-end', 'start'),\n    inlineStart: scrollStatePoint(\n      'scrollable',\n      'inlineStart',\n      'inline-start',\n      'end',\n    ),\n    inlineEnd: scrollStatePoint(\n      'scrollable',\n      'inlineEnd',\n      'inline-end',\n      'start',\n    ),\n  },\n} as const;\n\n// ─── descendant state ───────────────────────────────────────────────────────\n\nconst descendantPoint = (\n  name: string,\n  selector: string,\n  state: Extract<Driver, { kind: 'descendantState' }>['state'],\n) =>\n  axisPoint(`descendant.${name}`, 'present', `&:has(${selector})`, {\n    kind: 'descendantState',\n    state,\n  });\n\n/**\n * The only entry point to `:has()`.\n *\n * Each entry is its own axis with a single point, because \"a descendant is\n * invalid\" and \"a descendant has focus\" are independent — one axis with three\n * points would say they exclude each other.\n */\nexport const descendant = {\n  userInvalid: descendantPoint('userInvalid', ':user-invalid', 'user-invalid'),\n  focusVisible: descendantPoint(\n    'focusVisible',\n    ':focus-visible',\n    'focus-visible',\n  ),\n  checked: descendantPoint('checked', ':checked', 'checked'),\n} as const;\n\n/** Every standard point, for the specs that assert each one has a driver. */\nexport const STANDARD_AXES = [\n  ...Object.values(scheme),\n  ...Object.values(motion),\n  ...Object.values(forcedColors),\n  ...Object.values(contrast),\n  ...Object.values(scrollState.stuck),\n  ...Object.values(scrollState.snapped),\n  ...Object.values(scrollState.scrollable),\n  ...Object.values(descendant),\n] as const;\n"]}

package/src/lib/axes/types.d.ts

@@ -0,0 +1,67 @@
+/**
+ * What an axis is made of.
+ *
+ * An axis is a **closed** set of points, shipped by the library or built by
+ * `defineBreakpoints` / `defineAxis` / `defineStateAxis` / `defineContainer`.
+ * Never a string: `scrollState.stuck.blockEnd`, not
+ * `scrollState.stuck('block-end')`. A key that does not exist is a compile
+ * error, not CSS the browser ignores.
+ *
+ * Every point carries its **driver**. An axis without one would be worse than a
+ * missing axis: the matrix would enumerate scenarios nothing can reach and
+ * render identical captures, which is false coverage rather than no coverage.
+ */
+/** How a test reaches a point. There is no `'none'`: every point is reachable. */
+export type Driver = {
+    readonly kind: 'emulateMedia';
+    readonly feature: 'prefers-color-scheme' | 'prefers-reduced-motion' | 'forced-colors' | 'prefers-contrast';
+    readonly value: string;
+} | {
+    readonly kind: 'resize';
+    readonly minInlineSize: string;
+} | {
+    readonly kind: 'resizeContainer';
+    readonly container: string;
+    readonly minInlineSize: string;
+} | {
+    readonly kind: 'setAttribute';
+    readonly name: string;
+    readonly value: string;
+} | {
+    readonly kind: 'scroll';
+    readonly to: 'start' | 'end' | 'snap';
+} | {
+    readonly kind: 'descendantState';
+    readonly state: 'user-invalid' | 'focus-visible' | 'checked';
+};
+export interface AxisPoint<Axis extends string, Point extends string> {
+    readonly axis: Axis;
+    readonly point: Point;
+    /** The at-rule or selector fragment the emitter wraps around the rule. */
+    readonly open: string;
+    readonly driver: Driver;
+    /**
+     * Ordered axes only — viewport and container. Two points of the same axis
+     * with an order can be compared, which is what makes a dead rule detectable
+     * and what lets the matrix reduce by interval instead of by product.
+     */
+    readonly order?: number;
+    /**
+     * Set when the point is a lower bound (`above`) or an upper bound (`below`).
+     * A plain breakpoint is a lower bound.
+     */
+    readonly bound?: 'above' | 'below';
+    /**
+     * The container this point queries, when it is not the viewport. A container
+     * axis does not propagate above the element that resolves it.
+     */
+    readonly container?: string;
+    /**
+     * Custom properties this axis is allowed to write, by kind syntax. Empty
+     * means unconstrained. See `defineAxis(..., { writes })`.
+     */
+    readonly writes?: readonly string[];
+}
+export type AnyAxisPoint = AxisPoint<string, string>;
+export declare const axisPoint: <Axis extends string, Point extends string>(axis: Axis, name: Point, open: string, driver: Driver, extra?: Omit<Partial<AnyAxisPoint>, "axis" | "point" | "open" | "driver">) => AxisPoint<Axis, Point>;
+//# sourceMappingURL=types.d.ts.map

package/src/lib/axes/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../libs/style/src/lib/axes/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,kFAAkF;AAClF,MAAM,MAAM,MAAM,GACd;IACE,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,OAAO,EACZ,sBAAsB,GACtB,wBAAwB,GACxB,eAAe,GACf,kBAAkB,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,GACD;IAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAC3D;IACE,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;CAChC,GACD;IACE,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,GACD;IAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAA;CAAE,GAClE;IACE,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS,CAAC;CAC9D,CAAC;AAEN,MAAM,WAAW,SAAS,CAAC,IAAI,SAAS,MAAM,EAAE,KAAK,SAAS,MAAM;IAClE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACrC;AAED,MAAM,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,GAAI,IAAI,SAAS,MAAM,EAAE,KAAK,SAAS,MAAM,EACjE,MAAM,IAAI,EACV,MAAM,KAAK,EACX,MAAM,MAAM,EACZ,QAAQ,MAAM,EACd,QAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAM,KAC5E,SAAS,CAAC,IAAI,EAAE,KAAK,CAMtB,CAAC"}