@gjsify/adwaita-web 0.64.1-next.247 → 0.64.2-next.252

package/README.md

@@ -106,24 +106,28 @@ 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()`.
+and queues the rest; a `priority: Adw.ToastPriority.HIGH` toast goes ahead of the
+visible one. 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 `toast.dismiss()`.
 
 ```typescript
+import { Adw } from '@gjsify/adwaita-web';
+
 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
+const toast = new Adw.Toast({ title: 'File moved to Trash', timeout: 3, button_label: 'Undo' });
+toast.connect('button-clicked', undo);
+overlay.add_toast(toast);
+overlay.add_toast(new Adw.Toast({ title: 'Second file moved' }));  // waits its turn
 
 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
+toast.dismiss();        // show the next queued toast now
+overlay.dismiss_all();  // dismiss the visible one and everything queued
 ```
 
-`addToast()`'s `timeout` is in **seconds** (mirroring `Adw.Toast:timeout`); `0`
+`Adw.Toast:timeout` is in **seconds**; `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`
@@ -319,22 +323,43 @@ registerColorIcon('org.example.Other', '/icons/other.png'); // …or an image UR
 Every `<gtk-image>` asking for a registered name draws the image unmasked and unrecoloured,
 which covers every widget that draws its icons through it, `<adw-about-dialog>` and
 `<gtk-about-dialog logo-icon-name>` among them. A name is looked up in the order GTK's own
-theme tries it (`g_themed_icon_update_names`):
+theme tries it (`g_themed_icon_update_names`, then gtkicontheme.c's theme order). A colour
+registration is hicolor's, so the current theme's symbolic glyph comes first either way:
 
 | Asked for | Tried, in order | Neither found |
 | --- | --- | --- |
-| `X` | colour `X`, then symbolic `X-symbolic` | `image-missing` |
+| `X` | symbolic `X-symbolic`, then colour `X` | `image-missing` |
 | `X-symbolic` | symbolic `X-symbolic`, then colour `X` | `image-missing` |
 
-So nothing changes for a name with no colour registration. `registerColorIcon` keys on the
+So nothing changes for a name with no colour registration, and a colour `X` shows only where the
+theme has no `X-symbolic` — the same as on GNOME. `registerColorIcon` keys on the
 **exact** name, reverse-DNS IDs included, and *throws* on an empty or spaced name, on a
 `-symbolic` (`-ltr`/`-rtl`) name — that is `registerIcon`'s half — and on a source that is
 neither SVG source nor an `http(s):`, `blob:`, `file:` or `data:image/` URL. A registration
 redraws every mounted `<gtk-image>`, and `isIconAvailable` answers `true` for the name.
 
-`Gtk.IconTheme.add_resource_path` and `add_search_path` stay records only on the web: there
-is no GResource and no file system to search, so a registration is the one way a colour
-icon gets in.
+### Icons from the app's GResource (ADR 0116)
+
+The way GNOME takes: the app's compiled `.gresource`, registered with the GIO calls it already
+makes on GJS. `Gtk.Application` adds `<resource-base-path>/icons/` to the icon theme at startup
+(`resource-base-path` defaults to `/` + the application ID with `.` as `/`), so an app that
+registers before `run()` needs nothing else:
+
+```typescript
+import { Gio } from '@gjsify/adwaita-web';
+
+Gio.resources_register(Gio.Resource.new_from_data(bytes)); // bytes: the embedded .gresource
+```
+
+`Gtk.IconTheme.get_for_display(null).add_resource_path(path)` adds a path by hand. Under a path
+the lookup follows `gtkicontheme.c`: hicolor subdirectories (`16x16/apps/`, `scalable/apps/`,
+`symbolic/apps/`, …, without a `hicolor/` component) by size and scale, then files directly
+under the path. A compiled symbolic glyph still answers a `-symbolic` name first. A `-symbolic`
+file draws as a mask in `currentColor`, any other SVG or PNG as it is; an XPM or a compressed
+entry draws `image-missing` with a warning. After a colour registration, a resource is the next
+answer, so `registerColorIcon` still wins for its name. If the resource holds `gtk/menus.ui`
+or `gtk/help-overlay.ui` under the base path, startup throws: no builder here reads them yet.
+`add_search_path` stays a record, since there is no file system to search.
 
 ### Why this is a web-only concern
 
@@ -345,7 +370,7 @@ knowing which one you are on:
 | --- | --- | --- |
 | GTK (`@gjsify/adwaita-app`) | `GtkIconTheme` looks it up in the **system** icon theme at runtime | draws the theme's `image-missing` |
 | NativeScript (`@gjsify/adwaita-nativescript`) | `GtkImage` is handed the **SVG source**, not a name | cannot happen — a missing icon is a missing import |
-| Web (this package) | a **compile-time** subset, plus `registerIcon` / `registerColorIcon` | draws `image-missing` |
+| Web (this package) | a **compile-time** subset, the `Gtk.IconTheme` resource paths, plus `registerIcon` / `registerColorIcon` | draws `image-missing` |
 
 All three therefore end on ONE glyph for a name they cannot draw. The web reaches it by two
 routes — no mask class for a known-shaped name, or no usable class for a name like

package/dist/adwaita-web.css

@@ -696,7 +696,7 @@
   font-size: var(--font-size-base);
 }
 
-adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-application-window, adw-avatar, adw-banner, adw-bin, adw-bottom-sheet, adw-bottom-sheet-bottom-bar, adw-bottom-sheet-content, adw-bottom-sheet-sheet, adw-breakpoint-bin, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, adw-clamp, adw-clamp-scrollable, adw-combo-row, adw-data-grid, adw-dialog, adw-entry-row, adw-expander-row, adw-header-bar, adw-inline-view-switcher, adw-layout-slot, adw-multi-layout-view, 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-preferences-row, adw-radio, adw-shortcut-label, adw-shortcuts-dialog, adw-shortcuts-item, adw-shortcuts-section, adw-sidebar, adw-sidebar-item, adw-sidebar-section, adw-source-view, adw-spin-row, adw-spinner, adw-split-button, adw-status-page, adw-switch-row, adw-tab-bar, adw-tab-button, adw-tab-overview, adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group, adw-toolbar-view, gtk-notebook, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-view-switcher-sidebar, adw-window, adw-window-title, adw-wrap-box, gtk-about-dialog, gtk-action-bar, gtk-application-window, gtk-aspect-frame, gtk-box, gtk-button, gtk-center-box, gtk-calendar, gtk-check-button, gtk-color-dialog-button, gtk-column-view, gtk-drag-icon, gtk-drawing-area, gtk-drop-down, gtk-editable-label, gtk-emoji-chooser, gtk-entry, gtk-expander, gtk-fixed, gtk-flow-box, gtk-flow-box-child, gtk-font-dialog-button, gtk-frame, gtk-gl-area, gtk-graphics-offload, gtk-grid, gtk-grid-view, gtk-header-bar, gtk-image, gtk-inscription, gtk-label, gtk-level-bar, gtk-link-button, gtk-list-box, gtk-list-box-row, gtk-list-view, gtk-media-controls, gtk-menu-button, gtk-overlay, gtk-page-setup-unix-dialog, gtk-paned, gtk-password-entry, gtk-picture, gtk-popover, gtk-popover-bin, gtk-popover-menu, gtk-popover-menu-bar, gtk-print-unix-dialog, gtk-progress-bar, gtk-revealer, gtk-scale, gtk-scale-button, gtk-scrollbar, gtk-scrolled-window, gtk-search-bar, gtk-search-entry, gtk-separator, gtk-source-view, gtk-spin-button, gtk-spinner, gtk-stack, gtk-stack-sidebar, gtk-stack-switcher, gtk-switch, gtk-text, gtk-text-view, gtk-toggle-button, gtk-tree-expander, gtk-video, gtk-viewport, gtk-window, gtk-window-controls, gtk-window-handle {
+adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-application-window, adw-avatar, adw-banner, adw-bin, adw-bottom-sheet, adw-bottom-sheet-bottom-bar, adw-bottom-sheet-content, adw-bottom-sheet-sheet, adw-breakpoint-bin, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, adw-clamp, adw-clamp-scrollable, adw-combo-row, adw-data-grid, adw-dialog, adw-entry-row, adw-expander-row, adw-header-bar, adw-inline-view-switcher, adw-layout-slot, adw-multi-layout-view, 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-preferences-row, adw-radio, adw-shortcut-label, adw-shortcuts-dialog, adw-shortcuts-item, adw-shortcuts-section, adw-sidebar, adw-sidebar-item, adw-sidebar-section, adw-source-view, adw-spin-row, adw-spinner, adw-split-button, adw-status-page, adw-switch-row, adw-tab-bar, adw-tab-button, adw-tab-overview, adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group, adw-toolbar-view, gtk-notebook, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-view-switcher-sidebar, adw-window, adw-window-title, adw-wrap-box, gtk-about-dialog, gtk-action-bar, gtk-application-window, gtk-aspect-frame, gtk-box, gtk-button, gtk-center-box, gtk-calendar, gtk-check-button, gtk-color-dialog-button, gtk-column-view, gtk-drag-icon, gtk-drawing-area, gtk-drop-down, gtk-editable-label, gtk-emoji-chooser, gtk-entry, gtk-expander, gtk-fixed, gtk-flow-box, gtk-flow-box-child, gtk-font-dialog-button, gtk-frame, gtk-gl-area, gtk-graphics-offload, gtk-grid, gtk-grid-view, gtk-header-bar, gtk-image, gtk-inscription, gtk-label, gtk-level-bar, gtk-link-button, gtk-list-box, gtk-list-box-row, gtk-list-view, gtk-media-controls, gtk-menu-button, gtk-overlay, gtk-page-setup-unix-dialog, gtk-paned, gtk-password-entry, gtk-picture, gtk-popover, gtk-popover-bin, gtk-popover-menu, gtk-popover-menu-bar, gtk-print-unix-dialog, gtk-progress-bar, gtk-revealer, gtk-scale, gtk-scale-button, gtk-scrollbar, gtk-scrolled-window, gtk-search-bar, gtk-search-entry, gtk-separator, gtk-source-view, gtk-spin-button, gtk-spinner, gtk-stack, gtk-stack-page, gtk-stack-sidebar, gtk-stack-switcher, gtk-switch, gtk-text, gtk-text-view, gtk-toggle-button, gtk-tree-expander, gtk-video, gtk-viewport, gtk-window, gtk-window-controls, gtk-window-handle {
   box-sizing: border-box;
   color: var(--window-fg-color);
   font-family: var(--font-family);
@@ -713,7 +713,7 @@ adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-appl
   text-shadow: none;
 }
 
-:where(adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-application-window, adw-avatar, adw-banner, adw-bin, adw-bottom-sheet, adw-bottom-sheet-bottom-bar, adw-bottom-sheet-content, adw-bottom-sheet-sheet, adw-breakpoint-bin, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, adw-clamp, adw-clamp-scrollable, adw-combo-row, adw-data-grid, adw-dialog, adw-entry-row, adw-expander-row, adw-header-bar, adw-inline-view-switcher, adw-layout-slot, adw-multi-layout-view, 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-preferences-row, adw-radio, adw-shortcut-label, adw-shortcuts-dialog, adw-shortcuts-item, adw-shortcuts-section, adw-sidebar, adw-sidebar-item, adw-sidebar-section, adw-source-view, adw-spin-row, adw-spinner, adw-split-button, adw-status-page, adw-switch-row, adw-tab-bar, adw-tab-button, adw-tab-overview, adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group, adw-toolbar-view, gtk-notebook, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-view-switcher-sidebar, adw-window, adw-window-title, adw-wrap-box, gtk-about-dialog, gtk-action-bar, gtk-application-window, gtk-aspect-frame, gtk-box, gtk-button, gtk-center-box, gtk-calendar, gtk-check-button, gtk-color-dialog-button, gtk-column-view, gtk-drag-icon, gtk-drawing-area, gtk-drop-down, gtk-editable-label, gtk-emoji-chooser, gtk-entry, gtk-expander, gtk-fixed, gtk-flow-box, gtk-flow-box-child, gtk-font-dialog-button, gtk-frame, gtk-gl-area, gtk-graphics-offload, gtk-grid, gtk-grid-view, gtk-header-bar, gtk-image, gtk-inscription, gtk-label, gtk-level-bar, gtk-link-button, gtk-list-box, gtk-list-box-row, gtk-list-view, gtk-media-controls, gtk-menu-button, gtk-overlay, gtk-page-setup-unix-dialog, gtk-paned, gtk-password-entry, gtk-picture, gtk-popover, gtk-popover-bin, gtk-popover-menu, gtk-popover-menu-bar, gtk-print-unix-dialog, gtk-progress-bar, gtk-revealer, gtk-scale, gtk-scale-button, gtk-scrollbar, gtk-scrolled-window, gtk-search-bar, gtk-search-entry, gtk-separator, gtk-source-view, gtk-spin-button, gtk-spinner, gtk-stack, gtk-stack-sidebar, gtk-stack-switcher, gtk-switch, gtk-text, gtk-text-view, gtk-toggle-button, gtk-tree-expander, gtk-video, gtk-viewport, gtk-window, gtk-window-controls, gtk-window-handle) :is(gtk-box, gtk-label, adw-button-content) {
+:where(adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-application-window, adw-avatar, adw-banner, adw-bin, adw-bottom-sheet, adw-bottom-sheet-bottom-bar, adw-bottom-sheet-content, adw-bottom-sheet-sheet, adw-breakpoint-bin, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, adw-clamp, adw-clamp-scrollable, adw-combo-row, adw-data-grid, adw-dialog, adw-entry-row, adw-expander-row, adw-header-bar, adw-inline-view-switcher, adw-layout-slot, adw-multi-layout-view, 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-preferences-row, adw-radio, adw-shortcut-label, adw-shortcuts-dialog, adw-shortcuts-item, adw-shortcuts-section, adw-sidebar, adw-sidebar-item, adw-sidebar-section, adw-source-view, adw-spin-row, adw-spinner, adw-split-button, adw-status-page, adw-switch-row, adw-tab-bar, adw-tab-button, adw-tab-overview, adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group, adw-toolbar-view, gtk-notebook, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-view-switcher-sidebar, adw-window, adw-window-title, adw-wrap-box, gtk-about-dialog, gtk-action-bar, gtk-application-window, gtk-aspect-frame, gtk-box, gtk-button, gtk-center-box, gtk-calendar, gtk-check-button, gtk-color-dialog-button, gtk-column-view, gtk-drag-icon, gtk-drawing-area, gtk-drop-down, gtk-editable-label, gtk-emoji-chooser, gtk-entry, gtk-expander, gtk-fixed, gtk-flow-box, gtk-flow-box-child, gtk-font-dialog-button, gtk-frame, gtk-gl-area, gtk-graphics-offload, gtk-grid, gtk-grid-view, gtk-header-bar, gtk-image, gtk-inscription, gtk-label, gtk-level-bar, gtk-link-button, gtk-list-box, gtk-list-box-row, gtk-list-view, gtk-media-controls, gtk-menu-button, gtk-overlay, gtk-page-setup-unix-dialog, gtk-paned, gtk-password-entry, gtk-picture, gtk-popover, gtk-popover-bin, gtk-popover-menu, gtk-popover-menu-bar, gtk-print-unix-dialog, gtk-progress-bar, gtk-revealer, gtk-scale, gtk-scale-button, gtk-scrollbar, gtk-scrolled-window, gtk-search-bar, gtk-search-entry, gtk-separator, gtk-source-view, gtk-spin-button, gtk-spinner, gtk-stack, gtk-stack-page, gtk-stack-sidebar, gtk-stack-switcher, gtk-switch, gtk-text, gtk-text-view, gtk-toggle-button, gtk-tree-expander, gtk-video, gtk-viewport, gtk-window, gtk-window-controls, gtk-window-handle) :is(gtk-box, gtk-label, adw-button-content) {
   color: inherit;
   font-family: inherit;
   font-size: inherit;
@@ -1525,6 +1525,12 @@ gtk-stack *::after {
   box-sizing: border-box;
 }
 
+gtk-stack-page *,
+gtk-stack-page *::before,
+gtk-stack-page *::after {
+  box-sizing: border-box;
+}
+
 gtk-stack-sidebar *,
 gtk-stack-sidebar *::before,
 gtk-stack-sidebar *::after {
@@ -2105,6 +2111,12 @@ adw-application-window.fullscreen {
   outline: none;
   box-shadow: none;
 }
+adw-window[maximized]:not([maximized=false]), adw-window[fullscreened]:not([fullscreened=false]),
+adw-application-window[maximized]:not([maximized=false]),
+adw-application-window[fullscreened]:not([fullscreened=false]) {
+  width: 100%;
+  height: 100%;
+}
 adw-window[hidden],
 adw-application-window[hidden] {
   display: none;
@@ -2146,6 +2158,12 @@ gtk-application-window.fullscreen {
   outline: none;
   box-shadow: none;
 }
+gtk-window[maximized]:not([maximized=false]), gtk-window[fullscreened]:not([fullscreened=false]),
+gtk-application-window[maximized]:not([maximized=false]),
+gtk-application-window[fullscreened]:not([fullscreened=false]) {
+  width: 100%;
+  height: 100%;
+}
 gtk-window > .adw-gtk-window-titlebar,
 gtk-application-window > .adw-gtk-window-titlebar {
   display: flex;
@@ -3913,13 +3931,17 @@ gtk-drag-icon .adw-drag-icon-swatch {
 }
 
 gtk-overlay {
-  display: block;
+  display: flex;
+  flex-direction: column;
   position: relative;
 }
 
 .adw-overlay-child {
   display: contents;
 }
+.adw-overlay-child > * {
+  flex: 1 1 auto;
+}
 
 .adw-overlay-layer {
   position: absolute;
@@ -5390,10 +5412,11 @@ adw-card,
 }
 
 adw-bin {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 adw-bin > :only-child {
-  block-size: 100%;
+  flex: 1 1 auto;
 }
 
 adw-clamp {
@@ -5423,12 +5446,12 @@ gtk-stack > .adw-stack-page.transitioning-in, gtk-stack > .adw-stack-page.transi
   display: flex;
   flex-direction: column;
 }
-gtk-stack:not([hhomogeneous]) > .adw-stack-page {
+gtk-stack[hhomogeneous=false] > .adw-stack-page {
   flex: 0 1 auto;
   width: max-content;
   max-width: 100%;
 }
-gtk-stack:not([vhomogeneous]) > .adw-stack-page {
+gtk-stack[vhomogeneous=false] > .adw-stack-page {
   height: max-content;
   max-height: 100%;
 }
@@ -6872,11 +6895,18 @@ adw-password-entry-row .adw-password-entry-row-toggle {
 
 adw-toast-overlay {
   position: relative;
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 adw-toast-overlay .adw-toast-overlay-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
   width: 100%;
-  height: 100%;
+}
+adw-toast-overlay .adw-toast-overlay-content > * {
+  flex: 1 1 auto;
 }
 adw-toast-overlay .adw-toast-overlay-toasts {
   position: absolute;