entasis 0.4.1 → 0.6.0

package/dist/tailwind/global.js

@@ -214,7 +214,10 @@ export const applyGlobalEngine = (api, options) => {
                 'background-color': 'var(--color-pressed, var(--color-hover, currentColor))',
                 opacity: 'var(--state-pressed-opacity)'
             }
-        }
+        },
+        // The off switch for one element: the tint lives on the ::before, so a `hover:bg-*` on the
+        // element itself can never reach it.
+        '.state-layer-none': { '&::before': { display: 'none' } }
     });
     addShimmerUtilities(api);
     addScrollFadeUtilities(api);

package/dist/tailwind/spacing.d.ts

@@ -1,2 +1,15 @@
 import type { PluginAPI } from 'tailwindcss/plugin';
+export declare const spacingValues: {
+    micro: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    'layout-sm': string;
+    'layout-md': string;
+    'layout-lg': string;
+    'layout-xl': string;
+};
+export type SpacingStep = keyof typeof spacingValues;
 export declare const applySpacingEngine: ({ addBase, matchUtilities }: PluginAPI) => void;

package/dist/tailwind/spacing.js

@@ -8,9 +8,12 @@ const spacingVariables = {
     '--layout-space-sm': 'calc(var(--spacing) * 5)',
     '--layout-space-md': 'calc(var(--spacing) * 6)',
     '--layout-space-lg': 'calc(var(--spacing) * 8)',
-    '--layout-space-xl': 'calc(var(--spacing) * 12)'
+    '--layout-space-xl': 'calc(var(--spacing) * 12)',
+    // How far a drawer Dialog stands off the screen edge. A spacing step or `0px`, overridden by
+    // `designTokens.drawerInset`; the drawer's edge corners round only when this is not zero.
+    '--drawer-inset': 'var(--layout-space-md)'
 };
