entasis 0.7.1 → 0.9.0

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

@@ -1 +1 @@
-export declare const tailwindPluginDescription = "\n# Main Tailwind plugin\n\n`@plugin 'entasis/tailwind-plugin'`\n\nThis palette-agnostic plugin registers shared utilities, variants, keyframes, and spinner CSS.\nUse it when colors are defined separately instead of through the theme plugin.\n\n## Configuration\n\n`spinner`\n- **Type**: `Spinner` object\n- **Default**: Auto-generated\n- **Description**: Custom spinner configuration for the `.ui-spinner` class\n\n## Shared utilities\n\n### `.state-layer`\n- Composites `currentColor` at `--state-hover-opacity` on hover and `data-highlighted=\"true\"`\n- Composites `currentColor` at `--state-pressed-opacity` on `:active`\n- Does not activate for disabled, `data-disabled`, or `aria-disabled=\"true\"` elements\n- Theme plugin defaults the opacities to 5% and 10% in light themes, and 16% and 32% in dark themes\n\n### `bg-selected-muted` / `rounded-<step>-concentric`\n- `bg-selected-muted` composites `var(--color-selected, var(--color))` at\n  `--state-selected-opacity` (0.07 light, 0.10 dark), so a persistent selection reads the same on\n  `surface`, `surface-raised` and `surface-floating`. `bg-color-muted` stays opaque.\n- `rounded-<step>-concentric` (also `rounded-t-<step>-concentric` /\n  `rounded-b-<step>-concentric`, with `<step>` one of `xs sm md lg xl 2xl 3xl 4xl`) keeps the\n  child on its own design step but caps it at what concentricity allows inside a rounded padded\n  container:\n  `min(var(--radius-<step>), var(--radius-parent) - max(--pad-parent-x, --pad-parent-y))`. The\n  container declares nothing: every `rounded-<step>` publishes `--radius-parent` to its\n  children and `p` / `px` / `py` publish `--pad-parent-x/-y`, so the two boxes stay\n  concentric at every `radius` preset. Outside any rounded container the parent radius is\n  infinite, so the child is exactly its step; a negative difference clamps to 0, a square corner.\n  Put it on a child that sits flush against the padding box; a floating child (an avatar, a\n  Button, a Chip) keeps its own radius.\n\nConfigure spacing, radius, typography scale, and raised borders at runtime through\n`Theme.designTokens`.\n\nSemantic spacing utilities use the active theme's `xs`, `sm`, `md`, `lg`, and `xl`\nscale for gaps, padding, margins, and physical insets. For example, `gap-lg`, `p-lg`,\n`top-lg`, and `left-lg` use the same spacing value. Inset utilities support `top`,\n`right`, `bottom`, and `left`, including responsive variants.\n";
+export declare const tailwindPluginDescription = "\n# Main Tailwind plugin\n\n`@plugin 'entasis/tailwind-plugin'`\n\nThis palette-agnostic plugin registers shared utilities, variants, keyframes, and spinner CSS.\nUse it when colors are defined separately instead of through the theme plugin.\n\n## Configuration\n\n`spinner`\n- **Type**: `Spinner` object\n- **Default**: Auto-generated\n- **Description**: Custom spinner configuration for the `.ui-spinner` class\n\n## Shared utilities\n\n### `.state-layer`\n- Composites `currentColor` at `--state-hover-opacity` on hover and `data-highlighted=\"true\"`\n- Composites `currentColor` at `--state-pressed-opacity` on `:active`\n- Does not activate for disabled, `data-disabled`, or `aria-disabled=\"true\"` elements\n- Theme plugin defaults the opacities to 5% and 10% in light themes, and 16% and 32% in dark themes\n\n### `bg-selected-muted` / `rounded-<step>-concentric`\n- `bg-selected-muted` composites `var(--color-selected, var(--color))` at\n  `--state-selected-opacity` (0.07 light, 0.10 dark), so a persistent selection reads the same on\n  `surface`, `surface-raised` and `surface-floating`. `bg-color-muted` stays opaque.\n- `rounded-<step>-concentric` (also `rounded-t-<step>-concentric` /\n  `rounded-b-<step>-concentric`, with `<step>` one of `xs sm md lg xl 2xl 3xl 4xl`) keeps the\n  child on its own design step but caps it at what concentricity allows inside a rounded padded\n  container:\n  `min(var(--radius-<step>), var(--radius-parent) - max(--pad-parent-x, --pad-parent-y))`. The\n  container declares nothing: every `rounded-<step>` publishes `--radius-parent` to its\n  children and `p` / `px` / `py` publish `--pad-parent-x/-y`, so the two boxes stay\n  concentric at every `radius` preset. Outside any rounded container the parent radius is\n  infinite, so the child is exactly its step; a negative difference clamps to 0, a square corner.\n  Put it on a child that sits flush against the padding box; a floating child (an avatar, a\n  Button, a Chip) keeps its own radius.\n  The padding half reads the other way: `px|py-<step>-concentric` is\n  `max(space-<step>, min(radius-parent / 2, space-<step> * 3))`, so a flush bar's content clears a\n  large container corner (a very round theme over a compact title bar) and stays the plain step\n  otherwise.\n\nConfigure spacing, radius, typography scale, and raised borders at runtime through\n`Theme.designTokens`.\n\nSemantic spacing utilities use the active theme's `xs`, `sm`, `md`, `lg`, and `xl`\nscale for gaps, padding, margins, and physical insets. For example, `gap-lg`, `p-lg`,\n`top-lg`, and `left-lg` use the same spacing value. Inset utilities support `top`,\n`right`, `bottom`, and `left`, including responsive variants.\n";

