@gjsify/adwaita-web 0.31.0 → 0.32.0

package/lib/types/tab-view.spec.d.ts

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

package/lib/types/view-stack.spec.d.ts

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

package/lib/types/view-switcher.spec.d.ts

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

package/package.json

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

package/scss/_banner.scss

@@ -42,5 +42,18 @@ adw-banner {
     &:hover {
       background: var(--button-hover-color);
     }
+
+    // `button-style` (Since 1.7). ADW_BANNER_BUTTON_SUGGESTED adds
+    // `.suggested-action` to the banner button (adw-banner.c:769), which is the
+    // shared accent appearance — the same declaration `.adw-button.suggested-action`
+    // carries, restated here because the banner button is not an `.adw-button`.
+    &.suggested-action {
+      background: var(--accent-bg-color);
+      color: var(--accent-fg-color);
+
+      &:hover {
+        background: var(--accent-color);
+      }
+    }
   }
 }

package/scss/_bottom_sheet.scss

@@ -80,6 +80,10 @@ adw-bottom-sheet {
   // --- Drag handle (overlaid pill at the top of the sheet) ---
   // libadwaita: > drag-handle { min-width 54px; min-height 6px; margin 15px;
   // border-radius 99px; background currentColor @ 25% }.
+  // It is built with can_focus = FALSE and can_target = FALSE
+  // (adw-bottom-sheet.c:1197-1198) — a decorative pill, not a button;
+  // `pointer-events: none` is can_target in CSS. The `cursor: pointer` + focus
+  // ring that used to sit here belonged to a close button this widget never had.
   .adw-bottom-sheet-drag-handle {
     flex-shrink: 0;
     box-sizing: border-box;
@@ -89,12 +93,7 @@ adw-bottom-sheet {
     margin: 15px auto;
     border-radius: 99px;
     background-color: color-mix(in srgb, currentColor 25%, transparent);
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: 2px solid var(--accent-color);
-      outline-offset: 4px;
-    }
+    pointer-events: none;
   }
 
   .adw-bottom-sheet-sheet-body {

package/scss/_button.scss

@@ -114,32 +114,9 @@ adw-button {
   }
 }
 
-// Symbolic icon rendered via a CSS mask so `currentColor` drives the fill,
-// keeping it theme-aware (same technique as the combo-row dropdown arrow).
-.adw-icon {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  background-color: currentColor;
-  mask-size: 16px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-size: 16px;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-
-  // `display: inline-block` (author CSS) otherwise beats the UA `[hidden]`
-  // rule, so a hidden icon (e.g. an avatar's fallback icon while initials
-  // show) would still render as a solid maskless square. Honor `hidden`.
-  &[hidden] {
-    display: none;
-  }
-}
-
-// The per-name `.adw-icon--<name>` mask classes are generated into
-// scss/_icons.generated.scss by scripts/build-scss.mjs (one entry per icon in
-// its ICONS map), so adding an icon is a single map edit.
+// The symbolic icon (`.adw-icon`) used to be declared here, because the first
+// widget that needed one was the button. It is `scss/_icon.scss` now — every
+// other widget needs one too, and `<adw-icon>` is an element.
 
 // Linked group — adjacent buttons share edges (segmented control).
 .adw-linked {

package/scss/_button_content.scss

@@ -7,6 +7,34 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
+// The class <adw-button-content> stamps on the button hosting it
+// (adw-button-content.c:115), removed again on unroot (:126).
+//
+// libadwaita: `button.image-text-button { padding-left: 9px; padding-right: 9px }`
+// (_buttons.scss:77-80) — against the 17px a plain `.text-button` gets (:72-75).
+// This rule lived in NEITHER renderer, so every icon+label button was drawn with
+// the wrong horizontal padding.
+//
+// Only the PADDING half of that block applies here. The same selector also
+// declares `> box, > box > box { border-spacing: 4px }` (:82-84), and neither
+// matches: the node tree is `button > buttoncontent > box` (:47-52), so the
+// button's direct child is the `buttoncontent`, not a box. The icon↔label gap
+// stays the 6px `buttoncontent > box` gives it (:626-628), which is the `gap`
+// 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 {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
+// Inside a split button the class sits on the `splitbutton` node instead, and a
+// DIFFERENT block wins: `splitbutton.image-text-button > button` (:499-502).
+.adw-split-button.image-text-button > .adw-split-button-action {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
 adw-button-content {
   display: inline-flex;
   align-items: center;

package/scss/_checks.scss

@@ -0,0 +1,228 @@
+// _checks.scss — <adw-checkbox> AND <adw-radio>, in ONE partial.
+//
+// WHY ONE FILE FOR TWO ELEMENTS. `refs/libadwaita/src/stylesheet/widgets/
+// _checks.scss` merges them deliberately: everything but the corner radius and
+// the glyph is a shared `check, radio { … }` block (:20-65), and the
+// indeterminate dash is re-declared for BOTH at the end (:79-81). There is no
+// `_radio.scss` upstream to mirror. `refs/adwaita-web` does split them into
+// `_checkbox.scss` + `_radio.scss`, and the split is exactly where it drifted:
+// its two indicators grew different sizes, different border treatments and
+// different selection-mode rules, and only one of them has a hover state.
+//
+// TWO PLACES THE VENDORED WEB PORT DISAGREES WITH LIBADWAITA. libadwaita is
+// followed in both:
+//
+//   1. INDETERMINATE. `refs/adwaita-web/adwaita-web/scss/_checkbox.scss` has no
+//      indeterminate state at all — no dash, no third glyph, nothing. libadwaita
+//      paints it with the same accent fill as checked (:52-60) and its own dash
+//      glyph (:79-81). Ported.
+//   2. THE CHECKED RADIO. `refs/adwaita-web/adwaita-web/scss/_radio.scss:22-33`
+//      colours only the BORDER and the dot with `--accent-color`, leaving the
+//      indicator's background as the view colour. libadwaita FILLS the whole
+//      control with `--accent-bg-color` and draws the bullet in
+//      `--accent-fg-color` (:54-55) — the same treatment the checkbox gets, which
+//      is the point of the shared block. Ported.
+//
+// THE GLYPHS ARE LIBADWAITA'S OWN ASSETS. GTK draws them with
+// `-gtk-icon-source: -gtk-recolor(url("assets/check.svg"))` (:70, :76, :80),
+// which has no CSS spelling. The path data below is copied from
+// `refs/libadwaita/src/stylesheet/assets/{check,bullet,dash}.svg` and painted as
+// a mask filled with `currentColor` — the same technique `_icon.scss` already
+// uses, and what makes `-gtk-recolor` work here: the shared block sets
+// `color: var(--accent-fg-color)` on a checked indicator, so the glyph follows.
+// `bullet.svg` carries a `transform="translate(-381 -339)"` on a path whose
+// commands after the first are all relative, so the translation is folded into
+// the absolute `M` (388,342 → 7,3) and nothing else changes.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_checks.scss (all of it)
+// Reference: refs/libadwaita/src/stylesheet/assets/{check,bullet,dash}.svg (the three glyphs)
+// Reference: refs/libadwaita/src/stylesheet/_colors.scss:280-286 (the trough colours)
+// Reference: refs/adwaita-web/adwaita-web/scss/{_checkbox,_radio}.scss (the vendored port's split, NOT followed — see above)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Implemented as Web Components for @gjsify/adwaita-web; the GTK
+//   icon sources are re-expressed as CSS masks.
+
+// assets/check.svg
+$check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='m 12.599609,2.1992188 a 1,1 0 0 0 -1.40039,0.2011718 L 5.890625,9.4765625 2.7070313,6.2929687 a 1,1 0 0 0 -1.4140626,0 1,1 0 0 0 0,1.4140625 l 4,3.9999998 A 1.0001,1.0001 0 0 0 6.8007812,11.599609 L 12.800781,3.5996094 A 1,1 0 0 0 12.599609,2.1992188 Z'/%3E%3C/svg%3E");
+// assets/bullet.svg
+$bullet-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='M 7 3 c -2.207 0 -4 1.793 -4 4 s 1.793 4 4 4 c 2.208 0 4 -1.793 4 -4 s -1.792 -4 -4 -4 z'/%3E%3C/svg%3E");
+// assets/dash.svg
+$dash-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='M 3 5 A 2 2 0 0 0 1 7 A 2 2 0 0 0 3 9 L 11 9 A 2 2 0 0 0 13 7 A 2 2 0 0 0 11 5 Z'/%3E%3C/svg%3E");
+
+// `checkbutton { … }` (:3-18) — the host is the button, not the indicator.
+adw-checkbox,
+adw-radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px; // border-spacing: 4px (:4)
+  padding: 3px; // (:6)
+  border-radius: 9px; // $check_radius + 3px (:5)
+  cursor: pointer;
+  user-select: none;
+
+  // The real control: focusable and keyboard-operable, never painted. The
+  // indicator below is what the user sees; the host handles the pointer.
+  .adw-check-input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+  }
+
+  // `check, radio { … }` (:20-31), shared by both elements.
+  .adw-check-indicator {
+    // GTK sizes the CONTENT box (`min-width`/`min-height: 14px`, :22-23) and
+    // grows the drawn control with `padding: 3px` (:26), i.e. 20x20. Opting out
+    // of the ADR-0010 descendant border-box pin keeps that arithmetic — and
+    // keeps `checkbutton.selection-mode`'s one-line `padding: 7px` (:87)
+    // working exactly as it does upstream instead of needing a second number.
+    box-sizing: content-box;
+    width: 14px;
+    height: 14px;
+    padding: 3px;
+    flex-shrink: 0;
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 15%, transparent); // $trough_color
+    transition:
+      background 200ms ease-out,
+      box-shadow 200ms ease-out;
+
+    @media (prefers-contrast: more) {
+      // $trough_color_hc (_colors.scss:284) stands in for $border_color: this
+      // package defines no `--border-opacity`, and the two are the same 30%
+      // mix of currentColor in the light theme.
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
+    }
+
+    // The glyph layer. No mask until a state supplies one, so an unchecked
+    // control paints nothing here.
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: currentColor;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: 14px; // -gtk-icon-size: 14px (:25)
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: 14px;
+    }
+  }
+
+  // `&:not(:checked):not(:indeterminate) { &:hover / &:active }` (:33-50).
+  // Hover and active live on the HOST here — the indicator is 20px inside a
+  // control whose label is part of the target, exactly as `checkbutton` is.
+  &:not([checked]):not([indeterminate]):not([disabled]) {
+    &:hover .adw-check-indicator {
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent); // $trough_hover_color
+
+      @media (prefers-contrast: more) {
+        box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 60%, transparent);
+      }
+    }
+
+    &:active .adw-check-indicator {
+      background-color: color-mix(in srgb, currentColor 25%, transparent); // $trough_active_color
+      box-shadow: none;
+
+      @media (prefers-contrast: more) {
+        background-color: color-mix(in srgb, currentColor 60%, transparent);
+      }
+    }
+  }
+
+  // `&:checked, &:indeterminate { … }` (:52-60) — ONE block for both states, so
+  // they differ only in the glyph.
+  &[checked] .adw-check-indicator,
+  &[indeterminate] .adw-check-indicator {
+    background-color: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+    box-shadow: none;
+  }
+
+  // GTK's `background-image: image(<colour>)` (:58-59) is a flat fill; a
+  // two-stop gradient of one colour is its CSS spelling, as `_button_row.scss`
+  // already does.
+  &[checked]:not([disabled]),
+  &[indeterminate]:not([disabled]) {
+    &:hover .adw-check-indicator {
+      background-image: linear-gradient(
+        color-mix(in srgb, currentColor 10%, transparent),
+        color-mix(in srgb, currentColor 10%, transparent)
+      );
+    }
+
+    &:active .adw-check-indicator {
+      background-image: linear-gradient(rgb(0 0 6 / 20%), rgb(0 0 6 / 20%));
+    }
+  }
+
+  // `&:disabled { filter: Opacity(var(--disabled-opacity)) }` (:62-64). This
+  // package defines no `--disabled-opacity`, so `--dim-opacity` stands in — the
+  // same substitution `_switch.scss` documents.
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: var(--dim-opacity);
+  }
+
+  // `@include focus-ring()` on `checkbutton` (:8). The ring follows the real
+  // control's focus, not the host's, so keyboard focus is what shows it.
+  .adw-check-input:focus-visible ~ .adw-check-indicator {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+  }
+}
+
+// `check { border-radius: $check_radius }` (:67-68)
+adw-checkbox .adw-check-indicator {
+  border-radius: 6px;
+}
+
+// `radio { border-radius: 100% }` (:73-74)
+adw-radio .adw-check-indicator {
+  border-radius: 100%;
+}
+
+// `check:checked` → check.svg (:70) / `radio:checked` → bullet.svg (:76)
+adw-checkbox[checked] .adw-check-indicator::after {
+  mask-image: $check-glyph;
+  -webkit-mask-image: $check-glyph;
+}
+
+adw-radio[checked] .adw-check-indicator::after {
+  mask-image: $bullet-glyph;
+  -webkit-mask-image: $bullet-glyph;
+}
+
+// `check, radio { &:indeterminate { … dash.svg } }` (:79-81). Upstream this is a
+// SEPARATE rule after both `:checked` blocks at equal specificity, so the dash
+// wins over the check/bullet on a control that is both. Same order, same
+// specificity, same outcome here — and the same precedence `resolveCheckState`
+// in `@gjsify/adwaita-core` encodes for the a11y value.
+adw-checkbox[indeterminate] .adw-check-indicator::after,
+adw-radio[indeterminate] .adw-check-indicator::after {
+  mask-image: $dash-glyph;
+  -webkit-mask-image: $dash-glyph;
+}
+
+// `checkbutton.selection-mode { … }` (:83-95) — the big round check used in a
+// selection-mode header bar.
+adw-checkbox.selection-mode,
+adw-radio.selection-mode {
+  border-radius: 100px;
+
+  .adw-check-indicator {
+    padding: 7px;
+    border-radius: 100px;
+  }
+
+  // `label { &:dir(ltr) { margin-right: 6px } &:dir(rtl) { margin-left: 6px } }`
+  // (:91-94) — one logical property covers both directions.
+  .adw-check-label {
+    margin-inline-end: 6px;
+  }
+}

