@gjsify/adwaita-web 0.31.0 → 0.33.0

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;
+  }
+}

package/scss/_icons.generated.scss

@@ -38,6 +38,7 @@
   --icon-emblem-system: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%208%200%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%200.238281%20c%200%200.464844%20-0.378906%200.902344%20-0.820312%201.046875%20c%20-0.023438%200.007813%20-0.042969%200.011719%20-0.0625%200.019532%20c%20-0.445313%200.148437%20-1.007813%200.015624%20-1.28125%20-0.359376%20l%20-0.140626%20-0.195312%20c%20-0.15625%20-0.214844%20-0.390624%20-0.359375%20-0.652343%20-0.398438%20c%20-0.261719%20-0.042968%20-0.53125%200.019532%20-0.742188%200.175782%20c%20-0.449219%200.324218%20-0.550781%200.949218%20-0.222656%201.398437%20l%200.140625%200.199219%20c%200.277344%200.375%200.226562%200.953125%20-0.050781%201.328125%20c%20-0.011719%200.015625%20-0.023438%200.035156%20-0.035157%200.050781%20c%20-0.273437%200.378906%20-0.804687%200.601563%20-1.25%200.457032%20l%20-0.230468%20-0.074219%20c%20-0.523438%20-0.171875%20-1.089844%200.117187%20-1.257813%200.640625%20c%20-0.171875%200.527344%200.113281%201.089844%200.640625%201.261718%20l%200.222656%200.074219%20c%200.445313%200.144531%200.738282%200.636719%200.75%201.101563%20v%200.070312%20c%200.015626%200.464844%20-0.304687%200.960938%20-0.746093%201.105469%20l%20-0.226563%200.070313%20c%20-0.527344%200.171874%20-0.8125%200.738281%20-0.640625%201.261718%20c%200.167969%200.523438%200.734375%200.8125%201.257813%200.640625%20l%200.230468%20-0.074219%20c%200.445313%20-0.144531%200.976563%200.078126%201.25%200.457032%20c%200.011719%200.015625%200.027344%200.035156%200.039063%200.050781%20c%200.277344%200.375%200.324219%200.953125%200.050781%201.328125%20l%20-0.144531%200.203125%20c%20-0.324219%200.445313%20-0.226563%201.070313%200.222656%201.394531%20c%200.445313%200.324219%201.070313%200.226563%201.394531%20-0.21875%20l%200.144532%20-0.199218%20c%200.273437%20-0.378907%200.835937%20-0.507813%201.277344%20-0.359376%20c%200.019531%200.007813%200.042968%200.011719%200.0625%200.019532%20c%200.445312%200.140625%200.820312%200.578125%200.820312%201.046875%20v%200.238281%20c%200%200.550781%200.449219%201%201%201%20s%201%20-0.449219%201%20-1%20v%20-0.238281%20c%200%20-0.46875%200.378906%20-0.90625%200.820312%20-1.046875%20c%200.023438%20-0.007813%200.042969%20-0.015625%200.066407%20-0.023438%20c%200.441406%20-0.144531%201.003906%20-0.015625%201.277343%200.363282%20l%200.144532%200.199218%20c%200.324218%200.445313%200.949218%200.542969%201.394531%200.21875%20c%200.445313%20-0.324218%200.546875%20-0.949218%200.222656%20-1.394531%20l%20-0.148437%20-0.203125%20c%20-0.273438%20-0.375%20-0.226563%20-0.953125%200.050781%20-1.328125%20c%200.015625%20-0.015625%200.027344%20-0.035156%200.039063%20-0.050781%20c%200.273437%20-0.378906%200.804687%20-0.601563%201.25%20-0.457032%20l%200.234374%200.078126%20c%200.523438%200.167968%201.085938%20-0.121094%201.257813%20-0.644532%20c%200.171875%20-0.523437%20-0.117187%20-1.089844%20-0.640625%20-1.257812%20l%20-0.230469%20-0.074219%20c%20-0.445312%20-0.144531%20-0.734375%20-0.640625%20-0.746093%20-1.105469%20c%200%20-0.023437%200%20-0.046875%200%20-0.070312%20c%20-0.015626%20-0.464844%200.300781%20-0.957032%200.746093%20-1.101563%20l%200.230469%20-0.074219%20c%200.523438%20-0.171874%200.8125%20-0.734374%200.640625%20-1.261718%20c%20-0.171875%20-0.523438%20-0.734375%20-0.8125%20-1.257813%20-0.640625%20l%20-0.230468%200.074219%20c%20-0.445313%200.144531%20-0.980469%20-0.078126%20-1.253906%20-0.457032%20c%20-0.011719%20-0.015625%20-0.023438%20-0.035156%20-0.035157%20-0.050781%20c%20-0.277343%20-0.375%20-0.324219%20-0.953125%20-0.050781%20-1.328125%20l%200.144531%20-0.199219%20c%200.324219%20-0.445312%200.226563%20-1.074219%20-0.222656%20-1.398437%20c%20-0.214844%20-0.15625%20-0.480469%20-0.21875%20-0.742187%20-0.179688%20c%20-0.265626%200.042969%20-0.5%200.1875%20-0.652344%200.402344%20l%20-0.144532%200.195312%20c%20-0.273437%200.378907%20-0.835937%200.507813%20-1.28125%200.363282%20c%20-0.019531%20-0.007813%20-0.039062%20-0.015625%20-0.0625%20-0.023438%20c%20-0.441406%20-0.140625%20-0.820312%20-0.578125%20-0.820312%20-1.046875%20v%20-0.238281%20c%200%20-0.550781%20-0.449219%20-1%20-1%20-1%20z%20m%200%204%20c%200.871094%200%201.675781%200.273438%202.332031%200.742188%20c%200.003907%200.007812%200.011719%200.015624%200.019531%200.023437%20c%200.011719%200.003906%200.019532%200.007813%200.03125%200.015625%20c%200.660157%200.484375%201.160157%201.171875%201.421876%201.976562%20v%200.007813%20s%200.003906%200.003906%200.003906%200.007813%20c%200.292968%200.851562%200.15625%201.65625%200%202.457031%20c%200%200%20-0.003906%200.003906%20-0.003906%200.007812%20v%200.003907%20c%20-0.261719%200.800781%20-0.757813%201.488281%20-1.414063%201.976562%20c%20-0.015625%200.003906%20-0.027344%200.011719%20-0.039063%200.019531%20c%20-0.007812%200.003907%20-0.015624%200.011719%20-0.019531%200.019531%20c%20-0.65625%200.46875%20-1.460937%200.742188%20-2.332031%200.742188%20c%20-0.855469%200%20-1.644531%20-0.265625%20-2.289062%20-0.714844%20c%20-0.019532%20-0.015625%20-0.042969%20-0.035156%20-0.0625%20-0.046875%20c%20-0.011719%20-0.007812%20-0.023438%20-0.015625%20-0.035157%20-0.019531%20c%20-0.652343%20-0.484375%20-1.148437%20-1.160156%20-1.40625%20-1.945312%20c%20-0.003906%20-0.015626%20-0.007812%20-0.023438%20-0.011719%20-0.035157%20c%20-0.003906%20-0.007812%20-0.007812%20-0.015625%20-0.011718%20-0.019531%20c%20-0.285156%20-0.847656%20-0.148438%20-1.644531%200%20-2.4375%20c%200.003906%20-0.007812%200.007812%20-0.011719%200.011718%20-0.019531%20c%200.003907%20-0.011719%200.007813%20-0.023438%200.011719%20-0.039063%20c%200.261719%20-0.785156%200.757813%20-1.460937%201.414063%20-1.945312%20c%200.007812%20-0.003906%200.019531%20-0.007813%200.027344%20-0.015625%20c%200.019531%20-0.011719%200.042968%20-0.03125%200.058593%20-0.046875%20c%200.648438%20-0.449219%201.4375%20-0.714844%202.292969%20-0.714844%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
   --icon-preferences-system: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%2013.855469%200%20l%20-1.539063%201.4375%20c%20-0.453125%200.421875%20-0.53125%201.148438%20-0.269531%201.707031%20l%20-5.886719%205.996094%20c%20-0.011718%200%20-0.019531%200%20-0.03125%200%20c%20-0.257812%20-0.128906%20-0.550781%20-0.183594%20-0.839844%20-0.148437%20c%20-0.328124%200.046874%20-0.632812%200.199218%20-0.867187%200.441406%20l%20-3.945313%203.996094%20c%20-0.3906245%200.375%20-0.5468745%200.933593%20-0.4062495%201.457031%20c%200.1406255%200.523437%200.5546875%200.929687%201.0820315%201.058593%20c%200.527344%200.132813%201.082031%20-0.03125%201.453125%20-0.425781%20l%203.945312%20-3.996093%20c%200.472657%20-0.453126%200.59375%20-1.15625%200.296875%20-1.738282%20l%205.890625%20-5.964844%20c%200.558594%200.25%201.273438%200.148438%201.707031%20-0.289062%20l%201.414063%20-1.5625%20z%20m%20-10.308594%200.0898438%20c%20-0.398437%200%20-0.785156%200.0937502%20-1.140625%200.2187502%20l%201.882812%201.878906%20c%200.390626%200.382812%200.390626%201%200%201.386719%20l%20-0.710937%200.707031%20c%20-0.386719%200.386719%20-1%200.386719%20-1.390625%200%20l%20-1.882812%20-1.878906%20c%20-0.125%200.355468%20-0.2187505%200.742187%20-0.2187505%201.140625%20c%200%201.90625%201.5507815%203.453125%203.4609375%203.453125%20c%200.402344%200%200.789063%20-0.09375%201.144531%20-0.21875%20l%201.175782%201.171875%20h%200.058593%20l%202.070313%20-2.0625%20l%20-1.203125%20-1.203125%20c%200.125%20-0.359375%200.214843%20-0.742188%200.214843%20-1.140625%20c%200%20-1.90625%20-1.546874%20-3.4531252%20-3.460937%20-3.4531252%20z%20m%206.550781%207.8906252%20l%20-2.070312%202.066406%20c%200.011718%200.027344%200.023437%200.058594%200.03125%200.089844%20l%201.144531%201.140625%20c%20-0.125%200.355468%20-0.21875%200.742187%20-0.21875%201.140625%20c%200%201.902343%201.550781%203.449219%203.460937%203.449219%20c%200.433594%200%200.855469%20-0.101563%201.238282%20-0.246094%20l%20-2.007813%20-2%20c%20-0.386719%20-0.386719%20-0.386719%20-1.035156%200%20-1.417969%20l%200.679688%20-0.679687%20c%200.195312%20-0.191407%200.457031%20-0.308594%200.710937%20-0.308594%20s%200.515625%200.117187%200.710938%200.308594%20l%201.945312%201.941406%20c%200.105469%20-0.328125%200.183594%20-0.683594%200.183594%20-1.046875%20c%200%20-1.90625%20-1.546875%20-3.453125%20-3.460938%20-3.453125%20c%20-0.398437%200%20-0.785156%200.09375%20-1.140624%200.21875%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
   --icon-application-x-executable: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%208.015625%200.015625%20c%20-0.769531%200%20-1.539063%200.292969%20-2.121094%200.875%20l%20-5.003906%205.003906%20c%20-1.164063%201.164063%20-1.164063%203.078125%200%204.242188%20l%205.003906%205.003906%20c%201.164063%201.164063%203.078125%201.164063%204.242188%200%20l%205.007812%20-5.003906%20c%201.164063%20-1.164063%201.164063%20-3.078125%200%20-4.242188%20l%20-5.007812%20-5.003906%20c%20-0.582031%20-0.582031%20-1.351563%20-0.875%20-2.121094%20-0.875%20z%20m%200.101563%201.988281%20c%200.210937%200.023438%200.414062%200.117188%200.585937%200.28125%20l%20-0.339844%200.113282%20c%20-0.074219%20-0.136719%20-0.15625%20-0.269532%20-0.246093%20-0.394532%20z%20m%20-1.570313%201.058594%20c%200.300781%200.421875%200.464844%200.929688%200.46875%201.453125%20c%200%201.378906%20-1.121094%202.5%20-2.5%202.5%20c%20-0.523437%20-0.003906%20-1.03125%20-0.171875%20-1.449219%20-0.472656%20z%20m%203.441406%200.503906%20l%203.742188%203.742188%20c%200.402343%200.402344%200.402343%201.011718%200%201.414062%20l%20-0.253907%200.25%20c%20-0.039062%20-0.046875%20-0.074218%20-0.09375%20-0.117187%20-0.140625%20l%200.621094%20-0.855469%20l%20-0.808594%20-0.585937%20l%20-0.621094%200.851563%20c%20-0.167969%20-0.078126%20-0.347656%20-0.136719%20-0.535156%20-0.175782%20v%20-1.050781%20h%20-1%20v%201.050781%20c%20-0.183594%200.039063%20-0.363281%200.097656%20-0.53125%200.175782%20l%20-0.621094%20-0.851563%20l%20-0.804687%200.585937%20l%200.617187%200.855469%20c%20-0.125%200.136719%20-0.238281%200.289063%20-0.332031%200.453125%20l%20-1%20-0.324218%20l%20-0.308594%200.949218%20l%201%200.324219%20c%20-0.011718%200.09375%20-0.019531%200.1875%20-0.019531%200.28125%20s%200.007813%200.1875%200.019531%200.28125%20l%20-1%200.324219%20l%200.308594%200.949218%20l%201%20-0.324218%20c%200.09375%200.164062%200.207031%200.316406%200.332031%200.453125%20l%20-0.617187%200.855469%20l%200.195312%200.140624%20l%20-0.53125%200.53125%20c%20-0.402344%200.40625%20-1.011718%200.40625%20-1.414062%200%20l%20-4.902344%20-4.902343%20l%200.027344%20-0.039063%20l%200.210937%20-0.289062%20c%200.328125%200.152344%200.679688%200.269531%201.046875%200.339844%20v%201.179687%20h%201.648438%20v%20-1.179687%20c%200.363281%20-0.070313%200.714844%20-0.1875%201.046875%20-0.339844%20l%200.207031%200.289062%20l%200.484375%200.667969%20l%201.335937%20-0.972656%20l%20-0.484374%20-0.667969%20l%20-0.210938%20-0.289062%20c%200.25%20-0.269532%200.46875%20-0.566407%200.648438%20-0.890626%20l%200.339843%200.113282%20l%200.785157%200.253906%20l%200.507812%20-1.566406%20l%20-0.785156%20-0.257813%20l%20-0.335938%20-0.109375%20c%200.019532%20-0.179687%200.035156%20-0.363281%200.035156%20-0.550781%20s%20-0.015624%20-0.371094%20-0.035156%20-0.550781%20l%200.335938%20-0.109375%20l%200.785156%20-0.257813%20z%20m%201.527344%205.449219%20c%200.527344%200%200.984375%200.265625%201.25%200.667969%20l%20-2.078125%202.082031%20c%20-0.40625%20-0.269531%20-0.671875%20-0.722656%20-0.671875%20-1.25%20c%200%20-0.835937%200.667969%20-1.5%201.5%20-1.5%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3Cpath%20d%3D'm%204.039062%20-18.988281%20c%20-1.449218%200%20-2.679687%201.046875%20-2.964843%202.421875%20c%20-0.019531%200.097656%20-0.035157%200.199218%20-0.046875%200.300781%20c%20-0.007813%200.101563%20-0.015625%200.203125%20-0.015625%200.304687%20v%207.910157%20c%200%201.660156%201.367187%203.027343%203.027343%203.027343%20h%207.949219%20c%201.660157%200%203.027344%20-1.367187%203.027344%20-3.027343%20v%20-7.910157%20c%200%20-0.105468%20-0.003906%20-0.207031%20-0.015625%20-0.304687%20c%20-0.011719%20-0.101563%20-0.027344%20-0.203125%20-0.046875%20-0.300781%20c%20-0.285156%20-1.375%20-1.511719%20-2.421875%20-2.964844%20-2.421875%20z%20m%200%202.003906%20h%202.976563%20v%203%20h%20-2.976563%20c%20-0.585937%200%20-1.027343%20-0.441406%20-1.027343%20-1.027344%20v%20-0.949219%20c%200.003906%20-0.035156%200.003906%20-0.070312%200.007812%20-0.105468%20c%200.003907%20-0.035156%200.007813%20-0.070313%200.011719%20-0.105469%20c%200.007812%20-0.035156%200.019531%20-0.066406%200.027344%20-0.097656%20c%200.125%20-0.421875%200.503906%20-0.714844%200.980468%20-0.714844%20z%20m%204.976563%200%20h%202.972656%20c%200.585938%200%201.023438%200.4375%201.027344%201.023437%20v%200.949219%20c%200%200.585938%20-0.441406%201.027344%20-1.027344%201.027344%20h%20-2.972656%20z%20m%204%203.71875%20v%205.214844%20c%200%200.585937%20-0.441406%201.027343%20-1.027344%201.027343%20h%20-7.949219%20c%20-0.585937%200%20-1.027343%20-0.441406%20-1.027343%20-1.027343%20v%20-5.175781%20c%200.324219%200.148437%200.671875%200.246093%201.027343%200.246093%20h%202.976563%20v%203.035157%20l%202%200.992187%20v%20-4.027344%20h%202.972656%20c%200.34375%200%200.695313%20-0.113281%201.027344%20-0.285156%20z%20m%20-5%2033.28125%20c%20-0.851563%200%20-1.699219%200.328125%20-2.351563%200.976563%20l%20-4.671874%204.671874%20c%20-1.300782%201.300782%20-1.300782%203.402344%200%204.703126%20l%204.671874%204.671874%20c%201.300782%201.300782%203.402344%201.300782%204.699219%200%20l%204.675781%20-4.671874%20c%201.300782%20-1.300782%201.300782%20-3.402344%200%20-4.703126%20l%20-4.675781%20-4.671874%20c%20-0.648437%20-0.648438%20-1.496093%20-0.976563%20-2.347656%20-0.976563%20z%20m%200%201.984375%20c%200.335937%200%200.675781%200.132812%200.941406%200.402344%20l%203.03125%203.027344%20c%20-0.066406%200.039062%20-0.136719%200.070312%20-0.210937%200.09375%20c%20-0.019532%200.003906%20-0.039063%200.011718%20-0.0625%200.015624%20c%20-0.441406%200.148438%20-1.003906%200.019532%20-1.277344%20-0.359374%20l%20-0.140625%20-0.195313%20c%20-0.15625%20-0.210937%20-0.390625%20-0.355469%20-0.652344%20-0.398437%20c%20-0.066406%20-0.011719%20-0.132812%20-0.015626%20-0.199219%20-0.011719%20c%20-0.195312%200.007812%20-0.382812%200.074219%20-0.542968%200.191406%20c%20-0.449219%200.324219%20-0.550782%200.949219%20-0.226563%201.394531%20l%200.144531%200.199219%20c%200.273438%200.378906%200.226563%200.953125%20-0.050781%201.332031%20c%20-0.011719%200.015625%20-0.023437%200.03125%20-0.035156%200.050782%20c%20-0.273437%200.378906%20-0.808594%200.597656%20-1.253906%200.453124%20l%20-0.226563%20-0.074218%20c%20-0.523437%20-0.167969%20-1.089844%200.117187%20-1.257812%200.644531%20c%20-0.171875%200.523437%200.113281%201.089844%200.636718%201.261719%20l%200.226563%200.070312%20c%200.445313%200.144532%200.738281%200.640625%200.746094%201.105469%20c%200.003906%200.023437%200.003906%200.042969%200.003906%200.066406%20c%200.015625%200.464844%20-0.304687%200.960938%20-0.75%201.105469%20l%20-0.226563%200.074219%20c%20-0.179687%200.058593%20-0.332031%200.164062%20-0.445312%200.296875%20l%20-3.785156%20-3.785156%20c%20-0.535156%20-0.535157%20-0.535156%20-1.355469%200%20-1.890626%20l%204.667968%20-4.667968%20c%200.269532%20-0.269532%200.609376%20-0.402344%200.945313%20-0.402344%20z%20m%205.585937%205.234375%20c%200.058594%200%200.117188%200.003906%200.175782%200.007813%20c%200.382812%200.523437%200.335937%201.234374%20-0.144532%201.71875%20l%20-3.753906%203.75%20c%20-0.027344%20-0.066407%20-0.050781%20-0.136719%20-0.070312%20-0.203126%20c%20-0.003906%20-0.011718%20-0.007813%20-0.023437%20-0.011719%20-0.035156%20c%20-0.003906%20-0.007812%20-0.007813%20-0.011718%20-0.011719%20-0.019531%20c%20-0.285156%20-0.84375%20-0.152344%20-1.644531%200%20-2.4375%20c%200.003906%20-0.003906%200.007813%20-0.007813%200.011719%20-0.015625%20c%200.003906%20-0.011719%200.007813%20-0.027344%200.011719%20-0.039062%20c%200.261718%20-0.789063%200.757812%20-1.464844%201.410156%20-1.945313%20c%200.011719%20-0.003906%200.023438%20-0.011719%200.03125%20-0.015625%20c%200.019531%20-0.015625%200.042969%20-0.03125%200.058594%20-0.046875%20c%200.648437%20-0.453125%201.4375%20-0.71875%202.292968%20-0.71875%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
