snice 7.0.2 → 7.1.0

package/docs/ai/api.md

@@ -15,6 +15,7 @@
 //         attachController(el, MyController) | el.controller = MyController
 //         controller="name" string attr (only channel in raw HTML; still supported everywhere)
 // Class binding: reference-deduped, removes controller attr, attr writes ignored while bound
+@daemon // Explicitly constructed app-context state/lifecycle object; no name or global registration
 @layout('name') // Define page wrapper
 ```
 
@@ -112,13 +113,13 @@ html`
 ```typescript
 @on(event: string | string[], selector?: string, options?: OnOptions)
 // Works in elements + controllers
-// Options: { debounce?, throttle?, preventDefault?, stopPropagation?, once?, capture?, passive?, target?, scope? }
+// Options: { debounce?, throttle?, preventDefault?, stopPropagation?, once?, capture?, passive?, target?, scope?, daemon? }
 // target: CSS selector for shadow DOM event delegation
 // scope: 'global' | selector | EventTarget | () => EventTarget | null — redirects listener attachment
 // Keyboard: 'keydown:Enter', 'keydown.escape', 'keydown:ctrl+s', 'keydown:~Space'
 // Supports both ':' and '.' notation
 
-@dispatch(eventName: string, options?: { debounce?, throttle?, dispatchOnUndefined?, scope?, ...EventInit })
+@dispatch(eventName: string, options?: { debounce?, throttle?, dispatchOnUndefined?, scope?, daemon?, ...EventInit })
 // Fires CustomEvent after method, detail = return value
 // Supports async methods (dispatches after promise resolves)
 // dispatchOnUndefined: false (default) — skips dispatch if method returns undefined
@@ -142,7 +143,7 @@ html`
 ## Communication
 
 ```typescript
-@request(channel: string, options?: { timeout?, discoveryTimeout?, debounce?, throttle?, bubbles?, cancelable? })
+@request(channel: string, options?: { daemon?, timeout?, discoveryTimeout?, debounce?, throttle?, bubbles?, cancelable? })
 // Request pattern using async generator syntax
 // Method must be async generator that yields payload and receives response
 // Returns Promise<T>
@@ -166,7 +167,7 @@ html`
 //   }
 //   // Usage: const user = await this.fetchUser('123');
 
-@respond(channel: string, options?: { debounce?, throttle? })
+@respond(channel: string, options?: { daemon?, debounce?, throttle? })
 // Respond to requests from @request decorators
 // Method receives payload and returns response
 // Works in both elements and controllers
@@ -182,6 +183,14 @@ html`
 //   }
 ```
 
+Daemon addressing:
+```typescript
+const release = provideContext(appRoot, { daemons: { session: new SessionDaemon() } });
+const context = getContext(elementOrController);
+// Consumers use { daemon: 'session' }; daemon methods default to their own private target.
+// Provide before connect/attach. Call release() during app/test teardown.
+```
+
 ## Observers
 
 ```typescript

package/docs/ai/architecture.md

@@ -7,6 +7,7 @@
 - **Pages:** Orchestrate elements, handle URLs
 - **Elements:** Generic visual building blocks — no fetch(), no API calls, no business logic
 - **Controllers:** Specific behavior (data, APIs, business rules) — swappable per element
+- **Daemons:** Explicitly constructed app-owned state/lifecycle objects — addressable through context, never global singletons
 
 **Generic vs Specific:** Elements say *what* they need, controllers decide *how*.
 Swap controllers to change behavior without touching the component.
@@ -16,6 +17,26 @@ Mock controller for tests, real API controller in production — same element.
 - Down: Properties
 - Up: Events
 - Sideways: Request/Response channels
+- App services: daemon-addressed request/response or dispatch/on
+
+## Project Structure
+
+Conventional application layout:
+
+```text
+src/
+  main.ts
+  router.ts
+  pages/          # @page classes; route orchestration and presentation
+  components/     # reusable @element visual components
+  controllers/    # @controller data, API, and reusable business behavior
+  daemons/        # explicitly constructed @daemon state/lifecycle services
+```
+
+Pages may coordinate a route and perform a small one-off load. Move behavior to
+a controller when a page owns several storage/server/timer operations or when
+substantial non-visual logic is copied across pages. `snice check` reports these
+as architecture suggestions, not errors.
 
 ## Rendering System
 
@@ -74,6 +95,15 @@ Mock controller for tests, real API controller in production — same element.
 - Class bindings own the element: attribute writes ignored while a class is bound
 - Native elements: class bindings attach via ControllerPart; string attrs via MutationObserver
 
+**Daemon lifecycle:**
+1. Application constructs an `@daemon` class with `new`
+2. `provideContext(root, { daemons })` activates its private communication target
+3. Elements/controllers resolve the nearest context by string address
+4. Provider release removes daemon handlers and deactivates that target
+- Router provides its `context` through the same mechanism
+- Multiple instances of the same class remain independent
+- No implicit construction, registry scan, singleton, start, or stop hook
+
 ## Router System
 
 **Registration:**
@@ -136,7 +166,7 @@ onChange() { return { value: this.value }; }
 ```typescript
 // Element requests (async generator: yield sends, await receives)
 @request('fetch-data')