package/scss/_clamp.scss

@@ -1,11 +1,17 @@
-// _clamp.scss — adw-clamp styling (max-width + centered).
+// _clamp.scss — adw-clamp styling.
+//
+// The element itself is deliberately UNCAPPED and full-width: it is the box the
+// tightening curve is evaluated against, so it has to keep reporting the
+// AVAILABLE width. The cap and the centring live on the children, written by the
+// element from `clampAllocate` (see src/elements/adw-clamp.ts) — an element that
+// capped itself would feed its own capped width back into its ResizeObserver.
+//
+// Reference: refs/libadwaita/src/adw-clamp-layout.c (adw_clamp_layout_allocate)
 // Reference: refs/adwaita-web/adwaita-web/scss/_clamp.scss
-// Reference: refs/libadwaita (Adw.Clamp)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
 adw-clamp {
   display: block;
   width: 100%;
-  margin-inline: auto;
 }

package/scss/_data_grid.scss

@@ -8,9 +8,17 @@
 // real element (hover, hairline rules, activation) while columns stay aligned.
 // Reference: refs/libadwaita/src/stylesheet/_colors.scss (separator / card / dim tokens)
 // Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss (boxed-list density)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_labels.scss:13-15,81-88 (.dimmed / .monospace / .numeric)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented for @gjsify/adwaita-web Web Components.
 
