snice 4.27.0 → 4.29.0

package/dist/parts.d.ts

@@ -170,9 +170,10 @@ export declare function parseKeyboardFilter(spec: string): KeyboardFilter;
  */
 export declare function matchesKeyboardFilter(event: KeyboardEvent, filter: KeyboardFilter): boolean;
 export declare class ConditionalIfPart extends Part {
-    private ifElement;
+    private startNode;
+    private endNode;
     private value;
-    private fragment;
+    private childFragment;
     constructor(ifElement: Element);
     commit(value: any): void;
     clear(): void;
@@ -182,14 +183,15 @@ export declare class ConditionalIfPart extends Part {
  * Removes/inserts matching branch based on value
  */
 export declare class ConditionalCasePart extends Part {
-    private caseElement;
+    private startNode;
+    private endNode;
     private value;
-    private childrenMap;
-    private fragments;
-    private defaultChild;
-    private currentChild;
+    private branches;
+    private defaultBranch;
+    private currentKey;
     constructor(caseElement: Element);
     commit(value: any): void;
+    private _collectCurrent;
     clear(): void;
 }
 export {};

package/dist/react/useRequestHandler.d.ts

@@ -0,0 +1,56 @@
+/**
+ * useRequestHandler — React hook for handling @request channels
+ * outside of the Snice element/controller decorator system.
+ *
+ * Listens for @request CustomEvents on a ref'd element (or document),
+ * performs the discovery/data handshake, and dispatches to your route map.
+ *
+ * The route map is **not** required to be stable across renders — the hook
+ * always uses the latest callbacks without re-attaching listeners.
+ *
+ * @example
+ * ```tsx
+ * import { useRequestHandler } from 'snice/react/useRequestHandler';
+ *
+ * function App() {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *
+ *   useRequestHandler(containerRef, {
+ *     'fetch-user': async (payload) => {
+ *       const res = await fetch(`/api/users/${payload.id}`);
+ *       return res.json();
+ *     },
+ *   });
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       <snice-user-card />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Global handler (no ref — listens on document)
+ * useRequestHandler(null, {
+ *   'fetch-user': async (payload) => ({ name: 'Jane', id: payload.id }),
+ * });
+ * ```
+ */
+export type UseRequestRoute = (payload: any) => any | Promise<any>;
+export type UseRequestRouteMap = Record<string, UseRequestRoute>;
+export interface UseRequestHandlerOptions {
+    /** If true, the handler will NOT stop propagation. Default: false */
+    passive?: boolean;
+}
+/**
+ * React hook that attaches request handlers for @request channels.
+ *
+ * @param ref   React ref to the target element, or null to use document.
+ * @param routes  Map of channel names to handler functions.
+ * @param options Optional configuration.
+ */
+export declare function useRequestHandler(ref: {
+    current: EventTarget | null;
+} | null, routes: UseRequestRouteMap, options?: UseRequestHandlerOptions): void;

package/dist/react/useRequestHandler.js

@@ -0,0 +1,103 @@
+/*!
+ * snice v4.28.0
+ * 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.
+ */
+import { useRef, useEffect } from 'react';
+
+/**
+ * useRequestHandler — React hook for handling @request channels
+ * outside of the Snice element/controller decorator system.
+ *
+ * Listens for @request CustomEvents on a ref'd element (or document),
+ * performs the discovery/data handshake, and dispatches to your route map.
+ *
+ * The route map is **not** required to be stable across renders — the hook
+ * always uses the latest callbacks without re-attaching listeners.
+ *
+ * @example
+ * ```tsx
+ * import { useRequestHandler } from 'snice/react/useRequestHandler';
+ *
+ * function App() {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *
+ *   useRequestHandler(containerRef, {
+ *     'fetch-user': async (payload) => {
+ *       const res = await fetch(`/api/users/${payload.id}`);
+ *       return res.json();
+ *     },
+ *   });
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       <snice-user-card />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Global handler (no ref — listens on document)
+ * useRequestHandler(null, {
+ *   'fetch-user': async (payload) => ({ name: 'Jane', id: payload.id }),
+ * });
+ * ```
+ */
+/**
+ * React hook that attaches request handlers for @request channels.
+ *
+ * @param ref   React ref to the target element, or null to use document.
+ * @param routes  Map of channel names to handler functions.
+ * @param options Optional configuration.
+ */
+function useRequestHandler(ref, routes, options) {
+    const routesRef = useRef(routes);
+    routesRef.current = routes;
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const channelKeys = Object.keys(routes).sort().join('\0');
+    useEffect(() => {
+        const target = ref?.current ?? document;
+        const cleanups = [];
+        for (const channelName of channelKeys.split('\0')) {
+            if (!channelName)
+                continue;
+            const eventName = `@request/${channelName}`;
+            const listener = (event) => {
+                const ce = event;
+                const { discovery, data, payload } = ce.detail;
+                if (!optionsRef.current?.passive) {
+                    ce.preventDefault();
+                    ce.stopImmediatePropagation();
+                    ce.stopPropagation();
+                }
+                discovery.resolve();
+                const handler = routesRef.current[channelName];
+                if (!handler) {
+                    data.reject(new Error(`useRequestHandler: no handler for "${channelName}"`));
+                    return;
+                }
+                Promise.resolve()
+                    .then(() => handler(payload))
+                    .then((result) => data.resolve(result))
+                    .catch((error) => {
+                    data.reject(error);
+                    console.error(`useRequestHandler: error in "${channelName}" handler:`, error);
+                });
+            };
+            target.addEventListener(eventName, listener);
+            cleanups.push(() => target.removeEventListener(eventName, listener));
+        }
+        return () => {
+            for (const fn of cleanups)
+                fn();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [channelKeys, ref]);
+}
+
+export { useRequestHandler };
+//# sourceMappingURL=useRequestHandler.js.map

package/dist/react/useRequestHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequestHandler.js","sources":["../../src/src/react/useRequestHandler.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;AAYH;;;;;;AAMG;SACa,iBAAiB,CAC/B,GAA2C,EAC3C,MAA0B,EAC1B,OAAkC,EAAA;AAElC,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC;AAChC,IAAA,SAAS,CAAC,OAAO,GAAG,MAAM;AAE1B,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;AAClC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC;IAEzD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,MAAM,GAAgB,GAAG,EAAE,OAAO,IAAI,QAAQ;QACpD,MAAM,QAAQ,GAAmB,EAAE;QAEnC,KAAK,MAAM,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;AACjD,YAAA,IAAI,CAAC,WAAW;gBAAE;AAClB,YAAA,MAAM,SAAS,GAAG,CAAA,SAAA,EAAY,WAAW,EAAE;AAE3C,YAAA,MAAM,QAAQ,GAAG,CAAC,KAAY,KAAI;gBAChC,MAAM,EAAE,GAAG,KAAoB;gBAC/B,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM;AAE9C,gBAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE;oBAChC,EAAE,CAAC,cAAc,EAAE;oBACnB,EAAE,CAAC,wBAAwB,EAAE;oBAC7B,EAAE,CAAC,eAAe,EAAE;gBACtB;gBAEA,SAAS,CAAC,OAAO,EAAE;gBAEnB,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;gBAC9C,IAAI,CAAC,OAAO,EAAE;oBACZ,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAA,mCAAA,EAAsC,WAAW,CAAA,CAAA,CAAG,CAAC,CAAC;oBAC5E;gBACF;gBAEA,OAAO,CAAC,OAAO;qBACZ,IAAI,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC;AAC3B,qBAAA,IAAI,CAAC,CAAC,MAAW,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;AAC1C,qBAAA,KAAK,CAAC,CAAC,KAAU,KAAI;AACpB,oBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;oBAClB,OAAO,CAAC,KAAK,CAAC,CAAA,6BAAA,EAAgC,WAAW,CAAA,UAAA,CAAY,EAAE,KAAK,CAAC;AAC/E,gBAAA,CAAC,CAAC;AACN,YAAA,CAAC;AAED,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACtE;AAEA,QAAA,OAAO,MAAK;YACV,KAAK,MAAM,EAAE,IAAI,QAAQ;AAAE,gBAAA,EAAE,EAAE;AACjC,QAAA,CAAC;;AAEH,IAAA,CAAC,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AACxB;;;;"}

package/dist/symbols.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v4.26.2
+ * snice v4.28.0
  * 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 v4.26.2
+ * snice v4.28.0
  * 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 v4.26.2
+ * snice v4.28.0
  * 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 v4.26.2
+ * snice v4.28.0
  * 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/DEVELOPMENT.md

@@ -98,7 +98,7 @@ All CDN builds use the shared runtime (external `snice` imports). Load `snice-ru
 - IIFE: `.js` + `.min.js`
 - Sourcemaps + README
 
-**Size:** Runtime ~17KB gzip, components ~1-93KB each
+**Size:** Runtime ~18KB gzip, components ~1-93KB each
 
 **Features:**
 - Shared runtime (external snice imports)

package/docs/ai/components/accordion.md

@@ -8,61 +8,75 @@ Collapsible sections with single or multiple open mode and keyboard navigation.
 
 Container managing accordion items.
 
+### snice-accordion-item
+
+Individual collapsible section.
+
+## Properties
+
+### snice-accordion
+
 ```typescript
 multiple: boolean = false;                         // Allow multiple items open
 variant: 'bordered' | 'elevated' = 'bordered';    // Visual style variant
 ```
 
-**Methods:**
+### snice-accordion-item
+
+```typescript
+itemId: string = '';             // attr: item-id, auto-generated if not provided
+open: boolean = false;
+disabled: boolean = false;
+```
+
+## Methods
+
+### snice-accordion
+
 - `openItem(id)` - Open specific item
 - `closeItem(id)` - Close specific item
 - `toggleItem(id)` - Toggle specific item
 - `openAll()` - Open all (multiple mode only)
 - `closeAll()` - Close all
 
-**Events:**
-- `accordion-open` - {itemId, item}
-- `accordion-close` - {itemId, item}
-
 ### snice-accordion-item
 
-Individual collapsible section.
-
-```typescript
-itemId: string;              // Auto-generated if not provided
-open: boolean = false;
-disabled: boolean = false;
-```
-
-**Methods:**
 - `toggle()` - Toggle open/closed
 - `expand(animate = true)` - Open
 - `collapse(animate = true)` - Close
 
-**Events:**
-- `accordion-item-toggle` - {itemId, open}
+## Events
+
+- `accordion-open` → `{ itemId, item }` - Item opened (on container)
+- `accordion-close` → `{ itemId, item }` - Item closed (on container)
+- `accordion-item-toggle` → `{ itemId, open }` - Item toggled (on item)
+
+## Slots
+
+### snice-accordion
+- `(default)` - `<snice-accordion-item>` elements
 
-**Slots:**
+### snice-accordion-item
 - `header` - Clickable trigger content
-- default - Collapsible content
+- `(default)` - Collapsible content
+
+## CSS Parts
 
-**CSS Parts:**
+(on snice-accordion-item)
 - `header` - The clickable button trigger
 - `title` - Span wrapping the header slot
 - `icon` - The chevron SVG icon
 - `content` - The collapsible content wrapper
 - `content-inner` - Inner div containing the default slot
 
-## Usage
+## Basic Usage
 
 ```html
-<!-- Basic -->
 <snice-accordion>
   <snice-accordion-item item-id="item-1">
     <span slot="header">Section 1</span>
     <div>Content 1</div>
   </snice-accordion-item>
-
   <snice-accordion-item item-id="item-2">
     <span slot="header">Section 2</span>
     <div>Content 2</div>
@@ -75,71 +89,23 @@ disabled: boolean = false;
     <span slot="header">A</span>
     <p>Content A</p>
   </snice-accordion-item>
-
-  <snice-accordion-item item-id="b" open>
-    <span slot="header">B</span>
-    <p>Content B</p>
-  </snice-accordion-item>
 </snice-accordion>
 
-<!-- Disabled item -->
-<snice-accordion>
-  <snice-accordion-item item-id="active">
-    <span slot="header">Active</span>
-    <p>Can open</p>
-  </snice-accordion-item>
-
-  <snice-accordion-item item-id="disabled" disabled>
-    <span slot="header">Disabled</span>
-    <p>Cannot open</p>
-  </snice-accordion-item>
-</snice-accordion>
-```
+<!-- Elevated variant -->
+<snice-accordion variant="elevated">...</snice-accordion>
 
-## Programmatic Control
-
-```typescript
-// Control items
-accordion.openItem('item-1');
-accordion.closeItem('item-2');
-accordion.toggleItem('item-3');
-accordion.openAll();  // Multiple mode only
-accordion.closeAll();
-
-// Listen for events
-accordion.addEventListener('accordion-open', (e) => {
-  console.log('Opened:', e.detail.itemId);
-});
-
-// Control individual item
-item.toggle();
-item.expand();
-item.collapse();
+<!-- Disabled item -->
+<snice-accordion-item item-id="disabled" disabled>...</snice-accordion-item>
 ```
 
 ## Keyboard Navigation
 
-- **↓** - Next item
-- **↑** - Previous item
-- **Home** - First item
-- **End** - Last item
+- **Arrow Down/Up** - Next/previous item
+- **Home/End** - First/last item
 - **Enter/Space** - Toggle focused item
 
-## Features
-
-- Single or multiple open mode
-- Keyboard navigation
-- Click or keyboard to toggle
-- Auto-generated item IDs
-- Disabled state
-- Open/close events
-- Accessibility: aria-expanded, button roles
-- Smooth animations
-
-## Notes
+## Accessibility
 
-- Items are light DOM children (not slotted)
-- Without `multiple`, opening one closes others
-- Item IDs auto-generated if not provided
-- Disabled items cannot be toggled
-- Header slot required for trigger content
+- `aria-expanded` on headers, `button` role
+- Full keyboard navigation
+- Visible focus indicators

package/docs/ai/components/action-bar.md

@@ -0,0 +1,75 @@
+# snice-action-bar
+
+Positioned, animated container for contextual actions within a relative parent.
+
+## Properties
+
+```typescript
+open: boolean = false;                          // attr: open
+position: 'top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'bottom-left'|'bottom-right' = 'bottom';
+size: 'small'|'medium' = 'medium';
+variant: 'default'|'pill' = 'default';
+noAnimation: boolean = false;                   // attr: no-animation — always visible, no transitions
+noEscapeDismiss: boolean = false;               // attr: no-escape-dismiss
+```
+
+## Methods
+
+- `show()` - Open
+- `hide()` - Close
+- `toggle()` - Toggle open state
+
+## Events
+
+- `action-bar-open` → `{ actionBar: SniceActionBarElement }`
+- `action-bar-close` → `{ actionBar: SniceActionBarElement }`
+
+## Slots
+
+- `(default)` - Action content (buttons, icons, etc.)
+
+## CSS Parts
+
+- `base` - The inner toolbar container
+
+## CSS Custom Properties
+
+- `--action-bar-background` - Background color
+- `--action-bar-border` - Border style
+- `--action-bar-border-radius` - Border radius
+- `--action-bar-padding` - Inner padding
+- `--action-bar-gap` - Gap between items
+- `--action-bar-shadow` - Box shadow
+- `--action-bar-z-index` - Z-index
+
+## Basic Usage
+
+```html
+<div style="position:relative"
+     onmouseenter="this.querySelector('snice-action-bar').show()"
+     onmouseleave="this.querySelector('snice-action-bar').hide()">
+  <p>Content</p>
+  <snice-action-bar position="bottom" variant="pill">
+    <button>Edit</button>
+    <button>Delete</button>
+  </snice-action-bar>
+</div>
+
+<!-- Always visible -->
+<snice-action-bar no-animation position="top-right" size="small">
+  <button>Edit</button>
+</snice-action-bar>
+```
+
+## Keyboard Navigation
+
+- Arrow keys navigate focusable children (roving tabindex)
+- `Escape` closes unless `no-escape-dismiss`
+- `Home`/`End` jump to first/last
+- `role="toolbar"`
+
+## Accessibility
+
+- `role="toolbar"` with `aria-label="Actions"`
+- Roving keyboard navigation
+- Escape dismiss (configurable)

package/docs/ai/components/activity-feed.md

@@ -26,16 +26,16 @@ interface Activity {
 }
 ```
 
-## Events
-
-- `activity-click` -> `{ activity: Activity }`
-- `load-more` -> `{ count: number }`
-
 ## Methods
 
 - `addActivity(activity)` - Prepend activity to feed
 - `clearFilter()` - Reset filter to show all
 
+## Events
+
+- `activity-click` → `{ activity: Activity }`
+- `load-more` → `{ count: number }`
+
 ## CSS Parts
 
 - `base` - Feed container
@@ -47,7 +47,7 @@ interface Activity {
 - `timestamp` - Timestamp text
 - `group-header` - Date group header
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-activity-feed group-by="date"></snice-activity-feed>
@@ -57,8 +57,8 @@ interface Activity {
 feed.activities = [
   { id: '1', actor: { name: 'Alice', avatar: 'alice.jpg' }, action: 'created', target: 'Project Alpha', timestamp: '2024-01-15T10:30:00Z', type: 'create', icon: '+' },
   { id: '2', actor: { name: 'Bob' }, action: 'commented on', target: 'Issue #42', timestamp: '2024-01-15T11:00:00Z', type: 'comment' },
-  { id: '3', actor: { name: 'Charlie' }, action: 'deployed', target: 'v2.0.0', timestamp: '2024-01-14T09:00:00Z', type: 'deploy' }
 ];
 feed.addEventListener('activity-click', e => console.log(e.detail.activity));
 feed.addEventListener('load-more', e => console.log('Load more, current:', e.detail.count));
+feed.addActivity({ id: '3', actor: { name: 'System' }, action: 'deployed', target: 'v3.0', timestamp: new Date().toISOString(), type: 'deploy' });
 ```

package/docs/ai/components/alert.md

@@ -9,18 +9,13 @@ variant: 'info'|'success'|'warning'|'error' = 'info';
 size: 'small'|'medium'|'large' = 'medium';
 title: string = '';
 dismissible: boolean = false;
-icon: string = '';
+icon: string = '';   // URL, emoji, or 'none'. Use icon slot for icon fonts.
 ```
 
-## Slots
-
-- `(default)` - Alert message content
-- `icon` - Custom icon content (overrides `icon` property and default icons)
-
 ## Methods
 
 - `show()` - Show alert
-- `hide()` - Hide alert
+- `hide()` - Hide alert with animation
 
 ## Events
 
@@ -28,30 +23,29 @@ icon: string = '';
 - `alert-shown` → `{ variant, title }` - Alert shown
 - `alert-hidden` → `{ variant, title }` - Alert hidden after animation
 
-## Usage
+## Slots
+
+- `(default)` - Alert message content
+- `icon` - Custom icon content (overrides `icon` property and default icons)
+
+## CSS Parts
+
+- `icon` - The icon container
+
+## Basic Usage
 
 ```html
 <!-- Basic -->
 <snice-alert>Alert message</snice-alert>
 
-<!-- Success -->
-<snice-alert variant="success">
-  Operation completed successfully!
-</snice-alert>
-
-<!-- Error -->
-<snice-alert variant="error">
-  An error occurred
-</snice-alert>
-
-<!-- Warning -->
-<snice-alert variant="warning">
-  Please review your input
-</snice-alert>
+<!-- Variants -->
+<snice-alert variant="success">Operation completed!</snice-alert>
+<snice-alert variant="error">An error occurred</snice-alert>
+<snice-alert variant="warning">Please review your input</snice-alert>
 
 <!-- With title -->
 <snice-alert variant="info" title="Information">
-  Additional details about the information.
+  Additional details.
 </snice-alert>
 
 <!-- Dismissible -->
@@ -59,37 +53,25 @@ icon: string = '';
   Can be closed by user
 </snice-alert>
 
-<!-- ⚠️ icon="info" renders as PLAIN TEXT. Use the icon slot for icon fonts. -->
-
-<!-- Icon SLOT — for Material Symbols, Font Awesome, SVGs -->
+<!-- Icon SLOT for Material Symbols, Font Awesome, SVGs -->
 <snice-alert variant="info">
   <span slot="icon" class="material-symbols-outlined">info</span>
   Information message
 </snice-alert>
 
-<!-- Icon PROPERTY — for emoji, URLs, image files only -->
-<snice-alert icon="🎉">Custom icon alert</snice-alert>
+<!-- Icon PROPERTY for emoji, URLs, image files only -->
 <snice-alert icon="/icons/info.svg">With image icon</snice-alert>
 
+<!-- No icon -->
+<snice-alert icon="none">No icon alert</snice-alert>
+
 <!-- Sizes -->
 <snice-alert size="small">Small</snice-alert>
-<snice-alert size="medium">Medium</snice-alert>
 <snice-alert size="large">Large</snice-alert>
 ```
 
-## Features
-
-- 4 variants with semantic colors
-- 3 size options
-- Optional title
-- Optional dismiss button
-- Custom icon support (URL, image files, emoji). Use slot for icon fonts.
-- Show/hide methods
-- Accessibility: role="alert"
-
-## Variants
+## Accessibility
 
-- `info` - Blue, informational
-- `success` - Green, positive feedback
-- `warning` - Orange, caution
-- `error` - Red, errors/problems
+- `role="alert"` with `aria-live="polite"`
+- Dismiss button is keyboard accessible
+- WCAG AA color contrast