@gjsify/adwaita-web 0.64.2-next.252 → 0.64.2-next.254

package/src/elements/gtk-grid.ts

@@ -38,8 +38,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { normalizeBoxOrientation, normalizeBoxSpacing, type BoxOrientation } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkGrid extends HTMLElement {
+export class GtkGrid extends WidgetElement {
     static get observedAttributes() {
         return ['column-spacing', 'row-spacing', 'column-homogeneous', 'row-homogeneous', 'orientation'];
     }

package/src/elements/gtk-header-bar.ts

@@ -64,8 +64,9 @@ import { bindSlottedChildren } from '../slotted-children.js';
 // Registers <gtk-window-controls>: `show-title-buttons` builds two of them, so importing
 // the bar alone must still define them.
 import './gtk-window-controls.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkHeaderBar extends HTMLElement {
+export class GtkHeaderBar extends WidgetElement {
     private _initialized = false;
     private _handle!: HTMLDivElement;
     private _box!: HTMLDivElement;

package/src/elements/gtk-image.ts

@@ -1,15 +1,15 @@
 // <gtk-image> — the icon node as an element. A symbolic icon is a CSS-masked box whose
 // glyph comes from a generated `.adw-icon--<name>` class and whose colour is
-// `currentColor`, so it themes with whatever contains it. A full-colour icon registered
-// through `registerColorIcon` is the same box with the image as its background and no
+// `currentColor`, so it themes with whatever contains it. A full-colour icon from a
+// `Gtk.IconTheme` resource path is the same box with the image as its background and no
 // mask. Which of the two a name reaches is decided once, in `../icon-theme.ts`, in the
 // order GTK's own theme tries them; the symbolic name derivation and its guard live once
 // in `@gjsify/adwaita-core`'s {@link normalizeIconName}, the markup once here.
 //
 // Attributes:
 //   icon-name — icon name, `-symbolic` suffix optional. A name that is neither a
-//               registered colour icon nor a single CSS token (a space, a quote, an
-//               unregistered reverse-DNS application id) never reaches a class — it
+//               resource file nor a single CSS token (a space, a quote, a reverse-DNS
+//               application id no resource ships) never reaches a class — it
 //               draws {@link MISSING_ICON_NAME}, which is what GTK draws for it, rather
 //               than injecting markup.
 //   size      — rendered edge length in px. Absent leaves the stylesheet's 16px in
@@ -36,6 +36,7 @@
 import { normalizeIconName } from '@gjsify/adwaita-core';
 
 import { lookupIcon, onIconThemeChanged, type IconRequest } from '../icon-theme.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `url` as one CSS string token, whatever quotes or backslashes it holds. */
 function cssUrl(url: string): string {
@@ -43,9 +44,7 @@ function cssUrl(url: string): string {
 }
 
 /**
- * The generated mask-class prefix — the one place the `--` spelling appears. `icon-registry`
- * builds the same class for a runtime registration and imports it from here rather than
- * spelling it twice.
+ * The generated mask-class prefix — the one place the `--` spelling appears.
  */
 export const MASK_CLASS_PREFIX = 'adw-icon--';
 
@@ -63,7 +62,7 @@ export const MISSING_ICON_NAME = 'image-missing';
  */
 export const COLOR_ICON_CLASS = 'adw-icon-color';
 
-export class GtkImage extends HTMLElement {
+export class GtkImage extends WidgetElement {
     static get observedAttributes() {
         return ['icon-name', 'size'];
     }
@@ -80,8 +79,8 @@ export class GtkImage extends HTMLElement {
 
     /**
      * The name the SYMBOLIC lookup works with — `''` when the icon-name is absent, empty,
-     * or not usable as one CSS token. A registered colour icon can still draw for a name
-     * that answers `''` here (`org.gnome.Builder`); whether a name draws anything but
+     * or not usable as one CSS token. A resource file can still draw for a name that
+     * answers `''` here (`org.gnome.Builder`); whether a name draws anything but
      * `image-missing` is `isIconAvailable`'s question.
      *
      * `''` does NOT mean the box draws nothing: an unusable name that was given still
@@ -152,13 +151,13 @@ export class GtkImage extends HTMLElement {
         const looked = lookupIcon(this.getAttribute('icon-name'), this._request());
         // A resource file the browser cannot draw (XPM, compressed) is GTK's `image-missing`.
         const found = looked?.kind === 'resource' && looked.url === null ? ({ kind: 'missing' } as const) : looked;
-        const asIs = found?.kind === 'color' || (found?.kind === 'resource' && !found.symbolic) ? found.url : null;
+        const asIs = found?.kind === 'resource' && !found.symbolic ? found.url : null;
         const mask = found?.kind === 'resource' && found.symbolic ? found.url : null;
         this.classList.toggle(COLOR_ICON_CLASS, asIs !== null);
         if (asIs !== null) {
             // Drawn as-is: `_icon.scss` drops the mask and the `currentColor` fill for this
-            // modifier, so only the image paints. `url` is a data-URI, a blob or a resolved href;
-            // the quote and backslash escapes keep it one CSS string either way.
+            // modifier, so only the image paints. `url` is a blob URL; the quote and backslash
+            // escapes keep it one CSS string.
             this.style.backgroundImage = cssUrl(asIs);
         } else {
             this.style.removeProperty('background-image');
@@ -177,8 +176,8 @@ export class GtkImage extends HTMLElement {
         if (found?.kind === 'symbolic') {
             this.classList.add(`${MASK_CLASS_PREFIX}${found.name}`);
         } else if (found?.kind === 'missing') {
-            // A name was GIVEN and nothing answers it — not a colour icon, and not one CSS
-            // token (a space, a quote, an unregistered reverse-DNS application id). GTK has
+            // A name was GIVEN and nothing answers it — no resource file, and not one CSS
+            // token (a space, a quote, a reverse-DNS application id no resource ships). GTK has
             // no such state: `gtk_icon_theme_lookup_icon` never returns NULL, it returns the
             // always-available `image-missing` (refs/gtk/gtk/gtkicontheme.c —
             // `gtk_icon_paintable_get_icon_name`'s own docs say so). So the same glyph is

package/src/elements/gtk-inscription.ts

@@ -95,6 +95,7 @@ import {
     labelYalignAlignItems,
     type LabelWrapMode,
 } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkInscriptionOverflow`, in enum order (gtkinscription.h:44-48). */
 export const INSCRIPTION_OVERFLOW_MODES = ['clip', 'ellipsize-start', 'ellipsize-middle', 'ellipsize-end'] as const;
@@ -150,7 +151,7 @@ function normalizeCount(value: unknown): number {
     return Math.max(0, Math.trunc(parsed));
 }
 
-export class GtkInscription extends HTMLElement {
+export class GtkInscription extends WidgetElement {
     private _initialized = false;
 
     static get observedAttributes() {

package/src/elements/gtk-label.ts

@@ -78,6 +78,7 @@ import {
 } from '@gjsify/adwaita-core';
 
 import { JUSTIFY_TEXT_ALIGN } from './justification.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The attributes that carry a property — also the `notify::` roster. */
 const PROPERTY_ATTRIBUTES = [
@@ -96,7 +97,7 @@ const PROPERTY_ATTRIBUTES = [
     'selectable',
 ] as const;
 
-export class GtkLabel extends HTMLElement {
+export class GtkLabel extends WidgetElement {
     /**
      * The rendered text's own box — present while {@link wrap} is set (so it can be pinned
      * to its measured wrap width, see `_remeasure`) OR while {@link ellipsize} is not
@@ -291,9 +292,9 @@ export class GtkLabel extends HTMLElement {
 
     private _remeasure(): void {
         if (!this._wrapSpan || !this.isConnected) return;
-        this._wrapSpan.style.width = '';
+        this._wrapSpan.style.maxWidth = '';
         const width = measuredWrapWidth(this._wrapSpan);
-        this._wrapSpan.style.width = width !== null ? `${width}px` : '';
+        this._wrapSpan.style.maxWidth = width !== null ? `min(100%, ${width}px)` : '';
     }
 
     attributeChangedCallback(name: string, old: string | null, value: string | null) {
@@ -393,9 +394,15 @@ export class GtkLabel extends HTMLElement {
      * here, not the narrower width GTK's Pango layout actually wrapped to. So this measures
      * instead, in two passes: first let {@link _wrapSpan} wrap at the FULL container width
      * (`width: ''`, the same collapse above, which is exactly the width GTK's own
-     * allocation wraps against), then pin the span to its widest resulting line via
+     * allocation wraps against), then cap the span at its widest resulting line via
      * `Range.getClientRects()`, which gives the pseudo spacers real free space to split.
-     * Approximate on purpose, and cheap: one synchronous reflow per render. The pinned
+     * A CAP, `max-width`, and never `width`: a pinned `width` is also the span's
+     * min-content, so the label could no longer shrink below the width it first wrapped
+     * at, and a card holding it in a narrower pane grew past the pane and was clipped.
+     * GtkLabel's wrapping minimum is its widest word (`gtk_label_measure`), which a capped
+     * flex item keeps as its min-content; the cap itself only resolves against a definite
+     * container, so the label's max-content stays its text on one line, GTK's natural.
+     * Approximate on purpose, and cheap: one synchronous reflow per render. The measured
      * width goes stale whenever the available width or the font changes, and a page does
      * both (a rotated phone, an opened sidebar, a web font arriving late), so
      * {@link connectedCallback} re-measures on each resize and once the fonts have loaded.

package/src/elements/gtk-level-bar.ts

@@ -47,6 +47,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { normalizeBoxOrientation, type BoxOrientation } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkLevelBarMode`, spelled as the GIR's enum nicks (:1004-1008). */
 type LevelBarMode = 'continuous' | 'discrete';
@@ -81,7 +82,7 @@ function numberAttribute(element: HTMLElement, name: string, fallback: number):
     return Number.isFinite(raw) ? raw : fallback;
 }
 
-export class GtkLevelBar extends HTMLElement {
+export class GtkLevelBar extends WidgetElement {
     private _trough!: HTMLSpanElement;
     private _initialized = false;
     /** Offset name → value, kept sorted ascending exactly as the C's `GList` is. */

package/src/elements/gtk-list-box-row.ts

@@ -44,8 +44,9 @@
 
 import { bindSlottedChildren } from '../slotted-children.js';
 import { type AdwRowActivation, attachRowActivation } from './row-activation.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkListBoxRow extends HTMLElement {
+export class GtkListBoxRow extends WidgetElement {
     private _contentsEl!: HTMLDivElement;
     private _activation?: AdwRowActivation;
     private _initialized = false;

package/src/elements/gtk-list-box.ts

@@ -67,6 +67,7 @@ import { attachRovingFocus } from './roving-focus.js';
 // server-rendered box and collect its rows. See `adw-expander-row.ts` for why a combined
 // `import { GtkListBoxRow }` would not do it.
 import './gtk-list-box-row.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkListTabBehavior`'s nicks — `cell` behaves as `item` outside a cell-based box. */
 export type GtkListTabBehavior = 'all' | 'item' | 'cell';
@@ -78,7 +79,7 @@ export function normalizeListTabBehavior(raw: string | null | undefined): GtkLis
     return raw !== null && raw !== undefined && TAB_BEHAVIORS.has(raw) ? (raw as GtkListTabBehavior) : 'all';
 }
 
-export class GtkListBox extends HTMLElement {
+export class GtkListBox extends WidgetElement {
     private _rows: GtkListBoxRow[] = [];
     private _selection: number[] = [];
     /** `box->selected_row`, `-1` for the C's NULL. */

package/src/elements/gtk-list-view.ts

@@ -68,6 +68,7 @@ import { bindSlottedChildren } from '../slotted-children.js';
 import { stringListSlot } from '../string-list-slot.js';
 
 import { attachRovingFocus } from './roving-focus.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkListTabBehavior`'s nicks — `cell` behaves as `item` outside a cell-based view. */
 export type GtkListTabBehavior = 'all' | 'item' | 'cell';
@@ -79,7 +80,7 @@ export function normalizeListTabBehavior(raw: string | null | undefined): GtkLis
     return raw !== null && raw !== undefined && TAB_BEHAVIORS.has(raw) ? (raw as GtkListTabBehavior) : 'all';
 }
 
-export class GtkListView extends HTMLElement {
+export class GtkListView extends WidgetElement {
     protected _listEl!: HTMLDivElement;
     protected _rows: HTMLElement[] = [];
     /** The model + selection machine all three views share (ADR 0004, ADR 0089). */

package/src/elements/gtk-media-controls.ts

@@ -85,6 +85,7 @@
 //   :296-306, `play_button_clicked`)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 // The play/pause pair `ui/gtkvideo.ui`'s `play_button` carries, as constants for the same
 // reason the video's four overlay glyphs are constants — `check-adwaita-icon-masks.mjs` finds
@@ -185,7 +186,7 @@ export function mediaTimeToString(seconds: number, remaining = false, forceHour
     return `${min}:${String(sec).padStart(2, '0')}`;
 }
 
-export class GtkMediaControls extends HTMLElement {
+export class GtkMediaControls extends WidgetElement {
     private _initialized = false;
     private _playButton!: HTMLButtonElement;
     private _timeLabel!: HTMLSpanElement;

package/src/elements/gtk-menu-button.ts

@@ -49,6 +49,7 @@ import './gtk-popover.js';
 import type { GtkPopover } from './gtk-popover.js';
 
 import { createGtkImage } from './gtk-image.js';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * Where the popover sits, per `GtkArrowType`. `menuButtonPopupDirection` folds `none`
@@ -65,7 +66,7 @@ const POPOVER_POSITIONS = {
     right: 'end',
 } as const;
 
-export class GtkMenuButton extends HTMLElement {
+export class GtkMenuButton extends WidgetElement {
     private _buttonEl!: HTMLButtonElement;
     private _popoverEl!: GtkPopover;
     private _model: AdwMenuModel = [];

package/src/elements/gtk-notebook.ts

@@ -70,6 +70,7 @@
 // Reference: refs/gtk/gtk/gtknotebook.c
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkPositionType`, spelled as the GIR's enum nicks. `top` is the property default. */
 export type NotebookTabPos = 'top' | 'bottom' | 'left' | 'right';
@@ -99,7 +100,7 @@ export interface NotebookPageInfo {
     child: HTMLElement;
 }
 
-export class GtkNotebook extends HTMLElement {
+export class GtkNotebook extends WidgetElement {
     private _current: HTMLElement | null = null;
     private _initialized = false;
     private _initializedChildren = new WeakSet<HTMLElement>();

package/src/elements/gtk-overlay.ts

@@ -48,11 +48,12 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The edges `gtk_overlay_child_update_style_classes` can pin a child to. */
 const EDGES = ['left', 'right', 'top', 'bottom'] as const;
 
-export class GtkOverlay extends HTMLElement {
+export class GtkOverlay extends WidgetElement {
     private _childEl!: HTMLDivElement;
     private _layerEl!: HTMLDivElement;
     private _initialized = false;

package/src/elements/gtk-paned.ts

@@ -69,6 +69,7 @@
 import { glibClamp, normalizeBoxOrientation, type BoxOrientation } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `gtkpaned.c:131` — `HANDLE_EXTRA_SIZE`, how far the hit area reaches past the node. */
 const HANDLE_EXTRA_SIZE = 6;
@@ -162,7 +163,7 @@ export function computePanedPosition(input: PanedPositionInput): PanedPosition {
     return { min, max, position: glibClamp(position, min, max) };
 }
 
-export class GtkPaned extends HTMLElement {
+export class GtkPaned extends WidgetElement {
     private _startEl!: HTMLDivElement;
     private _handleEl!: HTMLDivElement;
     private _endEl!: HTMLDivElement;

package/src/elements/gtk-picture.ts

@@ -62,6 +62,7 @@
 //   `gtk_picture_set_content_fit` :1092-1131)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkContentFit`, in enum order — the four nicks the GIR and CSS share. */
 export const PICTURE_CONTENT_FIT_MODES = ['fill', 'contain', 'cover', 'scale-down'] as const;
@@ -82,7 +83,7 @@ export function normalizePictureContentFit(value: unknown): PictureContentFit {
         : DEFAULT_PICTURE_CONTENT_FIT;
 }
 
-export class GtkPicture extends HTMLElement {
+export class GtkPicture extends WidgetElement {
     private _initialized = false;
 
     static get observedAttributes() {

package/src/elements/gtk-popover-bin.ts

@@ -76,11 +76,12 @@ import './gtk-popover-menu.js';
 
 import type { GtkPopoverMenu } from './gtk-popover-menu.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** How long a press must last to count as a long press — GTK's own default. */
 const LONG_PRESS_MS = 500;
 
-export class GtkPopoverBin extends HTMLElement {
+export class GtkPopoverBin extends WidgetElement {
     private _model: AdwMenuModel = [];
     private _popover: GtkPopoverMenu | null = null;
     private _actions: AdwMenuActions | null = null;

package/src/elements/gtk-popover-menu-bar.ts

@@ -73,6 +73,7 @@ import type { AdwMenuActions, AdwMenuInput, AdwMenuModel, AdwMenuPath, AdwMenuSu
 import './gtk-popover-menu.js';
 
 import type { GtkPopoverMenu } from './gtk-popover-menu.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** One bar item: its submenu node, the popover below it, and the DOM that draws both. */
 interface MenuBarItem {
@@ -85,7 +86,7 @@ interface MenuBarItem {
     popover: GtkPopoverMenu;
 }
 
-export class GtkPopoverMenuBar extends HTMLElement {
+export class GtkPopoverMenuBar extends WidgetElement {
     private _model: AdwMenuModel = [];
     private _actions: AdwMenuActions | null = null;
     private _items: MenuBarItem[] = [];

package/src/elements/gtk-popover.ts

@@ -83,6 +83,7 @@
 import { PopoverState, resolvePopoverKey } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** Which side of the anchor the surface sits on. */
 export type GtkPopoverPosition = 'bottom' | 'top' | 'start' | 'end';
@@ -109,7 +110,7 @@ const ROLES: readonly GtkPopoverRole[] = [...LIST_ROLES, 'dialog'];
 /** The row selector keyboard navigation walks. */
 const ITEM_SELECTOR = '.adw-popover-item';
 
-export class GtkPopover extends HTMLElement {
+export class GtkPopover extends WidgetElement {
     private readonly _state = new PopoverState();
     private _anchor: HTMLElement | null = null;
     private _initialized = false;

package/src/elements/gtk-progress-bar.ts

@@ -41,8 +41,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { glibClamp } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkProgressBar extends HTMLElement {
+export class GtkProgressBar extends WidgetElement {
     private _trough!: HTMLSpanElement;
     private _progress!: HTMLSpanElement;
     private _text!: HTMLSpanElement;

package/src/elements/gtk-revealer.ts

@@ -60,6 +60,7 @@
 import { easeOutCubic } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** Every `GtkRevealerTransitionType` nick, in GIR order. */
 const TRANSITION_TYPES = [
@@ -116,7 +117,7 @@ const RTL_FLIP: Partial<Record<RevealerTransitionType, RevealerTransitionType>>
     'fade-slide-right': 'fade-slide-left',
 };
 
-export class GtkRevealer extends HTMLElement {
+export class GtkRevealer extends WidgetElement {
     private _clipEl!: HTMLDivElement;
     private _initialized = false;
     /** `current_pos` — 0 hidden, 1 shown. */

package/src/elements/gtk-scale-button.ts

@@ -53,6 +53,7 @@ import { createGtkImage } from './gtk-image.js';
 // TypeScript and take the registration with it.
 import './gtk-popover.js';
 import type { GtkPopover } from './gtk-popover.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `gtk_adjustment_new (0, 0, 100, 2, 20, 0)` — the adjustment a bare scale button has. */
 const GTK_ADJUSTMENT: AdwAdjustmentInput = {
@@ -63,7 +64,7 @@ const GTK_ADJUSTMENT: AdwAdjustmentInput = {
     pageSize: 0,
 };
 
-export class GtkScaleButton extends HTMLElement {
+export class GtkScaleButton extends WidgetElement {
     private readonly _state = new SpinState();
     private _buttonEl!: HTMLButtonElement;
     private _glyph!: HTMLElement;

package/src/elements/gtk-scale.ts

@@ -43,6 +43,7 @@ import {
     parseAdjustment,
 } from '@gjsify/adwaita-core';
 import type { AdwAdjustment, AdwAdjustmentInput, BoxOrientation } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /** `Gtk.PositionType` nicks, as `GtkScale:value-pos` spells them. */
 const VALUE_POSITIONS = ['left', 'right', 'top', 'bottom'] as const;
@@ -90,7 +91,7 @@ export function formatScaleValue(value: number, digits: number): string {
     return text;
 }
 
-export class GtkScale extends HTMLElement {
+export class GtkScale extends WidgetElement {
     /** The headless `Gtk.Adjustment`: the range, the clamp and the two signals (ADR 0004, ADR 0047). */
     private readonly _range = new SpinState();
     private _trough!: HTMLElement;

package/src/elements/gtk-scrollbar.ts

@@ -66,6 +66,7 @@ import {
     type AdwAdjustmentInput,
     type BoxOrientation,
 } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /** The two nodes below GTK's `range` level, spelled as GTK spells them. */
 const TROUGH_CLASS = 'adw-scrollbar-trough';
@@ -112,7 +113,7 @@ const ZERO_ADJUSTMENT: AdwAdjustment = Object.freeze({
     pageSize: 0,
 });
 
-export class GtkScrollbar extends HTMLElement {
+export class GtkScrollbar extends WidgetElement {
     private _trough!: HTMLElement;
     private _slider!: HTMLElement;
     private _observer: ResizeObserver | null = null;

package/src/elements/gtk-scrolled-window.ts

@@ -93,6 +93,7 @@ import { AdwScrollShading } from '../scroll-shading.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import type { GtkScrollType } from './gtk-scrollbar.js';
 import type { GtkViewport } from './gtk-viewport.js';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * `INDICATOR_FADE_OUT_DELAY` — how long an indicator waits, after the last scroll, before
@@ -148,7 +149,7 @@ const AXES = [
         bar: 'horizontal',
         policy: 'hscrollbar-policy',
         natural: 'propagate-natural-width',
-        cssMin: 'minWidth',
+        cssSize: 'width',
         end: 'left',
         farEnd: 'right',
     },
@@ -157,7 +158,7 @@ const AXES = [
         bar: 'vertical',
         policy: 'vscrollbar-policy',
         natural: 'propagate-natural-height',
-        cssMin: 'minHeight',
+        cssSize: 'height',
         end: 'top',
         farEnd: 'bottom',
     },
@@ -198,7 +199,7 @@ function resolveScrollKey(event: KeyboardEvent): { scroll: GtkScrollType; horizo
     }
 }
 
-export class GtkScrolledWindow extends HTMLElement {
+export class GtkScrolledWindow extends WidgetElement {
     private _viewport!: GtkViewport;
     private _bars: Record<'horizontal' | 'vertical', HTMLElement> | null = null;
     /** The size clamps `_writeSize` last wrote, which are the only ones it may clear. */
@@ -567,8 +568,10 @@ export class GtkScrolledWindow extends HTMLElement {
             // `gtk_scrolled_window_measure`'s request for the CHILD'S size, written on the
             // scrollport that has to ask its parent for it: `propagate-natural-*` is the
             // child's NATURAL size (`max-content`), a NEVER policy is its MINIMUM one
-            // (`min-content`), and the natural is the larger of the two.
-            this._viewport.style[axis.cssMin] = this.hasAttribute(axis.natural)
+            // (`min-content`), and the natural is the larger of the two. It is the SIZE, not
+            // the minimum: `_scrolled_window.scss` holds the scrollport at 0 by default and
+            // fills the cell through `min-*: 100%`, which a minimum here would overwrite.
+            this._viewport.style[axis.cssSize] = this.hasAttribute(axis.natural)
                 ? 'max-content'
                 : policy === 'never'
                   ? 'min-content'

package/src/elements/gtk-search-bar.ts

@@ -38,8 +38,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkSearchBar extends HTMLElement {
+export class GtkSearchBar extends WidgetElement {
     private _box!: HTMLDivElement;
     private _center!: HTMLDivElement;
     private _close!: HTMLButtonElement;

package/src/elements/gtk-separator.ts

@@ -17,8 +17,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { normalizeBoxOrientation, type BoxOrientation } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkSeparator extends HTMLElement {
+export class GtkSeparator extends WidgetElement {
     static get observedAttributes() {
         return ['orientation'];
     }

package/src/elements/gtk-spin-button.ts

@@ -34,6 +34,7 @@ import type { AdwAdjustment, AdwAdjustmentInput } from '@gjsify/adwaita-core';
 import { createGtkImage } from './gtk-image.js';
 
 import { formatScaleValue } from './gtk-scale.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `EPSILON` in gtkspinbutton.c:64 — the "is the value already at the bound" test. */
 const EPSILON = 1e-10;
@@ -46,7 +47,7 @@ const MAX_TIMER_CALLS = 5;
 /** `Gtk.SpinButtonUpdatePolicy` nicks; `always` is the pspec default (gtkspinbutton.c:472-475). */
 const UPDATE_POLICIES = ['always', 'if-valid'] as const;
 
-export class GtkSpinButton extends HTMLElement {
+export class GtkSpinButton extends WidgetElement {
     private readonly _range = new SpinState();
     private _input!: HTMLInputElement;
     private _down!: HTMLButtonElement;

package/src/elements/gtk-spinner.ts

@@ -43,13 +43,14 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_spinner.scss:1-3 (the disabled rule)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
 /** The radius-7 ring `process-working-symbolic.svg` traces through (1,8)…(15,8). */
 const RADIUS = 7;
 
-export class GtkSpinner extends HTMLElement {
+export class GtkSpinner extends WidgetElement {
     private _initialized = false;
 
     static get observedAttributes() {

package/src/elements/gtk-stack-page.ts

@@ -20,11 +20,12 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The attributes a record hands to its child on adoption — `GtkStackPage`'s string/boolean properties. */
 export const STACK_PAGE_ATTRIBUTES = ['name', 'title', 'icon-name', 'needs-attention', 'use-underline'] as const;
 
-export class GtkStackPage extends HTMLElement {
+export class GtkStackPage extends WidgetElement {
     static get observedAttributes() {
         return [...STACK_PAGE_ATTRIBUTES];
     }

package/src/elements/gtk-stack-sidebar.ts

@@ -39,6 +39,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import type { GtkStack } from './gtk-stack.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The `GtkStackPageInfo` half this element reads — it never looks inside `child`. */
 interface SidebarPage {
@@ -49,7 +50,7 @@ interface SidebarPage {
     child: HTMLElement;
 }
 
-export class GtkStackSidebar extends HTMLElement {
+export class GtkStackSidebar extends WidgetElement {
     private _stack: GtkStack | null = null;
     private _list!: HTMLDivElement;
     private _initialized = false;

package/src/elements/gtk-stack-switcher.ts

@@ -47,6 +47,7 @@
 import { normalizeBoxOrientation, type BoxOrientation } from '@gjsify/adwaita-core';
 
 import type { GtkStack } from './gtk-stack.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The `GtkStackPageInfo` half this element reads — it never looks inside `child`. */
 interface SwitcherPage {
@@ -65,7 +66,7 @@ interface SwitcherButton {
     icon: HTMLElement;
 }
 
-export class GtkStackSwitcher extends HTMLElement {
+export class GtkStackSwitcher extends WidgetElement {
     private _stack: GtkStack | null = null;
     private _initialized = false;
     private _nodes: SwitcherButton[] = [];