@gjsify/adwaita-web 0.54.0 → 0.56.0

package/scss/_print_dialogs.scss

@@ -0,0 +1,328 @@
+// _print_dialogs.scss — the two Unix print dialogs: <gtk-page-setup-unix-dialog> and
+// <gtk-print-unix-dialog>.
+//
+// Neither has a stylesheet of its own upstream: libadwaita restyles exactly three things
+// under `window.print` and one under `window.pagesetup`, and everything else is GTK
+// defaults — the `.dialog-action-area` spacing, the notebook, the grid, the frame. What is
+// below is therefore the `.ui` layout in CSS (the grid the page-setup dialog is, the
+// notebook the print dialog is) plus the four libadwaita rules that DO apply.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss:6-13
+//   (`.dialog-action-area { margin: 6px; border-spacing: 6px }`)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss:15-34
+//   (`window.print:not(.ssd-frame)`: `drawing` colour and no background or padding,
+//   `paper` WHITE with `background-clip: padding-box` and a 1px `$border_color` border,
+//   a FLAT titlebar and a `.view` `.dialog-action-box`)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss:38-42
+//   (`window.pagesetup:not(.ssd-frame)`: a FLAT titlebar)
+// Reference: refs/gtk/gtk/print/ui/gtkpagesetupunixdialog.ui (6px row / 12px column
+//   spacing, 5px margins)
+// Reference: refs/gtk/gtk/print/ui/gtkprintunixdialog.ui (18px page margins and spacing,
+//   12px inside a group, the bold group headings, the framed printer list)
+// Copyright (c) 2006-2024 Red Hat, Inc. / The GTK authors. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+// ---------------------------------------------------------------------------
+// GtkPageSetupUnixDialog — one grid, four rows.
+// ---------------------------------------------------------------------------
+
+gtk-page-setup-unix-dialog {
+  .adw-page-setup-grid {
+    display: grid;
+    // The `.ui`'s own spacing: 6px between rows, 12px between columns, 5px of margin.
+    grid-template-columns: max-content 1fr 1fr;
+    gap: 6px 12px;
+    padding: 5px;
+    align-items: center;
+  }
+
+  .adw-page-setup-label {
+    // `halign: 1`, `valign: 3` — right-aligned against its control, centred on it.
+    text-align: end;
+    align-self: center;
+  }
+
+  // `printer_combo` and `paper_size_combo` are `column-span 3` on a 4-column grid, so
+  // they fill the three remaining tracks.
+  .adw-page-setup-printer,
+  .adw-page-setup-paper {
+    grid-column: 2 / span 3;
+  }
+
+  // `paper_size_label` is the row that REPORTS the choice, and it sits under the combo.
+  .adw-page-setup-size-label {
+    grid-column: 2 / span 3;
+    padding: 2px 0;
+    font-weight: 500;
+  }
+
+  .adw-page-setup-orientation {
+    grid-column: auto;
+  }
+
+  // The `.dialog-action-area`: margin 6px, border-spacing 6px, and the Apply button is
+  // the dialog's default response.
+  .adw-page-setup-actions {
+    display: flex;
+    gap: 6px;
+    margin: 6px;
+    padding: 0;
+  }
+
+  .adw-page-setup-apply {
+    margin-left: auto;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// GtkPrintUnixDialog — a notebook over a frame, with the action area below.
+// ---------------------------------------------------------------------------
+
+gtk-print-unix-dialog {
+  .adw-print-root {
+    display: flex;
+    flex-direction: column;
+    min-width: 480px;
+  }
+
+  // The notebook's tab row, drawn as a switcher: a flat button per page.
+  .adw-print-switcher {
+    display: flex;
+    gap: 2px;
+    padding: 4px 4px 0;
+  }
+
+  .adw-print-switcher-item {
+    padding: 6px 12px;
+    border: none;
+    border-radius: 999px;
+    background-color: transparent;
+    color: inherit;
+    font-weight: 500;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:checked,
+    &.checked {
+      background-color: var(--button-active-color);
+    }
+  }
+
+  .adw-print-panel {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 12px;
+    overflow: auto;
+    // `window.print`'s `.dialog-action-box` is a `.view`, and so is the page the notebook
+    // shows around its controls.
+    background-color: var(--view-bg-color);
+    color: var(--view-fg-color);
+  }
+
+  // General and Page Setup put two groups side by side; the rest are one column.
+  .adw-print-columns {
+    display: flex;
+    gap: 18px;
+    align-items: flex-start;
+  }
+
+  .adw-print-column {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  // One `frame_templateN`: a bold heading over a grid.
+  .adw-print-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .adw-print-group-title {
+    font-weight: bold;
+  }
+
+  .adw-print-group-body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-left: 12px;
+  }
+
+  .adw-print-grid-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .adw-print-label {
+    text-align: end;
+  }
+
+  // The printer list: a framed, scrolled column of rows, each an icon and two lines.
+  .adw-print-printer-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 220px;
+    max-height: 220px;
+    overflow: auto;
+  }
+
+  .adw-print-printer-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px;
+    border: none;
+    border-radius: var(--button-radius);
+    background-color: transparent;
+    color: inherit;
+    text-align: start;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &.checked {
+      background-color: var(--button-active-color);
+    }
+  }
+
+  .adw-print-printer-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .adw-print-printer-name {
+    font-weight: bold;
+  }
+
+  .adw-print-printer-location {
+    font-size: 0.9em;
+    opacity: 0.7;
+  }
+
+  // `scrolledwindow` with `has-frame` around the printer list.
+  .adw-print-frame {
+    border: 1px solid var(--border-color);
+    border-radius: 9px;
+    background-color: var(--view-bg-color);
+    padding: 6px;
+  }
+
+  // The collate / reverse page-order preview: four 32x40 thumbnails in two columns.
+  .adw-print-collate-preview {
+    display: grid;
+    grid-template-columns: repeat(2, 32px);
+    gap: 4px;
+
+    &[data-second-column='false'] > :nth-child(n + 3) {
+      display: none;
+    }
+  }
+
+  // `page_layout_preview`: the `drawing` node — no background, no padding, the
+  // foreground colour only — with the `paper` inside it.
+  .adw-print-sheet-preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 0;
+    background: none;
+    border: none;
+    color: var(--window-fg-color);
+  }
+
+  .adw-print-paper {
+    // `paper { background-color: white; color: RGB(0 0 6 / 80%);
+    //   background-clip: padding-box; border: 1px solid $border_color }` — white paper in
+    //   a dark dialog is the point of the preview.
+    width: 110px;
+    max-width: 100%;
+    display: flex;
+    background-color: white;
+    color: rgba(0, 0, 6, 0.8);
+    background-clip: padding-box;
+    border: 1px solid var(--border-color);
+  }
+
+  .adw-print-number-up {
+    display: grid;
+    grid-template-columns: repeat(var(--adw-print-number-up-columns, 1), 1fr);
+    grid-template-rows: repeat(var(--adw-print-number-up-rows, 1), 1fr);
+    width: 100%;
+    height: 100%;
+
+    > span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+    }
+  }
+
+  .adw-print-sheet-caption {
+    font-size: 0.85em;
+    opacity: 0.8;
+  }
+
+  // The four option pages: the empty grids the backend's option widgets go into.
+  .adw-print-options-grid {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 6px 12px;
+    padding: 12px;
+
+    &[data-empty='true'] {
+      // Nothing to show, and saying so beats an empty frame: the reader has to be able to
+      // tell "this page has no options" from "this page failed to render".
+      min-height: 64px;
+      opacity: 0.6;
+      font-style: italic;
+    }
+  }
+
+  // `conflicts_widget` — an action bar, hidden until `mark_conflicts` raises it.
+  .adw-print-conflicts {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0 12px;
+    padding: 6px 12px;
+    border-radius: 9px;
+    background-color: var(--warning-bg-color);
+    color: var(--warning-color);
+  }
+
+  // `.dialog-action-area`: Preview / Cancel / Print, with Print as the default.
+  .adw-print-actions {
+    display: flex;
+    gap: 6px;
+    margin: 6px;
+    padding: 0;
+  }
+
+  .adw-print-print {
+    margin-left: auto;
+  }
+
+  // The pseudo-disabled rows the C reaches with `gtk_widget_set_sensitive (…, FALSE)`:
+  // a GTK-insensitive widget is still focusable-ish and still legible, so it dims rather
+  // than disappearing.
+  .insensitive {
+    opacity: 0.45;
+  }
+
+  input:disabled,
+  gtk-drop-down[disabled] {
+    opacity: 0.45;
+  }
+}

