snice 7.0.2 → 7.1.0

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

package/docs/components/spotlight.md

@@ -12,6 +12,7 @@ A guided tour and onboarding component that highlights elements on the page with
 - [CSS Custom Properties](#css-custom-properties)
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
+- [CSS Parts](#css-parts)
 - [Accessibility](#accessibility)
 
 ## Properties
@@ -49,6 +50,7 @@ interface SpotlightStep {
 | `spotlight-step` | `{ index: number, step: SpotlightStep }` | Navigated to a new step |
 | `spotlight-end` | `void` | Tour ended (completed or ended programmatically) |
 | `spotlight-skip` | `{ index: number }` | User skipped the tour at the given step |
+| `spotlight-target-missing` | `{ index: number, step: SpotlightStep }` | A step's target element is no longer in the DOM (e.g. a route change removed it). The popover stops rather than pointing at nothing. |
 
 ## CSS Custom Properties
 

package/docs/components/tabs.md

@@ -13,6 +13,7 @@ A tabbed interface for organizing content into separate panels, using `<snice-ta
 - [Slots](#slots)
 - [CSS Parts](#css-parts)
 - [Basic Usage](#basic-usage)
+- [CSS Custom Properties](#css-custom-properties)
 - [Examples](#examples)
 
 ## Components

package/docs/components/terminal.md

@@ -37,6 +37,9 @@ A shell terminal emulator with command execution, history navigation, and ANSI c
 | `focus()` | -- | Focus the input |
 | `getHistory()` | -- | Get command history, returns `string[]` |
 | `clearHistory()` | -- | Clear command history |
+| `appendChunk()` | `chunk: string, type?: TerminalLineType` | Feed a raw chunk without splitting on newlines; a trailing partial line stays live and grows as more chunks arrive |
+| `pipeFrom()` | `source: AsyncIterable<string> \| ReadableStream<string \| Uint8Array>, type?: TerminalLineType` | Stream a source to the terminal until it ends. Returns `Promise<void>` |
+| `commitLiveLine()` | -- | Force the current live (un-newlined) buffer to be treated as a finished line |
 
 ## Events
 

package/docs/components/textarea.md

@@ -49,7 +49,7 @@ A multi-line text input with validation, character counting, and optional auto-g
 
 | Method | Arguments | Description |
 |--------|-----------|-------------|
-| `focus()` | `options?: FocusOptions` | Focus the textarea |
+| `focus()` | -- | Focus the textarea |
 | `blur()` | -- | Remove focus |
 | `select()` | -- | Select all text |
 | `checkValidity()` | -- | Check validation, returns `boolean` |

package/docs/components/time-picker.md

@@ -4,6 +4,20 @@
 
 `<snice-time-picker>` is an editable, form-associated time control with 12-hour and 24-hour displays, dropdown or inline selectors, optional seconds, range and step constraints, native reset and restoration, and constraint validation.
 
+## Table of Contents
+
+- [Basic usage](#basic-usage)
+- [Time and form-value contract](#time-and-form-value-contract)
+- [Live value and reset default](#live-value-and-reset-default)
+- [Native form lifecycle](#native-form-lifecycle)
+- [External labels and accessible naming](#external-labels-and-accessible-naming)
+- [Validation](#validation)
+- [Display and interaction](#display-and-interaction)
+- [Properties](#properties)
+- [Methods](#methods)
+- [Events](#events)
+- [CSS parts](#css-parts)
+
 ## Basic usage
 
 ```ts

package/docs/components/tooltip.md

@@ -12,6 +12,7 @@ Provides contextual information when users hover, click, or focus an element. Su
 - [CSS Parts](#css-parts)
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
+- [CSS Custom Properties](#css-custom-properties)
 - [Attribute-Based Tooltips](#attribute-based-tooltips)
 
 ## Properties
@@ -231,6 +232,7 @@ This is the primary use case -- adding tooltips without disrupting component str
 | `--tooltip-hide-delay` | `0` | Hide delay in milliseconds |
 | `--tooltip-offset` | `12` | Distance from trigger element in pixels |
 | `--tooltip-arrow` | *(shown)* | Set to `none` to hide the arrow |
+| `--tooltip-arrow-size` | `6px` | Arrow width and height |
 | `--tooltip-max-width` | `250` | Maximum tooltip width in pixels |
 | `--tooltip-z-index` | `10000` | Z-index stacking order |
 | `--tooltip-strict-positioning` | *(false)* | Set to `true` to disable auto-flip |

package/docs/components/tree.md

@@ -24,8 +24,8 @@ Displays hierarchical data with expandable/collapsible nodes, selection, checkbo
 | `showIcons` (attr: `show-icons`) | `boolean` | `true` | Display node icons |
 | `expandOnClick` (attr: `expand-on-click`) | `boolean` | `false` | Expand/collapse on node click |
 | `nodes` | `TreeNode[]` | `[]` | Array of tree nodes |
-| `selectedNodes` (attr: `selected-nodes`) | `string[]` | `[]` | Selected node IDs |
-| `checkedNodes` (attr: `checked-nodes`) | `string[]` | `[]` | Checked node IDs |
+| `selectedNodes` | `string[]` | `[]` | Selected node IDs (JS-only; no attribute) |
+| `checkedNodes` | `string[]` | `[]` | Checked node IDs (JS-only; no attribute) |
 
 ### TreeNode Interface