snice 7.0.2 → 7.0.3

package/dist/react/matchRoute.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.0.1
+ * snice v7.0.2
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.

package/dist/react/useRequestHandler.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.0.1
+ * snice v7.0.2
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.

package/dist/symbols.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v7.0.1
+ * snice v7.0.2
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.

package/dist/symbols.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.0.1
+ * snice v7.0.2
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.

package/dist/transitions.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v7.0.1
+ * snice v7.0.2
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.

package/dist/transitions.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.0.1
+ * snice v7.0.2
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.

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

package/docs/ai/components/radio.md

@@ -103,3 +103,10 @@ Only the newly selected radio emits. The old member is silently unchecked. Direc
 Slot: `suffix`.
 
 CSS parts: `input`, `radio`, `dot`, `spinner`, `content`, `label`, `description`.
+
+## Accessibility
+
+- Native radio input drives keyboard and AT behavior; one roving tab stop per named group
+- Visible label text associated with the native control; external `<label for>` supports association, focus, activation, cancellation
+- Required group validity and native labels exposed through `ElementInternals`
+- Visible keyboard focus indicator; `aria-invalid` reflects explicit or calculated group invalidity

package/docs/ai/components/rating.md

@@ -7,7 +7,7 @@ Interactive star rating input with full/half precision, custom icons, and keyboa
 ```typescript
 value: number = 0;
 max: number = 5;
-icon: string = '★';
+icon: string = 'star';   // catalogue name, emoji, URL, or image file
 emptyIcon: string = ''; // attr empty-icon; empty falls back to icon
 size: 'small'|'medium'|'large' = 'medium';
 readonly: boolean = false;
@@ -20,8 +20,8 @@ precision: 'full'|'half' = 'full';
 
 ## CSS Custom Properties
 
-- `--rating-color` - Filled star color (`var(--snice-color-warning)`)
-- `--rating-color-empty` - Empty star color (`var(--snice-color-border)`)
+- `--rating-color` - Filled star color (`rgb(245 158 11)`; not theme-derived)
+- `--rating-color-empty` - Empty star color (`var(--snice-color-text-tertiary)`)
 - `--rating-size` - Star size (auto-set by `size`: small=1rem, medium=1.5rem, large=2rem)
 
 ## CSS Parts

package/docs/ai/components/select.md

@@ -14,14 +14,8 @@ Customizable dropdown selection with single/multiple, search, editable input, an
 ```typescript
 value: string = '';                 // Live; comma-separated for multiple
 defaultValue: string = '';          // attr: value; authored/reset default
-disabled: boolean = false;
-required: boolean = false;
-invalid: boolean = false;
-readonly: boolean = false;
-loading: boolean = false;
-multiple: boolean = false;
-searchable: boolean = false;
-clearable: boolean = false;
+disabled | required | invalid | readonly | loading: boolean = false;
+multiple | searchable | clearable: boolean = false;
 editable: boolean = false;          // Text input trigger instead of button
 allowFreeText: boolean = false;     // attr: allow-free-text
 remote: boolean = false;            // Remote search via @request('select/search')
@@ -37,11 +31,8 @@ placeholder: string = 'Select an option';
 maxHeight: string = '200px';        // attr: max-height
 options: SelectOption[] = [];       // JS only, works alongside <snice-option> children
 readonly labels: NodeList | null;   // Current explicit/wrapping external labels
-readonly type: 'select-one' | 'select-multiple';
-readonly form: HTMLFormElement | null;
-readonly validity: ValidityState;
-readonly validationMessage: string;
-readonly willValidate: boolean;
+readonly type: 'select-one' | 'select-multiple'; form: HTMLFormElement | null;
+readonly validity: ValidityState; validationMessage: string; willValidate: boolean;
 ```
 
 ### snice-option

package/docs/ai/components/spotlight.md

@@ -29,6 +29,7 @@ interface SpotlightStep {
 - `spotlight-step` → `{ index, step }`
 - `spotlight-end` → `void`
 - `spotlight-skip` → `{ index }`
+- `spotlight-target-missing` → `{ index, step }` — step target gone (e.g. route change); popover stops instead of pointing at nothing
 
 ## CSS Custom Properties
 
@@ -55,6 +56,7 @@ spotlight.start();
 
 spotlight.addEventListener('spotlight-end', () => console.log('Tour completed'));
 spotlight.addEventListener('spotlight-skip', (e) => console.log(`Skipped at ${e.detail.index}`));
+spotlight.addEventListener('spotlight-target-missing', (e) => console.warn('Missing target', e.detail.step.target));
 ```
 
 ## CSS Parts

package/docs/ai/components/table.md

@@ -124,10 +124,7 @@ type CellStyle={backgroundColor?:string;color?:string;fontWeight?:'normal'|'bold
 
 ## CSS Parts
 
-- `body` - Table body
-- `filter-button` - Column filter trigger
-- `sort-indicator` - Column sort direction indicator
-- `<snice-table>`: `superheader`, `controls`, `toolbar`, `pagination` (no native header/body/cell parts); `<snice-row>`: `container`, `checkbox-cell`, `cell`; cells: `content`; actions: `action-button`; JSON: `toggle`; tag: `tag`; link/email/phone/location: `link`
+- `<snice-table>`: `body`, `superheader`, `controls`, `toolbar`, `pagination`, `filter-button` (column filter trigger), `sort-indicator` (sort direction); `<snice-row>`: `container`, `checkbox-cell`, `cell`; cells: `content`; actions: `action-button`; JSON: `toggle`; tag: `tag`; link/email/phone/location: `link`
 
 ## CSS Custom Properties