package/scss/_reset.scss

@@ -29,25 +29,27 @@
 // never listed, so it silently ran without the isolation floor. Nothing noticed,
 // because the only spec touching this file instantiates `adw-switch-row`.
 $adw-components:
-  adw-about-dialog, adw-action-row, gtk-action-bar, adw-alert-dialog, adw-alert-response,
-  adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-bottom-bar,
-  adw-bottom-sheet-content, adw-bottom-sheet-sheet, gtk-box, gtk-button, adw-button-content, adw-button-row,
-  adw-card, adw-carousel, adw-carousel-indicator-dots,
-  adw-carousel-indicator-lines, gtk-check-button, adw-clamp, adw-combo-row,
-  adw-data-grid,
-  adw-dialog, gtk-drop-down, gtk-entry, adw-entry-row, adw-expander-row,
-  adw-header-bar, gtk-image, adw-inline-view-switcher, gtk-label, gtk-menu-button,
-  adw-navigation-page,
-  adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view,
-  adw-password-entry-row, gtk-popover, adw-preferences-dialog,
-  adw-preferences-group, adw-preferences-page, gtk-progress-bar, adw-radio,
-  adw-shortcut-label, adw-sidebar, adw-sidebar-item,
-  adw-sidebar-section, adw-source-view, adw-spinner, adw-spin-row,
-  adw-split-button, adw-status-page, gtk-switch, 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;
+  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-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;
 
 // Roots: re-root the inherited typographic properties (and the box model) so a
 // host page's font / colour / spacing cannot flow into the widget. Every value

