@gjsify/adwaita-nativescript 0.48.0 → 0.50.0

package/lib/types/widgets/style-classes.d.ts

@@ -0,0 +1,61 @@
+/**
+ * What a `styleClasses` write means here.
+ *
+ * THE DOOR TAKES A STRING AND THE READ-BACK IS A LIST, which is the DOM's own
+ * `className`/`classList` split and not a compromise: the two places that WRITE this are a
+ * NativeScript XML attribute and `View.className`, and both are strings, while
+ * `GtkWidget:css-classes` holds a list and so does the getter. An array-taking door would
+ * need a fourth attribute kind in `check-generated-website-data` — it has `number`,
+ * `boolean` and `json`, and `json` there means "parses to a plain OBJECT", so not even
+ * `'["pill"]'` reaches it — and inventing one to offer a second spelling of a door that
+ * already works is the "second way to say what the table can already say" that gate's own
+ * header refuses.
+ *
+ * NO ARRAY ARM. It had one, "because the widget's internals rebuild the list through it";
+ * the internals are the two setters and both are typed `string | null | undefined`, so the
+ * arm was unreachable and its `String(name)` coercion guarded nothing.
+ */
+export type AdwStyleClassesInput = string | null | undefined;
+/**
+ * The class list a `styleClasses` write means: split on whitespace, trimmed,
+ * de-duplicated, order preserved.
+ *
+ * A STRING IS THE XML DOOR. NativeScript's `setPropertyValue` ends in `instance[name] =
+ * value`, so `<gtk:Button styleClasses="pill suggested-action">` hands the setter that
+ * whole string — the same fact `xmlNumber`/`xmlBoolean` exist for, one type over.
+ */
+export declare function normalizeStyleClasses(value: AdwStyleClassesInput): string[];
+/**
+ * `className` for a widget whose own class is `base` and which carries `classes`.
+ *
+ * AN EMPTY `base` IS A WIDGET WITH NO CLASS OF ITS OWN, and two of them ship: `Gtk.Box`
+ * and `Gtk.Label` are transparent — there is no Adwaita fill, radius or typography to give
+ * a box or a bare label, so they carry only what a caller puts on them. The empties are
+ * filtered rather than joined, because `` `${''} ${'title-1'}` `` is a leading space and
+ * NativeScript's `className` splitter turns that into an empty class name.
+ */
+export declare function classNameWith(base: string, classes: readonly string[]): string;
+/**
+ * The list after `gtk_widget_add_css_class(name)` — GTK's own method, and the door a GJS
+ * snippet reaches for.
+ *
+ * WHY THE METHODS EXIST BESIDE THE `styleClasses` PROPERTY. A NativeScript XML attribute
+ * can only carry a string, which is what `styleClasses` is for; a TypeScript caller ported
+ * off GJS writes `button.add_css_class('pill')`, and that line is in every Adwaita snippet
+ * that gives a button a look. The two doors hold the SAME list, so a widget that offers
+ * both cannot have them disagree — which is why the mutation is a pure function over the
+ * list rather than a second `className` rewrite per method.
+ *
+ * ADDS AT THE END, AND ONLY IF ABSENT. `gtk_widget_add_css_class` is a no-op for a class
+ * the widget already has (the quark is already in the list), so a second add does not move
+ * it — measured under gjs 1.88.1: `add_css_class('a'); add_css_class('b');
+ * add_css_class('a')` reads back two classes.
+ *
+ * ONE NAME, TRIMMED. GTK takes a single class name and would happily intern `'a b'` as one
+ * unmatchable class; here the string door already means "a whitespace-separated list", so a
+ * name with whitespace in it is the caller confusing the two doors. It is trimmed, and an
+ * empty name is dropped rather than added as a class nothing can be.
+ */
+export declare function withCssClass(classes: readonly string[], name: string): string[];
+/** The list after `gtk_widget_remove_css_class(name)`. Absent is a no-op, as in C. */
+export declare function withoutCssClass(classes: readonly string[], name: string): string[];

