@adia-ai/web-components 0.7.10 → 0.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.7.10",
+  "version": "0.7.12",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
@@ -21,6 +21,10 @@
       "types": "./css-module.d.ts",
       "default": "./dist/web-components.min.css"
     },
+    "./css/sheet": {
+      "import": "./dist/web-components.sheet.js",
+      "default": "./dist/web-components.sheet.js"
+    },
     "./js/bundled": {
       "types": "./index.d.ts",
       "import": "./dist/web-components.min.js",

package/styles/README.md

@@ -296,7 +296,7 @@ styles/
 │   ├── text.css            #   [text-align] [weight] [color] [transform] [truncate]
 │   └── layout.css          #   [hidden] [nomargin] [grow]
 │
-├── themes.css              # CONTEXT: 8 named themes + light/dark scheme overrides ([data-theme])
+├── themes.css              # CONTEXT: 8 named themes + light/dark scheme overrides ([theme])
 ├── prose.css               # CONTEXT: opt-in article typography ([prose])
 ├── resets.css              # global RESET (box-sizing, scrollbar, focus, normalize)
 ├── fonts.css               # @font-face declarations + font-family primitives

package/styles/colors/parameters.css

@@ -4,7 +4,7 @@
    Using @property for typed, animatable custom properties.
    syntax: "<number>" enables CSS transitions/animations on hue,
    chroma, and lightness parameters. inherits: true allows
-   theme-ui and [data-theme] to override per-subtree.
+   theme-ui and [theme] to override per-subtree.
    ═══════════════════════════════════════════════════════════════ */
 
 /* ── System bounds ── */

package/styles/colors/primitives-accent.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Accent tints (05 lightest → 95 darkest) ── */
   --a-accent-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-05) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
   --a-accent-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-10) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));

package/styles/colors/primitives-brand.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Brand tints (05 lightest → 95 darkest) ── */
   --a-brand-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-brand-c-min) + var(--_cf-05) * (var(--a-brand-c-max) - var(--a-brand-c-min))) var(--a-brand-hue));
   --a-brand-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-brand-c-min) + var(--_cf-10) * (var(--a-brand-c-max) - var(--a-brand-c-min))) var(--a-brand-hue));

package/styles/colors/primitives-danger.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Danger tints (05 lightest → 95 darkest) ── */
   --a-danger-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-danger-c-min) + var(--_cf-05) * (var(--a-danger-c-max) - var(--a-danger-c-min))) var(--a-danger-hue));
   --a-danger-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-danger-c-min) + var(--_cf-10) * (var(--a-danger-c-max) - var(--a-danger-c-min))) var(--a-danger-hue));

package/styles/colors/primitives-info.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Info tints (05 lightest → 95 darkest) ── */
   --a-info-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-info-c-min) + var(--_cf-05) * (var(--a-info-c-max) - var(--a-info-c-min))) var(--a-info-hue));
   --a-info-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-info-c-min) + var(--_cf-10) * (var(--a-info-c-max) - var(--a-info-c-min))) var(--a-info-hue));

package/styles/colors/primitives-neutral.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Neutral tints (05 lightest → 95 darkest) ── */
   --a-neutral-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-neutral-c-min) + var(--_cf-05) * (var(--a-neutral-c-max) - var(--a-neutral-c-min))) var(--a-neutral-hue));
   --a-neutral-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-neutral-c-min) + var(--_cf-10) * (var(--a-neutral-c-max) - var(--a-neutral-c-min))) var(--a-neutral-hue));

package/styles/colors/primitives-success.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Success tints (05 lightest → 95 darkest) ── */
   --a-success-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-success-c-min) + var(--_cf-05) * (var(--a-success-c-max) - var(--a-success-c-min))) var(--a-success-hue));
   --a-success-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-success-c-min) + var(--_cf-10) * (var(--a-success-c-max) - var(--a-success-c-min))) var(--a-success-hue));

package/styles/colors/primitives-warning.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Warning tints (05 lightest → 95 darkest) ── */
   --a-warning-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-05) * var(--_cf-05) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-05) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
   --a-warning-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-10) * var(--_cf-10) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-10) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));

