@gjsify/example-gtk-adwaita-storybook 0.47.0 → 0.49.0

package/src/browser/buttons/menu-button.web.ts

@@ -16,7 +16,7 @@ export class MenuButtonWebStory extends StoryElement {
 
     initialize(): void {
         this._widget = document.createElement('gtk-menu-button');
-        this._widget.setAttribute('menu', JSON.stringify(MENU_BUTTON_ITEMS.map((label) => ({ label }))));
+        this._widget.setAttribute('menu-model', JSON.stringify(MENU_BUTTON_ITEMS.map((label) => ({ label }))));
         this._apply();
         this.addContent(this._widget);
     }

package/src/browser/buttons/split-button.web.ts

@@ -23,7 +23,7 @@ function iconBaseName(symbolic: string): string {
 /** Build an <adw-split-button> from the current story args. */
 function splitButton(args: StoryArgs, opts: { flat?: boolean } = {}): HTMLElement {
     const el = document.createElement('adw-split-button');
-    el.setAttribute('menu', MENU);
+    el.setAttribute('menu-model', MENU);
     el.setAttribute('label', args.label as string);
     const iconName = args.iconName as string;
     if (iconName) el.setAttribute('icon-name', iconBaseName(iconName));

package/src/browser/controls/drop-down.web.ts

@@ -16,7 +16,7 @@ export class DropDownWebStory extends StoryElement {
 
     initialize(): void {
         this._dropDown = document.createElement('gtk-drop-down');
-        this._dropDown.setAttribute('options', JSON.stringify(DROP_DOWN_OPTIONS));
+        this._dropDown.setAttribute('model', JSON.stringify(DROP_DOWN_OPTIONS));
         this._apply();
         this.addContent(this._dropDown);
     }

package/src/browser/feedback/preferences-dialog.web.ts

@@ -39,7 +39,7 @@ export class PreferencesDialogWebStory extends StoryElement {
         // Accent colour — a combo row over the same five options.
         const accent = document.createElement('adw-combo-row');
         accent.setAttribute('title', 'Accent colour');
-        accent.setAttribute('items', JSON.stringify(['Blue', 'Teal', 'Green', 'Orange', 'Purple']));
+        accent.setAttribute('model', JSON.stringify(['Blue', 'Teal', 'Green', 'Orange', 'Purple']));
         accent.setAttribute('selected', '0');
         group.append(accent);
 

package/src/browser/layout/wrap-box.web.ts

@@ -3,7 +3,7 @@
 import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
 import { wrapBoxMeta } from '../../layout/wrap-box.meta.js';
 
-const TAGS = ['Design', 'Adwaita', 'GNOME', 'GTK', 'Typescript', 'Storybook', 'Wrapping', 'Layout'];
+const TAGS = ['Design', 'Adwaita', 'GNOME', 'GTK', 'TypeScript', 'Storybook', 'Wrapping', 'Layout'];
 
 export class WrapBoxWebStory extends StoryElement {
     private _wrap: HTMLElement | null = null;

package/src/browser/overview/widgets.web.ts

@@ -58,8 +58,8 @@ export class OverviewWidgetsWebStory extends StoryElement {
             }),
             el('adw-combo-row', {
                 title: OVERVIEW_TEXT.accentColor,
-                // `items` is JSON, not a comma list — the element parses it.
-                items: JSON.stringify([...OVERVIEW_ACCENT_OPTIONS]),
+                // `model` is JSON, not a comma list — the element parses it.
+                model: JSON.stringify([...OVERVIEW_ACCENT_OPTIONS]),
                 selected: '0',
             }),
         );

package/src/browser/rows/combo-row.web.ts

@@ -16,7 +16,7 @@ export class ComboRowWebStory extends StoryElement {
 
     initialize(): void {
         this._row = document.createElement('adw-combo-row');
-        this._row.setAttribute('items', JSON.stringify([...COMBO_ROW_OPTIONS]));
+        this._row.setAttribute('model', JSON.stringify([...COMBO_ROW_OPTIONS]));
         this._syncRow();
 
         const group = document.createElement('adw-preferences-group');

package/src/browser/rows/preferences-group.web.ts

@@ -41,7 +41,7 @@ export class PreferencesGroupWebStory extends StoryElement {
 
         const regionRow = document.createElement('adw-combo-row');
         regionRow.setAttribute('title', 'Region');
-        regionRow.setAttribute('items', JSON.stringify(REGION_OPTIONS));
+        regionRow.setAttribute('model', JSON.stringify(REGION_OPTIONS));
         regionRow.setAttribute('selected', '0');
         this._group.append(regionRow);
 

package/src/browser/rows/spin-row.web.ts

@@ -16,8 +16,6 @@ export class SpinRowWebStory extends StoryElement {
 
     initialize(): void {
         this._row = document.createElement('adw-spin-row');
-        this._row.setAttribute('min', '0');
-        this._row.setAttribute('max', '100');
         this._syncRow();
 
         const group = document.createElement('adw-preferences-group');
@@ -37,9 +35,16 @@ export class SpinRowWebStory extends StoryElement {
     private _syncRow(): void {
         if (!this._row) return;
         this._row.setAttribute('title', this.args.title as string);
-        // Mirror Adw.SpinRow.digits via the step's decimal precision.
+        // The WHOLE adjustment every time, so the reflected attribute stays true to the
+        // state rather than naming the one field that last moved. It is the same value the
+        // GTK story hands `new Gtk.Adjustment` (ADR 0047), written the same way on all
+        // three renderers — except `digits`, which this element does not have and mirrors
+        // through the step's decimal precision instead.
         const digits = this.args.digits as number;
-        this._row.setAttribute('step', String(10 ** -digits));
+        this._row.setAttribute(
+            'adjustment',
+            JSON.stringify({ lower: 0, upper: 100, pageIncrement: 10, stepIncrement: 10 ** -digits }),
+        );
         this._row.setAttribute('value', String(this.args.value as number));
     }
 }

package/src/layout/wrap-box.story.ts

@@ -30,7 +30,7 @@ export class WrapBoxStory extends StoryWidget {
             widthRequest: 460,
         });
 
-        const tags = ['Design', 'Adwaita', 'GNOME', 'GTK', 'Typescript', 'Storybook', 'Wrapping', 'Layout'];
+        const tags = ['Design', 'Adwaita', 'GNOME', 'GTK', 'TypeScript', 'Storybook', 'Wrapping', 'Layout'];
         for (const tag of tags) {
             const chip = new Gtk.Button({ label: tag });
             chip.add_css_class('pill');