@blackcube/aurelia-kit 1.0.0-rc2 → 1.0.0-rc4

package/README.md

@@ -187,7 +187,8 @@ resolve(IEventAggregator).publish(Channels.Modal, <IModal>{ action: ModalAction.
 ```
 
 - `Open` (or `Toggle` when closed) with neither `url` nor `content` opens the dialog on its default slot; its `title`
-  and `color` are kept on the element for the frame (`$host.title`, `$host.color`) until it is closed.
+  and `color` are kept on the element for the frame (`$host.title`, `$host.color`) until it is closed. The `title` is
+  also the accessible name of the `<dialog>` (`aria-label`).
 - A form of the default slot is not posted by the element: it belongs to the page that projects it.
 - `ModalStatus.Closed` with the `id` tells the page the dialog is closed (its route can be left).
 
@@ -333,6 +334,39 @@ Publishes one toast on click. Rendered by `Bleet::toast()->…->trigger()` as at
 
 Options: `id`, `color`, `icon`, `title`, `content`, `duration`.
 
+### `<bleet-toaster>` (SPA)
+
+The toaster of a SPA, where the application's templates render the markup: the same channel, the same payload and the
+same state classes as the `bleet-toaster` attribute, but each toast is rendered by Aurelia from the markup the
+application projects into the element. The element holds no markup and no class of its own: its template only repeats
+its default slot, once per toast, the toast exposed as `$host`.
+
+```html
+<bleet-toaster popover="manual" class="fixed inset-auto top-4 right-0 … flex flex-col gap-4 pointer-events-none">
+    <div data-toaster-id.bind="$host.id"
+         class="… translate-x-full opacity-0 transition-all duration-500"
+         data-toaster-show="translate-x-0 opacity-100"
+         data-toaster-hide="translate-x-full opacity-0">
+        … ${$host.title} … <div innerhtml.bind="$host.content"></div> …
+        <button type="button" click.trigger="$host.close($event)">…</button>
+    </div>
+</bleet-toaster>
+```
+
+| `$host` (`IToastView`) | Meaning |
+|---|---|
+| `id`, `color`, `icon`, `title`, `content`, `duration` | the published toast, with the defaults of the attribute |
+| `close(event)` | closes the toast (its button) |
+
+Behavior:
+
+- The root of the projected toast carries `data-toaster-id="${$host.id}"`: once rendered, its hide classes are
+  swapped for its show classes; `close()`, `ToasterAction.Remove` or the end of its `duration` swap them back, then the
+  toast leaves the list once the transition ends.
+- With `popover="manual"` on the element, it is shown again on each toast and hidden once the last one is gone, as the
+  attribute's container.
+- The texts, the icons and the classes are the application's: its i18n, its icon component, its theme.
+
 ## Alerts
 
 ### `bleet-alert`