-async *fetchData(): any {
+async *fetchData(): Response<Data> {
   return await (yield { id: this.dataId });  // single yield per call
 }
 
@@ -148,6 +178,25 @@ async handleFetch(payload: { id: string }) {
 // Wiring: html`<my-element controller=${MyController}></my-element>` (or controller="my-controller" in raw HTML)
 ```
 
+**Element/Controller ↔ Daemon:** Addressed communication
+```typescript
+@daemon
+class SessionDaemon {
+  @respond('session/get') get() { return this.session; }
+  @dispatch('session/changed') changed() { return this.session; }
+}
+
+const session = new SessionDaemon();
+const release = provideContext(appRoot, { daemons: { session } });
+
+// Consumer imports no daemon implementation class.
+@request('session/get', { daemon: 'session' })
+async *getSession(): Response<Session | null> { return yield {}; }
+
+@on('session/changed', { daemon: 'session' })
+sessionChanged(event: CustomEvent<Session | null>) {}
+```
+
 **Global State:** Context
 ```typescript
 @context() handleContext(ctx: Context) {

package/docs/ai/cli.md

@@ -44,6 +44,15 @@ npx snice validate           # source analyzer only
 `validate` runs the analyzer over source. Catches mistakes that compile but never work:
 - an `@element`-decorated class that does not extend `HTMLElement` (or a Snice element subclass) — Snice registers/renders only element subclasses
 - deep imports that were never released package paths, e.g. `snice/decorators`
+- Router missing `target`, `type`, or a project-wide `initialize()` call
+- a routed class combining `@page` with redundant `@element`
+
+Non-blocking architecture suggestions:
+- `@page` -> `src/pages/`
+- `@element` -> `src/components/`
+- `@controller` -> `src/controllers/`
+- `@daemon` -> `src/daemons/`
+- several external-effect methods or substantial logic repeated across pages -> extract a controller
 
 Both `doctor` and `validate` accept `--json`.
 

package/docs/ai/components/avatar.md

@@ -72,11 +72,11 @@ fallbackBackground: string = '';     // attr: fallback-background — overrides
 
 ### Size Reference
 
-| Size | Dimensions | Font Size |
-|------|-----------|-----------|
-| `xs` | 1.5rem (24px) | 0.625rem |
-| `small` | 2rem (32px) | 0.75rem |
-| `medium` | 2.5rem (40px) | 0.875rem |
-| `large` | 3rem (48px) | 1rem |
-| `xl` | 4rem (64px) | 1.25rem |
-| `xxl` | 6rem (96px) | 2rem |
+Size — dimension / font-size:
+
+- `xs` 1.5rem (24px) / 0.625rem
+- `small` 2rem (32px) / 0.75rem
+- `medium` 2.5rem (40px) / 0.875rem
+- `large` 3rem (48px) / 1rem
+- `xl` 4rem (64px) / 1.25rem
+- `xxl` 6rem (96px) / 2rem

package/docs/ai/components/breadcrumbs.md

@@ -13,9 +13,10 @@ Navigation breadcrumb trail.
 
 ```typescript
 items: BreadcrumbItem[] = [];                              // JS property only
-separator: '/'|'>'|'>>'|'.'|'|' = '/';
+separator: '/'|'>'|'»'|'•'|'|' = '/';
 size: 'small'|'medium'|'large' = 'medium';
 maxItems: number = 0;                                      // 0 = show all, attr: max-items
+collapsed: boolean = true;                                 // ellipsis state; ellipsis click sets false, resets on items/separator/maxItems change
 ```
 
 ### snice-crumb

package/docs/ai/components/button.md

@@ -53,16 +53,11 @@ readonly labels: NodeList | null;
 ```html
 <snice-button>Click me</snice-button>
 
-<!-- Variants -->
+<!-- Variants: default|primary|success|warning|danger|text -->
 <snice-button variant="primary">Primary</snice-button>
-<snice-button variant="success">Success</snice-button>
-<snice-button variant="warning">Warning</snice-button>
-<snice-button variant="danger">Danger</snice-button>
-<snice-button variant="text">Text</snice-button>
 
-<!-- Sizes -->
+<!-- Sizes: small|medium|large -->
 <snice-button size="small">Small</snice-button>
-<snice-button size="large">Large</snice-button>
 
 <!-- States -->
 <snice-button disabled>Disabled</snice-button>

package/docs/ai/components/calendar.md

@@ -10,7 +10,7 @@ view: 'month'|'week'|'day' = 'month';
 events: CalendarEvent[] = [];
 minDate: Date | string = '';           // attribute: min-date
 maxDate: Date | string = '';           // attribute: max-date
-disabledDates: (Date | string)[] = []; // attribute: disabled-dates
+disabledDates: (Date | string)[] = []; // JS-only; no attribute
 highlightToday: boolean = true;        // attribute: highlight-today
 showWeekNumbers: boolean = false;      // attribute: show-week-numbers
 firstDayOfWeek: number = 0;            // attribute: first-day-of-week (0=Sun, 1=Mon)

package/docs/ai/components/camera.md

@@ -5,7 +5,7 @@ Live camera feed with built-in mobile-style controls.
 ## Properties
 
 ```typescript
-autoStart: boolean = true;                    // attribute: auto-start
+autoStart: boolean = false;                   // attribute: auto-start
 facingMode: 'user'|'environment' = 'user';    // attribute: facing-mode
 mirror: boolean = true;
 controlsPosition: ControlsPosition = 'auto';  // attribute: controls-position

package/docs/ai/components/chart.md

@@ -8,7 +8,9 @@ General-purpose chart component with 10 chart types and animations.
 type: 'line'|'bar'|'horizontal-bar'|'area'|'pie'|'donut'|'scatter'|'bubble'|'radar'|'mixed' = 'line';
 datasets: ChartDataset[] = [];    // property only
 labels: string[] = [];            // property only
-options: ChartOptions = {};       // property only
+options: ChartOptions = { responsive: true, maintainAspectRatio: false, legend: {position:'top', clickable:true},
+                          tooltip: {trigger:'hover'}, animation: {enabled:true, duration:500, easing:'ease-out'},
+                          xAxis: {grid:true}, yAxis: {grid:true} };   // property only
 width: number = 0;                // 0 = auto
 height: number = 0;               // 0 = auto
 ```

package/docs/ai/components/code-block.md

@@ -7,10 +7,10 @@ Code display with syntax highlighting, line numbers, copy, and grammar-based for
 ```typescript
 code: string = '';                // Set via slot or property
 language: 'javascript'|'typescript'|'html'|'css'|'json'|'python'|'bash'|'plaintext' = 'plaintext';
-grammar: GrammarDefinition | string | null = null;  // Grammar object or URL to JSON
+grammar: GrammarDefinition | string | null = '';    // Grammar object or URL to JSON
 showLineNumbers: boolean = false;  // attribute: show-line-numbers
 startLine: number = 1;            // attribute: start-line
-highlightLines: number[] = [];    // attribute: highlight-lines
+highlightLines: number[] = [];    // JS-only; no attribute
 copyable: boolean = true;
 filename: string = '';
 format: string = '';              // Formatter name (e.g. "pretty"), or truthy string with setFormatter()

package/docs/ai/components/date-picker.md

@@ -17,11 +17,8 @@ value: string = '';
 // Maps to the value content attribute and is restored by form reset.
 defaultValue: string = '';
 
-format:
-  | 'mm/dd/yyyy' | 'dd/mm/yyyy'
-  | 'yyyy-mm-dd' | 'yyyy/mm/dd'
-  | 'dd-mm-yyyy' | 'mm-dd-yyyy'
-  | 'mmmm dd, yyyy' = 'mm/dd/yyyy';
+format: 'mm/dd/yyyy' | 'dd/mm/yyyy' | 'yyyy-mm-dd' | 'yyyy/mm/dd'
+      | 'dd-mm-yyyy' | 'mm-dd-yyyy' | 'mmmm dd, yyyy' = 'mm/dd/yyyy';
 
 variant: 'outlined' | 'filled' | 'underlined' = 'outlined';
 size: 'small' | 'medium' | 'large' = 'medium';
@@ -29,14 +26,9 @@ placeholder: string = '';
 label: string = '';
 helperText: string = ''; // helper-text
 errorText: string = '';  // error-text
-disabled: boolean = false;
-readonly: boolean = false;
-loading: boolean = false;
-required: boolean = false;
+disabled | readonly | loading | required | clearable: boolean = false;
 invalid: boolean = false; // presentation only, not constraint validity
-clearable: boolean = false;
-min: string = ''; // canonical YYYY-MM-DD recommended
-max: string = ''; // canonical YYYY-MM-DD recommended
+min: string = ''; max: string = ''; // canonical YYYY-MM-DD recommended
 name: string = '';
 open: boolean = false;
 firstDayOfWeek: number = 0; // first-day-of-week; 0=Sunday
@@ -140,13 +132,7 @@ All component events bubble and are composed. Direct property/default changes, r
 
 ## CSS Parts
 
-- `input`
-- `calendar-toggle`
-- `clear`
-- `spinner`
-- `calendar`
-- `helper-text`
-- `error-text`
+`input`, `calendar-toggle`, `clear`, `spinner`, `calendar`, `helper-text`, `error-text`
 
 ## Keyboard/accessibility
 

package/docs/ai/components/date-range-picker.md

@@ -20,11 +20,8 @@ end: string = '';
 defaultStart: string = '';
 defaultEnd: string = '';
 
-format:
-  | 'mm/dd/yyyy' | 'dd/mm/yyyy'
-  | 'yyyy-mm-dd' | 'yyyy/mm/dd'
-  | 'dd-mm-yyyy' | 'mm-dd-yyyy'
-  | 'mmmm dd, yyyy' = 'mm/dd/yyyy';
+format: 'mm/dd/yyyy' | 'dd/mm/yyyy' | 'yyyy-mm-dd' | 'yyyy/mm/dd'
+      | 'dd-mm-yyyy' | 'mm-dd-yyyy' | 'mmmm dd, yyyy' = 'mm/dd/yyyy';
 
 size: 'small' | 'medium' | 'large' = 'medium';
 variant: 'outlined' | 'filled' | 'underlined' = 'outlined';
@@ -32,14 +29,9 @@ placeholder: string = '';
 label: string = '';
 helperText: string = ''; // helper-text
 errorText: string = '';  // error-text
-disabled: boolean = false;
-readonly: boolean = false;
-loading: boolean = false;
-required: boolean = false;
+disabled | readonly | loading | required | clearable: boolean = false;
 invalid: boolean = false; // presentation only, not constraint validity
-clearable: boolean = false;
-min: string = '';         // canonical YYYY-MM-DD recommended
-max: string = '';         // canonical YYYY-MM-DD recommended
+min: string = ''; max: string = '';   // canonical YYYY-MM-DD recommended
 name: string = '';        // base name for {name}-start and {name}-end
 columns: number = 1;      // supported layouts: 1 or 2
 firstDayOfWeek: number = 0; // first-day-of-week; 0=Sunday

package/docs/ai/components/draw.md

@@ -48,11 +48,11 @@ interface DrawStroke {
 
 ## Events
 
-- `draw-start` - Drawing started
-- `draw-end` → `{ stroke }` - Stroke completed
-- `draw-clear` - Canvas cleared
-- `draw-undo` - Undo performed
-- `draw-redo` - Redo performed
+- `draw-start` → `{ draw, point }` - Drawing started
+- `draw-end` → `{ draw, stroke }` - Stroke completed
+- `draw-clear` → `{ draw }` - Canvas cleared
+- `draw-undo` → `{ draw }` - Undo performed
+- `draw-redo` → `{ draw }` - Redo performed
 
 ## CSS Parts
 

package/docs/ai/components/drawer.md

@@ -44,10 +44,10 @@ contained: boolean = false;                    // Position relative to parent
 - `--snice-drawer-control-size` - Drawer control size
 - `--drawer-width-small` through `--drawer-width-xxxl` - Width per size
 - `--drawer-height-small` through `--drawer-height-xxxl` - Height per size (top/bottom)
-- `--drawer-bg` - Background (default: `var(--snice-color-surface, white)`)
-- `--drawer-shadow` - Shadow (default: `var(--snice-shadow-lg)`)
-- `--drawer-backdrop` - Backdrop color (default: `rgba(0, 0, 0, 0.5)`)
-- `--drawer-transition` - Transition timing
+- `--drawer-bg` - Background (default: `var(--snice-color-surface-container-highest, var(--snice-color-surface, white))`)
+- `--drawer-shadow` - Shadow (default: `var(--snice-shadow-2xl, ...)`)
+- `--drawer-backdrop` - Backdrop color (default: `var(--snice-drawer-backdrop, rgb(0 0 0 / 0.6))`)
+- `--drawer-transition` - Transition timing (default: `transform 320ms var(--snice-ease-out, cubic-bezier(0.22, 1, 0.36, 1))`)
 - `--drawer-z-index` - Z-index (default: `1050`)
 
 ## CSS Parts

package/docs/ai/components/form-layout.md

@@ -59,4 +59,6 @@ import 'snice/components/form-layout/snice-form-layout';
 </snice-form-layout>
 ```
 
+Span columns with CSS `grid-column` on a slotted child: `<snice-textarea style="grid-column: 1 / -1">`.
+
 No events -- layout-only component. Responsive: collapses to single column on mobile (<640px).

package/docs/ai/components/icons.md

@@ -35,22 +35,13 @@ Snice embeds a small set of Heroicons (MIT © Tailwind Labs) as defaults. Consum
 
 ## Components with built-in defaults
 
-| Component | Where used |
-|-----------|------------|
-| `<snice-alert>` | variant status icon |
-| `<snice-banner>` | variant status icon |
-| `<snice-timeline>` | marker icon (per item variant) |
-| `<snice-image>` | placeholder (no `src`) |
-| `<snice-cell-image>` (table) | placeholder |
-| `<snice-approval-flow>` | step status (pending/approved/rejected/skipped) |
-| `<snice-data-card>` | Edit/Done button |
-| `<snice-kpi>` | trend indicator |
-| `<snice-cell-percentage>` (table) | trend indicator |
-| `<snice-cell-json>` (table) | expand/collapse chevron |
-| `<snice-header>` (table) | sort direction |
-| `<snice-modal>` | close button |
-| `<snice-drawer>` | close button |
-| `<snice-toast>` | close button |
+- Variant status icon: `<snice-alert>`, `<snice-banner>`; `<snice-timeline>` marker (per item variant)
+- Placeholder: `<snice-image>` (no `src`), `<snice-cell-image>` (table)
+- `<snice-approval-flow>` step status (pending/approved/rejected/skipped)
+- Trend indicator: `<snice-kpi>`, `<snice-cell-percentage>` (table)
+- `<snice-cell-json>` expand/collapse chevron; `<snice-header>` sort direction (both table)
+- Close button: `<snice-modal>`, `<snice-drawer>`, `<snice-toast>`
+- `<snice-data-card>` Edit/Done button
 
 ## Importing built-in glyphs directly
 

package/docs/ai/components/key-value.md

@@ -2,19 +2,6 @@
 
 Form-associated ordered string-pair editor. Preserves duplicates, descriptions, Unicode, and row order. Direct `<snice-kv-pair>` children or imperative data API.
 
-## Table of Contents
-
-- [Components](#components)
-- [Properties](#properties)
-- [Methods](#methods)
-- [Events](#events)
-- [Slots](#slots)
-- [CSS Parts](#css-parts)
-- [Basic Usage](#basic-usage)
-- [Examples](#examples)
-- [Keyboard Navigation](#keyboard-navigation)
-- [Accessibility](#accessibility)
-
 ## Components
 
 - `snice-key-value` - Editor/display/FACE control.
@@ -32,19 +19,13 @@ showDescription: boolean = false;      // attr: show-description
 keyPlaceholder: string = 'Key';        // attr: key-placeholder
 valuePlaceholder: string = 'Value';    // attr: value-placeholder
 placeholders: Array<{key:string;value:string}> = []; // JS only
-disabled: boolean = false;
-readonly: boolean = false;
-required: boolean = false;
+disabled | readonly | required: boolean = false;
 name: string = '';
 variant: 'default'|'compact' = 'default';
 mode: 'edit'|'view' = 'edit';
 showCopy: boolean = false;              // attr: show-copy
-readonly type: 'key-value';
-readonly form: HTMLFormElement|null;
-readonly validity: ValidityState;
-readonly validationMessage: string;
-readonly willValidate: boolean;
-readonly labels: NodeList|null;
+readonly type: 'key-value'; form: HTMLFormElement|null; validity: ValidityState;
+readonly validationMessage: string; willValidate: boolean; labels: NodeList|null;
 ```
 
 ```ts

package/docs/ai/components/layout.md

@@ -59,12 +59,12 @@ Siblings of `snice-layout` for the other standard page shapes. All regions are s
 - `snice-layout-sidebar` — app shell: `brand`, `header`, `sidebar`, `page`, `footer`
 - `snice-layout-dashboard` — app shell + toolbar + right rail: `brand`, `header`, `toolbar`, `sidebar`, `page`, `right-sidebar`
 - `snice-layout-blog` — article measure: `brand`, `nav`, `page`, `sidebar`, `footer`
-- `snice-layout-centered` — auth card: `brand`, `page`, `footer`
-- `snice-layout-split` — two panes: `left`, `right` (`direction`, `ratio`)
-- `snice-layout-landing` — marketing bands: `brand`, `nav`, `cta`, `hero`, `page`, `footer` (`use-nav`)
-- `snice-layout-card` — card grid: `header`, `page`, `footer` (`columns`, `gap`)
+- `snice-layout-centered` — auth card: `brand`, `page`, `footer` (`width`: `sm`|`md`|`lg`|`xl`, default `md`)
+- `snice-layout-split` — two panes: `left`, `right` (`direction`: `horizontal` default|`vertical`; `ratio`: `50-50` default|`60-40`|`70-30`|`33-67`|`67-33`)
+- `snice-layout-landing` — marketing bands: `brand`, `nav`, `cta`, `hero`, `page`, `footer` (`use-nav` boolean, default false)
+- `snice-layout-card` — card grid: `header`, `page`, `footer` (`columns`: `1`|`2`|`3` default|`4`|`6`; `gap`: `sm`|`md` default|`lg`|`xl`)
 - `snice-layout-minimal` — `page` only
-- `snice-layout-fullscreen` — layers: `background`, `overlay`, `page`, `controls` (`overlay`)
+- `snice-layout-fullscreen` — layers: `background`, `overlay`, `page`, `controls` (`overlay` boolean, default false)
 - `snice-layout-master-detail` — list + detail: `brand`, `header`, `list`, `detail`, `empty` (`selected`); <641px single pane, back emits `detail-closed`
 - `snice-layout-docs` — three panes: `brand`, `header`, `sidebar`, `page`, `toc`, `footer`; rail drops at 1152px, tree → drawer at 996px; skip link + heading scroll-margin
 - `snice-layout-auth-split` — form + decorative panel: `brand`, `page`, `footer`, `panel` (`panel-position`: `end` default | `start`); panel hidden <768px
@@ -104,13 +104,9 @@ Layouts own the screen. App shells (`sidebar`, `dashboard`, `fullscreen`) are `p
 
 ## CSS Custom Properties
 
-- `--snice-layout-auth-panel-bg` - Layout auth panel background
-- `--snice-layout-control-size` - Layout control size
-- `--snice-layout-docs-header-height` - Layout docs header height
-- `--snice-layout-docs-header-height-compact` - Layout docs header height compact
-
-## Sizing hooks
-
 - `--snice-layout-sidebar-width` (`16rem`), `--snice-layout-rail-collapsed-width` (`3rem`)
 - `--snice-layout-rail-width` (`18rem`), `--snice-layout-measure` (`65ch`), `--snice-layout-container` (`80rem`)
 - `--snice-layout-list-width` (`20rem`), `--snice-layout-docs-nav-width` / `--snice-layout-docs-toc-width` (`18.75rem`), `--snice-layout-auth-width` (`24rem`)
+- `--snice-layout-docs-header-height` (`4rem`), `--snice-layout-docs-header-height-compact` (`3.5rem`) — docs sticky header, compact below 768px
+- `--snice-layout-auth-panel-bg` (`var(--snice-color-surface-container)`) — auth split panel
+- `--snice-layout-control-size` (`2rem`) — sidebar / drawer toggle buttons

package/docs/ai/components/leaderboard.md

@@ -12,7 +12,7 @@ Ranked list with podium variant, avatars, change indicators. Dual API: declarati
 ```ts
 variant: 'default'|'podium'|'compact' = 'default';
 size: 'small'|'medium'|'large' = 'medium';
-title: string = '';
+title: string = '';    // JS-only; a title attribute is the native tooltip, not this
 ```
 
 ## Methods
@@ -62,7 +62,7 @@ interface LeaderboardEntry {
 ## Basic Usage
 
 ```html
-<snice-leaderboard variant="podium" title="Top Players">
+<snice-leaderboard id="board" variant="podium">   <!-- title is JS-only: board.title = 'Top Players' -->
   <snice-leaderboard-entry rank="1" name="Alice" score="2500" change="3" highlighted></snice-leaderboard-entry>
   <snice-leaderboard-entry rank="2" name="Bob" score="2100" change="-1"></snice-leaderboard-entry>
 </snice-leaderboard>

package/docs/ai/components/link-preview.md

@@ -6,7 +6,7 @@ Rich URL preview card with image, title, description, and site info.
 
 ```ts
 url: string = '';
-title: string = '';
+title: string = '';    // JS-only; a title attribute is the native tooltip, not this
 description: string = '';
 image: string = '';
 siteName: string = '';  // attr: site-name
@@ -34,16 +34,17 @@ import 'snice/components/link-preview/snice-link-preview';
 ```html
 <!-- Vertical (default) -->
 <snice-link-preview
+  id="preview"
   url="https://example.com"
-  title="Article Title"
   description="Brief summary."
   image="/images/og.jpg"
   site-name="example.com"
   favicon="/icons/favicon.ico">
 </snice-link-preview>
+<script>document.getElementById('preview').title = 'Article Title';</script>
 
 <!-- Horizontal, small -->
 <snice-link-preview variant="horizontal" size="small"
-  url="https://example.com" title="Quick Link" description="Short.">
+  url="https://example.com" description="Short.">
 </snice-link-preview>
 ```

package/docs/ai/components/login.md

@@ -13,6 +13,8 @@ loading: boolean = false;
 showRememberMe: boolean = true;      // attr: show-remember-me
 showForgotPassword: boolean = true;   // attr: show-forgot-password
 actionText: string = 'Sign In';      // attr: action-text
+alertMessage: string = '';                        // JS only; inline alert above the form
+alertVariant: 'error'|'success'|'' = '';          // JS only; styles alertMessage
 ```
 
 ## Methods
@@ -22,6 +24,8 @@ actionText: string = 'Sign In';      // attr: action-text
 - `reset()` → Clear form, alert, loading
 - `setError(message)` → Show error alert
 - `clearError()` → Clear alert
+- `showAlert(message, 'error'|'success')` → Show inline alert; `setError` is the error-only shorthand
+- `clearAlert()` → Remove inline alert
 
 ## Requests
 
@@ -107,3 +111,10 @@ class AuthController {
 // Event fallback
 login.addEventListener('login-success', () => location.href = '/dashboard');
 ```
+
+## Accessibility
+
+- Inputs use `<label for>`; `autocomplete="username"` / `"current-password"`
+- Required fields carry `required`
+- Enter on the password field submits
+- Loading and disabled states propagate to every input and the submit button

package/docs/ai/components/markdown.md

@@ -70,3 +70,10 @@ md.addEventListener('link-click', (e) => {
   console.log('Navigating to:', e.detail.href);
 });
 ```
+
+## Accessibility
+
+- Rendered HTML keeps the semantic heading hierarchy (h1-h6) for screen readers
+- Links in rendered content are keyboard accessible
+- Tables render real `<thead>`/`<tbody>` structure for assistive technology
+- `link-click` lets you take over navigation without losing that behavior

package/docs/ai/components/masonry.md

@@ -44,3 +44,9 @@ import 'snice/components/masonry/snice-masonry';
   <div>Card 2</div>
 </snice-masonry>
 ```
+
+## Accessibility
+
+- Container carries `role="list"` for screen readers
+- Items flow top-to-bottom, left-to-right within CSS columns
+- `break-inside: avoid` keeps an item from splitting across columns

package/docs/ai/components/menu.md

@@ -75,7 +75,7 @@ selected: boolean = false;
 --menu-border: var(--snice-color-border, #e5e7eb);
 --menu-shadow: var(--snice-shadow-lg);
 --menu-z-index: var(--snice-z-floating, 1000);
---menu-border-radius: var(--snice-radius-md, 0.375rem);
+--menu-border-radius: var(--snice-border-radius-md, 0.25rem);
 --menu-min-width: 10rem;
 ```
 

package/docs/ai/components/modal.md

@@ -72,3 +72,10 @@ modal.addEventListener('modal-close', () => console.log('Closed'));
 
 - Escape closes (unless `no-escape-dismiss`)
 - Tab/Shift+Tab cycle focus within modal
+
+## Accessibility
+
+- `role="dialog"` + `aria-modal="true"` + `aria-label`
+- Focus trapped by default (`no-focus-trap` disables); first focusable element focused on open, previous focus restored on close
+- Body scroll locked while open
+- Close button labelled `Close modal`

package/docs/ai/components/notification-center.md

@@ -8,6 +8,7 @@ Bell icon with dropdown notification panel. Shows unread badge, supports dismiss
 notifications: NotificationItem[] = [];  // attr: none (JS only)
 open: boolean = false;                   // Panel visibility
 icon: string = '';                       // Custom bell icon (URL, image, emoji)
+placement: 'start'|'end' = 'end';        // Panel alignment side
 ```
 
 ## Methods
@@ -37,15 +38,15 @@ icon: string = '';                       // Custom bell icon (URL, image, emoji)
 
 ```css
 --snice-color-primary              /* Mark all read link, unread highlight */
---snice-color-primary-subtle       /* Unread item background */
+--snice-color-primary-subtle-hover /* Unread item hover (base tint derives from --snice-color-primary) */
 --snice-color-danger               /* Badge background, dismiss hover */
---snice-color-text-inverse         /* Badge text */
+--snice-color-surface              /* Badge text, via the nested snice-badge */
 --snice-color-text-secondary       /* Message text */
 --snice-color-text-tertiary        /* Timestamp, empty state, dismiss icon */
 --snice-color-border               /* Panel, item borders */
 --snice-color-surface           /* Panel background */
---snice-color-surface-container-high   /* Item hover, bell hover */
---snice-shadow-lg                  /* Panel shadow */
+--snice-color-surface-hover        /* Item hover, bell hover */
+--snice-shadow-xl                  /* Panel shadow */
 ```
 
 ## Basic Usage