@mhmo91/schmancy 0.10.32 → 0.10.34

package/skills/schmancy/boat.md

@@ -1,13 +1,16 @@
 # schmancy-boat
 
-> Draggable floating FAB that expands into a panel. Great for persistent assistant/chat panels.
+> Material-3 extended FAB that opens its panel via the `show()` overlay service. Great for persistent assistant/telemetry panels.
 
-> **Note:** `schmancy-window` is the evolved successor with more capabilities (resize, maximize, multi-window registry). Prefer `schmancy-window` for new code unless you want the simpler FAB-to-panel model.
+> **Note:** `schmancy-window` is the evolved successor with more capabilities (resize, maximize, multi-window registry). Prefer `schmancy-window` for new code unless you want the simpler FAB-to-overlay model.
 
 ## Usage
 ```html
-<schmancy-boat id="assistant" icon="smart_toy" label="Assistant">
-  <div slot="header">Assistant</div>
+<schmancy-boat id="assistant" icon="smart_toy" label="Assistant" ?open=${isOpen}>
+  <schmancy-icon slot="header">smart_toy</schmancy-icon>
+  <span slot="summary">3</span>
+
+  <!-- default slot: blooms into the show() overlay from the FAB on open -->
   <div class="p-4">Panel body content</div>
 </schmancy-boat>
 ```
@@ -16,30 +19,36 @@
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
 | `id` | string | `'default'` | Unique identifier (persists drag position in localStorage) |
-| `icon` | string | — | Material icon for the FAB state |
-| `label` | string | — | Label text in FAB state |
-| `open` | boolean | `false` | Panel open/closed (reflected) |
-| `corner` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Anchor corner |
-| `expandedWidth` | string | responsive | e.g. `'320px'` |
-| `lowered` | boolean | `false` | Lower shadow in FAB state |
-
-## Getter / Setter
+| `icon` | string | — | Material icon for the FAB (overridden by the `header` slot) |
+| `label` | string | — | FAB label text. **Omit → circular icon-only FAB** |
+| `open` | boolean | `false` | Open state, reflected. Bind `?open=${…}` to drive it |
+| `corner` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Initial anchor corner |
+| `lowered` | boolean | `false` | Lower the FAB elevation |
+
+## Methods & event
 ```typescript
-boat.state = 'expanded' | 'collapsed'   // equivalent to open = true/false
-boat.state                              // current state
-boat.expand() / boat.close()
+boat.open = true          // open  (the primary, intuitive control)
+boat.open = false         // close
+boat.toggle()             // flip open ↔ closed
+boat.addEventListener('toggle', e => e.detail) // 'open' | 'closed'
 ```
 
+## Slots
+| Slot | Renders | Behavior |
+|------|---------|----------|
+| _(default)_ | the expanded panel body | relocated into the `show()` overlay on open, restored on close |
+| `summary` | trailing content on the FAB pill | live count / badge — stays on the FAB |
+| `header` | leading icon on the FAB pill | overrides the `icon` property |
+
 ## Behavior
-- Drag to reposition. Releases snap to the nearest corner.
-- Open/close uses clip-path + `SPRING_SMOOTH` for elegant reveal.
+- Drag to reposition. Releases snap to the nearest corner (FLIP + `SPRING_SMOOTH`).
+- Activation delegates to `show()`: blooms from the FAB, backdrop / Esc / back-button / focus, and sheet-on-narrow are handled by the overlay primitive.
 - Position persists in `localStorage` under `schmancy-boat-{id}`.
 - Respects `prefers-reduced-motion`.
 
 ## Example
 ```html
 <schmancy-boat id="chat" icon="chat" label="Chat" corner="bottom-right">
-  <span slot="header">Messages</span>
   <schmancy-list class="p-2">
     <!-- messages -->
   </schmancy-list>