-const spacingValues = {
+export const spacingValues = {
     micro: 'var(--space-micro)',
     xs: 'var(--space-xs)',
     sm: 'var(--space-sm)',

package/dist/tailwind/theme.mcp.d.ts

@@ -1 +1 @@
-export declare const themePluginDescription = "\n# Theme Tailwind plugin\n\n`@plugin 'entasis/tailwind-plugin/theme'` generates color variables for each named theme. The declaration\nmarked `default: true` also registers the shared utility vocabulary, variants, spinner styles,\nand keyframes.\n\n```css\n@import 'tailwindcss';\n\n@plugin 'entasis/tailwind-plugin/theme' {\n\tname: light;\n\tdefault: true;\n\tcolorscheme: light;\n\tprimary: #5f62ef;\n\tsecondary: #e4e4e7;\n\tsurface: #fafafa;\n\tneutral: #18181b;\n}\n\n@plugin 'entasis/tailwind-plugin/theme' {\n\tname: dark;\n\tcolorscheme: dark;\n\tprimary: #5f62ef;\n\tsecondary: #27272a;\n\tsurface: #09090b;\n\tneutral: #fafafa;\n}\n```\n\n## Identity\n\n- `name: string` scopes variables to `html[data-theme=\"<name>\"]` and `.<name>`.\n- `default: boolean` also applies the palette to bare `html` and installs the shared engine.\n- `colorscheme: 'light' | 'dark'` controls mode-aware color defaults.\n- `prefersDark: boolean` also emits the palette under the dark system media query.\n\n## Palette inputs\n\nBase semantic colors are `primary`, `secondary`, `danger`, `success`, `warning`, `info`,\nand `neutral`. `surface` seeds the elevation ladder: `surface-recessed`,\n`surface-canvas`, `surface`, `surface-raised`, and `surface-floating`.\n\nEach semantic color supports explicit `-light`, `-lighter`, `-dark`, `-muted`,\n`-contrast`, `-readable`, and `-muted-readable` overrides. Missing variants are generated.\n`luminance` and `saturation` adjust the generated palette.\n\n`state-hover-opacity` and `state-pressed-opacity` calibrate the CSS variables consumed by\n`.state-layer`. They default to 0.05/0.10 in light mode and 0.16/0.32 in dark mode.\n`state-selected-opacity` (0.07 light, 0.10 dark) is the alpha `bg-selected-muted` composites the\nselected role at: the soft selection fill is a translucent tint, not an opaque colour, so it reads\nthe same on `surface`, `surface-raised` and `surface-floating`.\n\n## Runtime boundary\n\nSpacing, radius, typography scale, raised borders, `defaultColor` and the four state roles\n(`focusColor`, `selectedColor`, `hoverColor`, `pressedColor`) are not plugin options.\nConfigure them with the `designTokens` prop on `Theme`. Tailwind still discovers and compiles\nthe finite utility names; runtime theming changes the CSS variables those utilities consume.\n\nThe public spacing vocabulary is `xs | sm | md | lg | xl`, available through named gap, padding,\nand margin utilities such as `gap-md` and `px-lg`. The `micro` and `layout-*` values are\ninternal component-recipe tokens. Generated interfaces should prefer Stack/Grid gaps and must not\nemit arbitrary spacing or unsupported radius utilities.\n\nColor variables can also be overridden directly at runtime:\n\n```css\nhtml[data-theme='light'] {\n\t--color-primary: oklab(0.21 0.01 -0.03);\n}\n```\n";
+export declare const themePluginDescription = "\n# Theme Tailwind plugin\n\n`@plugin 'entasis/tailwind-plugin/theme'` generates color variables for each named theme. The declaration\nmarked `default: true` also registers the shared utility vocabulary, variants, spinner styles,\nand keyframes.\n\n```css\n@import 'tailwindcss';\n\n@plugin 'entasis/tailwind-plugin/theme' {\n\tname: light;\n\tdefault: true;\n\tcolorscheme: light;\n\tprimary: #5f62ef;\n\tsecondary: #e4e4e7;\n\tsurface: #fafafa;\n\tneutral: #18181b;\n}\n\n@plugin 'entasis/tailwind-plugin/theme' {\n\tname: dark;\n\tcolorscheme: dark;\n\tprimary: #5f62ef;\n\tsecondary: #27272a;\n\tsurface: #09090b;\n\tneutral: #fafafa;\n}\n```\n\n## Identity\n\n- `name: string` scopes variables to `html[data-theme=\"<name>\"]` and `.<name>`.\n- `default: boolean` also applies the palette to bare `html` and installs the shared engine.\n- `colorscheme: 'light' | 'dark'` controls mode-aware color defaults.\n- `prefersDark: boolean` also emits the palette under the dark system media query.\n\n## Palette inputs\n\nBase semantic colors are `primary`, `secondary`, `danger`, `success`, `warning`, `info`,\nand `neutral`. `surface` seeds the elevation ladder: `surface-recessed`,\n`surface-canvas`, `surface`, `surface-raised`, and `surface-floating`.\n\nEach semantic color supports explicit `-light`, `-lighter`, `-dark`, `-muted`,\n`-contrast`, `-readable`, and `-muted-readable` overrides. Missing variants are generated.\n`luminance` and `saturation` adjust the generated palette.\n\n`state-hover-opacity` and `state-pressed-opacity` calibrate the CSS variables consumed by\n`.state-layer`. They default to 0.05/0.10 in light mode and 0.16/0.32 in dark mode. `state-layer-none` switches that overlay off on one element.\n`state-selected-opacity` (0.07 light, 0.10 dark) is the alpha `bg-selected-muted` composites the\nselected role at: the soft selection fill is a translucent tint, not an opaque colour, so it reads\nthe same on `surface`, `surface-raised` and `surface-floating`.\n\n## Runtime boundary\n\nSpacing, radius, typography scale, raised borders, `defaultColor` and the four state roles\n(`focusColor`, `selectedColor`, `hoverColor`, `pressedColor`) are not plugin options.\nConfigure them with the `designTokens` prop on `Theme`. Tailwind still discovers and compiles\nthe finite utility names; runtime theming changes the CSS variables those utilities consume.\n\nThe public spacing vocabulary is `xs | sm | md | lg | xl`, available through named gap, padding,\nand margin utilities such as `gap-md` and `px-lg`. The `micro` and `layout-*` values are\ninternal component-recipe tokens. Generated interfaces should prefer Stack/Grid gaps and must not\nemit arbitrary spacing or unsupported radius utilities.\n\nColor variables can also be overridden directly at runtime:\n\n```css\nhtml[data-theme='light'] {\n\t--color-primary: oklab(0.21 0.01 -0.03);\n}\n```\n";

package/dist/tailwind/theme.mcp.js

@@ -46,7 +46,7 @@ Each semantic color supports explicit \`-light\`, \`-lighter\`, \`-dark\`, \`-mu
 \`luminance\` and \`saturation\` adjust the generated palette.
 
 \`state-hover-opacity\` and \`state-pressed-opacity\` calibrate the CSS variables consumed by
-\`.state-layer\`. They default to 0.05/0.10 in light mode and 0.16/0.32 in dark mode.
+\`.state-layer\`. They default to 0.05/0.10 in light mode and 0.16/0.32 in dark mode. \`state-layer-none\` switches that overlay off on one element.
 \`state-selected-opacity\` (0.07 light, 0.10 dark) is the alpha \`bg-selected-muted\` composites the
 selected role at: the soft selection fill is a translucent tint, not an opaque colour, so it reads
 the same on \`surface\`, \`surface-raised\` and \`surface-floating\`.

package/dist/utils/cva/cva.mcp.d.ts

@@ -1 +1 @@
-export declare const cvaDescription = "\n# Component variants\n\nImport from `entasis/cva`.\n\ncva defines class variants and defaults. cx joins class values; compose composes variants. setComponentTheme and useComponentTheme connect component theme definitions to the Svelte theme context. VariantProps and InferComponentTheme derive the corresponding public types. Keep component CVA definitions beside their owner in a .theme.ts file.\n";
+export declare const cvaDescription = "\n# Component variants\n\nImport from `entasis/cva`.\n\ncva defines class variants and defaults. cx joins class values; compose composes variants. setComponentTheme and useComponentTheme connect component theme definitions to the Svelte theme context. A resolver takes an optional second argument, the shared variant values, and then returns every class slot already bound to them, so a template calls `slots.root()` instead of passing the same props to each slot. VariantProps and InferComponentTheme derive the corresponding public types. Keep component CVA definitions beside their owner in a .theme.ts file.\n";

package/dist/utils/cva/cva.mcp.js

@@ -3,5 +3,5 @@ export const cvaDescription = `
 
 Import from \`entasis/cva\`.
 
-cva defines class variants and defaults. cx joins class values; compose composes variants. setComponentTheme and useComponentTheme connect component theme definitions to the Svelte theme context. VariantProps and InferComponentTheme derive the corresponding public types. Keep component CVA definitions beside their owner in a .theme.ts file.
+cva defines class variants and defaults. cx joins class values; compose composes variants. setComponentTheme and useComponentTheme connect component theme definitions to the Svelte theme context. A resolver takes an optional second argument, the shared variant values, and then returns every class slot already bound to them, so a template calls \`slots.root()\` instead of passing the same props to each slot. VariantProps and InferComponentTheme derive the corresponding public types. Keep component CVA definitions beside their owner in a .theme.ts file.
 `;

package/dist/utils/cva/index.d.ts

@@ -1,4 +1,4 @@
 export { cva, cx, compose } from './engine.js';
 export { setComponentTheme, useComponentTheme } from './theme.js';
-export type { ComponentVariant, InferComponentTheme } from './theme.js';
+export type { ComponentVariant, InferComponentTheme, SharedThemeProps, BoundTheme } from './theme.js';
 export type { VariantProps, ClassValue, ClassArray, ClassDictionary } from './types.js';

package/dist/utils/cva/merge.d.ts

@@ -16,6 +16,7 @@
  *     earlier edge forms; edge forms combine; `static` is a modifier)
  *   - `shimmer*` (`shimmer` / `shimmer-none` exclude each other; `once` and
  *     `reverse` are modifiers; `shimmer-color|duration|spread|angle-*` are scales)
+ *   - `state-layer` / `state-layer-none` exclude each other
  *   - `rounded-<step>-concentric` / `rounded-t|b-<step>-concentric` (join the core corner groups), the container side
  *     needing nothing here — a `rounded-<step>` publishes its radius to its children by itself
  *   - `duration-*` / `ease-*` motion tokens
@@ -30,4 +31,111 @@
  * falsy values, so no separate clsx pass is needed.
  */
 import type { ClassValue } from './types.js';
+export declare const mergeConfig: {
+    extend: {
+        theme: {
+            spacing: string[];
+        };
+        classGroups: {
+            raised: (string | {
+                raised: string[];
+            })[];
+            lift: (string | {
+                lift: string[];
+            })[];
+            'h-control': {
+                'h-control': string[];
+            }[];
+            'h-row': {
+                'h-row': string[];
+            }[];
+            'min-h-row': {
+                'min-h-row': string[];
+            }[];
+            'size-icon': {
+                'size-icon': string[];
+            }[];
+            'min-size-hit': {
+                'min-size-hit': string[];
+            }[];
+            'ps-indent': {
+                'ps-indent': string[];
+            }[];
+            duration: {
+                duration: string[];
+            }[];
+            ease: {
+                ease: string[];
+            }[];
+            h: {
+                h: string[];
+            }[];
+            w: {
+                w: string[];
+            }[];
+            'scroll-fade': (string | {
+                'scroll-fade': string[];
+            })[];
+            'scroll-fade-t': string[];
+            'scroll-fade-b': string[];
+            'scroll-fade-start': {
+                'scroll-fade': string[];
+            }[];
+            'scroll-fade-end': {
+                'scroll-fade': string[];
+            }[];
+            shimmer: string[];
+            'state-layer': string[];
+            'shimmer-color': {
+                'shimmer-color': {
+                    readonly $v: "isAny";
+                }[];
+            }[];
+            'shimmer-duration': {
+                'shimmer-duration': {
+                    readonly $v: "isAny";
+                }[];
+            }[];
+            'shimmer-spread': {
+                'shimmer-spread': {
+                    readonly $v: "isAny";
+                }[];
+            }[];
+            'shimmer-angle': {
+                'shimmer-angle': {
+                    readonly $v: "isAny";
+                }[];
+            }[];
+            rounded: {
+                rounded: ((value: string) => boolean)[];
+            }[];
+            'rounded-t': {
+                'rounded-t': ((value: string) => boolean)[];
+            }[];
+            'rounded-b': {
+                'rounded-b': ((value: string) => boolean)[];
+            }[];
+        };
+        conflictingClassGroups: {
+            raised: string[];
+            lift: string[];
+            shadow: string[];
+            'h-control': string[];
+            'h-row': string[];
+            h: string[];
+            'size-icon': string[];
+            w: string[];
+            size: string[];
+            'min-size-hit': string[];
+            'min-h-row': string[];
+            'min-w': string[];
+            'min-h': string[];
+            'ps-indent': string[];
+            ps: string[];
+            px: string[];
+            p: string[];
+            'scroll-fade': string[];
+        };
+    };
+};
 export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/utils/cva/merge.js

@@ -16,6 +16,7 @@
  *     earlier edge forms; edge forms combine; `static` is a modifier)
  *   - `shimmer*` (`shimmer` / `shimmer-none` exclude each other; `once` and
  *     `reverse` are modifiers; `shimmer-color|duration|spread|angle-*` are scales)
