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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.64.2-next.254",
+    "version": "0.64.2",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -58,14 +58,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "0.64.2-next.254",
-        "@gjsify/adwaita-fonts": "0.64.2-next.254",
-        "@gjsify/adwaita-icons": "0.64.2-next.254",
-        "@gjsify/gtksource-core": "0.64.2-next.254",
+        "@gjsify/adwaita-core": "^0.64.2",
+        "@gjsify/adwaita-fonts": "^0.64.2",
+        "@gjsify/adwaita-icons": "^0.64.2",
+        "@gjsify/gtksource-core": "^0.64.2",
         "@lezer/highlight": "^1.2.3"
     },
     "peerDependencies": {
-        "@gjsify/app-settings": "0.64.2-next.254"
+        "@gjsify/app-settings": "^0.64.2"
     },
     "peerDependenciesMeta": {
         "@gjsify/app-settings": {
@@ -73,11 +73,11 @@
         }
     },
     "devDependencies": {
-        "@gjsify/app-settings": "0.64.2-next.254",
-        "@gjsify/blueprint": "0.64.2-next.254",
-        "@gjsify/cli": "0.64.2-next.254",
-        "@gjsify/unit": "0.64.2-next.254",
-        "@gjsify/vite-plugin-blueprint": "0.64.2-next.254",
+        "@gjsify/app-settings": "^0.64.2",
+        "@gjsify/blueprint": "^0.64.2",
+        "@gjsify/cli": "^0.64.2",
+        "@gjsify/unit": "^0.64.2",
+        "@gjsify/vite-plugin-blueprint": "^0.64.2",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
@@ -114,6 +114,5 @@
     "bugs": {
         "url": "https://github.com/gjsify/gjsify/issues"
     },
-    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme",
-    "gitHead": "6c88ac780b9742fce781e9b35aa2f45c125d8064"
+    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme"
 }

package/scss/_variables.scss

@@ -227,6 +227,68 @@
   @include light-theme;
 }
 
+// The named palette, outside the mixin because it does not follow the scheme:
+// libadwaita declares both blocks once on `:root` (`_palette.scss`, `_colors.scss`),
+// and an app's own stylesheet names them (`background-color: var(--accent-teal)`).
+// Values read from libadwaita 1.9's compiled `gtk.css`.
+:root {
+  --accent-blue: #3584e4;
+  --accent-teal: #2190a4;
+  --accent-green: #3a944a;
+  --accent-yellow: #c88800;
+  --accent-orange: #ed5b00;
+  --accent-red: #e62d42;
+  --accent-pink: #d56199;
+  --accent-purple: #9141ac;
+  --accent-slate: #6f8396;
+
+  --blue-1: #99c1f1;
+  --blue-2: #62a0ea;
+  --blue-3: #3584e4;
+  --blue-4: #1c71d8;
+  --blue-5: #1a5fb4;
+  --green-1: #8ff0a4;
+  --green-2: #57e389;
+  --green-3: #33d17a;
+  --green-4: #2ec27e;
+  --green-5: #26a269;
+  --yellow-1: #f9f06b;
+  --yellow-2: #f8e45c;
+  --yellow-3: #f6d32d;
+  --yellow-4: #f5c211;
+  --yellow-5: #e5a50a;
+  --orange-1: #ffbe6f;
+  --orange-2: #ffa348;
+  --orange-3: #ff7800;
+  --orange-4: #e66100;
+  --orange-5: #c64600;
+  --red-1: #f66151;
+  --red-2: #ed333b;
+  --red-3: #e01b24;
+  --red-4: #c01c28;
+  --red-5: #a51d2d;
+  --purple-1: #dc8add;
+  --purple-2: #c061cb;
+  --purple-3: #9141ac;
+  --purple-4: #813d9c;
+  --purple-5: #613583;
+  --brown-1: #cdab8f;
+  --brown-2: #b5835a;
+  --brown-3: #986a44;
+  --brown-4: #865e3c;
+  --brown-5: #63452c;
+  --light-1: #ffffff;
+  --light-2: #f6f5f4;
+  --light-3: #deddda;
+  --light-4: #c0bfbc;
+  --light-5: #9a9996;
+  --dark-1: #77767b;
+  --dark-2: #5e5c64;
+  --dark-3: #3d3846;
+  --dark-4: #241f31;
+  --dark-5: #000000;
+}
+
 // High contrast moves the three opacity tokens, and only those — every colour
 // that reads them follows without its own query (_colors.scss:325-329).
 @media (prefers-contrast: more) {

package/src/adw-accent.spec.ts

@@ -54,6 +54,20 @@ export const AdwAccentTest = async () => {
         }
     });
 