package/scss/_revealer.scss

@@ -0,0 +1,37 @@
+// _revealer.scss — <gtk-revealer>: the box that clips while its child slides or folds.
+//
+// libadwaita gives the revealer node NO rule of its own — `grep -rn revealer
+// src/stylesheet/` returns the one `actionbar > revealer > box` chain in `_toolbars.scss` —
+// so there is no look to copy and this partial is the CLIP.
+//
+// `overflow: hidden` is `GTK_OVERFLOW_HIDDEN`, which `gtk_revealer_start_animation` sets
+// for the four plain slide types and releases when the position lands
+// (gtkrevealer.c:230-236, :243-249). It is unconditional here instead, which differs
+// nowhere a reader can see: at a settled position the clip box is the child's own size, so
+// there is nothing to clip — and it has to be always, because a revealer that collapsed to
+// `display: none` at position 0 would hide its child from the accessibility tree too, and
+// the widget's doc section says the child stays in it whatever the state
+// (gtkrevealer.c:61-63).
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toolbars.scss (`actionbar > revealer`)
+// Reference: refs/gtk/gtk/gtkrevealer.c (GTK_OVERFLOW_HIDDEN, gtk_revealer_snapshot)
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-revealer {
+  display: block;
+  // `gtk_revealer_measure` answers the CHILD's minimum and natural, scaled — so the
+  // revealer's own size is the child's, and a block-level host would stretch to its parent
+  // instead. `fit-content` is `min(max-content, available)`, which is the pair of numbers a
+  // GTK size request is, and a flex parent can still grow it because `flex-basis: auto`
+  // reads this value.
+  width: fit-content;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+// The box the element sizes to `ceil(natural × scale)`. It has to be a real box — the
+// height it is given is the revealer's own measured height in the C.
+.adw-revealer-clip {
+  display: block;
+}

package/scss/_row.scss

@@ -1,6 +1,6 @@
 // _row.scss — Shared base styling for rows in preferences groups.
 // Reference: refs/adwaita-web/adwaita-web/scss/_row_types.scss
-// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss (AdwActionRow)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss (AdwActionRow, row.entry)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
@@ -10,8 +10,8 @@ adw-combo-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 50px;
-  padding: var(--spacing-s) var(--spacing-m);
+  min-height: 54px;
+  padding: 0 var(--spacing-m);
   gap: var(--spacing-m);
   border-bottom: 1px solid var(--card-shade-color);
 
@@ -20,6 +20,16 @@ adw-combo-row {
   }
 }
 
