snice 7.0.2 → 7.0.3

package/docs/ai/components/tag-input.md

@@ -87,3 +87,9 @@ tagInput.addEventListener('tag-change', (e) => {
   console.log('Tags:', e.detail.value);
 });
 ```
+
+## Accessibility
+
+- `label` supplies the input's accessible name
+- Adding, removing, and selecting tags are all reachable by keyboard (see Keyboard Navigation)
+- Focus returns to the input after a tag is added or removed

package/docs/ai/components/terminal.md

@@ -23,6 +23,12 @@ showTimestamps: boolean = false; // attr: show-timestamps
 - `getHistory()` - Get command history
 - `clearHistory()` - Clear command history
 
+Streaming API — feed raw chunks without splitting on newlines; a trailing partial line stays live and grows until a newline commits it:
+
+- `appendChunk(chunk, type?)` - Append a raw chunk
+- `pipeFrom(source, type?)` - Stream an `AsyncIterable<string>` or `ReadableStream<string|Uint8Array>`; returns `Promise<void>`
+- `commitLiveLine()` - Force the live buffer to become a finished line
+
 ## Events
 
 - `terminal-command` -> `{ command, args }` - Command entered

package/docs/ai/components/tooltip.md

@@ -90,19 +90,13 @@ Observer for `tooltip` attribute on any element. No wrapper element -- safe insi
 
 ### CSS Variable API
 
-| Variable | Default | Description |
-|---|---|---|
-| `--tooltip-position` | `top` | top/bottom/left/right + -start/-end |
-| `--tooltip-trigger` | `hover` | hover, click, focus |
-| `--tooltip-delay` | `0` | Show delay (ms) |
-| `--tooltip-hide-delay` | `0` | Hide delay (ms) |
-| `--tooltip-offset` | `12` | Distance from trigger (px) |
-| `--tooltip-arrow` | (shown) | `none` to hide |
-| `--tooltip-max-width` | `250` | Max width (px) |
-| `--tooltip-z-index` | `10000` | Z-index |
-| `--tooltip-strict-positioning` | (false) | `true` to disable auto-flip |
-| `--tooltip-bg` | `hsl(0 0% 20%)` | Background color |
-| `--tooltip-color` | `white` | Text color |
-| `--tooltip-padding` | `8px 12px` | Content padding |
-| `--tooltip-radius` | `6px` | Border radius |
-| `--tooltip-font-size` | `14px` | Font size |
+- `--tooltip-position` (`top`) — top/bottom/left/right + `-start`/`-end`
+- `--tooltip-trigger` (`hover`) — hover, click, focus
+- `--tooltip-delay` (`0`) / `--tooltip-hide-delay` (`0`) — show / hide delay (ms)
+- `--tooltip-offset` (`12`) — distance from trigger (px)
+- `--tooltip-arrow` (shown) — `none` to hide; `--tooltip-arrow-size` (`6px`) sizes it
+- `--tooltip-max-width` (`250`) — max width (px)
+- `--tooltip-z-index` (`10000`)
+- `--tooltip-strict-positioning` (false) — `true` disables auto-flip
+- `--tooltip-bg` (`hsl(0 0% 20%)`) background / `--tooltip-color` (`white`) text color
+- `--tooltip-padding` (`8px 12px`) content padding, `--tooltip-radius` (`6px`), `--tooltip-font-size` (`14px`)

package/docs/ai/components/tree.md

@@ -11,8 +11,8 @@ showCheckboxes: boolean = false;  // attr: show-checkboxes
 showIcons: boolean = true;        // attr: show-icons
 expandOnClick: boolean = false;   // attr: expand-on-click
 nodes: TreeNode[] = [];
-selectedNodes: string[] = [];     // attr: selected-nodes
-checkedNodes: string[] = [];      // attr: checked-nodes
+selectedNodes: string[] = [];     // JS-only; no attribute
+checkedNodes: string[] = [];      // JS-only; no attribute
 
 interface TreeNode {
   id: string;

package/docs/ai/components/video-player.md

@@ -78,6 +78,11 @@ duration: number;               // read-only
 - ArrowRight/ArrowLeft: Seek forward/backward 5s
 - ArrowUp/ArrowDown: Volume up/down 10%
 
+## Accessibility
+
+- Controls carry ARIA labels; current time, duration, and playback state are exposed to AT
+- Transitions respect `prefers-reduced-motion`
+
 ## Basic Usage
 
 ```html

