@gjsify/adwaita-web 0.51.0 → 0.52.0

package/lib/types/tags.spec.d.ts

@@ -0,0 +1 @@
+export declare const AdwTagsTest: () => Promise<void>;

package/lib/types/value-lists.spec.d.ts

@@ -0,0 +1 @@
+export declare const AdwValueListsTest: () => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.51.0",
+    "version": "0.52.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -45,14 +45,16 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.51.0",
-        "@gjsify/adwaita-fonts": "^0.51.0",
-        "@gjsify/adwaita-icons": "^0.51.0",
+        "@gjsify/adwaita-core": "^0.52.0",
+        "@gjsify/adwaita-fonts": "^0.52.0",
+        "@gjsify/adwaita-icons": "^0.52.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.51.0",
-        "@gjsify/unit": "^0.51.0",
+        "@gjsify/blueprint": "^0.52.0",
+        "@gjsify/cli": "^0.52.0",
+        "@gjsify/unit": "^0.52.0",
+        "@gjsify/vite-plugin-blueprint": "^0.52.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/scss/_action_bar.scss

@@ -0,0 +1,51 @@
+// _action_bar.scss — <gtk-action-bar>, GTK's bottom bar of packed widgets.
+//
+// libadwaita styles the bar's inner box (`actionbar > revealer > box`); this element has
+// no revealer, so the host carries that box's surface and the three sections are its
+// start box, centre and end box. `border-spacing: 6px` there is the gap between the
+// packed children here.
+//
+// `revealed` is applied by toggling the `hidden` attribute, and `[hidden]` is re-asserted
+// as an AUTHOR rule for the reason `_view_switcher_bar.scss` gives: the UA rule loses to
+// this block's own `display` by cascade origin.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toolbars.scss (GtkActionBar)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-action-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-sizing: border-box;
+    background-color: var(--headerbar-bg-color);
+    color: var(--headerbar-fg-color);
+    box-shadow: inset 0 1px var(--headerbar-shade-color);
+    padding: 7px 6px 6px 6px;
+
+    &[hidden] {
+        display: none;
+    }
+
+    > .adw-action-bar-start,
+    > .adw-action-bar-end {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    > .adw-action-bar-start {
+        flex: 1 1 0;
+        justify-content: flex-start;
+    }
+
+    > .adw-action-bar-center {
+        display: flex;
+        align-items: center;
+    }
+
+    > .adw-action-bar-end {
+        flex: 1 1 0;
+        justify-content: flex-end;
+    }
+}

package/scss/_banner.scss

@@ -21,17 +21,24 @@ adw-banner {
     display: none;
   }
 