+// `.dimmed` / `.monospace` / `.numeric`. This file used to declare
+// `font-variant-numeric: tabular-nums` twice, inline a whole monospace font
+// stack, and dim its header row with a raw `opacity: var(--dim-opacity)` — i.e.
+// three private copies of utilities libadwaita publishes. It composes them now,
+// the way upstream's own `_progress-bar.scss:17-21` composes the same two.
+@use 'labels';
+
 .adw-data-grid {
   display: block;
   box-sizing: border-box;
@@ -68,13 +76,12 @@
     }
 
     // Tabular figures are the WHOLE POINT vs a boxed list — numbers line up.
-    &.numeric {
-      font-variant-numeric: tabular-nums;
-    }
-
+    // `numeric` needs no rule at all: the cell carries the bare class, so
+    // libadwaita's own `.numeric` (_labels.scss:86-88) already applies.
+    // A mono cell is monospace AND tabular, so it composes both.
     &.mono {
-      font-family: 'Adwaita Mono', 'Cantarell', ui-monospace, 'SF Mono', 'Menlo', monospace;
-      font-variant-numeric: tabular-nums;
+      @extend .monospace;
+      @extend .numeric;
     }
   }
 
@@ -82,11 +89,12 @@
   // list-column headings), never sortable.
   .adw-data-grid-row.header {
     .adw-data-grid-cell {
+      @extend .dimmed;
+
       font-size: var(--font-size-small);
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.04em;
-      opacity: var(--dim-opacity);
       border-bottom: 1px solid var(--separator-color);
     }
   }

