@adia-ai/web-components 0.8.40 → 0.8.41

package/traits/_catalog.json

@@ -28,7 +28,8 @@
         "data-error-shake-amplitude",
         "data-error-shake-duration",
         "data-error-shake-trigger"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "fade-presence",
@@ -42,7 +43,8 @@
         "fade-in-done",
         "fade-out-done"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "ripple",
@@ -52,7 +54,8 @@
         "data-ripple-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "scale-press",
@@ -62,7 +65,8 @@
         "data-scale-press-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "spring-animate",
@@ -75,6 +79,9 @@
       "config": [
         "data-spring-stiffness",
         "data-spring-damping"
+      ],
+      "prefixes": [
+        "spring"
       ]
     },
     {
@@ -90,7 +97,8 @@
       "config": [
         "data-success-checkmark-position",
         "data-success-checkmark-trigger"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "tilt-hover",
@@ -100,7 +108,8 @@
         "data-tilt-hover-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "announcer",
@@ -117,6 +126,9 @@
         "data-announce-message",
         "data-announce-priority",
         "data-announce-throttle"
+      ],
+      "prefixes": [
+        "announce"
       ]
     },
     {
@@ -129,6 +141,9 @@
       "events": [],
       "config": [
         "data-pulse-interval"
+      ],
+      "prefixes": [
+        "pulse"
       ]
     },
     {
@@ -148,6 +163,9 @@
         "data-count-suffix",
         "data-count-decimals",
         "data-count-locale"
+      ],
+      "prefixes": [
+        "count"
       ]
     },
     {
@@ -160,6 +178,9 @@
       "events": [],
       "config": [
         "data-haptic-pattern"
+      ],
+      "prefixes": [
+        "haptic"
       ]
     },
     {
@@ -172,6 +193,9 @@
       "events": [],
       "config": [
         "data-sound-type"
+      ],
+      "prefixes": [
+        "sound"
       ]
     },
     {
@@ -186,7 +210,8 @@
       ],
       "config": [
         "data-typewriter-speed"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "dirty-state",
@@ -197,7 +222,8 @@
         "data-dirty-state-pristine"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "input-mask",
@@ -213,6 +239,9 @@
       "config": [
         "data-mask-pattern",
         "data-mask-strip-on-commit"
+      ],
+      "prefixes": [
+        "mask"
       ]
     },
     {
@@ -225,7 +254,8 @@
       "events": [
         "reset-applied"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "validation",
@@ -241,6 +271,9 @@
       ],
       "config": [
         "data-validate"
+      ],
+      "prefixes": [
+        "validate"
       ]
     },
     {
@@ -251,7 +284,8 @@
         "data-active-state-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "droppable",
@@ -267,7 +301,8 @@
         "dnd-drop-leave",
         "dnd-drop-receive"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "droppable-collection",
@@ -280,7 +315,8 @@
       "events": [
         "dnd-collection-drop"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "focusable",
@@ -290,7 +326,8 @@
         "data-focusable-keyboard"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "hoverable",
@@ -300,7 +337,8 @@
         "data-hoverable-hover"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "long-press",
@@ -320,7 +358,8 @@
         "data-long-press-duration",
         "data-long-press-tolerance",
         "data-long-press-progress-interval"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "pressable",
@@ -332,7 +371,8 @@
       "events": [
         "press"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "confetti",
@@ -342,7 +382,8 @@
         "data-confetti-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "confetti-burst",
@@ -354,7 +395,8 @@
       "events": [
         "confetti-burst-done"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "magnetic-hover",
@@ -364,7 +406,8 @@
         "data-magnetic-hover-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "arrow-grid-nav",
@@ -383,6 +426,9 @@
       "config": [
         "data-grid-columns",
         "data-grid-mode"
+      ],
+      "prefixes": [
+        "grid"
       ]
     },
     {
@@ -397,7 +443,8 @@
       ],
       "config": [
         "data-focus-restore-on-mount"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "focus-trap",
@@ -409,7 +456,8 @@
       "events": [
         "focus-trap-escape"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "hotkey",
@@ -422,7 +470,8 @@
       "config": [
         "data-hotkey",
         "data-hotkey-global"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "keyboard-nav",
@@ -439,7 +488,8 @@
         "nav-home",
         "nav-end"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "keyboard-reorderable",
@@ -455,7 +505,8 @@
         "dnd-drop",
         "dnd-drop-cancel"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "roving-tabindex",
@@ -463,7 +514,8 @@
       "description": "Focus management within composite widgets",
       "attributes": [],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "typeahead",
@@ -475,7 +527,8 @@
       "events": [
         "typeahead-match"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "anchor-positioning",
@@ -493,6 +546,9 @@
         "data-anchor",
         "data-anchor-placement",
         "data-anchor-gap"
+      ],
+      "prefixes": [
+        "anchor"
       ]
     },
     {
@@ -509,6 +565,9 @@
       ],
       "config": [
         "data-intersection-threshold"
+      ],
+      "prefixes": [
+        "intersection"
       ]
     },
     {
@@ -521,7 +580,8 @@
       "events": [],
       "config": [
         "data-portal-target"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "resize-observer",
@@ -535,7 +595,10 @@
       "events": [
         "element-resize"
       ],
-      "config": []
+      "config": [],
+      "prefixes": [
+        "resize"
+      ]
     },
     {
       "name": "scroll-lock",
@@ -545,7 +608,8 @@
         "data-scroll-lock-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "scroll-progress",
@@ -561,6 +625,9 @@
       "config": [
         "data-scroll-progress-mode",
         "data-scroll-container"
+      ],
+      "prefixes": [
+        "scroll-container"
       ]
     },
     {
@@ -571,7 +638,8 @@
         "data-drag-ghost-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "draggable",
@@ -583,7 +651,8 @@
       "events": [
         "drag-end"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "draggable-list-item",
@@ -601,7 +670,8 @@
       ],
       "config": [
         "data-draggable-list-item-ghost"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "drop-target",
@@ -620,7 +690,8 @@
       ],
       "config": [
         "data-drop-target-accepts"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "inertia-drag",
@@ -632,7 +703,8 @@
       "events": [
         "drag-end"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "layout-animation",
@@ -648,6 +720,9 @@
         "data-layout-animate-duration",
         "data-layout-animate-easing",
         "data-layout-animate-trigger"
+      ],
+      "prefixes": [
+        "layout-animate"
       ]
     },
     {
@@ -661,7 +736,8 @@
       "events": [
         "resize-end"
       ],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "snap-to-grid",
@@ -673,6 +749,9 @@
       "events": [],
       "config": [
         "data-snap-grid"
+      ],
+      "prefixes": [
+        "snap-grid"
       ]
     },
     {
@@ -687,7 +766,8 @@
       ],
       "config": [
         "data-tossable-bounds"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "view-transition",
@@ -704,7 +784,8 @@
         "data-view-transition-name",
         "data-view-transition-duration",
         "data-view-transition-easing"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "glow-focus",
@@ -714,7 +795,8 @@
         "data-glow-focus-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "gradient-shift",
@@ -724,7 +806,8 @@
         "data-gradient-shift-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     },
     {
       "name": "noise-texture",
@@ -736,6 +819,9 @@
       "events": [],
       "config": [
         "data-noise-strength"
+      ],
+      "prefixes": [
+        "noise"
       ]
     },
     {
@@ -748,7 +834,8 @@
       "events": [],
       "config": [
         "data-parallax-strength"
-      ]
+      ],
+      "prefixes": []
     },
     {
       "name": "shimmer-loading",
@@ -758,7 +845,8 @@
         "data-shimmer-loading-active"
       ],
       "events": [],
-      "config": []
+      "config": [],
+      "prefixes": []
     }
   ]
 }

package/traits/anchor-positioning/anchor-positioning.js

@@ -45,6 +45,7 @@ export const anchorPositioning = defineTrait({
   ],
   events: ['anchor-placed'],
   config: ['data-anchor', 'data-anchor-placement', 'data-anchor-gap'],
+  prefixes: ['anchor'], // ADR-0060 — grandfathered: config uses data-anchor(-*), not data-anchor-positioning-*
   setup({ host }) {
     const anchorSel = host.getAttribute('data-anchor');
     const placement = host.getAttribute('data-anchor-placement') || 'bottom';

package/traits/announcer/announcer.js

@@ -50,6 +50,7 @@ export const announcer = defineTrait({
     'data-announce-priority',
     'data-announce-throttle',
   ],
+  prefixes: ['announce'], // ADR-0060 — grandfathered: config uses data-announce-*, not data-announcer-*
   setup({ host }) {
     const eventName = host.getAttribute('data-announce-on');
     if (!eventName) {

package/traits/arrow-grid-nav/arrow-grid-nav.js

@@ -27,6 +27,7 @@ export const arrowGridNav = defineTrait({
   attributes: ['data-arrow-grid-nav-active', 'data-grid-active-row', 'data-grid-active-col'],
   events: ['grid-activate', 'grid-edge', 'grid-cell-change'],
   config: ['data-grid-columns', 'data-grid-mode'],
+  prefixes: ['grid'], // ADR-0060 — grandfathered; grazes chart/heatmap's bare `data-grid` anatomy marker (burn-down, not a fail)
   setup({ host }) {
     let activeRow = 0;
     let activeCol = 0;

package/traits/attention-pulse/attention-pulse.js

@@ -8,6 +8,7 @@ export const attentionPulse = defineTrait({
   attributes: ['data-attention-pulse-active'],
   events: [],
   config: ['data-pulse-interval'],
+  prefixes: ['pulse'], // ADR-0060 — grandfathered: data-pulse-interval predates data-attention-pulse-*
   setup({ host }) {
     // Reduced-motion: mark active but suppress the pulse animation.
     if (prefersReducedMotion()) {

package/traits/count-up/count-up.js

@@ -7,6 +7,7 @@ export const countUp = defineTrait({
   description: 'Animated numeric transitions',
   attributes: ['data-count-up-active'],
   events: ['count-up-done'],
+  prefixes: ['count'], // ADR-0060 — grandfathered: config uses data-count-*, not data-count-up-*
   config: [
     'data-count-up-target',
     'data-count-duration',

package/traits/define.js

@@ -31,10 +31,84 @@
  *   class MyButton extends UIElement {
  *     static traits = [pressable];
  *   }
+ *
+ * ADR-0060 — the `data-*` namespace-ownership gate. Every trait owns
+ * `data-{name}` (exact) and `data-{name}-*` (family) by default. A trait
+ * whose `attributes`/`config` use any other prefix must declare it via the
+ * optional `prefixes: string[]` field (bare words, no `data-` and no
+ * trailing hyphen — e.g. `prefixes: ['count']` grants `data-count` +
+ * `data-count-*`). Two checks run at registration time:
+ *
+ *   1. Ownership — every declared `attributes`/`config` name must fall
+ *      under the trait's own name or one of its registered prefixes, or
+ *      `defineTrait()` throws.
+ *   2. Exclusivity — a registered prefix can never overlap another trait's
+ *      registered prefix, nor another trait's own name (checked against
+ *      whatever is already in the registry at call time; the trait catalog
+ *      build imports every trait file, so the check achieves full pairwise
+ *      coverage once `build:traits`/`verify:traits` runs). Two *bare* trait
+ *      names naturally being prefixes of each other (`droppable` /
+ *      `droppable-collection`, `confetti` / `confetti-burst`, `draggable` /
+ *      `draggable-list-item`) is not a claim conflict — neither side
+ *      registered a prefix — so it is not checked.
  */
 
 const registry = new Map();
 
+// name === `data-${root}` or name starts with `data-${root}-`.
+function ownsName(root, name) {
+  return name === `data-${root}` || name.startsWith(`data-${root}-`);
+}
+
+// Two "roots" (a bare trait name or a registered prefix) collide if they're
+// equal, or one is a hyphen-bounded prefix of the other — either would let
+// two different data-* families claim the same attribute name.
+function rootsOverlap(a, b) {
+  return a === b || a.startsWith(`${b}-`) || b.startsWith(`${a}-`);
+}
+
+function assertOwnership(spec) {
+  const roots = [spec.name, ...(spec.prefixes || [])];
+  const unowned = [...(spec.attributes || []), ...(spec.config || [])]
+    .filter((name) => !roots.some((root) => ownsName(root, name)));
+  if (unowned.length > 0) {
+    throw new Error(
+      `Trait "${spec.name}" declares attribute(s) outside its owned data-* namespace: ${unowned.join(', ')}. ` +
+      `A trait owns "data-${spec.name}" / "data-${spec.name}-*" by default; register any other prefix via ` +
+      `defineTrait({ ..., prefixes: [...] }) (ADR-0060) or rename the attribute.`
+    );
+  }
+}
+
+function assertPrefixExclusivity(spec) {
+  const myPrefixes = spec.prefixes || [];
+  for (const [otherName, otherFactory] of registry) {
+    if (otherName === spec.name) continue;
+    const other = otherFactory.schema;
+    const otherRoots = [other.name, ...(other.prefixes || [])];
+    for (const p of myPrefixes) {
+      for (const otherRoot of otherRoots) {
+        if (rootsOverlap(p, otherRoot)) {
+          throw new Error(
+            `Trait "${spec.name}"'s registered prefix "${p}" overlaps trait "${other.name}"'s owned namespace ` +
+            `("${otherRoot}"). Registered prefixes must be globally exclusive across the trait registry (ADR-0060).`
+          );
+        }
+      }
+    }
+    // The reverse direction: an already-registered trait's own registered
+    // prefix must not overlap this new trait's bare name either.
+    for (const otherPrefix of other.prefixes || []) {
+      if (rootsOverlap(otherPrefix, spec.name)) {
+        throw new Error(
+          `Trait "${spec.name}"'s name overlaps trait "${other.name}"'s registered prefix "${otherPrefix}". ` +
+          `Registered prefixes must be globally exclusive across the trait registry (ADR-0060).`
+        );
+      }
+    }
+  }
+}
+
 const KNOWN_CATEGORIES = new Set([
   'input-interaction',
   'keyboard-navigation',
@@ -56,6 +130,9 @@ export function defineTrait(spec) {
   }
   if (!spec.description) throw new Error(`Trait "${spec.name}" requires a description`);
 
+  assertOwnership(spec);
+  assertPrefixExclusivity(spec);
+
   const schema = Object.freeze({
     name: spec.name,
     category: spec.category,
@@ -63,6 +140,7 @@ export function defineTrait(spec) {
     attributes: Object.freeze(spec.attributes || []),
     events: Object.freeze(spec.events || []),
     config: Object.freeze(spec.config || []),
+    prefixes: Object.freeze(spec.prefixes || []),
   });
 
   function factory() {

package/traits/focus-restore/focus-restore.js

@@ -1,4 +1,5 @@
 import { defineTrait } from '../define.js';
+import { isElement } from '../../core/dom.js';
 
 /**
  * `focus-restore` — capture the previously-focused element on connect,
@@ -35,7 +36,7 @@ const FOCUSABLE_SELECTOR =
   'a[href], [role="button"][tabindex], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]';
 
 function isFocusable(el) {
-  if (!el || !(el instanceof Element)) return false;
+  if (!el || !isElement(el)) return false;
   if (typeof el.focus !== 'function') return false;
   if (el.hasAttribute('disabled')) return false;
   // Element must still be connected to the document for focus to land.