+ *   - `state-layer` / `state-layer-none` exclude each other
  *   - `rounded-<step>-concentric` / `rounded-t|b-<step>-concentric` (join the core corner groups), the container side
  *     needing nothing here — a `rounded-<step>` publishes its radius to its children by itself
  *   - `duration-*` / `ease-*` motion tokens
@@ -44,7 +45,7 @@ const SEMANTIC_SPACING = [
     'layout-lg',
     'layout-xl'
 ];
-const merge = createCn({
+export const mergeConfig = {
     extend: {
         theme: {
             spacing: SEMANTIC_SPACING
@@ -74,6 +75,8 @@ const merge = createCn({
             'scroll-fade-start': [{ 'scroll-fade': ['s', 'l'] }],
             'scroll-fade-end': [{ 'scroll-fade': ['e', 'r'] }],
             shimmer: ['shimmer', 'shimmer-none'],
+            // The overlay is a ::before, so only its own off switch can remove it.
+            'state-layer': ['state-layer', 'state-layer-none'],
             'shimmer-color': [{ 'shimmer-color': [validators.isAny] }],
             'shimmer-duration': [{ 'shimmer-duration': [validators.isAny] }],
             'shimmer-spread': [{ 'shimmer-spread': [validators.isAny] }],
@@ -110,5 +113,6 @@ const merge = createCn({
             'scroll-fade': ['scroll-fade-t', 'scroll-fade-b', 'scroll-fade-start', 'scroll-fade-end']
         }
     }
-});
+};
+const merge = createCn(mergeConfig);
 export const cn = (...inputs) => merge(...inputs);

package/dist/utils/cva/theme.d.ts

@@ -27,13 +27,20 @@ export type InferComponentTheme<T extends ComponentTheme> = Partial<{
     override?: boolean;
 };
 export declare const setComponentTheme: <T extends ComponentTheme>(component: string) => (theme: InferComponentTheme<T>) => void;
+/** The resolver `useComponentTheme` returns: the theme's class slots, optionally pre-bound. */
+export type UseComponentTheme<T extends ComponentTheme> = {
+    /** With shared variant values: every class slot already carrying them (`slots.root()`). */
+    (theme: InferComponentTheme<T> | undefined, shared: SharedThemeProps<T>): BoundTheme<T>;
+    /** The resolved theme, one class function per slot. Last, so `ReturnType` reads this one. */
+    (theme?: InferComponentTheme<T>): T;
+};
 /**
  * Resolves a component's class slots through the same ladder `useComponentMotion` walks,
  * lowest first: the component's own theme, the `<Theme components>` registry, a
  * `set<Component>Theme` subtree, then the instance `theme` prop. Each rung layers on the
  * one below it — a subtree that restyles one slot must not drop the registry's others.
  */
-export declare const useComponentTheme: <T extends ComponentTheme>(component: string, defaultTheme: T) => ((theme?: InferComponentTheme<T>) => T);
+export declare const useComponentTheme: <T extends ComponentTheme>(component: string, defaultTheme: T) => UseComponentTheme<T>;
 /**
  * One component's entry in the `<Theme components>` registry: the same object a
  * `set<Component>Theme` call takes — class slots plus the reserved `motion` slot.
@@ -51,4 +58,32 @@ export type ComponentThemeOverride = {
 };
 /** App-wide component theme defaults, keyed by the component's theme context name. */
 export type ComponentThemeRegistry = Record<string, ComponentThemeOverride>;
+type SlotProps<S> = S extends (props?: infer P) => string ? NonNullable<P> : never;
+type KeysOfUnion<U> = U extends unknown ? keyof U : never;
+type ValueIn<U, K> = U extends unknown ? (K extends keyof U ? U[K] : never) : never;
+type ClassSlots<T> = {
+    [K in keyof T as T[K] extends (props?: never) => string ? K : never]: T[K];
+};
+type AnySlotProps<T> = SlotProps<ClassSlots<T>[keyof ClassSlots<T>]>;
+/** Every variant any class slot of the theme accepts, each valued as the union the slots take. */
+export type SharedThemeProps<T extends ComponentTheme> = {
+    [K in Exclude<KeysOfUnion<AnySlotProps<T>>, 'class' | 'className'>]?: ValueIn<AnySlotProps<T>, K>;
+};
+/** The theme's class slots, each already carrying the shared props. */
+export type BoundTheme<T extends ComponentTheme> = {
+    [K in keyof ClassSlots<T>]: (props?: SlotProps<ClassSlots<T>[K]>) => string;
+};
+/**
+ * The primitive behind a `use{Component}Theme(theme, shared)` resolver's second argument.
+ *
+ * Binds a component's variant values to every class slot at once, so a template reads
+ * `slots.root()` instead of threading the same props into each call. A slot can still add its
+ * own on top — `slots.panel({ placement: 'static' })`, `slots.root({ className })` — and a
+ * slot ignores any shared variant it does not declare, exactly as `cva` always has.
+ *
+ * Every slot now sees every prop, so a theme override keyed on a variant the component used
+ * to pass only to its root (`prefix: { color: { primary } }`) reaches the slot it names.
+ * Each slot still resolves and merges its own classes; what this removes is the threading.
+ */
+export declare const bindTheme: <T extends ComponentTheme>(theme: T, shared: SharedThemeProps<T>) => BoundTheme<T>;
 export {};

package/dist/utils/cva/theme.js

@@ -17,7 +17,7 @@ const pick = (o, props) => o && [
 ];
 // `<Theme components>` is the registry every subtree inherits. Read through the Theme
 // context key so this module stays free of Theme imports.
-const registryTheme = (component) => getContext('sveltaiTheme')
+const registryTheme = (component) => getContext('entasisTheme')
     ?.componentThemes?.[component];
 /**
  * Resolves a component's class slots through the same ladder `useComponentMotion` walks,
@@ -26,7 +26,7 @@ const registryTheme = (component) => getContext('sveltaiTheme')
  * one below it — a subtree that restyles one slot must not drop the registry's others.
  */
 export const useComponentTheme = (component, defaultTheme) => {
-    return (rawTheme) => {
+    const resolve = (rawTheme) => {
         const ctx = getContext(`${component}Theme`);
         const registry = registryTheme(component);
         const { override: localOverride, ...local } = rawTheme ?? {};
@@ -56,4 +56,27 @@ export const useComponentTheme = (component, defaultTheme) => {
         }
         return changed ? theme : defaultTheme;
     };
+    return ((rawTheme, shared) => shared ? bindTheme(resolve(rawTheme), shared) : resolve(rawTheme));
+};
+/**
+ * The primitive behind a `use{Component}Theme(theme, shared)` resolver's second argument.
+ *
+ * Binds a component's variant values to every class slot at once, so a template reads
+ * `slots.root()` instead of threading the same props into each call. A slot can still add its
+ * own on top — `slots.panel({ placement: 'static' })`, `slots.root({ className })` — and a
+ * slot ignores any shared variant it does not declare, exactly as `cva` always has.
+ *
+ * Every slot now sees every prop, so a theme override keyed on a variant the component used
+ * to pass only to its root (`prefix: { color: { primary } }`) reaches the slot it names.
+ * Each slot still resolves and merges its own classes; what this removes is the threading.
+ */
+export const bindTheme = (theme, shared) => {
+    const bound = {};
+    for (const slot in theme) {
+        if (slot === 'motion')
+            continue;
+        const resolve = theme[slot];
+        bound[slot] = (props) => resolve(props ? { ...shared, ...props } : shared);
+    }
+    return bound;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "entasis",
-	"version": "0.4.1",
+	"version": "0.6.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",