package/scss/_drop_down.scss

@@ -76,29 +76,18 @@
     opacity: 0.55;
   }
 
-  // --- Popover list ---
-  // The elevated surface below the button. Reproduces popover.menu > contents.
+  // The popover SURFACE is `<adw-popover>`'s (`_popover.scss`, the `[menu]`
+  // variant — a dropdown's popover is a `popover.menu`, _dropdowns.scss:22).
+  // What stays here is what libadwaita ALSO scopes to `dropdown`:
+  //   - the extra 6px above the contents (`popover.menu { padding-top: 6px }`,
+  //     _dropdowns.scss:23). GTK puts it on the popover node while the 6px inset
+  //     sits on `> contents`; flattened onto one node they add, which is what
+  //     the two-node original renders too.
+  //   - the width tracking the button rather than libadwaita's flat `min-width`.
   .adw-drop-down-popover {
-    position: absolute;
-    top: calc(100% + 6px);
-    left: 0;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
+    padding-top: 12px;
     min-width: 100%;
     max-width: 320px;
-    padding: var(--spacing-xs);
-    border-radius: var(--card-radius);
-    background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
-    color: var(--popover-fg-color, var(--window-fg-color));
-    box-shadow:
-      0 0 0 1px rgba(0, 0, 0, 0.05),
-      0 1px 5px 1px rgba(0, 0, 0, 0.09),
-      0 2px 14px 3px rgba(0, 0, 0, 0.05);
-
-    &[hidden] {
-      display: none;
-    }
   }
 
   // Search entry atop the popover (enable-search). It reuses the .adw-entry skin
