@gjsify/adwaita-web 0.21.0 → 0.23.0

package/README.md

@@ -41,6 +41,54 @@ Vite preset (or any Vite/bundler setup). Type declarations are shipped
 pre-built at `lib/types/index.d.ts`, so `gjsify tsc` consumers resolve the
 package's types without compiling its source.
 
+## Shared behaviour (`@gjsify/adwaita-core`)
+
+The widget *behaviour* — as opposed to the DOM rendering — comes from
+[`@gjsify/adwaita-core`](../adwaita-core), the headless Adwaita layer defined by
+[ADR 0004](../../../docs/adr/0004-headless-adwaita-core.md). It is pure TypeScript
+with no platform imports, and `@gjsify/adwaita-nativescript` composes the exact
+same state machines, so a behaviour fix lands once and both ports pick it up.
+
+| Element | Core state machine | What core owns |
+| --- | --- | --- |
+| `<adw-toast-overlay>` | `AdwToastQueue` + `AdwToast` | one toast at a time, FIFO ordering, auto-dismiss lifecycle |
+| `<adw-combo-row>` | `ComboState` | options list, index↔value mapping, out-of-range guards, programmatic-vs-user split |
+| `<adw-spin-row>` | `SpinState` | value/min/max/step with clamping on every mutation |
+| `<adw-toggle-group>` | `ToggleGroupState` | segment list, guarded active index |
+| `<adw-expander-row>` | `ExpanderState` | expanded/collapsed disclosure |
+| `<adw-alert-dialog>` | `AdwAlertResponses` | response registry, default/close response, resolve-to-chosen-id |
+
+Each element keeps only the DOM half: the markup, the CSS classes and the
+`notify::*` / `response` `CustomEvent`s. The public element API is unchanged —
+the composition is an implementation detail.
+
+### Toasts are queued, one at a time
+
+`<adw-toast-overlay>` follows `Adw.ToastOverlay`: it shows **exactly one** toast
+and queues the rest FIFO. Each queued toast is shown only after the visible one
+is dismissed — by its timeout, by its close button, by its action button, or by
+`dismiss()`.
+
+```typescript
+const overlay = document.querySelector('adw-toast-overlay');
+
+overlay.addToast('File moved to Trash', { timeout: 3, buttonLabel: 'Undo', onAction: undo });
+overlay.addToast('Second file moved');   // waits its turn — not shown yet
+
+overlay.currentToast?.title;  // 'File moved to Trash'
+overlay.pendingToasts;        // 1
+
+overlay.dismiss();      // show the next queued toast now
+overlay.clearToasts();  // dismiss the visible one and drop the queue
+```
+
+`addToast()`'s `timeout` is in **seconds** (mirroring `Adw.Toast:timeout`); `0`
+keeps the toast until it is dismissed and holds the queue behind it. The
+auto-dismiss runs on the browser's timers by default; assign
+`overlay.scheduler` a custom `ToastScheduler` (the seam `@gjsify/adwaita-core`
+defines) to drive toast lifetimes from your own clock — that is how the
+package's own regression tests advance time without real timers.
+
 ## Theming a page without `<adw-window>`
 
 The components read their colours from the `--window-*` CSS custom properties,

package/dist/adwaita-web.css

@@ -334,6 +334,365 @@
   font-size: var(--font-size-base);
 }
 
+adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content, adw-bottom-sheet-sheet, adw-button, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, adw-clamp, adw-combo-row, adw-data-grid, adw-dialog, adw-drop-down, adw-entry, adw-entry-row, adw-expander-row, adw-header-bar, adw-inline-view-switcher, adw-menu-button, adw-navigation-page, adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view, adw-password-entry-row, adw-preferences-dialog, adw-preferences-group, adw-preferences-page, adw-sidebar, adw-sidebar-item, adw-sidebar-section, adw-spinner, adw-spin-row, adw-split-button, adw-status-page, adw-switch-row, adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group, adw-toolbar-view, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-window, adw-window-title, adw-wrap-box {
+  box-sizing: border-box;
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  font-weight: 400;
+  font-style: normal;
+  font-variant: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  text-shadow: none;
+}
+
+adw-about-dialog *,
+adw-about-dialog *::before,
+adw-about-dialog *::after {
+  box-sizing: border-box;
+}
+
+adw-action-row *,
+adw-action-row *::before,
+adw-action-row *::after {
+  box-sizing: border-box;
+}
+
+adw-alert-dialog *,
+adw-alert-dialog *::before,
+adw-alert-dialog *::after {
+  box-sizing: border-box;
+}
+
+adw-alert-response *,
+adw-alert-response *::before,
+adw-alert-response *::after {
+  box-sizing: border-box;
+}
+
+adw-avatar *,
+adw-avatar *::before,
+adw-avatar *::after {
+  box-sizing: border-box;
+}
+
+adw-banner *,
+adw-banner *::before,
+adw-banner *::after {
+  box-sizing: border-box;
+}
+
+adw-bottom-sheet *,
+adw-bottom-sheet *::before,
+adw-bottom-sheet *::after {
+  box-sizing: border-box;
+}
+
+adw-bottom-sheet-content *,
+adw-bottom-sheet-content *::before,
+adw-bottom-sheet-content *::after {
+  box-sizing: border-box;
+}
+
+adw-bottom-sheet-sheet *,
+adw-bottom-sheet-sheet *::before,
+adw-bottom-sheet-sheet *::after {
+  box-sizing: border-box;
+}
+
+adw-button *,
+adw-button *::before,
+adw-button *::after {
+  box-sizing: border-box;
+}
+
+adw-button-content *,
+adw-button-content *::before,
+adw-button-content *::after {
+  box-sizing: border-box;
+}
+
+adw-button-row *,
+adw-button-row *::before,
+adw-button-row *::after {
+  box-sizing: border-box;
+}
+
+adw-card *,
+adw-card *::before,
+adw-card *::after {
+  box-sizing: border-box;
+}
+
+adw-carousel *,
+adw-carousel *::before,
+adw-carousel *::after {
+  box-sizing: border-box;
+}
+
+adw-carousel-indicator-dots *,
+adw-carousel-indicator-dots *::before,
+adw-carousel-indicator-dots *::after {
+  box-sizing: border-box;
+}
+
+adw-carousel-indicator-lines *,
+adw-carousel-indicator-lines *::before,
+adw-carousel-indicator-lines *::after {
+  box-sizing: border-box;
+}
+
+adw-clamp *,
+adw-clamp *::before,
+adw-clamp *::after {
+  box-sizing: border-box;
+}
+
+adw-combo-row *,
+adw-combo-row *::before,
+adw-combo-row *::after {
+  box-sizing: border-box;
+}
+
+adw-data-grid *,
+adw-data-grid *::before,
+adw-data-grid *::after {
+  box-sizing: border-box;
+}
+
+adw-dialog *,
+adw-dialog *::before,
+adw-dialog *::after {
+  box-sizing: border-box;
+}
+
+adw-drop-down *,
+adw-drop-down *::before,
+adw-drop-down *::after {
+  box-sizing: border-box;
+}
+
+adw-entry *,
+adw-entry *::before,
+adw-entry *::after {
+  box-sizing: border-box;
+}
+
+adw-entry-row *,
+adw-entry-row *::before,
+adw-entry-row *::after {
+  box-sizing: border-box;
+}
+
+adw-expander-row *,
+adw-expander-row *::before,
+adw-expander-row *::after {
+  box-sizing: border-box;
+}
+
+adw-header-bar *,
+adw-header-bar *::before,
+adw-header-bar *::after {
+  box-sizing: border-box;
+}
+
+adw-inline-view-switcher *,
+adw-inline-view-switcher *::before,
+adw-inline-view-switcher *::after {
+  box-sizing: border-box;
+}
+
+adw-menu-button *,
+adw-menu-button *::before,
+adw-menu-button *::after {
+  box-sizing: border-box;
+}
+
+adw-navigation-page *,
+adw-navigation-page *::before,
+adw-navigation-page *::after {
+  box-sizing: border-box;
+}
+
+adw-navigation-split-view *,
+adw-navigation-split-view *::before,
+adw-navigation-split-view *::after {
+  box-sizing: border-box;
+}
+
+adw-navigation-view *,
+adw-navigation-view *::before,
+adw-navigation-view *::after {
+  box-sizing: border-box;
+}
+
+adw-overlay-split-view *,
+adw-overlay-split-view *::before,
+adw-overlay-split-view *::after {
+  box-sizing: border-box;
+}
+
+adw-password-entry-row *,
+adw-password-entry-row *::before,
+adw-password-entry-row *::after {
+  box-sizing: border-box;
+}
+
+adw-preferences-dialog *,
+adw-preferences-dialog *::before,
+adw-preferences-dialog *::after {
+  box-sizing: border-box;
+}
+
+adw-preferences-group *,
+adw-preferences-group *::before,
+adw-preferences-group *::after {
+  box-sizing: border-box;
+}
+
+adw-preferences-page *,
+adw-preferences-page *::before,
+adw-preferences-page *::after {
+  box-sizing: border-box;
+}
+
+adw-sidebar *,
+adw-sidebar *::before,
+adw-sidebar *::after {
+  box-sizing: border-box;
+}
+
+adw-sidebar-item *,
+adw-sidebar-item *::before,
+adw-sidebar-item *::after {
+  box-sizing: border-box;
+}
+
+adw-sidebar-section *,
+adw-sidebar-section *::before,
+adw-sidebar-section *::after {
+  box-sizing: border-box;
+}
+
+adw-spinner *,
+adw-spinner *::before,
+adw-spinner *::after {
+  box-sizing: border-box;
+}
+
+adw-spin-row *,
+adw-spin-row *::before,
+adw-spin-row *::after {
+  box-sizing: border-box;
+}
+
+adw-split-button *,
+adw-split-button *::before,
+adw-split-button *::after {
+  box-sizing: border-box;
+}
+
+adw-status-page *,
+adw-status-page *::before,
+adw-status-page *::after {
+  box-sizing: border-box;
+}
+
+adw-switch-row *,
+adw-switch-row *::before,
+adw-switch-row *::after {
+  box-sizing: border-box;
+}
+
+adw-tab-page *,
+adw-tab-page *::before,
+adw-tab-page *::after {
+  box-sizing: border-box;
+}
+
+adw-tab-view *,
+adw-tab-view *::before,
+adw-tab-view *::after {
+  box-sizing: border-box;
+}
+
+adw-toast-overlay *,
+adw-toast-overlay *::before,
+adw-toast-overlay *::after {
+  box-sizing: border-box;
+}
+
+adw-toggle *,
+adw-toggle *::before,
+adw-toggle *::after {
+  box-sizing: border-box;
+}
+
+adw-toggle-group *,
+adw-toggle-group *::before,
+adw-toggle-group *::after {
+  box-sizing: border-box;
+}
+
+adw-toolbar-view *,
+adw-toolbar-view *::before,
+adw-toolbar-view *::after {
+  box-sizing: border-box;
+}
+
+adw-view-stack *,
+adw-view-stack *::before,
+adw-view-stack *::after {
+  box-sizing: border-box;
+}
+
+adw-view-stack-page *,
+adw-view-stack-page *::before,
+adw-view-stack-page *::after {
+  box-sizing: border-box;
+}
+
+adw-view-switcher *,
+adw-view-switcher *::before,
+adw-view-switcher *::after {
+  box-sizing: border-box;
+}
+
+adw-view-switcher-bar *,
+adw-view-switcher-bar *::before,
+adw-view-switcher-bar *::after {
+  box-sizing: border-box;
+}
+
+adw-view-switcher-page *,
+adw-view-switcher-page *::before,
+adw-view-switcher-page *::after {
+  box-sizing: border-box;
+}
+
+adw-window *,
+adw-window *::before,
+adw-window *::after {
+  box-sizing: border-box;
+}
+
+adw-window-title *,
+adw-window-title *::before,
+adw-window-title *::after {
+  box-sizing: border-box;
+}
+
+adw-wrap-box *,
+adw-wrap-box *::before,
+adw-wrap-box *::after {
+  box-sizing: border-box;
+}
+
 adw-window {
   display: flex;
   flex-direction: column;
@@ -2695,6 +3054,11 @@ adw-view-stack .adw-view-stack-child.active-view {
 
 adw-view-switcher-bar {
   display: block;
+}
+adw-view-switcher-bar[hidden] {
+  display: none;
+}
+adw-view-switcher-bar {
   box-sizing: border-box;
   background-color: var(--headerbar-bg-color);
   border-top: 1px solid var(--separator-color);