+  --icon-image-missing: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%204.015625%201.03125%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%201%20h%201%20v%20-1%20c%200%20-1.109375%200.890625%20-2%202%20-2%20h%201%20v%20-1%20z%20m%202%200%20v%201%20h%204%20v%20-1%20z%20m%205%200%20v%201%20h%201%20c%201.109375%200%202%200.890625%202%202%20v%201%20h%201%20v%20-1%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%20-5%204%20c%20-0.550781%200%20-1%200.449219%20-1%201%20s%200.449219%201%201%201%20s%201%20-0.449219%201%20-1%20s%20-0.449219%20-1%20-1%20-1%20z%20m%20-5%201%20v%204%20h%201%20v%20-4%20z%20m%2013%200%20v%204%20h%201%20v%20-4%20z%20m%20-4.5%202%20l%20-2%202%20l%20-1.5%20-1%20l%20-2%202%20v%200.5%20c%200%200.5%200.5%200.5%200.5%200.5%20h%207%20s%200.472656%20-0.035156%200.5%20-0.5%20v%20-1%20z%20m%20-8.5%203%20v%201%20c%200%201.644531%201.355469%203%203%203%20h%201%20v%20-1%20h%20-1%20c%20-1.109375%200%20-2%20-0.890625%20-2%20-2%20v%20-1%20z%20m%2013%200%20v%201%20c%200%201.109375%20-0.890625%202%20-2%202%20h%20-1%20v%201%20h%201%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-1%20z%20m%20-8%203%20v%201%20h%204%20v%20-1%20z%20m%200%200'%20fill%3D'currentColor'%20fill-opacity%3D'0.34902'%2F%3E%20%3C%2Fsvg%3E");
 }
 
 .adw-icon--edit-paste {
@@ -219,3 +220,8 @@
   mask-image: var(--icon-application-x-executable);
   -webkit-mask-image: var(--icon-application-x-executable);
 }
