snice 4.28.0 → 4.30.0

package/docs/components/tabs.md

@@ -1,24 +1,25 @@
-<!-- AI: For a low-token version of this doc, use docs/ai/components/tabs.md instead -->
+<!-- AI: For the AI-optimized version of this doc, see docs/ai/components/tabs.md -->
 
 # Tabs
 `<snice-tabs>`
 
 A tabbed interface for organizing content into separate panels, using `<snice-tab>` for navigation and `<snice-tab-panel>` for content.
 
-## Importing
+## Table of Contents
+- [Components](#components)
+- [Properties](#properties)
+- [Methods](#methods)
+- [Events](#events)
+- [Slots](#slots)
+- [CSS Parts](#css-parts)
+- [Basic Usage](#basic-usage)
+- [Examples](#examples)
 
-**ESM (bundler)**
-```typescript
-import 'snice/components/tabs/snice-tabs';
-import 'snice/components/tabs/snice-tab';
-import 'snice/components/tabs/snice-tab-panel';
-```
+## Components
 
-**CDN**
-```html
-<script src="snice-runtime.min.js"></script>
-<script src="snice-tabs.min.js"></script>
-```
+- `<snice-tabs>` - Container that manages tab selection and panels
+- `<snice-tab>` - Individual tab button (placed in `nav` slot)
+- `<snice-tab-panel>` - Content panel associated with a tab
 
 ## Properties
 
@@ -38,6 +39,15 @@ import 'snice/components/tabs/snice-tab-panel';
 | `disabled` | `boolean` | `false` | Prevents tab selection |
 | `closable` | `boolean` | `false` | Shows close button |
 
+### snice-tab-panel
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `name` | `string` | `''` | Panel identifier |
+| `transitionIn` (attr: `transition-in`) | `string` | `''` | Incoming transition |
+| `transitionOut` (attr: `transition-out`) | `string` | `''` | Outgoing transition |
+| `transitionDuration` (attr: `transition-duration`) | `number` | `300` | Transition duration in ms |
+
 ## Methods
 
 | Method | Arguments | Description |
@@ -51,8 +61,9 @@ import 'snice/components/tabs/snice-tab-panel';
 
 | Event | Detail | Description |
 |-------|--------|-------------|
-| `tab-change` | `{ index: number, oldIndex: number, tab: SniceTabElement, panel: SniceTabPanelElement }` | Active tab changed |
-| `tab-close` | `{ tab: SniceTabElement }` | Close button clicked on a closable tab |
+| `tab-change` | `{ index, oldIndex, tab, panel }` | Active tab changed |
+| `tab-select` | `{ tab }` | Tab clicked |
+| `tab-close` | `{ tab }` | Close button clicked on a closable tab |
 
 ## Slots
 
@@ -63,18 +74,16 @@ import 'snice/components/tabs/snice-tab-panel';
 
 ## CSS Parts
 
-Style internal elements from outside the shadow DOM using `::part()`.
-
-| Part | Element | Description |
-|------|---------|-------------|
-| `base` | `<div>` | Outermost tabs container |
-| `nav-container` | `<div>` | Nav bar wrapper (includes scroll buttons) |
-| `nav` | `<div>` | Tab navigation scroll area |
-| `indicator` | `<div>` | Active tab indicator bar |
-| `scroll-button` | `<button>` | Scroll arrow button (both) |
-| `scroll-button-start` | `<button>` | Start scroll button |
-| `scroll-button-end` | `<button>` | End scroll button |
-| `panels` | `<div>` | Panel content wrapper |
+| Part | Description |
+|------|-------------|
+| `base` | Outermost tabs container |
+| `nav-container` | Nav bar wrapper (includes scroll buttons) |
+| `nav` | Tab navigation scroll area |
+| `indicator` | Active tab indicator bar |
+| `scroll-button` | Scroll arrow button (both) |
+| `scroll-button-start` | Start scroll button |
+| `scroll-button-end` | End scroll button |
+| `panels` | Panel content wrapper |
 
 ## Basic Usage
 

package/docs/components/tag-input.md

@@ -1,18 +1,18 @@
-<!-- AI: For a low-token version of this doc, use docs/ai/components/tag-input.md instead -->
+<!-- AI: For the AI-optimized version of this doc, see docs/ai/components/tag-input.md -->
 
-# Tag Input Component
+# Tag Input
+`<snice-tag-input>`
 
-The tag input component provides a chip/tag-style input field where users can add tags by typing and pressing Enter or comma, remove them with Backspace or the X button, and select from autocomplete suggestions with keyboard navigation.
+A chip/tag-style input field where users can add tags by typing and pressing Enter or comma, remove them with Backspace or the X button, and select from autocomplete suggestions with keyboard navigation.
 
 ## Table of Contents
 - [Properties](#properties)
 - [Methods](#methods)
 - [Events](#events)
-- [CSS Custom Properties](#css-custom-properties)
 - [CSS Parts](#css-parts)
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
-- [Input Behavior](#input-behavior)
+- [Keyboard Navigation](#keyboard-navigation)
 - [Accessibility](#accessibility)
 
 ## Properties
@@ -31,132 +31,45 @@ The tag input component provides a chip/tag-style input field where users can ad
 
 ## Methods
 
-#### `addTag(tag: string): void`
-Add a tag programmatically.
-
-```typescript
-tagInput.addTag('JavaScript');
-```
-
-#### `removeTag(index: number): void`
-Remove the tag at the specified index.
-
-```typescript
-tagInput.removeTag(0); // Remove the first tag
-```
-
-#### `clear(): void`
-Remove all tags.
-
-```typescript
-tagInput.clear();
-```
-
-#### `focus(): void`
-Focus the input field.
-
-```typescript
-tagInput.focus();
-```
+| Method | Arguments | Description |
+|--------|-----------|-------------|
+| `addTag()` | `tag: string` | Add a tag programmatically |
+| `removeTag()` | `index: number` | Remove the tag at the specified index |
+| `clear()` | -- | Remove all tags |
+| `focus()` | -- | Focus the input field |
 
 ## Events
 
-#### `tag-add`
-Fired when a new tag is added.
-
-**Event Detail:**
-```typescript
-{
-  tag: string;       // The added tag
-  value: string[];   // Updated array of all tags
-}
-```
-
-#### `tag-remove`
-Fired when a tag is removed.
-
-**Event Detail:**
-```typescript
-{
-  tag: string;       // The removed tag
-  index: number;     // Index of the removed tag
-  value: string[];   // Updated array of all tags
-}
-```
-
-#### `tag-change`
-Fired whenever the tag list changes (add or remove).
-
-**Event Detail:**
-```typescript
-{
-  value: string[];   // Current array of all tags
-}
-```
-
-## CSS Custom Properties
-
-| Property | Description | Default |
-|----------|-------------|---------|
-| `--snice-color-border` | Container border color | `rgb(226 226 226)` |
-| `--snice-color-primary` | Focus ring color and tag accent | `rgb(37 99 235)` |
-| `--snice-color-primary-subtle` | Tag background color | `rgb(239 246 255)` |
-| `--snice-color-background` | Input background color | `rgb(255 255 255)` |
-| `--snice-color-text` | Text color | `rgb(23 23 23)` |
-| `--snice-color-text-tertiary` | Placeholder text color | -- |
-| `--snice-focus-ring-width` | Focus ring width | `2px` |
-| `--snice-focus-ring-color` | Focus ring color | -- |
-| `--snice-shadow-lg` | Suggestions dropdown shadow | -- |
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `tag-add` | `{ tag: string, value: string[] }` | A new tag was added |
+| `tag-remove` | `{ tag: string, index: number, value: string[] }` | A tag was removed |
+| `tag-change` | `{ value: string[] }` | The tag list changed (add or remove) |
 
 ## CSS Parts
 
-Style internal elements from outside the shadow DOM using `::part()`.
-
-| Part | Element | Description |
-|------|---------|-------------|
-| `base` | `<div>` | The outer wrapper div |
-| `label` | `<label>` | The label element above the input |
-| `container` | `<div>` | Container holding tags and the input field |
-| `tag` | `<span>` | An individual tag chip |
-| `tag-text` | `<span>` | The text content inside a tag |
-| `input` | `<input>` | The text input field |
-| `suggestions` | `<div>` | The autocomplete suggestions dropdown |
-
-```css
-snice-tag-input::part(container) {
-  border-radius: 8px;
-  padding: 0.5rem;
-}
-
-snice-tag-input::part(tag) {
-  background: #e0f2fe;
-  border-radius: 999px;
-  font-weight: 500;
-}
-
-snice-tag-input::part(input) {
-  font-size: 0.875rem;
-}
-```
+| Part | Description |
+|------|-------------|
+| `base` | The outer wrapper div |
+| `label` | The label element above the input |
+| `container` | Container holding tags and the input field |
+| `tag` | An individual tag chip |
+| `tag-text` | The text content inside a tag |
+| `input` | The text input field |
+| `suggestions` | The autocomplete suggestions dropdown |
 
 ## Basic Usage
 
-```html
-<snice-tag-input placeholder="Add a tag..."></snice-tag-input>
-```
-
 ```typescript
 import 'snice/components/tag-input/snice-tag-input';
 ```
 
-## Examples
-
-### Basic Tag Input
-
 ```html
 <snice-tag-input placeholder="Add a tag..."></snice-tag-input>
 ```
 
+## Examples
+
 ### With Label and Initial Tags
 
 Use the `label` attribute for a label and set initial tags via JavaScript.
@@ -165,8 +78,6 @@ Use the `label` attribute for a label and set initial tags via JavaScript.
 <snice-tag-input id="skills" label="Skills" placeholder="Add a skill..."></snice-tag-input>
 
 <script type="module">
-  import 'snice/components/tag-input/snice-tag-input';
-
   const tagInput = document.getElementById('skills');
   tagInput.value = ['JavaScript', 'TypeScript', 'CSS'];
 </script>
@@ -181,10 +92,7 @@ Set the `suggestions` property to enable autocomplete.
 
 <script type="module">
   const tagInput = document.getElementById('languages');
-  tagInput.suggestions = [
-    'JavaScript', 'TypeScript', 'Python', 'Rust', 'Go',
-    'Java', 'C++', 'Ruby', 'Swift', 'Kotlin'
-  ];
+  tagInput.suggestions = ['JavaScript', 'TypeScript', 'Python', 'Rust', 'Go'];
 </script>
 ```
 
@@ -193,75 +101,41 @@ Set the `suggestions` property to enable autocomplete.
 Use `max-tags` to restrict the number of tags.
 
 ```html
-<snice-tag-input
-  label="Top 3 Interests"
-  placeholder="Add up to 3..."
-  max-tags="3"
-></snice-tag-input>
+<snice-tag-input label="Top 3 Interests" placeholder="Add up to 3..." max-tags="3"></snice-tag-input>
 ```
 
 ### Handling Tag Changes
 
-```html
-<snice-tag-input id="tags-tracked" label="Tags" placeholder="Add a tag..."></snice-tag-input>
-<p id="tag-count">0 tags</p>
-
-<script type="module">
-  const tagInput = document.getElementById('tags-tracked');
-  const counter = document.getElementById('tag-count');
-
-  tagInput.addEventListener('tag-add', (e) => {
-    console.log(`Added: ${e.detail.tag}`);
-  });
+```javascript
+tagInput.addEventListener('tag-add', (e) => {
+  console.log(`Added: ${e.detail.tag}`);
+});
 
-  tagInput.addEventListener('tag-remove', (e) => {
-    console.log(`Removed: ${e.detail.tag}`);
-  });
+tagInput.addEventListener('tag-remove', (e) => {
+  console.log(`Removed: ${e.detail.tag}`);
+});
 
-  tagInput.addEventListener('tag-change', (e) => {
-    counter.textContent = `${e.detail.value.length} tags`;
-  });
-</script>
+tagInput.addEventListener('tag-change', (e) => {
+  console.log('Tags:', e.detail.value);
+});
 ```
 
 ### Programmatic Tag Management
 
-```html
-<snice-tag-input id="managed-tags" label="Categories"></snice-tag-input>
-<div style="margin-top: 0.5rem;">
-  <button id="add-btn">Add "New"</button>
-  <button id="clear-btn">Clear All</button>
-</div>
-
-<script type="module">
-  const tagInput = document.getElementById('managed-tags');
-  tagInput.value = ['Design', 'Development'];
-
-  document.getElementById('add-btn').addEventListener('click', () => {
-    tagInput.addTag('New');
-  });
-
-  document.getElementById('clear-btn').addEventListener('click', () => {
-    tagInput.clear();
-  });
-</script>
+```javascript
+tagInput.addTag('New');
+tagInput.removeTag(0);
+tagInput.clear();
 ```
 
 ### Disabled and Readonly States
 
 ```html
-<!-- Disabled: no interaction -->
 <snice-tag-input label="Disabled" disabled></snice-tag-input>
-
-<!-- Readonly: shows tags but cannot add or remove -->
-<snice-tag-input id="readonly-tags" label="Readonly" readonly></snice-tag-input>
-
-<script type="module">
-  document.getElementById('readonly-tags').value = ['Fixed', 'Tags'];
-</script>
+<snice-tag-input label="Readonly" readonly></snice-tag-input>
 ```
 
-## Input Behavior
+## Keyboard Navigation
 
 | Key | Action |
 |-----|--------|
@@ -273,8 +147,8 @@ Use `max-tags` to restrict the number of tags.
 
 ## Accessibility
 
-- **Keyboard support**: Full keyboard navigation for adding, removing, and selecting tags
-- **Suggestions navigation**: ArrowUp/ArrowDown navigate through the suggestions dropdown; Enter selects
-- **Backspace removal**: Pressing Backspace on an empty input removes the last tag
-- **Label**: The `label` property provides an accessible label for the input
-- **Focus management**: Focus returns to the input after adding or removing a tag
+- Full keyboard navigation for adding, removing, and selecting tags
+- ArrowUp/ArrowDown navigate through the suggestions dropdown; Enter selects
+- Pressing Backspace on an empty input removes the last tag
+- The `label` property provides an accessible label for the input
+- Focus returns to the input after adding or removing a tag

package/docs/components/tag.md

@@ -1,22 +1,18 @@
-<!-- AI: For a low-token version of this doc, use docs/ai/components/tag.md instead -->
+<!-- AI: For the AI-optimized version of this doc, see docs/ai/components/tag.md -->
 
-# Tag Component
+# Tag
 `<snice-tag>`
 
 A display-only tag/token for labeling and categorization. Unlike the chip component, tags are simpler with no selection state and are primarily used for status labels, categories, and metadata.
 
-## Importing
-
-**ESM (bundler)**
-```typescript
-import 'snice/components/tag/snice-tag';
-```
-
-**CDN**
-```html
-<script src="snice-runtime.min.js"></script>
-<script src="snice-tag.min.js"></script>
-```
+## Table of Contents
+- [Properties](#properties)
+- [Events](#events)
+- [Slots](#slots)
+- [CSS Parts](#css-parts)
+- [Basic Usage](#basic-usage)
+- [Examples](#examples)
+- [Accessibility](#accessibility)
 
 ## Properties
 
@@ -49,13 +45,6 @@ import 'snice/components/tag/snice-tag';
 | `icon` | The icon slot wrapper |
 | `label` | The label slot wrapper |
 
-```css
-snice-tag::part(base) {
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-```
-
 ## Basic Usage
 
 ```typescript
@@ -131,35 +120,8 @@ tag.addEventListener('tag-remove', (e) => {
 Use the `icon` slot to add a leading icon.
 
 ```html
-<snice-tag variant="success"><span slot="icon">✓</span>Approved</snice-tag>
-<snice-tag variant="danger"><span slot="icon">✕</span>Rejected</snice-tag>
-<snice-tag variant="warning"><span slot="icon">⚠</span>Pending</snice-tag>
-```
-
-### Status Labels
-
-```html
-<snice-tag variant="success">Active</snice-tag>
-<snice-tag variant="warning">Draft</snice-tag>
-<snice-tag variant="danger">Archived</snice-tag>
-<snice-tag outline>Inactive</snice-tag>
-```
-
-### Priority Levels
-
-```html
-<snice-tag variant="danger" size="small">Critical</snice-tag>
-<snice-tag variant="warning" size="small">High</snice-tag>
-<snice-tag variant="primary" size="small">Medium</snice-tag>
-<snice-tag size="small">Low</snice-tag>
-```
-
-### Article Categories
-
-```html
-<snice-tag pill variant="primary" size="small">Technology</snice-tag>
-<snice-tag pill variant="success" size="small">Science</snice-tag>
-<snice-tag pill variant="info" size="small">Design</snice-tag>
+<snice-tag variant="success"><span slot="icon">&#10003;</span>Approved</snice-tag>
+<snice-tag variant="danger"><span slot="icon">&#10005;</span>Rejected</snice-tag>
 ```
 
 ## Accessibility

package/docs/components/terminal.md

@@ -1,22 +1,19 @@
-<!-- AI: For a low-token version of this doc, use docs/ai/components/terminal.md instead -->
+<!-- AI: For the AI-optimized version of this doc, see docs/ai/components/terminal.md -->
 
 # Terminal
 `<snice-terminal>`
 
 A shell terminal emulator with command execution, history navigation, and ANSI color support.
 
-## Importing
-
-**ESM (bundler)**
-```typescript
-import 'snice/components/terminal/snice-terminal';
-```
-
-**CDN**
-```html
-<script src="snice-runtime.min.js"></script>
-<script src="snice-terminal.min.js"></script>
-```
+## Table of Contents
+- [Properties](#properties)
+- [Methods](#methods)
+- [Events](#events)
+- [CSS Custom Properties](#css-custom-properties)
+- [CSS Parts](#css-parts)
+- [Basic Usage](#basic-usage)
+- [Examples](#examples)
+- [Keyboard Navigation](#keyboard-navigation)
 
 ## Properties
 
@@ -46,8 +43,8 @@ import 'snice/components/terminal/snice-terminal';
 | Event | Detail | Description |
 |-------|--------|-------------|
 | `terminal-command` | `{ command: string, args: string[] }` | Command entered |
-| `terminal-clear` | -- | Terminal cleared |
-| `terminal-ready` | -- | Terminal initialized |
+| `terminal-clear` | `{}` | Terminal cleared |
+| `terminal-ready` | `{}` | Terminal initialized |
 
 ## CSS Custom Properties
 
@@ -74,28 +71,16 @@ import 'snice/components/terminal/snice-terminal';
 
 ## CSS Parts
 
-Style internal elements from outside the shadow DOM using `::part()`.
-
-| Part | Element | Description |
-|------|---------|-------------|
-| `container` | `<div>` | The terminal container |
-| `output` | `<div>` | The scrollable output area |
-| `input-line` | `<div>` | The input line wrapper |
-| `prompt` | `<span>` | The prompt text |
-| `input` | `<input>` | The text input field |
-| `line` | `<div>` | Individual output line |
-| `timestamp` | `<span>` | Line timestamp |
-| `line-content` | `<span>` | Line text content |
-
-```css
-snice-terminal::part(container) {
-  padding: 1rem;
-}
-
-snice-terminal::part(prompt) {
-  color: #89d185;
-}
-```
+| Part | Description |
+|------|-------------|
+| `container` | The terminal container |
+| `output` | The scrollable output area |
+| `input-line` | The input line wrapper |
+| `prompt` | The prompt text |
+| `input` | The text input field |
+| `line` | Individual output line |
+| `timestamp` | Line timestamp |
+| `line-content` | Line text content |
 
 ## Basic Usage
 
@@ -186,3 +171,13 @@ terminal.writeln('Information', 'info');
 terminal.writeln('Success message', 'success');
 terminal.writeln('Warning message', 'warning');
 ```
+
+## Keyboard Navigation
+
+| Key | Action |
+|-----|--------|
+| Enter | Execute command |
+| ArrowUp / ArrowDown | Navigate command history |
+| Ctrl+C | Cancel current input |
+| Ctrl+L | Clear terminal |
+| Tab | Command completion (placeholder) |