@gjsify/adwaita-web 0.31.0 → 0.33.0

package/scss/_switch_row.scss

@@ -1,7 +1,11 @@
 // _switch_row.scss — adw-switch-row styling.
+//
+// The TOGGLE is not here: it is `<adw-switch>` and `scss/_switch.scss`. It used
+// to be, nested under `adw-switch-row {`, which is exactly why `.adw-switch` was
+// unreachable from anywhere else and `_expander_row.scss` grew a
+// character-for-character copy of it.
+//
 // Reference: refs/adwaita-web/adwaita-web/scss/_switch_row.scss
-// Reference: refs/adwaita-web/adwaita-web/scss/_switch.scss
-// Reference: refs/libadwaita/src/stylesheet/widgets/_switch.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
@@ -11,54 +15,4 @@ adw-switch-row {
     font-size: var(--font-size-base);
     color: var(--card-fg-color);
   }
-
-  .adw-switch {
-    position: relative;
-    display: inline-block;
-    width: 44px;
-    height: 24px;
-    flex-shrink: 0;
-
-    input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-      position: absolute;
-    }
-  }
-
-  .adw-switch-slider {
-    position: absolute;
-    cursor: pointer;
-    inset: 0;
-    background-color: var(--switch-off-bg);
-    border-radius: 12px;
-    transition: background-color 0.15s ease-out;
-
-    &::before {
-      content: "";
-      position: absolute;
-      height: 20px;
-      width: 20px;
-      left: 2px;
-      bottom: 2px;
-      background-color: var(--switch-knob-bg);
-      border-radius: 50%;
-      transition: transform 0.15s ease-out;
-      box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
-    }
-  }
-
-  .adw-switch input:checked + .adw-switch-slider {
-    background-color: var(--accent-bg-color);
-
-    &::before {
-      transform: translateX(20px);
-    }
-  }
-
-  .adw-switch input:focus-visible + .adw-switch-slider {
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
-  }
 }

package/scss/_tab_view.scss

@@ -127,7 +127,66 @@ adw-tab-view {
     min-width: 0;
   }
 