package/docs/ai/components/waterfall.md

@@ -58,3 +58,10 @@ chart.addEventListener('bar-click', (e) => {
   console.log(`Clicked: ${e.detail.item.label} (${e.detail.item.value})`);
 });
 ```
+
+## Accessibility
+
+- Bars carry data-visualization roles, are focusable, and activate by keyboard
+- `showValues` exposes value labels as screen-reader text
+- Bar types distinguishable by color *and* value label, not color alone
+- Animations respect `prefers-reduced-motion`

package/docs/ai/events.md

@@ -342,6 +342,35 @@ changeColor(color: string) { this.color = color; return { color }; }
 confirm() { return { color: this.color }; }
 ```
 
+## Event bus
+
+No bus object, no singleton. Bus = `@dispatch` publishing upward + `@on` subscribing at a chosen ancestor. Scope is a DOM node, so it lives and dies with the DOM.
+
+Two publish paths — the choice decides who can hear it:
+- **Bubble from host** — `@dispatch` defaults to `bubbles: true, composed: true`, so it crosses shadow boundaries and passes every ancestor up to `document`. For "this element did something".
+- **Dispatch on a scope** — `@dispatch` takes the same `scope` option as `@on`, firing *on* that target instead of bubbling. For subscribers that are not ancestors (sibling subtree, or a detached host).
+
+```typescript
+@dispatch('bus:cart-added')                     // bubbles from host
+@dispatch('bus:cart-added', { scope: 'global' })  // dispatched on document
+
+@on('bus:cart-added', { scope: 'global' })      // document — app-wide
+@on('bus:cart-added', { scope: 'cart-shell' })  // nearest <cart-shell> — per-instance
+```
+
+Match the halves: a bubbling publish only reaches subscribers on the host's ancestor chain. Sibling subtree → scope the dispatch too, so both meet on the same node. See [scope on @dispatch](#scope-dispatch-target).
+
+Scope choice:
+- `'global'` — genuinely app-wide (auth expiry, theme change, save shortcut)
+- selector string — feature subtree; a second shell elsewhere keeps its own traffic
+- `EventTarget` / resolver — you hold the node, or it moves and must re-resolve
+
+Prefer the narrowest scope that works; `'global'` means every instance hears every message.
+
+`bus:` is a naming convention, not a framework feature. Teardown is automatic — removed on disconnect from the resolved target, re-resolved on reconnect. Unresolvable selector → listener skipped + `console.warn`, never bound to the wrong node. Full table: [scope](#scope-listener-attachment-target).
+
+Need a reply rather than a broadcast → [@request / @respond](./request-response.md).
+
 ## Custom events
 
 Dispatching manually:

package/docs/components/breadcrumbs.md

@@ -32,9 +32,10 @@ Individual breadcrumb item (data element, no shadow DOM).
 | Property | Attribute | Type | Default | Description |
 |----------|-----------|------|---------|-------------|
 | `items` | -- | `BreadcrumbItem[]` | `[]` | Array of breadcrumb items (JS property only) |
-| `separator` | `separator` | `'/' \| '>' \| '>>' \| '.' \| '\|'` | `'/'` | Separator between items |
+| `separator` | `separator` | `'/' \| '>' \| '»' \| '•' \| '\|'` | `'/'` | Separator between items |
 | `size` | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Breadcrumb size |
 | `maxItems` | `max-items` | `number` | `0` | Max items to show (0 = show all). Collapsed items show an ellipsis. |
+| `collapsed` | `collapsed` | `boolean` | `true` | Whether the trail is collapsed behind the ellipsis. Clicking the ellipsis sets it `false`; it resets to `true` when `items`, `separator`, or `maxItems` change. Only has an effect once `maxItems` is exceeded. |
 
 ### BreadcrumbItem Interface
 

package/docs/components/calendar.md

@@ -23,7 +23,7 @@ Display and select dates with event support, date restrictions, and locale-aware
 | `events` | `CalendarEvent[]` | `[]` | Calendar events |
 | `minDate` (attr: `min-date`) | `Date \| string` | `''` | Minimum selectable date |
 | `maxDate` (attr: `max-date`) | `Date \| string` | `''` | Maximum selectable date |
-| `disabledDates` (attr: `disabled-dates`) | `(Date \| string)[]` | `[]` | Disabled dates |
+| `disabledDates` | `(Date \| string)[]` | `[]` | Disabled dates (JS-only; no attribute) |
 | `highlightToday` (attr: `highlight-today`) | `boolean` | `true` | Highlight today's date |
 | `showWeekNumbers` (attr: `show-week-numbers`) | `boolean` | `false` | Show week numbers |
 | `firstDayOfWeek` (attr: `first-day-of-week`) | `number` | `0` | First day of week (0=Sun, 1=Mon) |

package/docs/components/camera.md

@@ -19,7 +19,7 @@ Live camera feed with built-in mobile-style controls, flexible positioning, aspe
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `autoStart` (attr: `auto-start`) | `boolean` | `true` | Auto-start camera on load |
+| `autoStart` (attr: `auto-start`) | `boolean` | `false` | Auto-start camera on load |
 | `facingMode` (attr: `facing-mode`) | `'user' \| 'environment'` | `'user'` | Front or back camera |
 | `mirror` | `boolean` | `true` | Mirror video for front camera |
 | `controlsPosition` (attr: `controls-position`) | `ControlsPosition` | `'auto'` | Control button positioning |

package/docs/components/chart.md

@@ -19,7 +19,7 @@ General-purpose charting component supporting 10 chart types with animations, in
 | `type` | `ChartType` | `'line'` | Chart type: `'line'`, `'bar'`, `'horizontal-bar'`, `'area'`, `'pie'`, `'donut'`, `'scatter'`, `'bubble'`, `'radar'`, `'mixed'` |
 | `datasets` | `ChartDataset[]` | `[]` | Chart datasets (property only) |
 | `labels` | `string[]` | `[]` | X-axis labels (property only) |
-| `options` | `ChartOptions` | `{}` | Chart options (property only) |
+| `options` | `ChartOptions` | see description | Chart options (property only). Defaults: responsive, no fixed aspect ratio, clickable legend on top, hover tooltip, 500ms ease-out animation, x/y grids on |
 | `width` | `number` | `0` | Chart width (0 = auto) |
 | `height` | `number` | `0` | Chart height (0 = auto) |
 

package/docs/components/code-block.md

@@ -13,6 +13,10 @@ Display code with syntax highlighting, line numbers, and copy functionality. Use
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
 - [Accessibility](#accessibility)
+- [Fetch Mode](#fetch-mode)
+- [Grammar System](#grammar-system)
+- [Highlighter API](#highlighter-api)
+- [Token CSS Classes](#token-css-classes)
 
 ## Properties
 
@@ -20,10 +24,10 @@ Display code with syntax highlighting, line numbers, and copy functionality. Use
 |----------|------|---------|-------------|
 | `code` | `string` | `''` | Code content (set via slot or property) |
 | `language` | `CodeLanguage` | `'plaintext'` | Programming language |
-| `grammar` | `Grammar \| string \| null` | `null` | Grammar object or URL to grammar JSON |
+| `grammar` | `Grammar \| string \| null` | `''` | Grammar object or URL to grammar JSON |
 | `showLineNumbers` (attr: `show-line-numbers`) | `boolean` | `false` | Show line numbers |
 | `startLine` (attr: `start-line`) | `number` | `1` | Starting line number |
-| `highlightLines` (attr: `highlight-lines`) | `number[]` | `[]` | Lines to highlight |
+| `highlightLines` | `number[]` | `[]` | Lines to highlight (JS-only; no attribute) |
 | `copyable` | `boolean` | `true` | Show copy button |
 | `filename` | `string` | `''` | File name to display in header |
 | `format` | `string` | `''` | Formatter name from grammar (e.g. `"pretty"`), or any truthy string with `setFormatter()` |
@@ -104,10 +108,11 @@ console.log(greeting);
 
 ### Highlight Specific Lines
 
-Use `highlight-lines` to draw attention to specific lines.
+Set `highlightLines` in JavaScript to draw attention to specific lines. There is no
+`highlight-lines` attribute -- the property is JS-only.
 
 ```html
-<snice-code-block grammar="grammars/python.json" language="python" highlight-lines="[2,3,4]">
+<snice-code-block id="snippet" grammar="grammars/python.json" language="python">
 def hello():
     name = "World"
     greeting = f"Hello {name}"
@@ -115,6 +120,10 @@ def hello():
 </snice-code-block>
 ```
 
+```typescript
+document.getElementById('snippet').highlightLines = [2, 3, 4];
+```
+
 ### Programmatic Code
 
 Set code via the `code` property for dynamic content.

package/docs/components/color-picker.md

@@ -123,11 +123,12 @@ Set `show-presets` to display a row of preset color swatches for quick selection
 Use the `presets` property to provide your own set of preset colors.
 
 ```html
-<snice-color-picker
-  label="Brand Colors"
-  show-presets
-  presets='["#ff0000", "#00ff00", "#0000ff", "#ffcc00"]'
-></snice-color-picker>
+<snice-color-picker id="brand" label="Brand Colors" show-presets></snice-color-picker>
+```
+
+```typescript
+// presets is a JS-only property -- there is no presets attribute
+document.getElementById('brand').presets = ['#ff0000', '#00ff00', '#0000ff', '#ffcc00'];
 ```
 
 ### Without Text Input

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

@@ -4,6 +4,20 @@
 
 `<snice-date-time-picker>` combines an editable local date-time field, calendar, and time selectors. It is a form-associated custom element with native reset, disabled-fieldset, state-restoration, and constraint-validation behavior.
 
+## Table of Contents
+
+- [Basic usage](#basic-usage)
+- [Local datetime contract](#local-datetime-contract)
+- [Input and display](#input-and-display)
+- [Labels and composite names](#labels-and-composite-names)
+- [Validation](#validation)
+- [Disabled, readonly, and loading states](#disabled-readonly-and-loading-states)
+- [Properties](#properties)
+- [Methods](#methods)
+- [Events](#events)
+- [CSS parts](#css-parts)
+- [Accessibility](#accessibility)
+
 ## Basic usage
 
 ```typescript

package/docs/components/diff.md

@@ -200,7 +200,8 @@ When comparing large files, unchanged sections beyond the `context-lines` thresh
 
 - Dark mode support via `[data-theme="dark"]` and `prefers-color-scheme: dark`
 - Line numbers provide clear reference points for discussing specific changes
-- Color coding: added lines highlighted green, removed lines red
+- Added and removed lines carry `+`/`-` gutter markers, so the distinction does not rely on color alone
+- Color coding reinforces the markers: added lines green, removed lines red
 - Word-level diffs highlight the specific words that differ within changed lines
 - Collapsible sections reduce noise; click to expand
 - Stats header provides an immediate +N/-N overview of change scope

package/docs/components/draw.md

@@ -67,11 +67,11 @@ interface DrawStroke {
 
 | Event | Detail | Description |
 |-------|--------|-------------|
-| `draw-start` | -- | Drawing started |
-| `draw-end` | `{ stroke }` | Drawing ended (stroke complete) |
-| `draw-clear` | -- | Canvas cleared |
-| `draw-undo` | -- | Undo performed |
-| `draw-redo` | -- | Redo performed |
+| `draw-start` | `{ draw, point }` | Drawing started |
+| `draw-end` | `{ draw, stroke }` | Drawing ended (stroke complete) |
+| `draw-clear` | `{ draw }` | Canvas cleared |
+| `draw-undo` | `{ draw }` | Undo performed |
+| `draw-redo` | `{ draw }` | Redo performed |
 
 ## CSS Parts
 

package/docs/components/drawer.md

@@ -77,10 +77,10 @@ Slide-out panel from any viewport side with focus trap and dismissal options. Su
 | `--drawer-height-xl` | XL drawer height (top/bottom) | `70vh` |
 | `--drawer-height-xxl` | XXL drawer height (top/bottom) | `80vh` |
 | `--drawer-height-xxxl` | XXXL drawer height (top/bottom) | `90vh` |
-| `--drawer-bg` | Drawer background color | `var(--snice-color-surface, white)` |
-| `--drawer-shadow` | Drawer shadow | `var(--snice-shadow-lg)` |
-| `--drawer-backdrop` | Backdrop color | `rgba(0, 0, 0, 0.5)` |
-| `--drawer-transition` | Transition timing | `transform 250ms cubic-bezier(0.4, 0, 0.2, 1)` |
+| `--drawer-bg` | Drawer background color | `var(--snice-color-surface-container-highest, var(--snice-color-surface, white))` |
+| `--drawer-shadow` | Drawer shadow | `var(--snice-shadow-2xl, ...)` |
+| `--drawer-backdrop` | Backdrop color | `var(--snice-drawer-backdrop, rgb(0 0 0 / 0.6))` |
+| `--drawer-transition` | Transition timing | `transform 320ms var(--snice-ease-out, cubic-bezier(0.22, 1, 0.36, 1))` |
 | `--drawer-z-index` | Z-index | `var(--snice-z-overlay, 1050)` |
 
 ## CSS Parts

package/docs/components/input.md

@@ -14,6 +14,7 @@ Text input field with validation, icons, and form association.
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
 - [Keyboard Navigation](#keyboard-navigation)
+- [Accessibility](#accessibility)
 
 ## Properties
 

package/docs/components/layout.md

@@ -9,6 +9,7 @@ Application layout with header navigation, main content area, and footer.
 - [Methods](#methods)
 - [Slots](#slots)
 - [CSS Parts](#css-parts)
+- [CSS Custom Properties](#css-custom-properties)
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
 - [Shell variants](#shell-variants)
@@ -68,6 +69,24 @@ snice-layout::part(footer) {
 }
 ```
 
+## CSS Custom Properties
+
+| Property | Default | Applies to |
+|----------|---------|------------|
+| `--snice-layout-sidebar-width` | `16rem` | Expanded sidebar |
+| `--snice-layout-rail-collapsed-width` | `3rem` | Collapsed rail |
+| `--snice-layout-rail-width` | `18rem` | Dashboard right rail |
+| `--snice-layout-measure` | `65ch` | Blog reading measure |
+| `--snice-layout-container` | `80rem` | Landing band inner width |
+| `--snice-layout-list-width` | `20rem` | Master-detail list pane |
+| `--snice-layout-docs-nav-width` | `18.75rem` | Documentation navigation tree |
+| `--snice-layout-docs-toc-width` | `18.75rem` | Documentation on-this-page rail |
+| `--snice-layout-docs-header-height` | `4rem` | Documentation sticky header |
+| `--snice-layout-docs-header-height-compact` | `3.5rem` | Documentation header below 768px |
+| `--snice-layout-auth-width` | `24rem` | Auth split form column |
+| `--snice-layout-auth-panel-bg` | `var(--snice-color-surface-container)` | Auth split decorative panel |
+| `--snice-layout-control-size` | `2rem` | Sidebar and drawer toggle buttons |
+
 ## Basic Usage
 
 ```typescript
@@ -118,15 +137,6 @@ Use the `update()` method to sync navigation with the router.
 layout.update(appContext, placards, currentRoute, routeParams);
 ```
 
-## CSS Custom Properties
-
-| Property | Description |
-|----------|-------------|
-| `--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 |
-
 ## Shell variants
 
 `<snice-layout>` is the stacked shell (header / main / footer). These siblings cover the
@@ -266,16 +276,4 @@ it to the leading side.
 | `snice-layout-master-detail` | `selected` | boolean | `false` | A detail is open; drives the single-pane view below 641px |
 | `snice-layout-auth-split` | `panel-position` | `start`, `end` | `end` | Side the brand panel sits on |
 
-### Sizing hooks
-
-| Custom property | Default | Applies to |
-|-----------------|---------|------------|
-| `--snice-layout-sidebar-width` | `16rem` | Expanded sidebar |
-| `--snice-layout-rail-collapsed-width` | `3rem` | Collapsed rail |
-| `--snice-layout-rail-width` | `18rem` | Dashboard right rail |
-| `--snice-layout-measure` | `65ch` | Blog reading measure |
-| `--snice-layout-container` | `80rem` | Landing band inner width |
-| `--snice-layout-list-width` | `20rem` | Master-detail list pane |
-| `--snice-layout-docs-nav-width` | `18.75rem` | Documentation navigation tree |
-| `--snice-layout-docs-toc-width` | `18.75rem` | Documentation on-this-page rail |
-| `--snice-layout-auth-width` | `24rem` | Auth split form column |
+Shell sizing hooks are listed under [CSS Custom Properties](#css-custom-properties).

package/docs/components/leaderboard.md

@@ -39,7 +39,7 @@ A ranked list of entries with optional avatars, change indicators, and podium hi
 |----------|------|---------|-------------|
 | `variant` | `'default' \| 'podium' \| 'compact'` | `'default'` | Display variant |
 | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Entry size |
-| `title` | `string` | `''` | Optional title displayed above the list |
+| `title` | `string` | `''` | Optional title above the list (JS-only; a `title` attribute is the native tooltip) |
 
 ## Methods
 
@@ -108,12 +108,19 @@ import 'snice/components/leaderboard/snice-leaderboard';
 ```
 
 ```html
-<snice-leaderboard title="Top Players">
+<snice-leaderboard id="board">
   <snice-leaderboard-entry rank="1" name="Alice" score="2500"></snice-leaderboard-entry>
   <snice-leaderboard-entry rank="2" name="Bob" score="2100"></snice-leaderboard-entry>
 </snice-leaderboard>
 ```
 
+`title` is a JS-only property. A `title` attribute is the native HTML tooltip and does
+not set the heading.
+
+```typescript
+document.getElementById('board').title = 'Top Players';
+```
+
 ## Examples
 
 ### Declarative API (Child Elements)
@@ -121,7 +128,7 @@ import 'snice/components/leaderboard/snice-leaderboard';
 Use `<snice-leaderboard-entry>` elements as children. The parent reads attributes and renders the full UI.
 
 ```html
-<snice-leaderboard variant="podium" title="Season Rankings">
+<snice-leaderboard variant="podium">
   <snice-leaderboard-entry rank="1" name="Alice" score="2,500" avatar="alice.jpg" change="3" highlighted></snice-leaderboard-entry>
   <snice-leaderboard-entry rank="2" name="Bob" score="2,100" change="-1"></snice-leaderboard-entry>
   <snice-leaderboard-entry rank="3" name="Charlie" score="1,800" change="2"></snice-leaderboard-entry>

package/docs/components/link-preview.md

@@ -18,7 +18,7 @@ Displays a rich preview card for a URL with image, title, description, and site
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
 | `url` | `string` | `''` | Target URL (opens on click) |
-| `title` | `string` | `''` | Preview title (clamped to 2 lines) |
+| `title` | `string` | `''` | Preview title, clamped to 2 lines (JS-only; a `title` attribute is the native tooltip) |
 | `description` | `string` | `''` | Preview description (clamped to 3 lines) |
 | `image` | `string` | `''` | Preview image URL |
 | `siteName` (attr: `site-name`) | `string` | `''` | Site name shown in footer |
@@ -62,13 +62,20 @@ import 'snice/components/link-preview/snice-link-preview';
 
 ```html
 <snice-link-preview
+  id="preview"
   url="https://example.com"
-  title="Example Website"
   description="An example website for demonstration."
   image="https://example.com/og-image.jpg">
 </snice-link-preview>
 ```
 
+`title` is a JS-only property. A `title` attribute is the native HTML tooltip and does
+not set the preview heading.
+
+```typescript
+document.getElementById('preview').title = 'Example Website';
+```
+
 ## Examples
 
 ### Vertical Card
@@ -78,7 +85,6 @@ The default layout stacks the image above the content.
 ```html
 <snice-link-preview
   url="https://snice.dev"
-  title="Snice - Beautiful Decorators for Custom Elements"
   description="Write clean, reactive web components with TypeScript decorators."
   image="https://picsum.photos/600/300"
   site-name="snice.dev">
@@ -93,7 +99,6 @@ Use `variant="horizontal"` to display the image beside the content.
 <snice-link-preview
   variant="horizontal"
   url="https://snice.dev/guide"
-  title="Getting Started Guide"
   description="Learn to build elements step by step."
   site-name="snice.dev">
 </snice-link-preview>
@@ -104,8 +109,8 @@ Use `variant="horizontal"` to display the image beside the content.
 Use the `size` attribute to adjust padding, font sizes, and image dimensions.
 
 ```html
-<snice-link-preview size="small" url="https://example.com" title="Compact Card" description="A short summary."></snice-link-preview>
-<snice-link-preview size="large" url="https://example.com" title="Expanded Card" description="A longer description with more room for content." image="https://picsum.photos/800/400"></snice-link-preview>
+<snice-link-preview size="small" url="https://example.com" description="A short summary."></snice-link-preview>
+<snice-link-preview size="large" url="https://example.com" description="A longer description with more room for content." image="https://picsum.photos/800/400"></snice-link-preview>
 ```
 
 ### Without Image
@@ -115,7 +120,6 @@ When no image is provided, a placeholder link icon is shown.
 ```html
 <snice-link-preview
   url="https://example.com"
-  title="Text-Only Preview"
   description="When no image is provided, a placeholder icon is shown."
   site-name="example.com">
 </snice-link-preview>
@@ -126,7 +130,6 @@ When no image is provided, a placeholder link icon is shown.
 ```html
 <snice-link-preview
   url="https://example.com/article"
-  title="Article with Favicon"
   description="Shows the site favicon next to the site name."
   image="https://picsum.photos/600/300"
   site-name="example.com"
@@ -139,7 +142,6 @@ When no image is provided, a placeholder link icon is shown.
 ```html
 <snice-link-preview
   id="preview"
-  title="Clickable Preview"
   description="Listen for click events."
   url="https://example.com">
 </snice-link-preview>

package/docs/components/login.md

@@ -28,6 +28,8 @@ A complete authentication form with username/password fields, using Snice's @req
 | `showRememberMe` (attr: `show-remember-me`) | `boolean` | `true` | Show "Remember me" checkbox |
 | `showForgotPassword` (attr: `show-forgot-password`) | `boolean` | `true` | Show "Forgot password" link |
 | `actionText` (attr: `action-text`) | `string` | `'Sign In'` | Submit button text |
+| `alertMessage` | `string` | `''` | Inline alert text; set from JS to show a message above the form |
+| `alertVariant` | `'error' \| 'success' \| ''` | `''` | Styling for `alertMessage` |
 
 ## Methods
 
@@ -38,6 +40,8 @@ A complete authentication form with username/password fields, using Snice's @req
 | `setError()` | `message: string` | Display an error message |
 | `clearError()` | -- | Remove error message |
 | `setCredentials()` | `credentials: Partial<LoginCredentials>` | Set form field values |
+| `showAlert()` | `message: string, variant: 'error' \| 'success'` | Show an inline alert above the form; `setError()` is the error-only shorthand |
+| `clearAlert()` | -- | Remove the inline alert |
 
 ## Requests
 

package/docs/components/menu.md

@@ -112,7 +112,7 @@ A dropdown menu with composable items, dividers, icons, and keyboard shortcut hi
 | `--menu-border` | Panel border color | `var(--snice-color-border, #e5e7eb)` |
 | `--menu-shadow` | Panel box shadow | `var(--snice-shadow-lg)` |
 | `--menu-z-index` | Panel z-index | `var(--snice-z-floating, 1000)` |
-| `--menu-border-radius` | Panel border radius | `var(--snice-radius-md, 0.375rem)` |
+| `--menu-border-radius` | Panel border radius | `var(--snice-border-radius-md, 0.25rem)` |
 | `--menu-min-width` | Minimum panel width | `10rem` |
 
 ## Basic Usage

package/docs/components/modal.md

@@ -14,6 +14,7 @@ A dialog overlay with focus trapping, backdrop dismiss, and keyboard navigation.
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
 - [Keyboard Navigation](#keyboard-navigation)
+- [CSS Custom Properties](#css-custom-properties)
 - [Accessibility](#accessibility)
 
 ## Properties

package/docs/components/nav.md

@@ -13,6 +13,7 @@ A navigation menu that renders from placard configurations and integrates with S
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
 - [Accessibility](#accessibility)
+- [Placard Structure](#placard-structure)
 
 ## Properties
 

package/docs/components/network-graph.md

@@ -12,6 +12,7 @@ An SVG-based force-directed graph visualization for displaying relationships bet
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
 - [Accessibility](#accessibility)
+- [Data Types](#data-types)
 
 ## Properties
 

package/docs/components/notification-center.md

@@ -24,6 +24,7 @@ A bell icon with a dropdown notification panel. Displays an unread count badge,
 | `notifications` | `NotificationItem[]` | `[]` | Array of notification objects to display (set via JS) |
 | `open` | `boolean` | `false` | Whether the dropdown panel is visible |
 | `icon` | `string` | `''` | Custom bell icon (URL, image file, or emoji). Use slot for icon fonts. |
+| `placement` | `'start' \| 'end'` | `'end'` | Side the dropdown panel aligns to |
 
 ## Methods
 
@@ -74,7 +75,7 @@ snice-notification-center::part(panel) {
 | Property | Description |
 |----------|-------------|
 | `--snice-color-primary` | Mark-all-read link color and unread highlight |
-| `--snice-color-primary-subtle` | Unread item background |
+| `--snice-color-primary-subtle-hover` | Unread item background on hover (the base unread tint derives from `--snice-color-primary`) |
 | `--snice-color-danger` | Badge background and dismiss hover color |
 | `--snice-color-text-secondary` | Message text color |
 | `--snice-color-text-tertiary` | Timestamp, empty state text, and dismiss icon color |

package/docs/components/product-card.md

@@ -12,6 +12,7 @@ A product display card with image gallery, pricing, star ratings, variant select
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
 - [Accessibility](#accessibility)
+- [CSS Custom Properties](#css-custom-properties)
 - [Data Types](#data-types)
 
 ## Properties

package/docs/components/qr-reader.md

@@ -12,6 +12,7 @@ A QR code scanner using device cameras with real-time detection.
 - [CSS Custom Properties](#css-custom-properties)
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
+- [CSS Parts](#css-parts)
 - [Accessibility](#accessibility)
 
 ## Properties

package/docs/components/rating.md

@@ -21,8 +21,8 @@ An interactive star rating input with configurable precision, custom icons, and
 |----------|------|---------|-------------|
 | `value` | `number` | `0` | Current rating value |
 | `max` | `number` | `5` | Maximum number of stars |
-| `icon` | `string` | `'★'` | Character used for each rating item |
-| `emptyIcon` (attr: `empty-icon`) | `string` | `''` | Optional character for the unfilled layer; empty uses `icon` |
+| `icon` | `string` | `'star'` | Icon for each item: built-in catalogue name, emoji, URL, or image file |
+| `emptyIcon` (attr: `empty-icon`) | `string` | `''` | Optional icon for the unfilled layer; empty uses `icon` |
 | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Display size |
 | `readonly` | `boolean` | `false` | Disable user interaction |
 | `precision` | `'full' \| 'half'` | `'full'` | Click precision (full or half star increments) |
@@ -37,8 +37,8 @@ An interactive star rating input with configurable precision, custom icons, and
 
 | Property | Description | Default |
 |----------|-------------|---------|
-| `--rating-color` | Filled star color | `var(--snice-color-warning, rgb(234 179 8))` |
-| `--rating-color-empty` | Empty star color | `var(--snice-color-border, rgb(226 226 226))` |
+| `--rating-color` | Filled star color | `rgb(245 158 11)` (not theme-derived) |
+| `--rating-color-empty` | Empty star color | `var(--snice-color-text-tertiary, rgb(115 115 115))` |
 | `--rating-size` | Star size (set automatically by `size` property) | `1.5rem` |
 
 ## CSS Parts

package/docs/components/select.md

@@ -16,6 +16,7 @@ A customizable dropdown selection with single/multiple selection, search filteri
 - [External Labels and Accessible Naming](#external-labels-and-accessible-naming)
 - [Form Integration](#form-integration)
 - [Keyboard Navigation](#keyboard-navigation)
+- [CSS Custom Properties](#css-custom-properties)
 - [Accessibility](#accessibility)
 
 ## Components