package/lib/types/widgets/view-switcher-base.d.ts

@@ -11,11 +11,22 @@ export declare const NOTIFY_SELECTED = "notify::selected";
  */
 export interface NotifyViewSelectedEventData extends EventData, ViewSwitcherNotifyPayload {
 }
+declare const AdwViewSwitcherBase_base: (abstract new (...args: any[]) => {
+    connect(eventName: string, callback: (self: /*elided*/ any, data: EventData) => void): number;
+    disconnect(handlerId: number): void;
+    _emit(eventName: string): void;
+    addEventListener(eventName: string, callback: (data: EventData) => void, thisArg?: unknown, once?: boolean): void;
+    removeEventListener(eventName: string, callback?: (data: EventData) => void, thisArg?: unknown): void;
+    notify<T extends EventData>(data: T): void;
+    notifyPropertyChange(name: string, value: unknown, oldValue?: unknown): void;
+    set(name: string, value: unknown): void;
+    get(name: string): unknown;
+}) & typeof GridLayout;
 /**
  * Shared base: a switcher bar (row 0) + a content area (row 1), one page visible.
  * Subclasses set the bar/button CSS classes for their look.
  */
-export declare abstract class AdwViewSwitcherBase extends GridLayout {
+export declare abstract class AdwViewSwitcherBase extends AdwViewSwitcherBase_base {
     /** The horizontal switcher bar holding the buttons. */
     protected readonly _bar: GridLayout;
     /** `Adw.ViewSwitcher:policy`, default NARROW as in C. */

package/lib/types/widgets/view-switcher-model.d.ts

@@ -10,7 +10,7 @@ import type { AdwViewSwitcherPageInit, ViewSwitcherStateChange } from '@gjsify/a
  *
  * `icon` is an Adwaita symbolic SVG DOCUMENT here, not a GTK icon name: `GtkImage`
  * rasterises the path data natively. The core treats the field as an opaque
- * handle and only ever interprets "absent or empty"; {@link nsIconSvg} resolves
+ * handle and only ever interprets "absent or empty"; `icon-theme.ts` resolves
  * the fallback sentinel it hands back.
  */
 export interface AdwViewPage {
@@ -18,7 +18,7 @@ export interface AdwViewPage {
     title?: string;
     /** The page content view, shown when this page is selected. */
     content: View;
-    /** Adwaita symbolic SVG shown on the switcher button; absent means none. */
+    /** The icon shown on the switcher button — a NAME or SVG source; absent means none. */
     icon?: string;
     /** Stable id used by `visible-child-name`; defaults to the page's position. */
     name?: string;
@@ -47,15 +47,6 @@ export declare function createViewSwitcherBarState(): ViewSwitcherBarState;
 export declare function viewSwitcherPageSpec(page: AdwViewPage, index: number): AdwViewSwitcherPageInit;
 /** {@link viewSwitcherPageSpec} over a whole page list. */
 export declare function viewSwitcherPageSpecs(pages: readonly AdwViewPage[]): AdwViewSwitcherPageInit[];
-/**
- * Resolve the core's icon slot to something `GtkImage` can rasterise.
- *
- * The core substitutes the NAME `image-missing` for an absent icon. On the browser
- * side that name becomes a CSS mask class; here it has to become the actual
- * symbolic document, so the sentinel is swapped for the vendored
- * `image-missing-symbolic` SVG. Anything else is already an SVG and passes through.
- */
-export declare function nsIconSvg(iconName: string): string;
 /**
  * The `visibility` each page's content view must carry for the current
  * selection, in page order. Exactly one entry is `'visible'` — none when nothing

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-nativescript",
-    "version": "0.48.0",
+    "version": "0.50.0",
     "description": "Native Adwaita widgets for the NativeScript runtime — real NativeScript components (StackLayout/GridLayout/Switch/Label) styled like Libadwaita, not a webview",
     "type": "module",
     "module": "lib/esm/index.js",
@@ -51,10 +51,10 @@
         "design-system"
     ],
     "dependencies": {
-        "@gjsify/adwaita-core": "^0.48.0",
-        "@gjsify/adwaita-fonts": "^0.48.0",
-        "@gjsify/adwaita-icons": "^0.48.0",
-        "@gjsify/native-platform": "^0.48.0"
+        "@gjsify/adwaita-core": "^0.50.0",
+        "@gjsify/adwaita-fonts": "^0.50.0",
+        "@gjsify/adwaita-icons": "^0.50.0",
+        "@gjsify/native-platform": "^0.50.0"
     },
     "peerDependencies": {
         "@nativescript/core": "*"
@@ -65,8 +65,8 @@
         }
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.48.0",
-        "@gjsify/unit": "^0.48.0",
+        "@gjsify/cli": "^0.50.0",
+        "@gjsify/unit": "^0.50.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },

package/src/theme/adwaita.css

@@ -499,6 +499,49 @@ Page.adw-window {
     padding: 10 32 10 32;
 }
 
+/* `%circular_button` — the explicit exception to the 9px rounded square: a full
+ * circle at 34×34 with no padding (_buttons.scss:312-317). It is the shape an
+ * icon-only button takes, which is why the rule arrives with the icon: while
+ * `Gtk.Button` was the platform's text-only `Button` the variant "had no counterpart
+ * at all", and a class with no rule would have drawn a rounded rectangle instead. The
+ * 34 is the same number `.adw-image-button` above carries, from the same line. */
+.adw-button.circular {
+    width: 34;
+    height: 34;
+    border-radius: 9999;
+    padding: 0;
+}
+
+/* The button's OWN label, and it exists because the button is a `GridLayout`.
+ *
+ * `.adw-button` above declares `color` and `font-weight`; a `GridLayout` has no text,
+ * so neither reaches anything and the label would render at the platform default —
+ * silently, since a wrong font is not an error. `.adw-button-content-label` next to it
+ * had to exist for the same reason, and these are the same numbers: the 15pt / 700 of
+ * libadwaita's `button { font-weight: bold }` (_buttons.scss:1) over the label colour
+ * `.adw-button` carries.
+ *
+ * NOT MERGED WITH `.adw-button-content-label`: that class is `Adw.ButtonContent`'s and
+ * comes with the icon's 6 right-margin and the content's own padding rule; a plain
+ * text button has neither, and one selector for both would give every text button
+ * `image-text-button` spacing. */
+.adw-button-label {
+    font-size: 15;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+}
+
+/* On a suggested/destructive button the label takes the button's intent colour — the
+ * explicit label colour above would otherwise win over the inherited one, which is the
+ * same override `.adw-button-content-label` needs two blocks down. */
+.adw-button.suggested-action .adw-button-label {
+    color: #ffffff;
+}
+
+.adw-button.destructive-action .adw-button-label {
+    color: #c01c28;
+}
+
 /* Pressed (`:highlighted`) — Adwaita darkens the button on press rather than
  * showing a Material ripple. Mirrors adwaita-web's `:active` shades
  * (`--button-active-color` / darker `--accent-color`). Pill inherits the base. */
@@ -1740,6 +1783,21 @@ Page.ns-dark.adw-window {
     color: #ffffff;
 }
 
+/* Dark: the button's own label. Same three colours the dark `.adw-button` rules
+ * carry — near-white on the plain and flat button, white on suggested, the dark
+ * destructive red. */
+.ns-dark .adw-button-label {
+    color: #ffffff;
+}
+
+.ns-dark .adw-button.suggested-action .adw-button-label {
+    color: #ffffff;
+}
+
+.ns-dark .adw-button.destructive-action .adw-button-label {
+    color: #ff7b80;
+}
+
 /* Dark pressed (`:highlighted`) — Adwaita's lighter-overlay press shade. */
 .ns-dark .adw-button:highlighted {
     background-color: rgba(255, 255, 255, 0.22);