+    await describe('the named accent palette (`--accent-<name>` on :root)', async () => {
+        for (const vector of ACCENT_COLOR_VECTORS) {
+            await it(`--accent-${vector.name} is the accent's background, in both schemes`, async () => {
+                for (const scheme of ['theme-light', 'theme-dark']) {
+                    const host = document.createElement('div');
+                    host.className = scheme;
+                    document.body.append(host);
+                    expect(property(host, `--accent-${vector.name}`)).toBe(vector.background);
+                    host.remove();
+                }
+            });
+        }
+    });
+
     await describe('accent application', async () => {
         await it('reads the resolved scheme from the element rather than assuming light', async () => {
             const dark = document.createElement('div');

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

@@ -61,6 +61,7 @@ import {
     ADW_MENU_SURFACE_WEB,
     assertMenuRenderable,
     menuItemAt,
+    menuLabelText,
     menuRefusals,
     normalizeMenuModel,
     parseMenuModel,
@@ -260,7 +261,7 @@ export class GtkPopoverMenuBar extends WidgetElement {
         button.setAttribute('aria-expanded', 'false');
         const label = document.createElement('span');
         label.className = 'adw-popover-menu-bar-label';
-        label.textContent = node.label;
+        label.textContent = menuLabelText(node.label);
         button.appendChild(label);
 
         const popover = document.createElement('gtk-popover-menu') as GtkPopoverMenu;

package/src/elements/popover-menu.ts

@@ -46,7 +46,7 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_menus.scss:68-90 (separator, accelerator, check/radio)
 // Copyright (c) GNOME contributors (GTK, libadwaita). LGPLv2.1+.
 
-import { flattenMenu, menuNodeAt, resolveMenuItemState } from '@gjsify/adwaita-core';
+import { flattenMenu, menuLabelText, menuNodeAt, resolveMenuItemState } from '@gjsify/adwaita-core';
 import type { AdwMenuActions, AdwMenuItem, AdwMenuModel, AdwMenuPath } from '@gjsify/adwaita-core';
 
 import { createGtkImage } from './gtk-image.js';
@@ -301,7 +301,7 @@ export class PopoverMenuView {
         text.className = `${this.prefix}-item-label`;
         // The parent's own label names where Back goes; `Back` alone is the fallback for
         // a submenu that has none.
-        text.textContent = label.length > 0 ? label : BACK_LABEL;
+        text.textContent = label.length > 0 ? menuLabelText(label) : BACK_LABEL;
         button.appendChild(text);
         button.addEventListener('click', () => {
             this._page = this._page.slice(0, -1);
@@ -322,7 +322,7 @@ export class PopoverMenuView {
         }
         const text = document.createElement('span');
         text.className = `${this.prefix}-item-label`;
-        text.textContent = label;
+        text.textContent = menuLabelText(label);
         button.appendChild(text);
         button.appendChild(createGtkImage('go-next', 'adw-popover-item-arrow'));
         button.addEventListener('click', () => {
@@ -371,7 +371,7 @@ export class PopoverMenuView {
         // handing author markup to `innerHTML` would be an injection door in a renderer
         // that has no other one, so the text is shown verbatim and the flag is carried
         // for the GTK path. Stated rather than silently honoured.
-        label.textContent = item.label;
+        label.textContent = menuLabelText(item.label);
         button.appendChild(label);
 
         if (item.accel !== undefined && item.accel.length > 0) {

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

@@ -4,6 +4,7 @@
 // menus on HOVER — the one thing that distinguishes it from a row of menu buttons.
 
 import { describe, expect, it } from '@gjsify/unit';
+import { MENU_LABEL_TEXT_VECTORS } from '@gjsify/adwaita-core/conformance';
 import type { AdwMenuInput } from '@gjsify/adwaita-core';
 
 interface MenuBarElement extends HTMLElement {
@@ -293,4 +294,15 @@ export const GtkPopoverMenuBarTest = async () => {
             unmountAll();
         });
     });
+
+    await describe('<gtk-popover-menu-bar> the item text (a GtkLabel with use-underline)', async () => {
+        for (const { label, text, rule } of MENU_LABEL_TEXT_VECTORS) {
+            await it(rule, () => {
+                const el = mount();
+                el.menuModel = [{ label, submenu: [{ label: 'Inner' }] }];
+                expect(buttons(el).map((b) => b.textContent)).toStrictEqual([text]);
+                unmountAll();
+            });
+        }
+    });
 };

package/src/gtk-popover-menu.spec.ts

@@ -8,7 +8,7 @@
 // would be a third place to forget.
 
 import { describe, expect, it } from '@gjsify/unit';
-import { MENU_REFUSAL_VECTORS } from '@gjsify/adwaita-core/conformance';
+import { MENU_LABEL_TEXT_VECTORS, MENU_REFUSAL_VECTORS } from '@gjsify/adwaita-core/conformance';
 import { flattenMenu } from '@gjsify/adwaita-core';
 import type { AdwMenuInput, AdwMenuModel } from '@gjsify/adwaita-core';
 
@@ -258,4 +258,17 @@ export const GtkPopoverMenuTest = async () => {
             }
         });
     });
+
+    await describe('<gtk-popover-menu> the row text (a GtkLabel with use-underline)', async () => {
+        for (const { label, text, rule } of MENU_LABEL_TEXT_VECTORS) {
+            await it(`item, submenu and back row: ${rule}`, () => {
+                const el = mount();
+                el.menuModel = [{ label }, { label, submenu: [{ label }] }];
+                expect(labels(el)).toStrictEqual([text, text]);
+                el.openSubmenu(label);
+                expect(labels(el)).toStrictEqual([text, text]);
+                unmountAll();
+            });
+        }
+    });
 };