+
+.adw-icon--image-missing {
+  mask-image: var(--icon-image-missing);
+  -webkit-mask-image: var(--icon-image-missing);
+}

package/scss/_inline_view_switcher.scss

@@ -107,6 +107,40 @@ adw-inline-view-switcher {
         white-space: nowrap;
     }
 
+    // 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-inline-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;
+
+        // Author rule, not the UA one: the `display: inline-flex` above is also
+        // an author rule and would otherwise keep an empty badge on screen
+        // (cascade ORIGIN beats specificity — the same trap the bar hit).
+        &[hidden] {
+            display: none;
+        }
+
+        &.needs-attention {
+            min-width: 6px;
+            width: 6px;
+            height: 6px;
+            padding: 0;
+            border-radius: 3px;
+        }
+    }
+
     // The stacked content area below the bar — exactly one page is visible.
     .adw-inline-view-switcher-pages {
         width: 100%;

package/scss/_labels.scss

@@ -0,0 +1,135 @@
+// _labels.scss — libadwaita's typography + semantic-colour UTILITY CLASSES.
+//
+// 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.
+//
+// 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
+// stack — i.e. `.numeric` and `.monospace` — and dimmed its header row with a
+// raw `opacity: var(--dim-opacity)` where `.dimmed` is the upstream spelling. It
+// composes these now.
+//
+// WHAT DIFFERS FROM UPSTREAM, AND WHY
+//
+//   - `font-size` percentages are upstream's (181% / 136% / 118% / 82%), which
+//     are relative to the INHERITED size. That is what libadwaita means by them
+//     and it composes with `--font-size-base`, so they are kept verbatim rather
+//     than resolved to pt values.
+//   - `.document` / `.monospace` read `--document-font-*` / `--monospace-font-*`.
+//     In GTK those 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). There is no style manager in a
+//     browser, so `_variables.scss` supplies them as ordinary tokens — same
+//     names, so a consumer re-themes through the documented contract.
+//   - `refs/adwaita-web/adwaita-web/scss/_utility_classes.scss` carries its own
+//     version of this block (it puts these in `_utility_classes.scss`, NOT in
+//     `_label.scss`) and it disagrees with libadwaita on two points: it adds a
+//     `line-height` to every title/heading, and it dims `.caption` and
+//     `.caption-heading` by folding `--dim-opacity` into them. Neither is in
+//     libadwaita — a caption is small, not dim, and dimming is `.dimmed`'s job,
+//     composable onto anything. libadwaita is followed here.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_labels.scss:13-88 (every class below)
+// Reference: refs/libadwaita/src/adw-style-manager.c:50-56,169-218 (the four font tokens)
+// 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.
+
+// _labels.scss:13-15
+.dimmed {
+  opacity: var(--dim-opacity);
+}
+
+// _labels.scss:17-19
+.accent {
+  color: var(--accent-color);
+}
+
+// _labels.scss:21-29 — a semantic class does not just recolour the text, it
+// REBINDS the three accent tokens, so a button or switch inside it turns the
+// same colour without knowing which state it is in.
+@each $e_type in error, warning, success {
+  .#{$e_type} {
+    color: var(--accent-color);
+
+    --accent-bg-color: var(--#{$e_type}-bg-color);
+    --accent-fg-color: var(--#{$e_type}-fg-color);
+    --accent-color: var(--#{$e_type}-color);
+  }
+}
+
+/**********************
+ * General Typography *
+ **********************/
+
+// _labels.scss:35-53
+.title-1 {
+  font-weight: 800;
+  font-size: 181%;
+}
+
+.title-2 {
+  font-weight: 800;
+  font-size: 136%;
+}
+
+.title-3 {
+  font-weight: 700;
+  font-size: 136%;
+}
+
+.title-4 {
+  font-weight: 700;
+  font-size: 118%;
+}
+
+// _labels.scss:55-57
+.heading {
+  font-weight: 700;
+}
+
+// _labels.scss:59-62
+.body {
+  font-weight: 400;
+  line-height: 140%;
+}
+
+// _labels.scss:64-67
+.caption-heading {
+  font-weight: 700;
+  font-size: 82%;
+}
+
+// _labels.scss:69-73
+.caption {
+  font-weight: 400;
+  font-size: 82%;
+  line-height: 140%;
+}
+
+// _labels.scss:75-79
+.document {
+  font-family: var(--document-font-family);
+  font-size: var(--document-font-size);
+  line-height: 140%;
+}
+
+// _labels.scss:81-84
+.monospace {
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+}
+
+// _labels.scss:86-88
+.numeric {
+  font-variant-numeric: tabular-nums;
+}

package/scss/_menu_button.scss

@@ -77,75 +77,15 @@
         }
     }
 
-    // --- Popover menu ---
-    // The elevated menu surface below the button, right-aligned like a header-end
-    // app menu. Reproduces libadwaita's popover.menu > contents.
-    .adw-menu-button-popover {
-        position: absolute;
-        top: calc(100% + 6px);
-        right: 0;
-        z-index: 10;
-        display: flex;
-        flex-direction: column;
-        min-width: 200px;
-        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;
-        }
-    }
-
-    // Optional section heading atop the menu (libadwaita label.title).
-    .adw-menu-button-title {
-        padding: 4px var(--spacing-s) 6px;
-        font-weight: 700;
-        opacity: var(--dim-opacity);
-    }
-
-    // A menu item row — a flat rounded row that fills on hover/active.
-    .adw-menu-button-item {
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-xs);
-        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;
-
-        .adw-menu-button-item-icon {
-            width: 16px;
-            height: 16px;
-            flex: none;
-        }
-
-        &: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;
-        }
+    // The surface, the heading and the item row are `<adw-popover>`'s —
+    // `_popover.scss` (`adw-popover`, `.adw-popover-title`, `.adw-popover-item`).
+    // What used to be here was one of three hand-rolled copies: a
+    // `--card-radius` (12px) surface where libadwaita's is 15px, and a
+    // `calc(var(--button-radius) - 2px)` (7px) row where `modelbutton` is 9px.
+    // Only the icon slot is a menu-button fact.
+    .adw-menu-button-item-icon {
+        width: 16px;
+        height: 16px;
+        flex: none;
     }
 }