package/dist/tailwind/index.mcp.js

@@ -36,6 +36,10 @@ Use it when colors are defined separately instead of through the theme plugin.
   infinite, so the child is exactly its step; a negative difference clamps to 0, a square corner.
   Put it on a child that sits flush against the padding box; a floating child (an avatar, a
   Button, a Chip) keeps its own radius.
+  The padding half reads the other way: \`px|py-<step>-concentric\` is
+  \`max(space-<step>, min(radius-parent / 2, space-<step> * 3))\`, so a flush bar's content clears a
+  large container corner (a very round theme over a compact title bar) and stays the plain step
+  otherwise.
 
 Configure spacing, radius, typography scale, and raised borders at runtime through
 \`Theme.designTokens\`.

package/dist/tailwind/scales.js

@@ -23,8 +23,8 @@ export const radiusSteps = {
     xs: 0.125,
     sm: 0.25,
     md: 0.5, // controls (buttons, inputs) keep the radius they always had
-    lg: 0.75, // panels: cards, popovers, menus, alerts
-    xl: 1, // dialogs, drawers, large surfaces
+    lg: 0.75, // panels: cards, popovers, menus, alerts (factor capped, see radiusVariables)
+    xl: 1, // dialogs, drawers, large surfaces (factor capped)
     '2xl': 1.25,
     '3xl': 1.5,
     '4xl': 2
@@ -111,9 +111,17 @@ export const spacingScaleVariables = (spacingScale) => {
     });
     return Object.fromEntries(entries.map(([step, multiplier]) => [`--space-${step}`, `calc(var(--spacing) * ${multiplier})`]));
 };
+// Surface steps (`lg` and up: cards, popovers, dialogs, windows) follow the factor only up to
+// `large`. A round theme turns controls into pills; a panel rounder than ×1.5 stops reading as
+// a panel. Radix Themes draws the same line: its `full` radius pills controls, not panels.
+const SURFACE_RADIUS_STEPS = new Set(['lg', 'xl', '2xl', '3xl', '4xl']);
 export const radiusVariables = (radius) => {
     const factor = presetFactor(radius, radiusFactors, 'radius');
-    const variables = Object.fromEntries(Object.entries(radiusSteps).map(([step, rem]) => [`--radius-${step}`, formatRem(rem * factor)]));
+    const surfaceFactor = Math.min(factor, radiusFactors.large);
+    const variables = Object.fromEntries(Object.entries(radiusSteps).map(([step, rem]) => [
+        `--radius-${step}`,
+        formatRem(rem * (SURFACE_RADIUS_STEPS.has(step) ? surfaceFactor : factor))
+    ]));
     return { '--radius': variables['--radius-md'], ...variables };
 };
 export const typeScaleVariables = (typeScale) => {

package/dist/tailwind/spacing.js

@@ -48,6 +48,22 @@ const paddingUtilities = {
     ps: (value) => ({ 'padding-inline-start': value }),
     pe: (value) => ({ 'padding-inline-end': value })
 };
+// `px-<step>-concentric` / `py-<step>-concentric`: the padding half of NESTED RADIUS (see
+// `radius.ts`) read the other way. A flush bar's content sits in its container's corner, so its
+// padding is the step, or half the container's corner radius when that is larger. A very round
+// theme on a compact bar needs it: at `radius: 2.25` a 36px window corner sits over a 36px title
+// bar, and `px-md` (8px) puts the title's first glyphs inside the curve. Capped at three steps,
+// because a pill container publishes an infinite radius. It only departs from the plain step when
+// the corner is more than twice the step. It publishes what it pads, like `px` / `py`.
+const cornerClearance = (value) => `max(${value}, min(calc(var(--radius-parent, 0px) / 2), calc(${value} * 3)))`;
+const concentricPaddingValues = Object.fromEntries(Object.entries(spacingValues).map(([step, value]) => [
+    `${step}-concentric`,
+    cornerClearance(value)
+]));
+const concentricPaddingUtilities = {
+    px: (value) => ({ 'padding-inline': value, '& > *': { '--pad-parent-x': value } }),
+    py: (value) => ({ 'padding-block': value, '& > *': { '--pad-parent-y': value } })
+};
 const marginUtilities = {
     m: (value) => ({ margin: value }),
     mx: (value) => ({ 'margin-inline': value }),
@@ -69,6 +85,7 @@ export const applySpacingEngine = ({ addBase, matchUtilities }) => {
     addBase({ html: spacingVariables });
     matchUtilities(gapUtilities, { values: spacingValues });
     matchUtilities(paddingUtilities, { values: spacingValues });
+    matchUtilities(concentricPaddingUtilities, { values: concentricPaddingValues });
     matchUtilities(marginUtilities, { values: spacingValues, supportsNegativeValues: true });
     matchUtilities(insetUtilities, { values: spacingValues });
 };

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

@@ -18,6 +18,7 @@
  *     `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