package/styles/colors/scrims.css

@@ -17,7 +17,7 @@
    Depends on: parameters.css
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
 
   /* ── Neutral ── */
   --a-neutral-0-tint-scrim:  oklch(var(--a-color-tint-scrim-l) calc(var(--a-neutral-c-min) + 0.0000 * (var(--a-neutral-c-max) - var(--a-neutral-c-min))) var(--a-neutral-hue) / var(--_af-0));

package/styles/colors/semantics/aliases.css

@@ -6,7 +6,7 @@
    base tier deliberately. The base tokens are defined upstream in core.css,
    so removing the override is non-breaking.) */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
      SCRIMS — Role aliases. Map onto the 7-step adaptive scrim-0..6
      scale in scrims.css. Per-family semantic tiers (weak / default /

package/styles/colors/semantics/buckets.css

@@ -3,7 +3,7 @@
    within ONE family for heatmap/choropleth/treemap intensity.
    Split out of semantics.css (v0.6.48 reorg, ADR-0035). */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
      BUCKETS — sequential 5-step ramp per family for data-vis consumers
 

package/styles/colors/semantics/core.css

@@ -5,7 +5,7 @@
    the semantics.css barrel so the status-compat overrides in aliases.css
    (imported last) still win, exactly as in the original source order. */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
 
   /* ══════════════════════════════════════════════════════════════
      CANVAS — Neutral text, borders, surfaces

package/styles/colors/semantics/data-viz.css

@@ -48,7 +48,7 @@
 @property --a-data-8-hue    { syntax: "<number>"; inherits: true; initial-value: 313; }
 @property --a-data-9-hue    { syntax: "<number>"; inherits: true; initial-value: 335; }
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
      DATA PALETTE — 10 categorical series colors for charts
 

package/styles/colors/semantics/features.css

@@ -4,7 +4,7 @@
    backgrounds). Contiguous in the original source; split out of
    semantics.css (v0.6.48 reorg, ADR-0035). */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
      FOCUS — canonical ring recipe shared by all form controls
      ══════════════════════════════════════════════════════════════

package/styles/colors/surfaces.css

@@ -5,7 +5,7 @@
    Neutral role aliases (--a-scrim-dialog etc.) live in semantics.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
 
   /* ══════════════════════════════════════════════════════════════
      Canvas — neutral surface, semantic alias of --a-neutral-{0-6}

package/styles/components.css

@@ -129,3 +129,4 @@
 @import "../components/time-picker/time-picker.css";
 @import "../components/integration-card/integration-card.css";
 @import "../components/tags-input/tags-input.css";
+@import "../components/theme-provider/theme-provider.css";

package/styles/design-tokens-export.js

@@ -27,7 +27,7 @@ function buildCssVarMap() {
 // selectors like `[color="info"]` conditionally override --a-fg etc. and
 // must not leak into the default-state token map.
 function isAuthoritativeSelector(sel) {
-  return /(^|,)\s*(:root|theme-ui|\[data-theme\])\b/i.test(sel);
+  return /(^|,)\s*(:root|theme-ui|\[theme\])\b/i.test(sel);
 }
 function walkRules(rules, map) {
   for (const rule of rules) {

package/styles/host.css

@@ -20,7 +20,7 @@
    without a specificity fight.
 
    ── Opt-in add-ons (link separately when wanted) ─────────────────────
-     styles/themes.css   the [data-theme] preset switcher      (@layer context)
+     styles/themes.css   the [theme] preset switcher      (@layer context)
      styles/prose.css    the [prose] content context           (@layer context)
      styles/verse.css    the [verse] compact register          (opt-in density)
 

package/styles/prose.css

@@ -11,7 +11,7 @@
    ═══════════════════════════════════════════════════════════════ */
 
 /* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
-   context sits above `utilities`+`components`, so a [data-theme]/[prose] scope
+   context sits above `utilities`+`components`, so a [theme]/[prose] scope
    re-skins everything within it. The @layer order is declared by the co-loaded
    barrel (styles/index.css); this file only contributes to `context`. */
 @layer context {

package/styles/themes.css

@@ -1,17 +1,17 @@
 /* ═══════════════════════════════════════════════════════════════
-   Themes — CSS-only presets via [data-theme] attribute.
+   Themes — CSS-only presets via [theme] attribute.
    Zero JavaScript. Apply to any container element.
 
    Each theme overrides @property knobs: hues, chroma, radius, spacing.
    Downstream tokens (primitives, surfaces, semantics) recompute automatically.
 
    Usage:
-     <div data-theme="ocean">...ocean themed...</div>
-     <html data-theme="slate">...entire app...</html>
+     <div theme="ocean">...ocean themed...</div>
+     <html theme="slate">...entire app...</html>
    ═══════════════════════════════════════════════════════════════ */
 
 /* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
-   context sits above `utilities`+`components`, so a [data-theme]/[prose] scope
+   context sits above `utilities`+`components`, so a [theme]/[prose] scope
    re-skins everything within it. The @layer order is declared by the co-loaded
    barrel (styles/index.css); this file only contributes to `context`. */
 @layer context {
@@ -30,7 +30,7 @@
 
 /* ── Default (cool indigo, balanced) ── */
 
-[data-theme="default"] {
+[theme="default"] {
   --a-neutral-hue:   225;
   --a-neutral-c-min: 0.010;
   --a-brand-hue:     225;
@@ -45,7 +45,7 @@
 }
 
 /* ── Ocean (cool teal, vivid, rounded, relaxed) ── */
-[data-theme="ocean"] {
+[theme="ocean"] {
   --a-neutral-hue:   210;
   --a-neutral-c-min: 0.020;
   --a-brand-hue:     200;
@@ -61,7 +61,7 @@
 }
 
 /* ── Forest (earthy green, muted, compact) ── */
-[data-theme="forest"] {
+[theme="forest"] {
   --a-neutral-hue:   150;
   --a-neutral-c-min: 0.018;
   --a-neutral-c-max: 0.030;
@@ -78,7 +78,7 @@
 }
 
 /* ── Sunset (warm amber, vivid, sharp) ── */
-[data-theme="sunset"] {
+[theme="sunset"] {
   --a-neutral-hue:   30;
   --a-neutral-c-min: 0.022;
   --a-brand-hue:     20;
@@ -94,7 +94,7 @@
 }
 
 /* ── Lavender (soft purple, low chroma, pill radius) ── */
-[data-theme="lavender"] {
+[theme="lavender"] {
   --a-neutral-hue:   280;
   --a-neutral-c-min: 0.018;
   --a-brand-hue:     270;
@@ -110,7 +110,7 @@
 }
 
 /* ── Rose (warm pink, medium chroma) ── */
-[data-theme="rose"] {
+[theme="rose"] {
   --a-neutral-hue:   350;
   --a-neutral-c-min: 0.016;
   --a-brand-hue:     340;
@@ -126,7 +126,7 @@
 }
 
 /* ── Slate (desaturated grey-blue, sharp, tight) ── */
-[data-theme="slate"] {
+[theme="slate"] {
   --a-neutral-hue:   220;
   --a-neutral-c-min: 0.008;
   --a-neutral-c-max: 0.015;
@@ -144,7 +144,7 @@
 }
 
 /* ── Midnight (deep indigo, high chroma, rounded, spacious) ── */
-[data-theme="midnight"] {
+[theme="midnight"] {
   --a-neutral-hue:   250;
   --a-neutral-c-min: 0.020;
   --a-brand-hue:     240;

package/styles/verse.css

@@ -50,7 +50,7 @@
     /* ── Radius — verse register: tighter bounds (max 16px). Re-declares the
        clamps so they resolve verse's min/max (base clamps compute at :root). ── */
     --a-radius-min: 0.25rem; /* 4px */
-    --a-radius-max: 0.75rem;    /* 16px */
+    --a-radius-max: 0.75rem;    /* 12px */
     --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
     --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
     --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));

package/traits/resizable/resizable.js

@@ -1,7 +1,22 @@
 import { defineTrait } from '../define.js';
 
-const EDGE_SIZE = 8;
-const EDGES = ['top', 'right', 'bottom', 'left'];
+const EDGE = 8;    // edge hit-zone thickness
+const CORNER = 14; // corner hit-zone (square, sits on top of the edges it overlaps)
+
+// Edges resize one axis; corners resize both (x/y at once). `dw`/`dh` are the sign
+// applied to the pointer delta (dx/dy): +1 grows from this side, -1 grows from the
+// opposite (anchored) side, 0 leaves that axis untouched. Corners are listed LAST so
+// they're appended after the edges and win the hit-test where they overlap.
+const HANDLES = [
+  { name: 'top',          dw: 0,  dh: -1, cursor: 'ns-resize',   geo: { top: '0', left: '0', right: '0', height: `${EDGE}px` } },
+  { name: 'right',        dw: 1,  dh: 0,  cursor: 'ew-resize',   geo: { top: '0', right: '0', bottom: '0', width: `${EDGE}px` } },
+  { name: 'bottom',       dw: 0,  dh: 1,  cursor: 'ns-resize',   geo: { bottom: '0', left: '0', right: '0', height: `${EDGE}px` } },
+  { name: 'left',         dw: -1, dh: 0,  cursor: 'ew-resize',   geo: { top: '0', left: '0', bottom: '0', width: `${EDGE}px` } },
+  { name: 'top-left',     dw: -1, dh: -1, cursor: 'nwse-resize', geo: { top: '0', left: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'top-right',    dw: 1,  dh: -1, cursor: 'nesw-resize', geo: { top: '0', right: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'bottom-right', dw: 1,  dh: 1,  cursor: 'nwse-resize', geo: { bottom: '0', right: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+  { name: 'bottom-left',  dw: -1, dh: 1,  cursor: 'nesw-resize', geo: { bottom: '0', left: '0', width: `${CORNER}px`, height: `${CORNER}px` } },
+];
 
 export const resizable = defineTrait({
   name: 'resizable',
@@ -12,70 +27,68 @@ export const resizable = defineTrait({
   config: [],
   setup({ host }) {
     let resizing = false;
-    let activeEdge = null;
+    let active = null;
     let startX = 0;
     let startY = 0;
     let startWidth = 0;
     let startHeight = 0;
-    let startLeft = 0;
-    let startTop = 0;
+    let centerX = 0;
+    let centerY = 0;
+    let symmetric = false;
     const handles = [];
 
-    // Ensure host is positioned
-    const pos = getComputedStyle(host).position;
-    if (pos === 'static') {
+    // Ensure host is positioned so the absolute hit-zones anchor to it.
+    if (getComputedStyle(host).position === 'static') {
       host.style.position = 'relative';
     }
 
-    for (const edge of EDGES) {
+    for (const h of HANDLES) {
       const handle = document.createElement('div');
-      handle.dataset.resizableHandle = edge;
-      Object.assign(handle.style, {
-        position: 'absolute',
-        zIndex: '9999',
-        ...(edge === 'top' && { top: '0', left: '0', right: '0', height: `${EDGE_SIZE}px`, cursor: 'ns-resize' }),
-        ...(edge === 'bottom' && { bottom: '0', left: '0', right: '0', height: `${EDGE_SIZE}px`, cursor: 'ns-resize' }),
-        ...(edge === 'left' && { top: '0', bottom: '0', left: '0', width: `${EDGE_SIZE}px`, cursor: 'ew-resize' }),
-        ...(edge === 'right' && { top: '0', bottom: '0', right: '0', width: `${EDGE_SIZE}px`, cursor: 'ew-resize' }),
-      });
+      handle.dataset.resizableHandle = h.name;
+      Object.assign(handle.style, { position: 'absolute', zIndex: '9999', cursor: h.cursor, ...h.geo });
 
       handle.addEventListener('pointerdown', (e) => {
         e.stopPropagation();
         resizing = true;
-        activeEdge = edge;
+        active = h.name;
         startX = e.clientX;
         startY = e.clientY;
         const rect = host.getBoundingClientRect();
         startWidth = rect.width;
         startHeight = rect.height;
-        startLeft = rect.left;
-        startTop = rect.top;
+        centerX = rect.left + rect.width / 2;
+        centerY = rect.top + rect.height / 2;
+        // A transform-positioned host re-centers itself as it resizes (e.g.
+        // translate(-50%,-50%) centering), so resize SYMMETRICALLY from the center
+        // and the dragged edge/corner stays under the cursor. A static/anchored host
+        // instead grows from the opposite (fixed) edge.
+        symmetric = getComputedStyle(host).transform !== 'none';
 
         handle.setPointerCapture(e.pointerId);
         host.setAttribute('data-resizable-resizing', '');
-        host.setAttribute('data-resizable-edge', edge);
+        host.setAttribute('data-resizable-edge', h.name);
       });
 
       handle.addEventListener('pointermove', (e) => {
-        if (!resizing || activeEdge !== edge) return;
-        const dx = e.clientX - startX;
-        const dy = e.clientY - startY;
-
-        if (edge === 'right') {
-          host.style.width = `${Math.max(0, startWidth + dx)}px`;
-        } else if (edge === 'left') {
-          host.style.width = `${Math.max(0, startWidth - dx)}px`;
-        } else if (edge === 'bottom') {
-          host.style.height = `${Math.max(0, startHeight + dy)}px`;
-        } else if (edge === 'top') {
-          host.style.height = `${Math.max(0, startHeight - dy)}px`;
+        if (!resizing || active !== h.name) return;
+        if (symmetric) {
+          // Dragged edge/corner tracks the cursor; the host grows from its center
+          // (both sides) so the re-centering transform keeps it in place.
+          if (h.dw) host.style.width = `${Math.max(0, 2 * h.dw * (e.clientX - centerX))}px`;
+          if (h.dh) host.style.height = `${Math.max(0, 2 * h.dh * (e.clientY - centerY))}px`;
+        } else {
+          // Anchored: the opposite edge stays fixed; the dragged edge grows from it.
+          const dx = e.clientX - startX;
+          const dy = e.clientY - startY;
+          if (h.dw) host.style.width = `${Math.max(0, startWidth + h.dw * dx)}px`;
+          if (h.dh) host.style.height = `${Math.max(0, startHeight + h.dh * dy)}px`;
         }
       });
 
       handle.addEventListener('pointerup', () => {
-        if (!resizing || activeEdge !== edge) return;
+        if (!resizing || active !== h.name) return;
         resizing = false;
-        activeEdge = null;
+        active = null;
         host.removeAttribute('data-resizable-resizing');
         host.removeAttribute('data-resizable-edge');
 

package/traits/resizable/resizable.test.js

@@ -17,4 +17,23 @@ describe('resizable', () => {
     expect(host.hasAttribute('data-resizable-resizing')).toBe(false);
     expect(host.hasAttribute('data-resizable-edge')).toBe(false);
   });
+
+  it('creates 8 hit-zones — 4 edges + 4 corners (resize in x, y, and x/y)', () => {
+    const host = mountHost();
+    connectTrait(resizable, host);
+    const names = [...host.querySelectorAll('[data-resizable-handle]')]
+      .map((el) => el.dataset.resizableHandle);
+    expect(names).toHaveLength(8);
+    expect(names).toEqual(expect.arrayContaining([
+      'top', 'right', 'bottom', 'left',
+      'top-left', 'top-right', 'bottom-right', 'bottom-left',
+    ]));
+  });
+
+  it('disconnect removes all hit-zones', () => {
+    const host = mountHost();
+    const inst = connectTrait(resizable, host);
+    inst.disconnect(host);
+    expect(host.querySelectorAll('[data-resizable-handle]')).toHaveLength(0);
+  });
 });