@@ -115,44 +104,12 @@
     overflow-y: auto;
   }
 
-  // An option row — a flat rounded row with the label and a trailing check on
-  // the selected one; fills on hover/focus like a modelbutton.
+  // An option row is `.adw-popover-item` (`_popover.scss` — libadwaita's
+  // `modelbutton`). Only the trailing-check layout is a drop-down fact: the
+  // label and the check sit at opposite ends of the row.
   .adw-drop-down-item {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
     justify-content: space-between;
     gap: var(--spacing-s);
-    width: 100%;
-    min-height: 32px;
-    margin: 0;
-    padding: var(--spacing-xs) var(--spacing-s);
-    border: none;
-    border-radius: calc(var(--button-radius) - 2px);
-    background-color: transparent;
-    color: inherit;
-    font-family: var(--font-family);
-    font-size: var(--font-size-base);
-    text-align: start;
-    cursor: pointer;
-    transition: background-color 0.1s ease;
-
-    &:hover {
-      background-color: var(--button-hover-color);
-    }
-
-    &:active {
-      background-color: var(--button-active-color);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--accent-color);
-      outline-offset: -2px;
-    }
-
-    &[hidden] {
-      display: none;
-    }
   }
 
   .adw-drop-down-item-label {

package/scss/_expander_row.scss

@@ -69,56 +69,11 @@ adw-expander-row {
     transform: rotate(180deg);
   }
 
-  // The optional enable switch reuses the shared .adw-switch markup.
-  .adw-expander-row-enable-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%);
-      }
-    }
-
-    input:checked + .adw-switch-slider {
-      background-color: var(--accent-bg-color);
-
-      &::before {
-        transform: translateX(20px);
-      }
-    }
-
-    input:focus-visible + .adw-switch-slider {
-      outline: 2px solid var(--accent-color);
-      outline-offset: 2px;
-    }
-  }
+  // The optional enable switch is `<adw-switch>` and needs no geometry of its
+  // own — `.adw-expander-row-enable-switch` is a query/override hook only. This
+  // block used to be a character-for-character copy of the switch row's toggle
+  // (44×24 box, hidden input, 20px knob, translateX(20px), focus ring), because
+  // `.adw-switch` was nested inside `adw-switch-row {` and unreachable from here.
 
   // Disclosed content — a nested listbox of rows, hidden until expanded. The
   // nested surface is slightly inset/recessed, the way libadwaita draws it.