+ *   - `px|py-<step>-concentric` (join the core `px` / `py` groups)
  *     needing nothing here — a `rounded-<step>` publishes its radius to its children by itself
  *   - `duration-*` / `ease-*` motion tokens
  *   - the semantic spacing scale (`p-md`, `gap-layout-lg`, ...) registered on
@@ -115,6 +116,12 @@ export declare const mergeConfig: {
             'rounded-b': {
                 'rounded-b': ((value: string) => boolean)[];
             }[];
+            px: {
+                px: ((value: string) => boolean)[];
+            }[];
+            py: {
+                py: ((value: string) => boolean)[];
+            }[];
         };
         conflictingClassGroups: {
             raised: string[];

package/dist/utils/cva/merge.js

@@ -18,6 +18,7 @@
  *     `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
+ *   - `px|py-<step>-concentric` (join the core `px` / `py` groups)
  *     needing nothing here — a `rounded-<step>` publishes its radius to its children by itself
  *   - `duration-*` / `ease-*` motion tokens
  *   - the semantic spacing scale (`p-md`, `gap-layout-lg`, ...) registered on
@@ -32,6 +33,7 @@
  */
 import { createCn, validators } from 'cn/config';
 const isConcentric = (value) => /^(?:xs|sm|md|lg|xl|2xl|3xl|4xl)-concentric$/.test(value);
+const isSpacingConcentric = (value) => /^(?:micro|xs|sm|md|lg|xl|layout-sm|layout-md|layout-lg|layout-xl)-concentric$/.test(value);
 /** Semantic spacing values usable wherever Tailwind accepts a spacing value. */
 const SEMANTIC_SPACING = [
     'micro',
@@ -85,7 +87,10 @@ export const mergeConfig = {
             // and last-wins against `rounded-lg`.
             rounded: [{ rounded: [isConcentric] }],
             'rounded-t': [{ 'rounded-t': [isConcentric] }],
-            'rounded-b': [{ 'rounded-b': [isConcentric] }]
+            'rounded-b': [{ 'rounded-b': [isConcentric] }],
+            // `px-md-concentric` is a padding like any other, so it joins the core `px` / `py` groups.
+            px: [{ px: [isSpacingConcentric] }],
+            py: [{ py: [isSpacingConcentric] }]
         },
         conflictingClassGroups: {
             // `raised-*`, `lift-*` and `shadow-*` all own the `--tw-shadow` slot.

package/dist/utils/pointerDrag.js

@@ -225,7 +225,13 @@ export const createPointerDrag = (options) => {
         const offPointerMove = on(node, 'pointermove', move);
         const offPointerUp = on(node, 'pointerup', end);
         const offPointerCancel = on(node, 'pointercancel', abort);
-        const offLostPointerCapture = on(node, 'lostpointercapture', abort);
+        // Only the node's own capture counts. A touch is implicitly captured by the element under
+        // it, so when an `on-activate` session takes the capture over, that descendant's
+        // `lostpointercapture` bubbles up here and must not abort the drag it just started.
+        const offLostPointerCapture = on(node, 'lostpointercapture', (event) => {
+            if (event.target === node)
+                abort(event);
+        });
         const offTouchMove = options.preventTouchMove === false
             ? () => { }
             : on(node, 'touchmove', (event) => {

package/package.json

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