@gjsify/adwaita-web 0.31.0 → 0.32.0

package/src/elements/adw-sidebar.ts

@@ -6,40 +6,86 @@
 // `navigation-sidebar`); in `page` mode it renders as boxed lists with a
 // chevron arrow on each row (the AdwPreferencesPage look the native widget
 // switches to when collapsed).
+//
+// The BEHAVIOUR — the flat index space, the out-of-range rule, which section
+// headers render, the selection-vs-activation split, the filter and the empty
+// state — is HEADLESS and lives in `@gjsify/adwaita-core` (ADR 0004) as
+// {@link SidebarState}; this element only builds DOM for it and re-emits its
+// changes as events. It used to carry its own copy, which clamped an
+// out-of-range `selected` to the LAST row where libadwaita drops the selection
+// entirely, keyed section headers off the DECLARATION index instead of the rows
+// that actually render, and froze the row list after the first connect. The
+// shared vectors in `@gjsify/adwaita-core/conformance` now pin this element to
+// the C source — see `src/adw-sidebar.spec.ts`.
+//
 // Sub-elements (declared as children, consumed at connect time — mirrors
 // adw-tab-page in adw-tab-view):
 //   <adw-sidebar-section title="…"> — a titled group of items. An untitled
 //     section renders a separator before its rows (first section: nothing),
 //     mirroring AdwSidebar's stack header (title vs separator child).
-//   <adw-sidebar-item title="…" subtitle="…" icon-name="…"> — one row.
+//   <adw-sidebar-item title="…" subtitle="…" icon-name="…" disabled hidden> —
+//     one row. `disabled` is AdwSidebarItem:enabled=false (bound to the row's
+//     `sensitive`), `hidden` is AdwSidebarItem:visible=false.
 // Attributes (on <adw-sidebar>):
 //   mode (sidebar | page, default sidebar) — mirrors Adw.Sidebar:mode.
-//   selected (zero-based flat item index, default 0; -1 = no selection,
+//   selected (zero-based flat item index; anything that is not a valid position
+//     — out of range, negative, fractional, unparseable — means NO selection,
 //     mirroring Gtk.INVALID_LIST_POSITION) — mirrors Adw.Sidebar:selected.
+// Properties: `sections` (the spec list), `filter` (Adw.Sidebar:filter).
 // Events:
-//   `notify::selected` (CustomEvent, bubbles, `detail = { selected }`) when the
-//     selected index changes — mirrors the Adw.Sidebar:selected property.
-//   `activated` (CustomEvent, bubbles, `detail = { index }`) when an item is
-//     activated (clicked) — mirrors the Adw.Sidebar::activated signal.
+//   `notify::selected` (CustomEvent, bubbles,
+//     `detail = { selected, previous, interactive }`) on EVERY selection change,
+//     programmatic ones included — mirrors g_object_notify_by_pspec (PROP_SELECTED).
+//   `activated` (CustomEvent, bubbles, `detail = { index }`) on every click of a
+//     row, including a re-click of the selected one — mirrors AdwSidebar::activated,
+//     the documented way to reveal a split view's content pane.
 // Reference: refs/libadwaita/src/adw-sidebar.c (AdwSidebar behaviour)
 // Reference: refs/libadwaita/src/adw-sidebar-item.h (AdwSidebarItem properties)
 // Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss (.navigation-sidebar, sidebar)
 // Copyright (c) 2025 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
-// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
-
-/** Index meaning "no selection" — the web mirror of Gtk.INVALID_LIST_POSITION. */
-const NO_SELECTION = -1;
-
-/** GTK symbolic name (e.g. "folder-symbolic") → adwaita-web icon class. */
-function iconClass(gtkName: string): string {
-    const name = gtkName.replace(/-symbolic$/, '');
-    return name ? `adw-icon adw-icon--${name}` : 'adw-icon';
-}
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
+// icon nodes are <adw-icon>.
+
+import {
+    ADW_SIDEBAR_NO_SELECTION,
+    SidebarState,
+    type AdwSidebarItemSpec,
+    type AdwSidebarSectionSpec,
+    type SidebarFlatItem,
+    type SidebarHeaderSpec,
+    type SidebarItemFilter,
+    type SidebarSelectionChange,
+} from '@gjsify/adwaita-core';
+
+import { createAdwIcon } from './adw-icon.js';
+
+// The sidebar consumes its declared children and drops them from the tree, so a
+// later `setAttribute` on one cannot find its sidebar with `closest()`. These
+// keep the link — the web stand-in for the `g_object_bind_property` /
+// `notify::icon-name` bindings that keep a live AdwSidebarItem's labels in sync
+// (adw-sidebar.c:1393-1421). Before this, `observedAttributes` was declared on
+// both child elements and no `attributeChangedCallback` existed to answer it.
+const itemBindings = new WeakMap<AdwSidebarItem, { sidebar: AdwSidebar; spec: AdwSidebarItemSpec }>();
+const sectionBindings = new WeakMap<AdwSidebarSection, { sidebar: AdwSidebar; spec: AdwSidebarSectionSpec }>();
 
 /** A single sidebar item. Child of <adw-sidebar-section>; consumed at connect time. */
 export class AdwSidebarItem extends HTMLElement {
     static get observedAttributes() {
-        return ['title', 'subtitle', 'icon-name'];
+        return ['title', 'subtitle', 'icon-name', 'disabled', 'hidden'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+        const binding = itemBindings.get(this);
+        if (!binding) return;
+
+        const value = newValue ?? '';
+        if (name === 'title') binding.spec.title = value;
+        else if (name === 'subtitle') binding.spec.subtitle = value;
+        else if (name === 'icon-name') binding.spec.iconName = value;
+        else if (name === 'disabled') binding.spec.enabled = newValue === null;
+        else if (name === 'hidden') binding.spec.visible = newValue === null;
+
+        binding.sidebar.refresh();
     }
 }
 
@@ -48,14 +94,23 @@ export class AdwSidebarSection extends HTMLElement {
     static get observedAttributes() {
         return ['title'];
     }
+
+    attributeChangedCallback(_name: string, _oldValue: string | null, newValue: string | null) {
+        const binding = sectionBindings.get(this);
+        if (!binding) return;
+
+        binding.spec.title = newValue ?? '';
+        binding.sidebar.refresh();
+    }
 }
 
 export class AdwSidebar extends HTMLElement {
+    private readonly _state = new SidebarState();
     private _listEl!: HTMLDivElement;
-    private _rows: HTMLButtonElement[] = [];
-    private _selected = 0;
-    private _mode: 'sidebar' | 'page' = 'sidebar';
+    private _rows: { el: HTMLButtonElement; index: number }[] = [];
     private _initialized = false;
+    /** Guards the `selected` attribute write we make ourselves from re-entering. */
+    private _reflecting = false;
 
     static get observedAttributes() {
         return ['mode', 'selected'];
@@ -63,172 +118,276 @@ export class AdwSidebar extends HTMLElement {
 
     /** Zero-based flat index of the selected item, or -1 for no selection. */
     get selected(): number {
-        return this._selected;
+        return this._state.selected;
     }
 
     set selected(value: number) {
         this.setAttribute('selected', String(value));
     }
 
+    /** The selected item's spec, or undefined — Adw.Sidebar:selected-item. */
+    get selectedItem(): AdwSidebarItemSpec | undefined {
+        return this._state.selectedItem;
+    }
+
     /** 'sidebar' (flat navigation list) or 'page' (boxed lists). */
     get mode(): 'sidebar' | 'page' {
-        return this._mode;
+        return this._state.mode;
     }
 
     set mode(value: 'sidebar' | 'page') {
         this.setAttribute('mode', value);
     }
 
+    /** The section/item model. Assigning replaces it, the way adw_sidebar_remove_all + append would. */
+    get sections(): readonly AdwSidebarSectionSpec[] {
+        return this._state.sections;
+    }
+
+    set sections(value: readonly AdwSidebarSectionSpec[]) {
+        this._state.setSections(value);
+        this._rebuild();
+    }
+
+    /** Adw.Sidebar:filter — decides which rows render, never the selection index space. */
+    get filter(): SidebarItemFilter | null {
+        return this._state.filter;
+    }
+
+    set filter(value: SidebarItemFilter | null) {
+        this._state.setFilter(value);
+        this._rebuild();
+    }
+
     connectedCallback() {
         if (this._initialized) return;
         this._initialized = true;
 
-        // Snapshot the declared <adw-sidebar-section> children before we take
-        // over the subtree — their title + <adw-sidebar-item> descendants become
-        // the rendered sections and rows.
-        const sections = Array.from(this.querySelectorAll('adw-sidebar-section')) as AdwSidebarSection[];
-
         this._listEl = document.createElement('div');
         this._listEl.className = 'adw-sidebar-list';
         this._listEl.setAttribute('role', 'listbox');
 
-        this._rows = [];
-
-        sections.forEach((section, sectionIndex) => {
-            const title = section.getAttribute('title') ?? '';
-            const items = Array.from(section.querySelectorAll('adw-sidebar-item')) as AdwSidebarItem[];
-
-            // The section header — a heading when titled, an empty separator
-            // otherwise (mirrors AdwSidebar's header stack: "title" vs
-            // "separator" child). The very first section never draws a leading
-            // separator (matches the `.header.first` rule).
-            const header = document.createElement('div');
-            header.className = 'adw-sidebar-section-header';
-            if (title) {
-                header.classList.add('has-title');
-                const heading = document.createElement('span');
-                heading.className = 'adw-sidebar-section-heading';
-                heading.textContent = title;
-                header.appendChild(heading);
-                if (sectionIndex === 0) header.classList.add('first');
-            } else {
-                header.classList.add('separator');
-                if (sectionIndex === 0) header.hidden = true;
-            }
-            this._listEl.appendChild(header);
-
-            const sectionEl = document.createElement('div');
-            sectionEl.className = 'adw-sidebar-section';
+        // Seed the model BEFORE subscribing: connecting is not a change anyone
+        // asked to hear about, and `setSections` runs the 0 → n auto-select.
+        this._state.setSections(this._readDeclaredSections());
+        this._state.setMode(this._readModeAttr());
+        // A declared `selected` wins over that auto-select. libadwaita would let
+        // the auto-select clobber a builder-set property (items arrive after
+        // properties, and items_changed_cb then selects 0); for a declarative
+        // element the authored attribute has to survive its own children.
+        if (this.hasAttribute('selected')) this._state.setSelected(this._readSelectedAttr());
 
-            items.forEach((item) => {
-                const flatIndex = this._rows.length;
-                const itemTitle = item.getAttribute('title') ?? '';
-                const subtitle = item.getAttribute('subtitle') ?? '';
-                const icon = item.getAttribute('icon-name') ?? '';
-
-                const row = document.createElement('button');
-                row.type = 'button';
-                row.className = 'adw-sidebar-item';
-                row.setAttribute('role', 'option');
-
-                const iconEl = document.createElement('span');
-                iconEl.className = `${iconClass(icon)} adw-sidebar-item-icon`;
-                iconEl.setAttribute('aria-hidden', 'true'); // decorative (mask-image only)
-                iconEl.hidden = icon.length === 0;
-                row.appendChild(iconEl);
-
-                const textEl = document.createElement('span');
-                textEl.className = 'adw-sidebar-item-text';
-
-                const titleEl = document.createElement('span');
-                titleEl.className = 'adw-sidebar-item-title';
-                titleEl.textContent = itemTitle;
-                titleEl.hidden = itemTitle.length === 0;
-                textEl.appendChild(titleEl);
-
-                const subtitleEl = document.createElement('span');
-                subtitleEl.className = 'adw-sidebar-item-subtitle';
-                subtitleEl.textContent = subtitle;
-                subtitleEl.hidden = subtitle.length === 0;
-                textEl.appendChild(subtitleEl);
-
-                row.appendChild(textEl);
-
-                // Page mode adds a trailing chevron on every row, the way the
-                // boxed-list AdwActionRow carries a `go-next-symbolic` arrow.
-                const arrowEl = document.createElement('span');
-                arrowEl.className = 'adw-icon adw-icon--go-next adw-sidebar-item-arrow';
-                arrowEl.setAttribute('aria-hidden', 'true');
-                row.appendChild(arrowEl);
-
-                row.addEventListener('click', () => this._activateIndex(flatIndex));
-                sectionEl.appendChild(row);
-                this._rows.push(row);
-            });
-
-            this._listEl.appendChild(sectionEl);
-        });
+        this._state.subscribe((change) => this._onSelectionChanged(change));
 
         this.replaceChildren(this._listEl);
-
-        this._mode = this._readModeAttr();
-        this._selected = this._readSelectedAttr();
-        this._render();
+        this._applyMode();
+        this._rebuild();
+        this._reflectSelected();
     }
 
     attributeChangedCallback(name: string) {
-        if (!this._initialized) return;
+        if (!this._initialized || this._reflecting) return;
+
         if (name === 'selected') {
-            const next = this._readSelectedAttr();
-            if (next !== this._selected) {
-                this._selected = next;
-                this._render();
-            }
+            this._state.setSelected(this._readSelectedAttr());
+            // Normalise even when nothing moved, so `selected="5"` on a 3-item
+            // sidebar does not keep claiming 5 while the property reads -1.
+            this._reflectSelected();
             return;
         }
-        if (name === 'mode') {
-            const next = this._readModeAttr();
-            if (next !== this._mode) {
-                this._mode = next;
-                this._render();
+        if (name === 'mode' && this._state.setMode(this._readModeAttr())) {
+            this._applyMode();
+            this._applySelection();
+        }
+    }
+
+    /**
+     * Re-derive after a declared `<adw-sidebar-item>` / `<adw-sidebar-section>`
+     * attribute changed. The item model keeps its shape, so the selection cannot
+     * move — exactly like the GObject property bindings this stands in for.
+     */
+    refresh(): void {
+        if (!this._initialized) return;
+        this._state.refresh();
+        this._rebuild();
+    }
+
+    /** Snapshot the declared children into specs, and bind them for live updates. */
+    private _readDeclaredSections(): AdwSidebarSectionSpec[] {
+        const sections: AdwSidebarSectionSpec[] = [];
+
+        for (const sectionEl of Array.from(this.querySelectorAll('adw-sidebar-section')) as AdwSidebarSection[]) {
+            const items: AdwSidebarItemSpec[] = [];
+
+            for (const itemEl of Array.from(sectionEl.querySelectorAll('adw-sidebar-item')) as AdwSidebarItem[]) {
+                const item: AdwSidebarItemSpec = {
+                    title: itemEl.getAttribute('title') ?? '',
+                    subtitle: itemEl.getAttribute('subtitle') ?? '',
+                    iconName: itemEl.getAttribute('icon-name') ?? '',
+                    enabled: !itemEl.hasAttribute('disabled'),
+                    visible: !itemEl.hasAttribute('hidden'),
+                };
+                itemBindings.set(itemEl, { sidebar: this, spec: item });
+                items.push(item);
             }
+
+            const section: AdwSidebarSectionSpec = { title: sectionEl.getAttribute('title') ?? '', items };
+            sectionBindings.set(sectionEl, { sidebar: this, spec: section });
+            sections.push(section);
         }
+
+        return sections;
     }
 
     private _readModeAttr(): 'sidebar' | 'page' {
         return this.getAttribute('mode') === 'page' ? 'page' : 'sidebar';
     }
 
+    /**
+     * `parseFloat`, not `parseInt`: the core rejects a fractional position, and
+     * truncating `"1.5"` to row 1 here would hide that from it. An unparseable
+     * value is NaN, which the core turns into "no selection".
+     */
     private _readSelectedAttr(): number {
-        const raw = Number.parseInt(this.getAttribute('selected') ?? '0', 10);
-        if (Number.isNaN(raw)) return 0;
-        if (raw < 0) return NO_SELECTION;
-        const max = Math.max(0, this._rows.length - 1);
-        return Math.min(raw, max);
-    }
-
-    /** Click handler — selects the row (if changed) and always emits `activated`. */
-    private _activateIndex(index: number): void {
-        if (index !== this._selected) {
-            this._selected = index;
-            // Keep the attribute in sync without re-entering via the guarded
-            // attributeChangedCallback (value already matches, so it no-ops).
-            this.setAttribute('selected', String(index));
-            this._render();
-            this.dispatchEvent(new CustomEvent('notify::selected', { bubbles: true, detail: { selected: index } }));
-        }
+        return Number.parseFloat(this.getAttribute('selected') ?? '');
+    }
+
+    private _reflectSelected(): void {
+        this._reflecting = true;
+        this.setAttribute('selected', String(this._state.selected));
+        this._reflecting = false;
+    }
+
+    private _onSelectionChanged(change: SidebarSelectionChange): void {
+        this._reflectSelected();
+        this._applySelection();
+        this.dispatchEvent(
+            new CustomEvent('notify::selected', {
+                bubbles: true,
+                detail: { selected: change.selected, previous: change.previous, interactive: change.interactive },
+            }),
+        );
+    }
+
+    /** Click handler — the core applies the selection, then `activated` fires. */
+    private _activate(index: number): void {
+        if (!this._state.activate(index).activated) return;
         this.dispatchEvent(new CustomEvent('activated', { bubbles: true, detail: { index } }));
     }
 
-    private _render(): void {
-        this.classList.toggle('page', this._mode === 'page');
-        this.classList.toggle('mode-sidebar', this._mode === 'sidebar');
+    /** Rebuild the rendered rows + headers from the core's derived model. */
+    private _rebuild(): void {
+        const headers = new Map<number, SidebarHeaderSpec>();
+        for (const header of this._state.headers) headers.set(header.sectionIndex, header);
+
+        // Consecutive rendered rows of one section share a header and a container.
+        const groups: { sectionIndex: number; items: SidebarFlatItem[] }[] = [];
+        for (const flat of this._state.visibleItems) {
+            const last = groups[groups.length - 1];
+            if (last && last.sectionIndex === flat.sectionIndex) last.items.push(flat);
+            else groups.push({ sectionIndex: flat.sectionIndex, items: [flat] });
+        }
+
+        this._rows = [];
+        const children: HTMLElement[] = [];
+
+        for (const group of groups) {
+            const header = headers.get(group.sectionIndex);
+            if (header) children.push(this._createHeader(header));
+
+            const sectionEl = document.createElement('div');
+            sectionEl.className = 'adw-sidebar-section';
+            for (const flat of group.items) {
+                const row = this._createRow(flat);
+                sectionEl.appendChild(row);
+                this._rows.push({ el: row, index: flat.index });
+            }
+            children.push(sectionEl);
+        }
+
+        this._listEl.replaceChildren(...children);
+        this.classList.toggle('empty', this._state.isEmpty);
+        this._applySelection();
+    }
+
+    private _createHeader(header: SidebarHeaderSpec): HTMLDivElement {
+        const el = document.createElement('div');
+        el.className = 'adw-sidebar-section-header';
+
+        if (header.kind === 'title') {
+            el.classList.add('has-title');
+            const heading = document.createElement('span');
+            heading.className = 'adw-sidebar-section-heading';
+            heading.textContent = header.title;
+            el.appendChild(heading);
+        } else {
+            el.classList.add('separator');
+        }
+        if (header.first) el.classList.add('first');
+
+        return el;
+    }
+
+    private _createRow(flat: SidebarFlatItem): HTMLButtonElement {
+        const item = flat.item;
+
+        const row = document.createElement('button');
+        row.type = 'button';
+        row.className = 'adw-sidebar-item';
+        row.setAttribute('role', 'option');
+        // `visible` / `enabled` are bound to the row's `visible` / `sensitive`
+        // in create_row (adw-sidebar.c:1382-1383): the row still EXISTS and still
+        // owns its flat index, it just does not show or respond.
+        row.hidden = item.visible === false;
+        row.disabled = item.enabled === false;
+
+        const iconEl = createAdwIcon(item.iconName ?? null, 'adw-sidebar-item-icon');
+        iconEl.hidden = !flat.iconVisible;
+        row.appendChild(iconEl);
+
+        const textEl = document.createElement('span');
+        textEl.className = 'adw-sidebar-item-text';
+
+        const titleEl = document.createElement('span');
+        titleEl.className = 'adw-sidebar-item-title';
+        titleEl.textContent = item.title;
+        titleEl.hidden = !flat.titleVisible;
+        textEl.appendChild(titleEl);
+
+        const subtitleEl = document.createElement('span');
+        subtitleEl.className = 'adw-sidebar-item-subtitle';
+        subtitleEl.textContent = item.subtitle ?? '';
+        subtitleEl.hidden = !flat.subtitleVisible;
+        textEl.appendChild(subtitleEl);
+
+        row.appendChild(textEl);
+
+        // Page mode adds a trailing chevron on every row, the way the
+        // boxed-list AdwActionRow carries a `go-next-symbolic` arrow.
+        row.appendChild(createAdwIcon('go-next', 'adw-sidebar-item-arrow'));
+
+        row.addEventListener('click', () => this._activate(flat.index));
+
+        return row;
+    }
+
+    private _applyMode(): void {
+        const page = this._state.mode === 'page';
+        this.classList.toggle('page', page);
+        this.classList.toggle('mode-sidebar', !page);
+    }
 
-        this._rows.forEach((row, index) => {
-            const isSelected = index === this._selected;
-            row.classList.toggle('selected', isSelected);
-            row.setAttribute('aria-selected', String(isSelected));
-            row.tabIndex = isSelected || (this._selected === NO_SELECTION && index === 0) ? 0 : -1;
+    private _applySelection(): void {
+        const selected = this._state.selected;
+        // Page mode tracks the selection but never paints it (adw-sidebar.c:2948-2951):
+        // its rows are plain boxed-list AdwActionRows with no selected state.
+        const paint = this._state.selectionVisible;
+
+        this._rows.forEach((row, position) => {
+            const isSelected = row.index === selected;
+            row.el.classList.toggle('selected', isSelected && paint);
+            row.el.setAttribute('aria-selected', String(isSelected));
+            row.el.tabIndex = isSelected || (selected === ADW_SIDEBAR_NO_SELECTION && position === 0) ? 0 : -1;
         });
     }
 }

package/src/elements/adw-spin-row.ts

@@ -17,7 +17,7 @@
 //   title/subtitle text column added to match Adw.SpinRow; the adjustment state
 //   machine composed from @gjsify/adwaita-core.
 
-import { SpinState } from '@gjsify/adwaita-core';
+import { SpinState, deriveRowLabels } from '@gjsify/adwaita-core';
 
 export class AdwSpinRow extends HTMLElement {
     private _input!: HTMLInputElement;
@@ -123,10 +123,16 @@ export class AdwSpinRow extends HTMLElement {
     }
 
     private _renderText() {
-        this._titleEl.textContent = this.getAttribute('title') ?? '';
-        const subtitle = this.getAttribute('subtitle') ?? '';
-        this._subtitleEl.textContent = subtitle;
-        this._subtitleEl.hidden = subtitle.length === 0;
+        // The `string_is_not_empty` label rule, from core — this block was one of
+        // six hand-rolled copies, all of which omitted the TITLE half.
+        const labels = deriveRowLabels({
+            title: this.getAttribute('title'),
+            subtitle: this.getAttribute('subtitle'),
+        });
+        this._titleEl.textContent = labels.title;
+        this._titleEl.hidden = !labels.titleVisible;
+        this._subtitleEl.textContent = labels.subtitle;
+        this._subtitleEl.hidden = !labels.subtitleVisible;
     }
 
     /** A stepper press — the interactive path, so it emits `notify::value`. */

package/src/elements/adw-spinner.ts

@@ -1,10 +1,22 @@
 // <adw-spinner> — A continuously-spinning loading indicator.
-// Attributes: size (px, default 24).
+// Attributes: size (px; the measured minimum, 16, when absent or unusable).
+//
+// The ring geometry is `Adw.Spinner`'s, not a guess: the diameter and the stroke
+// come from `@gjsify/adwaita-core`'s `spinnerGeometry`, which is
+// `AdwSpinnerPaintable`'s `radius = min(floor(min(w, h) / 2), 32)` with
+// `lineWidth = diameter / 8`. This element used to default to 24px and stroke
+// `max(2, round(size / 12))`, which draws 2px where Adwaita draws 3px at 24, 4px
+// against 6px at 48 and 5px against 8px at 64 — the ring was visibly thinner than
+// GTK's at every size above the minimum.
+//
+// Reference: refs/libadwaita/src/adw-spinner.c (MIN_SIZE, adw_spinner_measure)
+// Reference: refs/libadwaita/src/adw-spinner-paintable.c (MAX_RADIUS, calculate_line_width)
 // Reference: refs/adwaita-web/adwaita-web/scss/_spinner.scss
-// Reference: refs/libadwaita (Adw.Spinner)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
+import { resolveSpinnerSize, spinnerGeometry } from '@gjsify/adwaita-core';
+
 export class AdwSpinner extends HTMLElement {
     static get observedAttributes() {
         return ['size'];
@@ -19,12 +31,15 @@ export class AdwSpinner extends HTMLElement {
     }
 
     private _sync() {
-        const size = parseFloat(this.getAttribute('size') || '24');
-        this.style.width = `${size}px`;
-        this.style.height = `${size}px`;
-        // Scale the ring thickness with the diameter (libadwaita's arc thickens
-        // with size); clamp so tiny spinners stay visible.
-        this.style.borderWidth = `${Math.max(2, Math.round(size / 12))}px`;
+        // The element IS the ring, so it takes the DRAWN diameter rather than the
+        // requested box: a request below 16 is not representable (GTK never
+        // allocates below a widget's minimum) and one above 64 draws a 64px ring,
+        // which is Adwaita's documented "never larger than 64×64".
+        const size = resolveSpinnerSize(this.getAttribute('size'));
+        const { diameter, lineWidth } = spinnerGeometry(size, size);
+        this.style.width = `${diameter}px`;
+        this.style.height = `${diameter}px`;
+        this.style.borderWidth = `${lineWidth}px`;
     }
 }