package/scss/_icon.scss

@@ -0,0 +1,51 @@
+// _icon.scss — the symbolic icon box behind <adw-icon>.
+//
+// A symbolic icon is rendered as a CSS mask rather than an <img> or inline SVG,
+// so `currentColor` drives the fill and the glyph re-themes with whatever
+// contains it. The per-name `.adw-icon--<name>` mask classes are GENERATED into
+// scss/_icons.generated.scss by scripts/build-scss.mjs (one entry per icon in
+// its ICONS map), so adding an icon is a single map edit.
+//
+// This block lived in `_button.scss` for as long as the button was the only
+// widget that drew one. It is emitted BEFORE the widget partials so a context
+// that sizes its own icons (`.adw-about-dialog-icon` at 96px, the split button's
+// 14px arrows, the view switcher's 16px) still wins on ordinary specificity.
+//
+// Reference: refs/libadwaita/src/stylesheet/_common.scss:34-41 — `.normal-icons`
+//   / `.large-icons` set `-gtk-icon-size`. libadwaita has NO `_icon.scss`: there
+//   the icon is a GtkImage and its size is a widget property, not a rule.
+// Reference: refs/adwaita-web/adwaita-web/scss/_icon.scss — the vendored web
+//   port's `.adw-icon` is an inline-flex holder around a real <svg>; this
+//   package masks instead, which is what keeps it colourable via currentColor.
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components (mask-based).
+
+.adw-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  background-color: currentColor;
+  mask-size: 16px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: 16px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+
+  // `currentColor` IS the icon: the mask is painted with the inherited colour,
+  // so a suggested-action button's `--accent-fg-color` has to reach it. Since
+  // <adw-icon> is a custom element it is also in `$adw-components`, and the
+  // ADR-0010 boundary reset re-roots `color` on every entry there — which would
+  // otherwise repaint every icon in `--window-fg-color` regardless of its host.
+  // Class beats type selector, so this restores inheritance.
+  color: inherit;
+
+  // `display: inline-block` (author CSS) otherwise beats the UA `[hidden]`
+  // rule, so a hidden icon (e.g. an avatar's fallback icon while initials
+  // show) would still render as a solid maskless square. Honor `hidden`.
+  &[hidden] {
+    display: none;
+  }
+}