+// A `tooltip-text` part must cover the ROW, not just the label text inside it: the browser
+// resolves a tooltip by walking UP from the hovered node, so a part that stops at the text's
+// own height lets the walk reach the host — whose `title` is the row's LABEL — over the rest
+// of the widget. Measured on a 54px `adw-action-row`: the label text is 18px of it. The
+// marker is `applyRowTooltip`'s (`src/row-tooltip.ts`); stretching changes nothing drawn,
+// because these columns centre their own children.
+[data-row-tooltip] {
+  align-self: stretch;
+}
+
 // Shared title/subtitle text column used by every row type (action/switch/
 // combo/spin). The title is the primary label; the subtitle is dimmed and
 // hidden when empty.
@@ -31,6 +41,12 @@ adw-combo-row {
   min-width: 0;
 }
 
+// NO `.adw-row-title` default HERE, deliberately. `.adw-row-title` is also the class
+// `<adw-entry-row>` and `<adw-preferences-row>` put on their titles, so a global
+// `white-space: nowrap` here silently made those two rows un-wrapping too — a change
+// to row types this feature was never scoped to. Each row type that wants a wrapping
+// title says so in its own partial at its own specificity (see `_action_row.scss`,
+// `_expander_row.scss`); a global default can only ever be the losing side of that.
 .adw-row-subtitle {
   font-size: var(--font-size-small);
   opacity: var(--dim-opacity);
@@ -42,10 +58,25 @@ adw-combo-row {
 
 // Trailing edit pencil shared by editable rows (entry/password) — the
 // Adw.EntryRow edit affordance. Dimmed; clicking focuses the entry.
+//
+// The BOX is upstream's, rule for rule: `row.entry > .editable-area > .edit-icon`
+// (_lists.scss:194-196) is a 24px floor with 5px of padding around the glyph inside it. The
+// glyph stays 16px and centred here (`.adw-icon` centres its mask), so the box settles at
+// exactly that 24px — GTK's own measures 40x34 because the toolkit's `adw-entry-edit-symbolic`
+// is 30x24. That gap is the theme's ICON SIZE, not this rule.
+//
+// NOT PORTED from the same block, each for a reason rather than for want of a selector:
+//   · the 6px margin-start on `.edit-icon` (:198-200). These rows already keep the pencil off
+//     the text with `gap: var(--spacing-m)` = 12px, which is upstream's own arithmetic — 6px
+//     of `.editable-area` padding plus this 6px — so adding the margin would make it 18px.
+//   · the same 24px box on `.indicator`, which is only on the host through a per-subclass
+//     class (`${prefix}-indicator`); the caps-lock warning it belongs to needs a real Caps
+//     Lock source, which this port has no event for.
 .adw-row-edit {
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 5px;
   color: var(--card-fg-color);
   opacity: 0.55;
   cursor: pointer;