package/scss/_navigation_split_view.scss

@@ -1,5 +1,16 @@
 // _navigation_split_view.scss — adw-navigation-split-view styling (docked sidebar).
+//
+// Visibility is `data-pane-visible`, written by the element from
+// `update_navigation_stack` (adw-navigation-split-view.c:342-405), not from the
+// two flags. Two of that table's rules are not expressible as
+// `.collapsed.show-content`: a LONE child stays visible whatever `show-content`
+// says (:389-401), and with `sidebar-position: end` the CONTENT is the root page
+// so the sidebar is pushed ON TOP of it rather than replacing it. This file used
+// to key off the flags and got both wrong — a collapsed view with only a sidebar
+// rendered blank.
+//
 // Reference: refs/adwaita-web/adwaita-web/docs/widgets/navigationsplitview.md
+// Reference: refs/libadwaita/src/adw-navigation-split-view.c
 // Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
@@ -16,33 +27,61 @@ adw-navigation-split-view {
     flex-direction: column;
     min-height: 0;
     flex-shrink: 0;
-    border-right: 1px solid var(--separator-color);
     background-color: var(--sidebar-bg-color);
   }
 
+  // The container MINIMUM, as CSS spells it: `measure_uncollapsed`
+  // (adw-navigation-split-view.c:264-267) is `sidebar_min + content_min`, which
+  // a flex row reaches by itself once the content may claim its own minimum.
+  // `min-width: 0` — the flex idiom for "let this be crushed" — was here, which
+  // is how the content pane could be squeezed to nothing while the sidebar,
+  // being `flex-shrink: 0`, kept its whole width.
   .adw-nsv-content {
     display: flex;
     flex-direction: column;
-    min-width: 0;
+    min-width: min-content;
     min-height: 0;
     flex: 1 1 auto;
     background-color: var(--window-bg-color);
   }
 