+  // --- Icon + indicator slots (AdwTab update_icons) ---
+  // Both are mask-image spans carrying `adw-icon adw-icon--<name>`; the element
+  // toggles `hidden` from `tabIconState`, whose rules decide which of the two
+  // shows — on a pinned tab the indicator REPLACES the icon.
+  // Reference: refs/libadwaita/src/adw-tab.c (update_icons, :171-198)
+  .adw-tab-icon,
+  .adw-tab-indicator {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // `AdwTabPage:loading` swaps the icon image for an `AdwSpinnerPaintable`
+  // (`update_icons`, adw-tab.c:172-190) — the SAME paintable `Adw.Spinner` uses.
+  // So the tab mounts a real `<adw-spinner>` in the icon's slot and this block
+  // only places it. It used to restate `border: 2px`,
+  // `rgba(127, 127, 127, 0.25)` and `0.8s` under a comment claiming the geometry
+  // and keyframes were adw-spinner's and "not a second copy of them" — which is
+  // how it inherited every spinner defect independently.
+  .adw-tab-spinner {
+    flex: none;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // A pinned tab is a single-glyph chip: libadwaita hides both the title and the
+  // close button at construction (refs/libadwaita/src/adw-tab.c:645-650). The
+  // close button is gated in JS by `tabCloseVisible`, which carries the same rule.
+  .adw-tab.pinned {
+    padding: 0 var(--spacing-xs);
+
+    .adw-tab-title {
+      display: none;
+    }
+  }
+
+  // `AdwTabPage:needs-attention` — the accent underline libadwaita animates in
+  // (refs/libadwaita/src/adw-tab.c update_needs_attention).
+  .adw-tab.needs-attention::after {
+    content: '';
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    width: 12px;
+    height: 2px;
+    transform: translateX(-50%);
+    border-radius: 1px;
+    background-color: var(--accent-bg-color);
+  }
+
   // --- Close affordance (CSS-drawn "×", no symbolic icon ships) ---
+  // Presence is decided in JS by `tabCloseVisible` — `(hovering && fullyVisible)
+  // || selected || dragging`, and never on a pinned tab (adw-tab.c:124, :645-650)
+  // — which is why the `[hidden]` rule below is load-bearing rather than cosmetic.
   .adw-tab-close {
     box-sizing: border-box;
     flex-shrink: 0;
@@ -146,6 +205,10 @@ adw-tab-view {
       background-color 150ms ease-in-out,
       opacity 150ms ease-in-out;
 
+    &[hidden] {
+      display: none;
+    }
+
     &:hover {
       opacity: 1;
       background-color: var(--button-hover-color);

package/scss/_theme.scss

@@ -31,6 +31,16 @@
   --entry-border-hover-color: rgba(255, 255, 255, 0.26);
   --destructive-bg-color: #c01c28;
   --destructive-fg-color: #ffffff;
+  // Semantic states — libadwaita's dark overrides (_colors.scss:83-92): the
+  // backgrounds darken (green_5 / a hand-picked amber / red_4) and the
+  // standalone colour LIGHTENS instead of darkening, so it stays readable on a
+  // dark surface. Upstream does not re-declare the `*-fg-color`s here either.
+  --success-bg-color: #26a269;
+  --success-color: oklab(from var(--success-bg-color) max(l, 0.85) a b);
+  --warning-bg-color: #cd9309;
+  --warning-color: oklab(from var(--warning-bg-color) max(l, 0.85) a b);
+  --error-bg-color: #c01c28;
+  --error-color: oklab(from var(--error-bg-color) max(l, 0.85) a b);
   --switch-off-bg: rgba(255, 255, 255, 0.2);
   --switch-knob-bg: #deddda;
   // The active toggle is a raised near-white chip in both themes, so its text

package/scss/_toolbar_view.scss

@@ -11,6 +11,8 @@ adw-toolbar-view {
   min-height: 0;
   min-width: 0;
   flex: 1 1 auto;
+  // Positioning context for the extend-content-to-*-edge overlays below.
+  position: relative;
 
   .adw-toolbar-view-top,
   .adw-toolbar-view-bottom {
@@ -28,4 +30,76 @@ adw-toolbar-view {
     flex-direction: column;
     background-color: var(--window-bg-color);
   }
+
+  // top-bar-style / bottom-bar-style: an opaque background plus a persistent
+  // shadow, which `.border` swaps for a hairline (adw-toolbar-view.c:1011-1024,
+  // _toolbars.scss `> .top-bar.raised`).
+  .adw-toolbar-view-top.raised,
+  .adw-toolbar-view-bottom.raised {
+    background-color: var(--headerbar-bg-color);
+    color: var(--headerbar-fg-color);
+  }
+
+  .adw-toolbar-view-top.raised {
+    box-shadow:
+      0 1px var(--headerbar-shade-color),
+      0 2px 4px var(--headerbar-shade-color);
+
+    &.border {
+      box-shadow: 0 1px var(--headerbar-shade-color);
+    }
+  }
+
+  .adw-toolbar-view-bottom.raised {
+    box-shadow:
+      0 -1px var(--headerbar-shade-color),
+      0 -2px 4px var(--headerbar-shade-color);
+
+    &.border {
+      box-shadow: 0 -1px var(--headerbar-shade-color);
+    }
+  }
+
+  // The scroll fade under a FLAT bar. libadwaita paints it on the scrolled
+  // window; the browser equivalent is a non-interactive gradient stuck to the
+  // scrollport edge, taking no space of its own — a NEGATIVE margin equal to its
+  // height (_toolbars.scss :342-343, _scrolling.scss :150-157).
+  &.undershoot-top .adw-toolbar-view-content::before,
+  &.undershoot-bottom .adw-toolbar-view-content::after {
+    content: '';
+    position: sticky;
+    height: 6px;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  &.undershoot-top .adw-toolbar-view-content::before {
+    top: 0;
+    margin-bottom: -6px;
+    background: linear-gradient(to bottom, var(--headerbar-shade-color), transparent);
+  }
+
+  &.undershoot-bottom .adw-toolbar-view-content::after {
+    bottom: 0;
+    margin-top: -6px;
+    background: linear-gradient(to top, var(--headerbar-shade-color), transparent);
+  }
+}
+
+// extend-content-to-*-edge: the content spans the full height and the bar is
+// drawn OVER it, which is `content_offset = 0` / `content_height = height` in
+// adw_toolbar_view_size_allocate (adw-toolbar-view.c:390-397).
+adw-toolbar-view[extend-content-to-top-edge] > .adw-toolbar-view-top,
+adw-toolbar-view[extend-content-to-bottom-edge] > .adw-toolbar-view-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+adw-toolbar-view[extend-content-to-top-edge] > .adw-toolbar-view-top {
+  top: 0;
+}
+
+adw-toolbar-view[extend-content-to-bottom-edge] > .adw-toolbar-view-bottom {
+  bottom: 0;
 }

package/scss/_variables.scss

@@ -60,6 +60,23 @@
   --destructive-bg-color: #e01b24;
   --destructive-fg-color: #ffffff;
 
+  // Semantic states. `.error` / `.warning` / `.success` (see _labels.scss) do
+  // not just recolour text — they REBIND the three accent tokens to these, so
+  // anything accent-coloured inside them follows. Values are libadwaita's
+  // (_colors.scss:16-29): red_3 / yellow_5 / green_4 from _palette.scss:106-121.
+  // The standalone `*-color` is upstream's own relative-colour derivation of the
+  // background, kept as an expression rather than resolved to a hex so it tracks
+  // a re-themed `*-bg-color`.
+  --success-bg-color: #2ec27e;
+  --success-fg-color: #ffffff;
+  --success-color: oklab(from var(--success-bg-color) min(l, 0.5) a b);
+  --warning-bg-color: #e5a50a;
+  --warning-fg-color: rgba(0, 0, 0, 0.8);
+  --warning-color: oklab(from var(--warning-bg-color) min(l, 0.5) a b);
+  --error-bg-color: #e01b24;
+  --error-fg-color: #ffffff;
+  --error-color: oklab(from var(--error-bg-color) min(l, 0.5) a b);
+
   // Switch
   --switch-off-bg: rgba(0, 0, 0, 0.2);
   --switch-knob-bg: #ffffff;
@@ -82,4 +99,21 @@
   --font-size-small: 9pt;
   --font-size-heading: 12pt;
   --dim-opacity: 0.55;
+
+  // Document + monospace families, behind `.document` / `.monospace`
+  // (_labels.scss:75-84). In GTK these four are written into `:root` at RUNTIME
+  // by AdwStyleManager from the desktop's font settings
+  // (adw-style-manager.c:169-218), defaulting to `Sans 10` / `Monospace 10`
+  // (:50-56). A browser has no style manager, so they are ordinary tokens here
+  // — same names, so re-theming goes through the documented contract. The
+  // monospace stack is the one `_data_grid.scss` used to inline; it has ONE home
+  // now, and Adwaita Mono heads it because `@gjsify/adwaita-fonts` ships it.
+  // `'Cantarell'` is dropped from that stack on the way here: Cantarell is
+  // GNOME's PROPORTIONAL UI font, so a monospace fallback chain that reaches it
+  // second lands on a font whose figures do not line up — the exact property
+  // `.monospace` exists for.
+  --document-font-family: var(--font-family);
+  --document-font-size: var(--font-size-base);
+  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+  --monospace-font-size: var(--font-size-base);
 }

package/scss/_view_switcher.scss

@@ -47,6 +47,15 @@ adw-view-switcher {
         user-select: none;
         -webkit-user-select: none;
 
+        // A page with neither title nor icon has NO button at all
+        // (adw-view-switcher.c:178), spelled here as the `hidden` attribute.
+        // Re-assert it as an AUTHOR rule: the UA `[hidden] { display: none }`
+        // loses to this block's own author `display: inline-flex` (cascade ORIGIN
+        // beats specificity), so without this a hidden button stays on screen.
+        &[hidden] {
+            display: none;
+        }
+
         .adw-icon {
             width: 16px;
             height: 16px;
@@ -59,6 +68,37 @@ adw-view-switcher {
             text-overflow: ellipsis;
         }
 
+        // AdwIndicatorBin's badge — the unread count, or a bare dot when only
+        // `needs-attention` is set.
+        // Reference: refs/libadwaita/src/adw-indicator-bin.c
+        .adw-view-switcher-indicator {
+            display: inline-flex;
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: center;
+            min-width: 16px;
+            height: 16px;
+            padding: 0 4px;
+            border-radius: 8px;
+            background-color: var(--accent-bg-color);
+            color: var(--accent-fg-color);
+            font-size: 0.625rem;
+            font-weight: 700;
+            line-height: 1;
+
+            &[hidden] {
+                display: none;
+            }
+
+            &.needs-attention {
+                min-width: 6px;
+                width: 6px;
+                height: 6px;
+                padding: 0;
+                border-radius: 3px;
+            }
+        }
+
         &:hover {
             background-color: var(--button-hover-color);
         }

package/scss/_view_switcher_bar.scss

@@ -64,6 +64,14 @@ adw-view-switcher-bar {
         user-select: none;
         -webkit-user-select: none;
 
+        // Same cascade trap as the bar itself: a page with neither title nor
+        // icon has no button (adw-view-switcher.c:178), and the UA
+        // `[hidden] { display: none }` loses to this block's author
+        // `display: inline-flex` unless it is re-asserted here.
+        &[hidden] {
+            display: none;
+        }
+
         .adw-view-switcher-bar-icon {
             width: 16px;
             height: 16px;
@@ -78,6 +86,35 @@ adw-view-switcher-bar {
             text-overflow: ellipsis;
         }
 
+        // AdwIndicatorBin's badge — see refs/libadwaita/src/adw-indicator-bin.c.
+        .adw-view-switcher-bar-indicator {
+            display: inline-flex;
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: center;
+            min-width: 16px;
+            height: 16px;
+            padding: 0 4px;
+            border-radius: 8px;
+            background-color: var(--accent-bg-color);
+            color: var(--accent-fg-color);
+            font-size: 0.625rem;
+            font-weight: 700;
+            line-height: 1;
+
+            &[hidden] {
+                display: none;
+            }
+
+            &.needs-attention {
+                min-width: 6px;
+                width: 6px;
+                height: 6px;
+                padding: 0;
+                border-radius: 3px;
+            }
+        }
+
         &:hover {
             background-color: var(--button-hover-color);
         }

package/scss/_wrap_box.scss

@@ -5,16 +5,75 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
-// Layout (flex-direction, gaps, justify-content, align-items, align-content) is
-// driven imperatively by the component from its attributes — these are the
-// libadwaita defaults (horizontal, packed to the start of each line, lines
-// wrapping downwards from the top). A wrap box is a pure layout container, so it
-// carries no background of its own; children handle their own theming.
+// Direction, gaps, `justify-content` and `align-content` are driven imperatively
+// by the component from its attributes — these are the libadwaita defaults
+// (horizontal, packed to the start of each line, lines wrapping downwards from
+// the top). A wrap box is a pure layout container, so it carries no background
+// of its own; children handle their own theming.
 adw-wrap-box {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
-  align-items: flex-start;
+  // Each child is allocated the FULL cross extent of its line — `h = line_size`
+  // in adw-wrap-layout.c:746-751 — which is `stretch`, the flexbox default. The
+  // port used to write `flex-start` here and drive it from `align`, which is a
+  // MAIN-axis property in libadwaita and belongs on `justify-content`.
+  align-items: stretch;
   align-content: flex-start;
 }
+
+// `wrap-policy`, published by the component as a custom property. The FALLBACK
+// is the load-bearing part: it is `ADW_WRAP_NATURAL`, libadwaita's default
+// (adw-wrap-box.c:491-495), where CSS defaults `flex-shrink` to 1 — so a wrap
+// box that has not upgraded yet, or one whose policy is unset, draws Adwaita's
+// choice rather than the cascade's.
+adw-wrap-box > * {
+  flex-shrink: var(--adw-wrap-box-child-shrink, 0);
+}
+
+// FILL grows the children and keeps the spacing constant
+// (adw-wrap-layout.c:317-319, :326-341); SPREAD deliberately does NOT, so the
+// gaps take the leftover instead. `data-line-justify` is the mode the component
+// resolved for a COMPLETE line.
+//
+// A lone child is excluded because it is not on a complete line: a box with one
+// element child has exactly one line, and that line is the final one — see
+// below.
+adw-wrap-box[data-line-justify='fill'] > *:not(:only-child) {
+  flex-grow: 1;
+}
+
+// `:only-child` is the one line-membership fact CSS knows without a layout pass,
+// and libadwaita treats that line as the LAST one. Both justified modes stretch
+// it: FILL by definition, SPREAD because its "keep the children at their minimum
+// size" branch is guarded by `n_children > 1` (adw-wrap-layout.c:338), so a lone
+// child is stretched regardless (adw-wrap-box.c:349-352).
+adw-wrap-box[data-last-line-justify='fill'] > :only-child,
+adw-wrap-box[data-last-line-justify='spread'] > :only-child {
+  flex-grow: 1;
+}
+
+// The final line, when it is NOT justified (`justify-last-line` unset — the C
+// default, adw-wrap-box.c:379-381): a generated flex item absorbs that line's
+// leftover space, so it packs at the start of the main axis the way an
+// un-justified line does, while `justify-content: space-between` keeps spreading
+// the complete lines above it. `::after` is the only per-line hook flexbox
+// offers, and it lands on the final line by construction.
+//
+// The negative main-axis margin cancels exactly the one gap the filler would
+// otherwise add, so an exactly-full line can never be pushed into a new one.
+adw-wrap-box[data-line-justify='spread'][data-last-line-justify='none']::after {
+  content: '';
+  flex: 1 0 0;
+  min-width: 0;
+  min-height: 0;
+  margin-left: calc(-1 * var(--adw-wrap-box-child-spacing, 0px));
+}
+
+// A vertical box packs along the block axis, so the gap to cancel is the one
+// before the filler in that direction.
+adw-wrap-box[orientation='vertical'][data-line-justify='spread'][data-last-line-justify='none']::after {
+  margin-left: 0;
+  margin-top: calc(-1 * var(--adw-wrap-box-child-spacing, 0px));
+}

package/scss/adwaita-skin.scss

@@ -13,16 +13,39 @@
 // Style-isolation boundary — emitted before the components so their own rules
 // override this typographic/box-model floor (see _reset.scss).
 @use 'reset';
+// The ONE symbolic-icon box, behind <adw-icon>. Emitted before every widget that
+// draws one, so a context that sizes its own icons (the about dialog's 96px, the
+// split button's 14px arrows, the view switcher's 16px) still wins on ordinary
+// specificity.
+@use 'icon';
+// libadwaita's typography + semantic-colour UTILITY CLASSES (`.dimmed`,
+// `.numeric`, `.monospace`, `.title-1`…). Classes only — there is deliberately
+// no <adw-label>, see _labels.scss. Emitted BEFORE every widget so a widget's
+// own rule wins on ordinary specificity, and because two partials @extend from
+// it (`_progress_bar.scss`'s text node, `_data_grid.scss`'s cells) exactly as
+// libadwaita's own `_progress-bar.scss` does.
+@use 'labels';
 @use 'window';
 @use 'headerbar';
 @use 'window_title';
 @use 'button';
 @use 'button_content';
+// The ONE popover surface. Emitted BEFORE the widgets that host one, so a
+// consumer's (or a widget's) own higher-specificity rule still wins over it.
+@use 'popover';
 @use 'split_button';
 @use 'menu_button';
 @use 'drop_down';
 @use 'toggle_group';
+// The ONE toggle, behind <adw-switch>. Emitted before `switch_row` and
+// `expander_row`, the two widgets that host one — and which each carried their
+// own copy of it until it was lifted out of `adw-switch-row {}`.
+@use 'switch';
 @use 'entry';
+// The two form-control primitives, in ONE partial because upstream merges them
+// (there is no `_radio.scss` in libadwaita) — see _checks.scss.
+@use 'checks';
+@use 'progress_bar';
 @use 'preferences';
 @use 'card';
 @use 'data_grid';