@adia-ai/web-components 0.3.0 → 0.3.2

package/components/card/card.js

@@ -24,7 +24,7 @@
  */
 
 import { UIElement } from '../../core/element.js';
-import { draggable } from '../../traits/draggable.js';
+import { draggable } from '../../traits/draggable/draggable.js';
 
 class UICard extends UIElement {
   static properties = {

package/components/nav-group/nav-group.css

@@ -9,6 +9,7 @@
     --nav-group-font-size:     var(--a-ui-size);
     --nav-group-font-size-sm:  var(--a-ui-sm);
     --nav-group-font-size-lg:  var(--a-ui-lg);
+    --nav-group-font-weight:   var(--a-font-weight-normal);
     --nav-group-fg:            var(--a-fg);
     --nav-group-fg-hover:      var(--a-fg-strong);
     --nav-group-fg-muted:      var(--a-fg-muted);
@@ -27,6 +28,7 @@
     flex-direction: column;
     gap: var(--nav-gap);
     position: relative;
+    font-weight: var(--nav-group-text-weight);
   }
 
   /* Continuous indent rail */

package/components/nav-item/nav-item.css

@@ -15,7 +15,6 @@ nav-item-ui:hover [slot="icon"] {
 nav-item-ui[selected] {
   background: var(--nav-item-bg-selected);
   color: var(--nav-item-fg-selected);
-  font-weight: var(--nav-item-selected-weight);
 }
 nav-item-ui[selected] [slot="icon"] {
   color: var(--nav-item-icon-fg-selected);
@@ -40,6 +39,7 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     --nav-item-font-size:       var(--a-ui-size);
     --nav-item-font-size-sm:    var(--a-ui-sm);
     --nav-item-font-size-lg:    var(--a-ui-lg);
+    --nav-item-font-weight:     var(--a-font-weight-normal);
     --nav-item-fg:              var(--a-ui-text-subtle);
     --nav-item-fg-hover:        var(--a-ui-text-hover);
     --nav-item-fg-selected:     var(--a-ui-text-selected);
@@ -68,6 +68,7 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
       background var(--nav-duration-fast) var(--nav-easing),
       color var(--nav-duration-fast) var(--nav-easing);
     outline: none;
+    font-weight: var(--nav-item-font-weight);
   }
 
   :scope:focus-visible {

package/components/row/row.js

@@ -6,7 +6,7 @@
  */
 
 import { UIElement } from '../../core/element.js';
-import { draggable } from '../../traits/draggable.js';
+import { draggable } from '../../traits/draggable/draggable.js';
 
 class UIRow extends UIElement {
   static properties = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "exports": {
@@ -48,4 +48,4 @@
     "url": "git+https://github.com/adiahealth/gen-ui-kit.git",
     "directory": "packages/web-components"
   }
-}
+}

package/styles/README.md

@@ -0,0 +1,286 @@
+# AdiaUI Token Surface
+
+Consumable design-token reference for component authors.
+
+> **Rule of thumb:** Components consume **L3 semantic aliases** (`--a-fg`, `--a-bg-hover`, `--a-accent`). They never reference L1 primitives (`--a-neutral-50`) directly. The L3 layer maps to L2 families (`--a-canvas-text`), which map to L1 primitives (`--a-neutral-50`).
+
+---
+
+## Token layers
+
+| Layer | Files | When to use |
+|-------|-------|-------------|
+| **L1 — Primitives** | `colors/parameters.css`, `colors/primitives.css` | Token system authors only. OKLCH base values, hue ramps, neutral scales. |
+| **L2 — Families** | `colors/semantics.css` | Component authors building *new* semantic aliases not yet in L3. Maps primitives to semantic meaning (`--a-canvas-text`, `--a-danger-muted`). |
+| **L3 — Semantic aliases** | `colors/semantics.css` (short-alias section) | **All component CSS.** The stable public API: `--a-fg`, `--a-bg`, `--a-accent`, `--a-border-subtle`. |
+| **Dynamic / Theme** | `themes.css`, `colors/surfaces.css` | Theme authors. Per-theme hue shifts, density, radius overrides. |
+| **Typography** | `typography.css` | Component authors for font-size, weight, leading, tracking. |
+| **Spacing** | `tokens.css` | Component authors for padding, margin, gap. |
+| **Chrome** | `tokens.css` | Shell / layout authors for chrome dimensions (header/footer/toolbar heights). |
+| **Shadows** | `tokens.css` | Elevation authors. `--a-shadow-sm/md/lg`. |
+| **Timing** | `tokens.css` | Motion authors. `--a-duration`, `--a-easing`. |
+
+---
+
+## L3 Color API (the tokens components consume)
+
+### Neutral surfaces (`--a-canvas-*` → `--a-bg-*` / `--a-fg-*`)
+
+| Token | Purpose | Example use |
+|-------|---------|-------------|
+| `--a-bg` | Default surface (page bg, panel bg) | `body { background: var(--a-bg); }` |
+| `--a-bg-subtle` | Alternating rows, card backgrounds | `.card { background: var(--a-bg-subtle); }` |
+| `--a-bg-muted` | Disabled / inactive surfaces | `[disabled] { background: var(--a-bg-muted); }` |
+| `--a-bg-strong` | Active track, selected chips | `.track-active { background: var(--a-bg-strong); }` |
+| `--a-bg-hover` | Hover state backgrounds | `:hover { background: var(--a-bg-hover); }` |
+| `--a-bg-active` | Pressed / active state | `:active { background: var(--a-bg-active); }` |
+| `--a-bg-selected` | Selected item background | `[aria-selected="true"] { background: var(--a-bg-selected); }` |
+| `--a-bg-disabled` | Disabled state background | `[disabled] { background: var(--a-bg-disabled); }` |
+| `--a-bg-invalid` | Invalid / error state background | `[aria-invalid="true"] { background: var(--a-bg-invalid); }` |
+| `--a-bg-scrim` | Modal overlay backdrop | `.modal-overlay { background: var(--a-bg-scrim); }` |
+| `--a-fg` | Default text | `body { color: var(--a-fg); }` |
+| `--a-fg-subtle` | Secondary text, descriptions | `.description { color: var(--a-fg-subtle); }` |
+| `--a-fg-muted` | Placeholder text, timestamps | `.timestamp { color: var(--a-fg-muted); }` |
+| `--a-fg-strong` | Headings, emphasized text | `h1 { color: var(--a-fg-strong); }` |
+| `--a-fg-inverse` | Text on dark/brand buttons | `.button-primary { color: var(--a-fg-inverse); }` |
+
+### Borders
+
+| Token | Purpose |
+|-------|---------|
+| `--a-border-subtle` | Dividers, hairlines |
+| `--a-border` | Default borders, input outlines |
+| `--a-border-strong` | Focus rings, active borders |
+| `--a-border-hover` | Hover state borders |
+| `--a-border-active` | Active/pressed borders |
+| `--a-border-selected` | Selected item borders |
+| `--a-border-invalid` | Error state borders |
+| `--a-border-disabled` | Disabled borders |
+
+### Accent (interactive)
+
+| Token | Purpose |
+|-------|---------|
+| `--a-accent` | Primary accent color (buttons, links, active states) |
+| `--a-accent-hover` | Accent hover state |
+| `--a-accent-active` | Accent pressed state |
+| `--a-accent-muted` | Subtle accent (tinted backgrounds) |
+| `--a-accent-bg` | Accent-filled surface |
+| `--a-accent-bg-hover` | Accent-filled hover |
+| `--a-accent-bg-active` | Accent-filled active |
+| `--a-accent-fg` | Text on accent surfaces |
+| `--a-accent-border` | Accent borders |
+
+### Brand
+
+Same matrix as accent (`--a-brand`, `--a-brand-hover`, `--a-brand-bg`, `--a-brand-fg`, etc.) for brand-color surfaces. Used in marketing contexts, headers, hero sections.
+
+### Status colors
+
+| Token family | Use case |
+|--------------|----------|
+| `--a-danger-*` | Errors, destructive actions, deletions |
+| `--a-warning-*` | Warnings, caution states |
+| `--a-success-*` | Success confirmations, completed states |
+| `--a-info-*` | Informational highlights, tips |
+
+Each status family mirrors the accent matrix: `-bg`, `-bg-hover`, `-bg-active`, `-fg`, `-border`, `-muted`, etc.
+
+### Data visualization (`--a-data-0` … `--a-data-9`)
+
+Chromatic data colors for charts, graphs, status indicators. Ten slots distinguishable by hue shift.
+
+| Token | Default hue | Use |
+|-------|-------------|-----|
+| `--a-data-0` | 225° | Primary data series |
+| `--a-data-1` | 247° | Secondary series |
+| `--a-data-2` | 269° | Tertiary |
+| … | … | … |
+| `--a-data-9` | 335° | Tenth series |
+
+Individual hue overrides: `--a-data-N-hue: 180;` to pin a specific slot.
+
+---
+
+## Typography API
+
+### Scale tokens (use these directly)
+
+| Token | Purpose |
+|-------|---------|
+| `--a-body-size` | Running text (paragraphs, descriptions) |
+| `--a-heading-size` | Sub-headings |
+| `--a-section-size` | Section headings |
+| `--a-title-size` | Page titles |
+| `--a-display-size` | Hero numbers, big stats |
+| `--a-deck-size` | Lead paragraphs, hero copy |
+| `--a-caption-size` | Captions, metadata, footnotes |
+| `--a-code-size` | Monospace code blocks |
+| `--a-label-size` | Form labels, badges |
+| `--a-ui-size` | UI chrome text (buttons, tabs) |
+| `--a-metric-size` | Dashboard metrics, KPIs |
+| `--a-kicker-size` | Overlines, eyebrow text |
+
+Each has `-sm`, `-md`, `-lg` variants (e.g., `--a-body-sm`, `--a-body-lg`).
+
+### Font families
+
+| Token | Purpose |
+|-------|---------|
+| `--a-font-family-body` | Prose blocks |
+| `--a-font-family-heading` | Headings |
+| `--a-font-family-display` | Hero / display |
+| `--a-font-family-code` | Monospace |
+| `--a-font-family-ui` | Buttons, inputs, chrome |
+| `--a-font-family-control` | Form controls |
+| `--a-font-family-editorial` | Marketing / long-form |
+| `--a-font-family-text` | Fallback generic text |
+
+### Weight & tracking
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--a-weight-thin` | 300 | Hero numbers, elegant display |
+| `--a-weight-light` | 400 | Body text |
+| `--a-weight-normal` | 500 | Default UI |
+| `--a-weight-medium` | 600 | Slightly emphasized |
+| `--a-weight-semibold` | 700 | Headings |
+| `--a-weight-bold` | 800 | Strong emphasis |
+| `--a-tracking-tight` | -0.02em | Display / headlines |
+| `--a-tracking-normal` | 0 | Body |
+| `--a-tracking-wide` | 0.03em | Labels, uppercase |
+| `--a-tracking-wider` | 0.06em | Kickers, overlines |
+
+---
+
+## Spacing API
+
+### Base tokens (parametric: value = `base × --a-density`)
+
+| Token | Base value | Use |
+|-------|-----------|-----|
+| `--a-space-0` | 0 | None |
+| `--a-space-0-5` | 0.125rem (2px) | Hairline |
+| `--a-space-1` | 0.25rem (4px) | Tight padding |
+| `--a-space-2` | 0.5rem (8px) | Default gap |
+| `--a-space-3` | 0.75rem (12px) | Comfortable gap |
+| `--a-space-4` | 1rem (16px) | Card padding |
+| `--a-space-5` | 1.25rem (20px) | Section padding |
+| `--a-space-6` | 1.5rem (24px) | Large gap |
+| `--a-space-7` | 1.75rem (28px) | Extra large |
+| `--a-space-8` | 2rem (32px) | Section gutters |
+| `--a-space-10` | 2.5rem (40px) | Page gutters |
+| `--a-space-12` | 3rem (48px) | Major sections |
+| `--a-space-16` | 4rem (64px) | Hero spacing |
+
+### Composite gap tokens
+
+| Token | Maps to | Use |
+|-------|---------|-----|
+| `--a-gap-sm` | `--a-space-3` | Tight component groups |
+| `--a-gap-md` | `--a-space-4` | Default component groups |
+| `--a-gap-lg` | `--a-space-6` | Loose component groups |
+
+---
+
+## Chrome dimensions
+
+| Token | Value | Element |
+|-------|-------|---------|
+| `--a-chrome-app-header-height` | 48px | App-level header |
+| `--a-chrome-app-toolbar-height` | 48px | App-level toolbar |
+| `--a-chrome-app-footer-height` | 48px | App-level footer |
+| `--a-chrome-pane-header-height` | 36px | Pane / panel header |
+| `--a-chrome-pane-toolbar-height` | 36px | Pane / panel toolbar |
+| `--a-chrome-pane-footer-height` | 36px | Pane / panel footer |
+
+---
+
+## Radius & density
+
+| Token | Type | Default | Effect |
+|-------|------|---------|--------|
+| `--a-density` | `@property <number>` | 1 | Scales ALL spacing, padding, gaps, component heights |
+| `--a-radius-k` | `@property <number>` | 1 | Scales ALL corner rounding |
+| `--a-radius-sm` | length | 0.375rem | Small corners (inputs, buttons) |
+| `--a-radius-md` | length | 0.5rem | Medium corners (cards, popovers) |
+| `--a-radius-lg` | length | 0.75rem | Large corners (modals, drawers) |
+| `--a-radius-full` | length | 9999px | Pills, chips, avatars |
+
+Set `--a-density` and `--a-radius-k` on `:root` for global effect, or on `[density="tight"]` / `[density="comfortable"]` for scoped regions.
+
+---
+
+## Shadows
+
+| Token | Default | Use |
+|-------|---------|-----|
+| `--a-shadow-sm` | `0 1px 2px` | Subtle lift (cards at rest) |
+| `--a-shadow-md` | `0 4px 8px` | Elevated (dropdowns, popovers) |
+| `--a-shadow-lg` | `0 8px 24px` | Highest elevation (modals, drawers) |
+| `--a-shadow-intensity` | 1 | Multiplier for shadow opacity |
+
+---
+
+## Timing
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--a-duration-fast` | 120ms | Hover states, micro-interactions |
+| `--a-duration` | 250ms | Default transition |
+| `--a-duration-slow` | 300ms | Page transitions, large movements |
+| `--a-easing` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Default ease |
+| `--a-easing-out` | `cubic-bezier(0.16, 1, 0.3, 1)` | Exit / snap animations |
+
+---
+
+## How to add a new token
+
+1. **Need a new semantic color?** Add it in `colors/semantics.css` L3 section, mapping to an L2 family. Example:
+   ```css
+   --a-bg-ghost: var(--a-canvas-0); /* new variant */
+   ```
+2. **Need a new primitive hue?** Extend `colors/parameters.css` hue ramp.
+3. **Need a new spacing step?** Add to `tokens.css` spacing scale.
+4. **Never** add tokens directly in component CSS. Always add to the token system first, then consume.
+
+---
+
+## File inventory
+
+```
+styles/
+├── tokens.css              # Spacing, chrome, shadows, timing, density, radius
+├── typography.css          # Font families, type scale, weights, trackings
+├── themes.css              # 8 named themes + light/dark scheme overrides
+├── colors/
+│   ├── index.css           # Barrel: parameters → primitives → surfaces → scrims → semantics
+│   ├── parameters.css      # L1: hue definitions, OKLCH ramp parameters
+│   ├── primitives.css      # L1: OKLCH color values
+│   ├── surfaces.css        # L2: canvas ramps (--a-canvas-0 … 6)
+│   ├── scrims.css          # L2: overlay transparency values
+│   └── semantics.css       # L2 families + L3 aliases (the consumable API)
+├── prose.css               # Opt-in article typography
+├── resets.css              # Minimal CSS reset
+├── fonts.css               # @font-face declarations
+├── components.css          # Component-specific rules (progress bars, etc.)
+├── elevation.examples.html # Shadow demo page
+├── icons.examples.html     # Icon demo page
+└── spacing.examples.html   # Spacing demo page
+```
+
+---
+
+## Token count (approximate)
+
+| Layer | File(s) | ~Tokens |
+|-------|---------|---------|
+| L1 Primitives | `colors/parameters.css`, `colors/primitives.css` | ~80 |
+| L2 Families | `colors/semantics.css` (family section) | ~60 |
+| L3 Semantic aliases | `colors/semantics.css` (alias section) | ~150 |
+| Typography | `typography.css` | ~80 |
+| Spacing | `tokens.css` | ~25 |
+| Chrome | `tokens.css` | ~10 |
+| Shadows | `tokens.css` | ~4 |
+| Timing | `tokens.css` | ~5 |
+| **Total** | | **~410** |

package/traits/{active-state.js → active-state/active-state.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 export const activeState = defineTrait({
   name: 'active-state',

package/traits/{active-state.test.js → active-state/active-state.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { activeState } from './active-state.js';
-import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
 
 describe('active-state', () => {
   beforeEach(resetDOM);

package/traits/{anchor-positioning.js → anchor-positioning/anchor-positioning.js}

@@ -18,7 +18,7 @@
  * consumers and DevTools sessions can see which path actually ran.
  */
 
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 /**
  * Feature-detect both halves of the API we depend on. Chrome 125+ and

package/traits/{anchor-positioning.test.js → anchor-positioning/anchor-positioning.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { anchorPositioning } from './anchor-positioning.js';
-import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from '../test-helpers.js';
 
 /**
  * Note on test environment: happy-dom does not implement

package/traits/{announcer.js → announcer/announcer.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 import { announce, getRegion } from './announcer-stage.js';
 
 /**

package/traits/{announcer.test.js → announcer/announcer.test.js}

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { announcer } from './announcer.js';
 import { _resetRegions, getRegion } from './announcer-stage.js';
-import { mountHost, connectTrait, spyEvent, resetDOM, tick, wait } from './test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM, tick, wait } from '../test-helpers.js';
 
 // happy-dom doesn't speak — we assert region textContent instead.
 async function settleAnnounce() {

package/traits/{arrow-grid-nav.js → arrow-grid-nav/arrow-grid-nav.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 /**
  * 2D arrow-key navigation for grids — calendars, menubars, color pickers,

package/traits/{arrow-grid-nav.test.js → arrow-grid-nav/arrow-grid-nav.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { arrowGridNav } from './arrow-grid-nav.js';
-import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from '../test-helpers.js';
 
 /**
  * Build a row-flat grid with `total` cells laid out in `cols` columns.

package/traits/{attention-pulse.js → attention-pulse/attention-pulse.js}

@@ -1,5 +1,5 @@
-import { defineTrait } from './define.js';
-import { prefersReducedMotion } from './motion.js';
+import { defineTrait } from '../define.js';
+import { prefersReducedMotion } from '../motion.js';
 
 export const attentionPulse = defineTrait({
   name: 'attention-pulse',

package/traits/{attention-pulse.test.js → attention-pulse/attention-pulse.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { attentionPulse } from './attention-pulse.js';
-import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
 
 describe('attention-pulse', () => {
   beforeEach(resetDOM);

package/traits/{confetti.js → confetti/confetti.js}

@@ -1,5 +1,5 @@
-import { defineTrait } from './define.js';
-import { prefersReducedMotion } from './motion.js';
+import { defineTrait } from '../define.js';
+import { prefersReducedMotion } from '../motion.js';
 import { getStage, viewportCenterOf, spawnParticle, SHARED_COLORS } from './confetti-stage.js';
 
 /**

package/traits/{confetti.test.js → confetti/confetti.test.js}

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { confetti } from './confetti.js';
 import { _resetStage } from './confetti-stage.js';
-import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
 
 describe('confetti', () => {
   beforeEach(() => {

package/traits/{confetti-burst.js → confetti-burst/confetti-burst.js}

@@ -1,6 +1,6 @@
-import { defineTrait } from './define.js';
-import { prefersReducedMotion } from './motion.js';
-import { getStage, viewportCenterOf, spawnParticle, SHARED_COLORS } from './confetti-stage.js';
+import { defineTrait } from '../define.js';
+import { prefersReducedMotion } from '../motion.js';
+import { getStage, viewportCenterOf, spawnParticle, SHARED_COLORS } from '../confetti/confetti-stage.js';
 
 /**
  * `confetti-burst` — upward fountain on connect + on every `press`.

package/traits/{confetti-burst.test.js → confetti-burst/confetti-burst.test.js}

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { confettiBurst } from './confetti-burst.js';
-import { _resetStage } from './confetti-stage.js';
-import { mountHost, connectTrait, spyEvent, resetDOM, wait } from './test-helpers.js';
+import { _resetStage } from '../confetti/confetti-stage.js';
+import { mountHost, connectTrait, spyEvent, resetDOM, wait } from '../test-helpers.js';
 
 describe('confetti-burst', () => {
   beforeEach(() => {

package/traits/{count-up.js → count-up/count-up.js}

@@ -1,5 +1,5 @@
-import { defineTrait } from './define.js';
-import { prefersReducedMotion } from './motion.js';
+import { defineTrait } from '../define.js';
+import { prefersReducedMotion } from '../motion.js';
 
 export const countUp = defineTrait({
   name: 'count-up',

package/traits/{count-up.test.js → count-up/count-up.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { countUp } from './count-up.js';
-import { mountHost, connectTrait, spyEvent, resetDOM, wait, raf } from './test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM, wait, raf } from '../test-helpers.js';
 
 describe('count-up', () => {
   beforeEach(resetDOM);

package/traits/declarative.test.js

@@ -13,9 +13,9 @@
 
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { UIElement } from '../core/element.js';
-import { pressable } from './pressable.js';
-import { focusable } from './focusable.js';
-import { hoverable } from './hoverable.js';
+import { pressable } from './pressable/pressable.js';
+import { focusable } from './focusable/focusable.js';
+import { hoverable } from './hoverable/hoverable.js';
 import { resetDOM } from './test-helpers.js';
 
 let counter = 0;

package/traits/{dirty-state.js → dirty-state/dirty-state.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 export const dirtyState = defineTrait({
   name: 'dirty-state',

package/traits/{dirty-state.test.js → dirty-state/dirty-state.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { dirtyState } from './dirty-state.js';
-import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
 
 describe('dirty-state', () => {
   beforeEach(resetDOM);

package/traits/{drag-ghost.js → drag-ghost/drag-ghost.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 export const dragGhost = defineTrait({
   name: 'drag-ghost',

package/traits/{drag-ghost.test.js → drag-ghost/drag-ghost.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { dragGhost } from './drag-ghost.js';
-import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
 
 describe('drag-ghost', () => {
   beforeEach(resetDOM);

package/traits/{draggable.js → draggable/draggable.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 export const draggable = defineTrait({
   name: 'draggable',

package/traits/{draggable.test.js → draggable/draggable.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { draggable } from './draggable.js';
-import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from '../test-helpers.js';
 
 function pointer(host, type, x, y) {
   const ev = new PointerEvent(type, { clientX: x, clientY: y, pointerId: 1, bubbles: true });

package/traits/{draggable-list-item.js → draggable-list-item/draggable-list-item.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 /**
  * `draggable-list-item` — pointer-driven list-reorder lifter.
@@ -39,7 +39,7 @@ import { defineTrait } from './define.js';
  * aria-live regions so screen-reader narration is single-stream.
  */
 
-import { announce } from './announcer-stage.js';
+import { announce } from '../announcer/announcer-stage.js';
 
 // Drop-target-change announcements are debounced at 200 ms (per
 // a11y-live-region-drag-announcements.md research note); other phases

package/traits/{draggable-list-item.test.js → draggable-list-item/draggable-list-item.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { draggableListItem } from './draggable-list-item.js';
-import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
 
 // Minimal smoke coverage. The draggable-list-item trait is the pointer
 // driver for the apps/tasks/ DnD model. The cases

package/traits/{drop-target.js → drop-target/drop-target.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 /**
  * Declarative drop zone — wires the host into the HTML5 drag-and-drop

package/traits/{drop-target.test.js → drop-target/drop-target.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { dropTarget } from './drop-target.js';
-import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from '../test-helpers.js';
 
 /**
  * happy-dom's DragEvent constructor does NOT preserve the `dataTransfer`

package/traits/{droppable.js → droppable/droppable.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 /**
  * `droppable` — marks an element as a drop target for `draggable-list-item`.

package/traits/{droppable.test.js → droppable/droppable.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { droppable } from './droppable.js';
-import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
 
 // Minimal smoke coverage. The droppable trait is authored against the
 // apps/tasks/ DnD coordinator and assumes a sibling

package/traits/{droppable-collection.js → droppable-collection/droppable-collection.js}

@@ -1,4 +1,4 @@
-import { defineTrait } from './define.js';
+import { defineTrait } from '../define.js';
 
 /**
  * `droppable-collection` — coordinator over a tree of `droppable` children.

package/traits/{droppable-collection.test.js → droppable-collection/droppable-collection.test.js}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { droppableCollection } from './droppable-collection.js';
-import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from '../test-helpers.js';
 
 // Minimal smoke coverage. The droppable-collection trait coordinates
 // child droppables of the apps/tasks/ DnD model;