-  // Collapsed (narrow): one pane at a time.
-  &.collapsed.show-content .adw-nsv-sidebar {
-    display: none;
+  // `sidebar-position: end` docks the sidebar past the content. flex `order`
+  // flips the visual order without changing the slotting DOM order.
+  &.sidebar-end {
+    .adw-nsv-content {
+      order: 1;
+    }
+
+    .adw-nsv-sidebar {
+      order: 2;
+    }
   }
 
-  &.collapsed:not(.show-content) {
-    .adw-nsv-content {
+  // THE DIVIDER FOLLOWS THE VISUAL SIDE. `_sidebars.scss:1293-1302` makes it
+  // `:dir()` × `.end`, which is the product `.sidebar-at-visual-start` carries:
+  // under RTL a `start` sidebar is drawn on the right and its divider belongs on
+  // its left edge. A fixed `border-right` drew it on the wrong side for half the
+  // four combinations.
+  &.sidebar-at-visual-start .adw-nsv-sidebar {
+    border-right: 1px solid var(--separator-color);
+  }
+
+  &:not(.sidebar-at-visual-start) .adw-nsv-sidebar {
+    border-left: 1px solid var(--separator-color);
+  }
+
+  // Collapsed: whichever pane the STACK puts on top fills the view, and the
+  // other is not rendered at all.
+  &.collapsed {
+    [data-pane-visible='false'] {
       display: none;
     }
 
-    .adw-nsv-sidebar {
+    .adw-nsv-sidebar[data-pane-visible='true'] {
       flex: 1 1 auto;
       max-width: none;
       border-right: none;
+      border-left: none;
     }
   }
 }

package/scss/_overlay_split_view.scss

@@ -1,5 +1,21 @@
 // _overlay_split_view.scss — adw-overlay-split-view styling.
+//
+// The GEOMETRY is no longer here. It used to be four `transform: translateX(±100%)`
+// rules keyed on `.collapsed` / `.show-sidebar` / `.sidebar-end`, which can only
+// express the two END STATES of a reveal — so `show-progress` was 0 or 1, the
+// five `OVERLAY_SWIPE_*` conformance tables shipped unexercised, and the docked
+// hide slid the wrong way for an `end` sidebar because the JS wrote `marginRight`
+// whichever edge the pane was on.
+//
+// The element now writes the pane rect per frame from
+// `layoutOverlaySplitView`, which is continuous and knows the edge (including
+// under RTL, where a `start` sidebar is drawn on the RIGHT —
+// `get_start_or_end`, adw-overlay-split-view.c:227-234). What is left here is
+// what CSS genuinely owns: the box model, the stacking, and the transition that
+// smooths a programmatic toggle.
+//
 // Reference: refs/libadwaita/src/adw-overlay-split-view.c
+// Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as Web Component for @gjsify/adwaita-web.
 
@@ -15,34 +31,44 @@ adw-overlay-split-view {
     background-color: var(--sidebar-bg-color);
     overflow-y: auto;
     flex-shrink: 0;
-    transition: transform 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
     z-index: 10;
     align-self: stretch;
+    // Only `opacity` transitions. The offset is driven per frame, so animating
+    // it here would fight the swipe: a gesture would lag its own finger.
+    transition: opacity 0.2s ease;
   }
 
+  // THE CONTAINER MINIMUM, as CSS spells it. `measure_uncollapsed`
+  // (adw-overlay-split-view.c:558-563) is `trunc(sidebar_min * progress) +
+  // content_min`, and a flex row reaches exactly that on its own PROVIDED the
+  // content is allowed to claim its own minimum: the sidebar is `flex-shrink: 0`
+  // with a `min-width` of `sidebar_min`, so the sum is the container's floor.
+  //
+  // `min-width: 0` was here instead — the flex idiom for "let this be crushed so
+  // an ellipsis can happen" — which is precisely how the content pane could be
+  // squeezed to nothing while the sidebar kept its whole width. A child that
+  // needs to truncate can still ask for `min-width: 0` itself; the PANE may not.
+  //
+  // Not computed in JS: a measured number would need the content's min-content
+  // size, which the DOM does not expose without a reflow, and the first attempt
+  // used `scrollWidth` — the pane's CURRENT width — which pinned the view at
+  // whatever it happened to be and stopped it responding to its breakpoint.
   .adw-osv-content {
     flex: 1;
-    min-width: 0;
+    min-width: min-content;
     min-height: 0;
     display: flex;
     flex-direction: column;
     align-self: stretch;
   }
 
-  // Docked mode (not collapsed) — sidebar beside content
+  // Docked — the sidebar sits in the flex row and the hidden part is taken off
+  // its own edge by a negative margin the element computes.
   &:not(.collapsed) .adw-osv-sidebar {
     position: relative;
   }
 
-  // Docked hide: slide left and collapse via opacity. Sidebar keeps its
-  // intrinsic width so internal elements don't reflow.
-  &:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
-    transform: translateX(-100%);
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  // Docked + sidebar-end — dock the sidebar to the RIGHT of the content
+  // Docked + sidebar-end — dock the sidebar to the far side of the content
   // (the Adw.OverlaySplitView { sidebar-position: end } layout). flex `order`
   // flips the visual order without changing the slotting DOM order.
   &:not(.collapsed).sidebar-end {
@@ -52,49 +78,108 @@ adw-overlay-split-view {
 
     .adw-osv-sidebar {
       order: 2;
-      border-inline-start: 1px solid var(--separator-color);
     }
   }
 
-  // Docked hide when the sidebar is on the end edge: slide RIGHT, not left.
-  &:not(.collapsed):not(.show-sidebar).sidebar-end .adw-osv-sidebar {
-    transform: translateX(100%);
+  // THE DIVIDER FOLLOWS THE VISUAL SIDE, not the logical one. `_sidebars.scss`
+  // makes it `:dir()` × `.end` (:21-39), which is exactly the product
+  // `.sidebar-at-visual-start` already carries: under RTL a `start` sidebar is
+  // drawn on the right and its divider belongs on its left edge.
+  &:not(.collapsed) {
+    .adw-osv-sidebar {
+      border-inline-end: none;
+      border-inline-start: none;
+    }
+
+    &.sidebar-at-visual-start .adw-osv-sidebar {
+      border-right: 1px solid var(--separator-color);
+    }
+
+    &:not(.sidebar-at-visual-start) .adw-osv-sidebar {
+      border-left: 1px solid var(--separator-color);
+    }
   }
 
-  // Overlay mode (collapsed) — sidebar on top of content
+  // Overlay (collapsed) — the sidebar floats above the content at the absolute
+  // offset the element writes into `left`, which is the only property that can
+  // carry a mid-swipe position.
   &.collapsed .adw-osv-sidebar {
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 0;
-    transform: translateX(-100%);
-    opacity: 0;
-    pointer-events: none;
+    box-shadow: 0 0 12px rgb(0 0 0 / 25%);
   }
 
-  &.collapsed.sidebar-end .adw-osv-sidebar {
-    left: auto;
-    right: 0;
-    transform: translateX(100%);
+  // THE TWO RESTING STATES ARE CSS. Everything BETWEEN them is JS.
+  //
+  // Dropping these is what shipped the docs-site regression. The offset is
+  // driven per frame from `layoutOverlaySplitView` — but a view that has never
+  // been measured drives nothing, and an absolutely-positioned pane with no
+  // `left` resolves to `left: 0` at full opacity. So a HIDDEN sidebar was
+  // painted over the content at the wrong edge, on a page whose slideshow
+  // builds each slide inside `display: none` and moves it in, so the first
+  // measurement never arrived and this fallback was the whole rendering.
+  //
+  // Not a second copy of the arithmetic: 0% and 100% ARE the two ends the JS
+  // interpolates between, and neither of them needs a pixel to say. The element
+  // clears its inline placement whenever it has no measurement, which is what
+  // hands control back to these rules instead of stranding a stale offset.
+  &.collapsed {
+    // Revealed: flush against the edge the pane is drawn on.
+    &.sidebar-at-visual-start .adw-osv-sidebar {
+      left: 0;
+      right: auto;
+    }
+
+    &:not(.sidebar-at-visual-start) .adw-osv-sidebar {
+      left: auto;
+      right: 0;
+    }
+
+    // Hidden: entirely off that same edge, and untouchable while it is there.
+    &:not(.show-sidebar) {
+      .adw-osv-sidebar {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      &.sidebar-at-visual-start .adw-osv-sidebar {
+        left: auto;
+        right: 100%;
+      }
+
+      &:not(.sidebar-at-visual-start) .adw-osv-sidebar {
+        left: 100%;
+        right: auto;
+      }
+    }
   }
 
-  &.collapsed.show-sidebar .adw-osv-sidebar {
-    transform: translateX(0);
-    opacity: 1;
-    pointer-events: auto;
+  // Docked and hidden — the pane takes no room in the row. The JS expresses
+  // this as a negative margin so it can animate; unmeasured, the end state is
+  // simply a pane of no width.
+  &:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
   }
 
-  // Backdrop — visible only in overlay mode when sidebar is open
+  // Backdrop — the click-outside shield. `hidden` is the element's, off
+  // `shieldVisible`; the OPACITY is the shadow-helper progress, so it fades with
+  // the reveal instead of appearing whole.
   .adw-osv-backdrop {
     display: none;
   }
 
-  &.collapsed.show-sidebar .adw-osv-backdrop {
+  &.collapsed .adw-osv-backdrop:not([hidden]) {
     display: block;
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.3);
+    background: rgb(0 0 0 / 30%);
     z-index: 9;
+    transition: opacity 0.2s ease;
   }
 }