+  // The title is a `.heading` label and the button a plain GTK text button
+  // (adw-banner.ui:25, :29), so the title is bold and the button 34px tall with the 17px
+  // `.text-button` sides. Both were lighter here, and the banner stood 8px shorter than
+  // GTK's render of the gallery's banner `.blp`.
   .adw-banner-title {
     flex: 1 1 auto;
     min-width: 0;
     font-size: var(--font-size-base);
+    font-weight: 700;
   }
 
   .adw-banner-button {
     flex-shrink: 0;
+    box-sizing: border-box;
+    min-height: 34px;
     border: none;
     border-radius: var(--button-radius);
-    padding: 4px 14px;
+    padding: 5px 17px;
     background: var(--button-bg-color);
     color: var(--window-fg-color);
     font-family: var(--font-family);

package/scss/_bottom_sheet.scss

@@ -19,7 +19,11 @@ adw-bottom-sheet {
   color: var(--window-fg-color);
 
   // --- Persistent content layer ---
+  // A grid rather than a block, as GTK's content bin allocates its child the whole area and
+  // lets the child's `halign` / `valign` place it (`_widget.scss`); a block container
+  // resolves a vertical auto margin to zero.
   .adw-bottom-sheet-content {
+    display: grid;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -100,11 +104,64 @@ adw-bottom-sheet {
     box-sizing: border-box;
   }
 
+  // --- Bottom bar (the collapsed form the sheet morphs out of) ---
+  // libadwaita: > sheet > stack > button — a flat, radius-less button filling the bar,
+  // with the sheet's top radius carried over, and `.inert` stripping only the feedback.
+  // It is a real button because upstream's bin is one (adw-bottom-sheet.c:1203).
+  .adw-bottom-sheet-bottom-bar {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    font: inherit;
+    font-weight: inherit;
+    color: inherit;
+    background: none;
+    box-shadow: none;
+    cursor: pointer;
+
+    &:hover {
+      background-color: color-mix(in srgb, currentColor 5%, transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in srgb, currentColor 10%, transparent);
+    }
+
+    // can-open off. The button stays enabled and focusable — only the feedback goes,
+    // because upstream refuses the click in the handler, not in the widget
+    // (adw-bottom-sheet.c:2033-2036).
+    &.inert {
+      cursor: default;
+
+      &:hover,
+      &:active {
+        background: none;
+      }
+    }
+  }
+
   // --- Open state ---
   &.open .adw-bottom-sheet-sheet {
     transform: translateY(0);
   }
 
+  // --- Bottom-bar state ---
+  // The sheet bin sits at rest with only the bar exposed. This transform is the port's
+  // `gtk_widget_set_child_visible` for the bin, so it is what `reveal-bottom-bar` takes
+  // away: no class here, and the bin slides off screen with the bar still inside it.
+  &.showing-bottom-bar .adw-bottom-sheet-sheet {
+    transform: translateY(0);
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 6, 0.06),
+      0 2px 8px 2px rgba(0, 0, 6, 0.06),
+      0 3px 20px 10px rgba(0, 0, 6, 0.05);
+  }
+
   // A non-modal sheet must not block the content beneath it.
   &:not(.modal) .adw-bottom-sheet-dimming {
     display: none;

package/scss/_box.scss

@@ -0,0 +1,23 @@
+// _box.scss — <gtk-box>, GTK's one-axis container.
+//
+// libadwaita has no box partial: a box draws nothing, it only places children.
+// The element sets `flex-direction` and `gap` inline from its normalised
+// properties (gtk-box.ts); this is the rest of GtkBoxLayout's shape.
+//
+// `align-items: stretch`: a child's default `halign`/`valign` is FILL, so it takes
+// the whole cross axis. `min-width`/`min-height: 0` are deliberately NOT set on
+// the children: a GTK box never allocates a child less than its minimum, and a
+// flex item's `auto` minimum is that.
+//
+// Reference: refs/gtk/gtk/gtkboxlayout.c (homogeneous: every child the same size)
+// Copyright (c) The GTK Team. LGPLv2.1+.
+
+gtk-box {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+gtk-box[homogeneous] > * {
+  flex: 1 1 0;
+}

package/scss/_button.scss

@@ -80,20 +80,37 @@ gtk-button {
     }
   }
 
-  // Destructive action — red.
+  // Destructive action — libadwaita's `%destructive_button` (_buttons.scss:183-210):
+  // red TEXT on a 15% tint of it, not a filled red button. It was filled here, so the
+  // gallery's "Delete" read as a second primary action beside the GTK render of the
+  // same `.blp`. The accent tokens are rebound as upstream does, so anything accent-
+  // coloured inside the button (a focus ring) turns red with it.
   &.destructive-action {
-    background-color: var(--destructive-bg-color);
-    color: var(--destructive-fg-color);
+    --accent-bg-color: var(--destructive-bg-color);
+    --accent-fg-color: var(--destructive-fg-color);
+    --accent-color: var(--destructive-color);
+
+    color: var(--destructive-color);
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
 
     &:hover {
-      filter: brightness(1.06);
+      background-color: color-mix(in srgb, currentColor 20%, transparent);
     }
 
     &:active {
-      filter: brightness(0.9);
+      background-color: color-mix(in srgb, currentColor 35%, transparent);
     }
   }
 
+  // A label-only button — GTK's `.text-button`, which `gtk_button_set_label` puts on the
+  // button (_buttons.scss:72-75). 17px against the 14px every web button had, so each
+  // text button in the gallery's button row was 6px narrower than GTK's. Before the pill,
+  // circular and icon-only rules, which upstream also lets win.
+  &.text-button {
+    padding-left: 17px;
+    padding-right: 17px;
+  }
+
   // Icon-only square button (no label).
   &.icon-only {
     padding: 0;
@@ -107,9 +124,14 @@ gtk-button {
     border-radius: 9999px;
   }
 
-  // Pill — fully-rounded ends.
+  // Pill — fully-rounded ends, and libadwaita's `%pill_button` padding
+  // (_buttons.scss: `padding: 10px 32px`). It was 6px 20px, which drew every pill
+  // 10px shorter and 24px narrower than GTK beside a GTK render of the same `.blp`.
+  // GTK's height is `min-height: 24px` plus that padding, so 44; the floor is
+  // restated because the base's 34 would otherwise hold the box at the text height.
   &.pill {
-    padding: 6px 20px;
+    min-height: 44px;
+    padding: 10px 32px;
     border-radius: 9999px;
   }
 

package/scss/_button_content.scss

@@ -23,7 +23,12 @@
 // below. It lives in this file rather than in `_button.scss` because the class
 // belongs to this widget, and `.adw-button.image-text-button` beats `.adw-button`
 // on specificity regardless of order.
-.adw-button.image-text-button {
+//
+// `:not(.pill)` because upstream states `.pill` (:322-323) AFTER this block at the same
+// specificity, so a pill keeps its `10px 32px` whatever it holds. This file is emitted
+// after `_button.scss`, so without the exclusion the order flipped: a pill button with
+// button content was drawn 9px from its label, 47px narrower than GTK.
+.adw-button.image-text-button:not(.pill) {
   padding-left: 9px;
   padding-right: 9px;
 }

package/scss/_button_row.scss

@@ -12,8 +12,11 @@ adw-button-row {
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 50px;
-  padding: var(--spacing-xs) var(--spacing-m);
+  // libadwaita: `row.button > box { min-height: 40px; margin: 0 12px }` (_lists.scss:458-462),
+  // and the row around it measures 44 in a GTK render of the gallery's button-row `.blp`.
+  // It was a plain row's 50 here, so the button row stood 6px taller than GTK's.
+  min-height: 44px;
+  padding: 0 var(--spacing-m);
   border-bottom: 1px solid var(--card-shade-color);
   color: var(--card-fg-color);
   cursor: pointer;

package/scss/_carousel.scss

@@ -20,6 +20,12 @@
 adw-carousel {
   display: block;
   overflow: hidden;
+  // A carousel's own width is its parent's to give, never its pages laid end to end. The
+  // track is a row of full-width pages, so its max-content width is their SUM, and a
+  // carousel in a stretching box (the gallery's `.blp`) pushed that box 274px past its
+  // window. GTK measures a carousel by its widest page; CSS has no "max of the children"
+  // for a scrolling row, so the width comes from outside, as a filled GTK allocation does.
+  contain: inline-size;
 
   .adw-carousel-track {
     display: flex;

package/scss/_labels.scss

@@ -1,14 +1,14 @@
-// _labels.scss — libadwaita's typography + semantic-colour UTILITY CLASSES.
+// _labels.scss — libadwaita's typography + semantic-colour UTILITY CLASSES, and
+// the `label {}` rules of the element they are written for.
 //
-// NO ELEMENT. `refs/libadwaita/src/stylesheet/widgets/_labels.scss` is a widget
-// partial in name only: `label { … }` is four lines of GtkLabel plumbing
-// (`caret-color`, `.separator`, `:disabled`) and everything else in it is a
-// CLASS a consumer puts on whatever node it already has. There is deliberately
-// no `<adw-label>` here to go with them — it would wrap a `<span>` and add
-// nothing a class does not, which is exactly ADR 0004's "a widget with
-// genuinely trivial behaviour does not need a core class" applied one level up,
-// and ADR 0010 already makes the token/class surface the public contract. An
-// element would only add a tag to `$adw-components` for no behaviour.
+// `refs/libadwaita/src/stylesheet/widgets/_labels.scss` is a widget partial in
+// name only: `label { … }` is four lines of GtkLabel plumbing and everything else
+// in it is a CLASS a consumer puts on whatever node it already has — a `<span>` on
+// a hand-written page, or <gtk-label>, which exists because an AUTHORED tree (a
+// Blueprint `Gtk.Label` mounted through `mountSharedTree`) arrives as a tag with a
+// `label` attribute and needs an element to read it. ADR 0010 makes the class
+// surface the public contract either way; the element adds the layout below and
+// nothing to the classes.
 //
 // This is also where the in-tree duplication ends: `_data_grid.scss` declared
 // `font-variant-numeric: tabular-nums` twice and inlined a whole monospace font
@@ -41,8 +41,122 @@
 // Reference: refs/adwaita-web/adwaita-web/scss/_utility_classes.scss (the vendored port's variant, NOT followed — see above)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
-// Modifications: Adapted for @gjsify/adwaita-web; the `label {}` element rules
-//   are GtkLabel plumbing with no DOM counterpart and are not ported.
+// Modifications: Adapted for @gjsify/adwaita-web; `label {}` is ported onto
+//   <gtk-label> without `:disabled`, which the element has no state for.
+
+// <gtk-label>: `label {}` (_labels.scss:1-11) plus the layout GtkLabel does in C.
+//
+// THE TWO SPACERS ARE `xalign`. GTK places the text at `xalign * (width − text
+// width)` inside the label's allocation (gtklabel.c, gtk_label_get_layout_location); the
+// element's free space is split between `::before` and `::after` in the ratio
+// `xalign : 1 − xalign`, which is that formula, and flips in RTL as the C does.
+//
+// `YALIGN` HAS NO CONTINUUM ON THE CROSS AXIS. `xalign`'s spacer trick splits free space
+// along flexbox's MAIN axis, where a flex item's `flex-grow` ratio is a real number;
+// `align-items` is the CROSS-axis equivalent and CSS gives it three keywords, not a ratio
+// — there is no `align-items: 0.25` the way there is a `flex-grow: 0.25`. A second pair of
+// spacers would need a second axis, and a `<gtk-label>` cannot be both a row (for `xalign`)
+// and a column (for `yalign`) at once without an inner wrapper element, which would cost
+// every single-line label the "one text node, no children" DOM shape `gtk-label.spec.ts`
+// pins for the XSS answer. So `--gtk-label-align-items` is set by `labelYalignAlignItems`
+// (`@gjsify/adwaita-core`) from the NEAREST of three zones — `flex-start` below `0.25`,
+// `flex-end` above `0.75`, `center` between (the default, unchanged from before this
+// property existed) — exact at the three values GTK's own default and both edges take,
+// and a DECLARED divergence for anything else: nearest zone, not a silent half-split, and
+// `label.spec.ts`/`gtk-label.spec.ts` both say so where they test the intermediate values.
+//
+// `white-space: pre`: Pango keeps a newline and a run of spaces, and a label that
+// does not wrap is as wide as its text — which a flex item's `min-width: auto`
+// already makes its minimum. `wrap` breaks at word boundaries, WORD being the
+// default `wrap-mode` — so does `ellipsize` alone, see `.adw-label-clamp` below.
+gtk-label {
+  display: flex;
+  align-items: var(--gtk-label-align-items, center);
+  white-space: pre;
+  caret-color: currentColor;
+  // GtkLabel is not selectable unless asked (`selectable` defaults to FALSE).
+  user-select: none;
+
+  &::before,
+  &::after {
+    content: '';
+    flex-shrink: 1;
+    flex-basis: 0;
+  }
+
+  &::before {
+    flex-grow: var(--gtk-label-xalign, 0.5);
+  }
+
+  &::after {
+    flex-grow: calc(1 - var(--gtk-label-xalign, 0.5));
+  }
+
+  &[wrap] {
+    white-space: pre-wrap;
+  }
+
+  // `gtk-label.ts`'s span-render path: the text moves into this span so it can be pinned
+  // to its measured wrap width (a flex item is blockified by spec, but `display: block` is
+  // spelled out rather than relied on implicitly). Present whenever `wrap` is set OR
+  // `ellipsize` is active — MEASURED (`@gjsify/adwaita-core`'s `label.ts` header): GTK's
+  // own Pango layout wraps onto multiple lines from `ellipsize` ALONE, `wrap` or not, so
+  // both cases need the same span and the same measurement pass.
+  .adw-label-text {
+    display: block;
+    // A pinned width, or a shrink-to-fit one, may never push the label wider than its
+    // container.
+    max-width: 100%;
+  }
+
+  // `wrap-mode` — Pango's break-opportunity choice — is a real `word-break`/
+  // `overflow-wrap` mapping, not a declared gap: CSS's `break-all` is Pango's CHAR (break
+  // anywhere), and `overflow-wrap: anywhere` is Pango's WORD_CHAR (word boundaries, falling
+  // back to a character break only when a single word will not fit) — the pspec's own
+  // words for that member. WORD, the default, is the browser's un-overridden behaviour, so
+  // it has no rule here. Scoped to `.adw-label-text` alone, not `[wrap]`: `wrap-mode` only
+  // matters once the layout can span more than one line at all, which `ellipsize` alone
+  // already grants (see above) — the span's mere existence is that condition.
+  &[wrap-mode='char'] .adw-label-text {
+    word-break: break-all;
+  }
+
+  &[wrap-mode='word-char'] .adw-label-text {
+    overflow-wrap: anywhere;
+  }
+
+  // `ellipsize` — a JS-toggled CLASS, not an attribute selector: `.adw-label-clamp` is set
+  // by `gtk-label.ts`'s `_renderSpan` from `ellipsize`'s NORMALIZED value, so a raw,
+  // unrecognised `ellipsize` attribute (which `normalizeLabelEllipsize` already reads as
+  // `none`) can never leave this rule half-applied the way an `[ellipsize]` PRESENCE
+  // selector would. `lines`, gated by `labelEffectiveLines` (`@gjsify/adwaita-core`) to
+  // "ellipsize is active", `wrap` or not — MEASURED, the same header — applies here
+  // REGARDLESS of `wrap`: a real `Gtk.Label` allocated with `wrap=FALSE, ellipsize=END,
+  // lines=2` lays out exactly two lines, ellipsized, not one. `-webkit-line-clamp` needs
+  // its own box context (`display: -webkit-box` + `-webkit-box-orient: vertical`) and text
+  // that can actually WRAP (`white-space: normal`, overriding the host's inherited `pre`/
+  // `pre-wrap`) to have more than one line to clamp in the first place; the default of `1`
+  // is Pango's own when `lines` is unset (`--gtk-label-lines` is still set then — see
+  // `_render()` — so the fallback here is only a defensive belt for a span whose host
+  // somehow reached this class without it).
+  .adw-label-text.adw-label-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--gtk-label-lines, 1);
+    overflow: hidden;
+    text-overflow: var(--gtk-label-ellipsize-overflow, ellipsis);
+    white-space: normal;
+  }
+
+  &[selectable] {
+    user-select: text;
+    cursor: text;
+  }
+
+  &.separator {
+    @extend .dimmed;
+  }
+}
 
 // _labels.scss:13-15
 .dimmed {

package/scss/_navigation_split_view.scss

@@ -49,6 +49,24 @@ adw-navigation-split-view {
     background-color: var(--window-bg-color);
   }
 
+  // A pane's page fills the pane, as GTK allocates it the whole pane. The two panes are
+  // flex columns and an `<adw-navigation-page>` is a block, so a page in one — which is
+  // what a `.blp` writes, `sidebar: Adw.NavigationPage { … }` — was sized by its content:
+  // the gallery's sidebar list stopped 118px short of the pane it sat in. Its child fills
+  // it in turn, the way `.adw-navigation-page > *` does inside a navigation view.
+  .adw-nsv-sidebar > adw-navigation-page,
+  .adw-nsv-content > adw-navigation-page {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+
+    > * {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+  }
+
   // `sidebar-position: end` docks the sidebar past the content. flex `order`
   // flips the visual order without changing the slotting DOM order.
   &.sidebar-end {

package/scss/_overlay_split_view.scss

@@ -32,7 +32,12 @@ adw-overlay-split-view {
   // of the two a pane is in is exactly what decides its colour — hard-coding
   // `--sidebar-bg-color` on this private class painted a collapsed overlay,
   // which libadwaita puts on the window background, as though it were docked.
+  // A flex column, as the content pane is, so the pane's widget fills it: GTK allocates the
+  // sidebar the whole pane. A block pane sized a toolbar view by its content, and the
+  // gallery's `.blp` sidebar list stopped 130px above the pane's bottom edge.
   .adw-osv-sidebar {
+    display: flex;
+    flex-direction: column;
     overflow-y: auto;
     flex-shrink: 0;
     z-index: 10;

package/scss/_reset.scss

@@ -29,14 +29,14 @@
 // 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, adw-alert-dialog, adw-alert-response,
-  adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content,
-  adw-bottom-sheet-sheet, gtk-button, adw-button-content, adw-button-row,
+  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-menu-button,
+  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,
@@ -70,6 +70,31 @@ $adw-components:
   text-shadow: none;
 }
 
+// A box and a label INHERIT inside another widget, as every GTK node does. They
+// are the two elements an authored tree puts INSIDE the others — a label in a
+// `.error` box, a box of labels in a header bar — and the floor above would
+// repaint every one of them in `--window-fg-color` at the base size, whatever
+// its parent says. Nested in any component the floor already stops the host
+// page, so only the OUTERMOST one keeps it. `:where()` adds no specificity, so a
+// class on the element itself (`.title-1`, `.dimmed`) still wins.
+//
+// A button's content inherits for the same reason: `<adw-button-content>` is the child
+// of a `<gtk-button>`, and the floor painted its icon and label in the window colour on
+// a `.suggested-action` button, where GTK draws them in the accent foreground.
+:where(#{$adw-components}) :is(gtk-box, gtk-label, adw-button-content) {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  font-variant: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  text-transform: inherit;
+  text-shadow: inherit;
+}
+
 // Descendants: `box-sizing` does not inherit, so a host `*, *::before {
 // box-sizing: content-box }` reset would still reach internal elements. Pin it
 // to `border-box` (adwaita's model throughout) inside every component.

package/scss/_split_button.scss

@@ -79,9 +79,12 @@
     align-items: center;
     justify-content: center;
     min-height: 34px;
-    width: 28px;
+    // libadwaita: `splitbutton > menubutton > button { padding: 0 4px }` over the button's
+    // 16px minimum (_buttons.scss:486-489), so the arrow half is 24px. It was 28, and the
+    // gallery's split button measured 5px wider than GTK's render of the same `.blp`.
+    width: 24px;
     margin: 0;
-    padding: 0 var(--spacing-xs);
+    padding: 0 4px;
     border: none;
     border-left: 1px solid var(--separator-color);
     border-radius: 0 var(--button-radius) var(--button-radius) 0;