@gjsify/adwaita-nativescript 0.53.0 → 0.55.0

package/lib/types/window-roots.spec.d.ts

@@ -0,0 +1 @@
+export declare const AdwWindowRootsNsTest: () => Promise<void>;

package/lib/types/window-state.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-nativescript",
-    "version": "0.53.0",
+    "version": "0.55.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",
@@ -22,6 +22,10 @@
             "types": "./lib/types/builder/index.d.ts",
             "default": "./lib/esm/builder/index.js"
         },
+        "./capabilities": {
+            "types": "./lib/types/capabilities.d.ts",
+            "default": "./lib/esm/capabilities.js"
+        },
         "./theme/adwaita.css": "./src/theme/adwaita.css",
         "./fonts": {
             "types": "./lib/types/fonts.d.ts",
@@ -59,10 +63,10 @@
         "design-system"
     ],
     "dependencies": {
-        "@gjsify/adwaita-core": "^0.53.0",
-        "@gjsify/adwaita-fonts": "^0.53.0",
-        "@gjsify/adwaita-icons": "^0.53.0",
-        "@gjsify/native-platform": "^0.53.0"
+        "@gjsify/adwaita-core": "^0.55.0",
+        "@gjsify/adwaita-fonts": "^0.55.0",
+        "@gjsify/adwaita-icons": "^0.55.0",
+        "@gjsify/native-platform": "^0.55.0"
     },
     "peerDependencies": {
         "@nativescript/core": "*"
@@ -73,10 +77,10 @@
         }
     },
     "devDependencies": {
-        "@gjsify/blueprint": "^0.53.0",
-        "@gjsify/cli": "^0.53.0",
-        "@gjsify/unit": "^0.53.0",
-        "@gjsify/vite-plugin-blueprint": "^0.53.0",
+        "@gjsify/blueprint": "^0.55.0",
+        "@gjsify/cli": "^0.55.0",
+        "@gjsify/unit": "^0.55.0",
+        "@gjsify/vite-plugin-blueprint": "^0.55.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },

package/src/theme/adwaita.css

@@ -71,6 +71,11 @@ Page.adw-window {
 .adw-preferences-group-listbox {
     background-color: #ffffff;
     border-radius: 12;
+    /* libadwaita's `%card` shadow is a 1px ring of rgba(0,0,0,.08) on light; NS has no
+     * box-shadow, so a border stands in. Without it a white card on the #fafafb window is
+     * near-invisible. Dark has no ring (the card is already lighter than the window). */
+    border-width: 1;
+    border-color: rgba(0, 0, 0, 0.1);
     margin: 0;
 }
 
@@ -94,6 +99,8 @@ Page.adw-window {
     background-color: #ffffff;
     color: rgba(0, 0, 6, 0.8);
     border-radius: 12;
+    border-width: 1;
+    border-color: rgba(0, 0, 0, 0.1);
 }
 
 /* The padding is the ELEMENT's, not the class's, and both other renderers split them
@@ -202,6 +209,14 @@ Page.adw-window {
     color: #3584e4;
 }
 
+/* NativeScript's `color` tints the thumb in BOTH states, so an off switch kept its
+ * accent thumb. `AdwSwitchRow` adds `.off` while unchecked: the slider goes neutral
+ * and only the on state carries the accent. A white thumb vanished against the white
+ * row (the Android thumb overhangs the track), so it is a mid grey. */
+.adw-switch.off {
+    color: #9a9996;
+}
+
 /* ===== Preferences page (ScrollView wrapper) ===== */
 
 .adw-preferences-page {
@@ -582,6 +597,21 @@ Page.adw-window {
     background-color: rgba(224, 27, 36, 0.24);
 }
 
+/* `Gtk.ToggleButton:active` — `button:checked` takes the pressed shade
+ * (`$button_active_color`, _buttons.scss). `checked` is a STATE class the widget wears
+ * (`GtkToggleButton`), never a member of `styleClasses`. */
+.adw-button.checked {
+    background-color: rgba(0, 0, 0, 0.19);
+}
+
+.adw-button.suggested-action.checked {
+    background-color: #1c71d8;
+}
+
+.adw-button.destructive-action.checked {
+    background-color: rgba(224, 27, 36, 0.24);
+}
+
 /* Activatable boxed-list rows (button row / combo row) darken on press, like
  * Adwaita's `row.activatable:active` (`$view_active_color` = currentColor 8%).
  * The rows are transparent at rest, so the press is a true rgba overlay over the
@@ -748,13 +778,21 @@ Page.adw-window {
  * same reason the accent has to be inlined as a literal. AdwToolbarView applies the
  * real reading now (#1128). */
 .adw-toolbar-view-top {
-    background-color: #ffffff;
+    /* `top-bar-style: flat` (the default): the bar is the window background, with no
+     * separator — the header bar inside it is flat too (`.adw-toolbar-view-top
+     * .adw-header-bar` below). `.raised` brings the header colour and the hairline. */
+    background-color: #fafafb;
 }
 
 .adw-toolbar-view-bottom {
-    background-color: #ffffff;
-    border-top-width: 1;
-    border-top-color: rgba(0, 0, 0, 0.1);
+    background-color: #fafafb;
+}
+
+/* A header bar in a toolbar view paints nothing of its own: the bar around it owns the
+ * colour (window background when flat, header colour when raised) and the hairline. */
+.adw-toolbar-view-top .adw-header-bar {
+    background-color: transparent;
+    border-bottom-width: 0;
 }
 
 /* top-bar-style / bottom-bar-style = raised: an opaque background with a
@@ -774,6 +812,7 @@ Page.adw-window {
 
 .adw-toolbar-view-bottom.raised {
     background-color: #ffffff;
+    border-top-width: 1;
     border-top-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -790,9 +829,10 @@ Page.adw-window {
 /* ===== View switcher bar (narrow policy: bottom bar, icon over label) ===== */
 
 .adw-viewswitcherbar {
-    background-color: #ffffff;
-    border-top-width: 1;
-    border-top-color: rgba(0, 0, 0, 0.1);
+    /* Transparent: the bar takes the colour (and, when raised, the hairline) of the
+     * toolbar it sits in. It carried its own #fff and top border, which drew a second
+     * line under the toolbar view's. */
+    background-color: transparent;
 }
 
 .adw-viewswitcherbar-box {
@@ -814,6 +854,12 @@ Page.adw-window {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
+/* `button.flat:checked` — the selected pill, not an accent colour (_buttons.scss
+ * flat `:checked` = $selected_color); the label keeps the window foreground. */
+.adw-viewswitcherbar-button.active {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
 .adw-viewswitcherbar-button-icon {
     margin: 0 0 2 0;
     horizontal-align: center;
@@ -821,15 +867,12 @@ Page.adw-window {
 
 .adw-viewswitcherbar-button-label {
     font-size: 11;
-    color: rgba(0, 0, 0, 0.6);
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
     horizontal-align: center;
     text-align: center;
 }
 
-.adw-viewswitcherbar-button.active .adw-viewswitcherbar-button-label {
-    color: #3584e4;
-}
-
 /* AdwIndicatorBin's badge — the unread count, or (with .needs-attention and no
  * count) a bare dot. Reference: refs/libadwaita/src/adw-indicator-bin.c */
 .adw-viewswitcherbar-button-badge {
@@ -1214,9 +1257,9 @@ Page.adw-window {
 }
 
 .adw-view-switcher-bar {
-    background-color: rgba(0, 0, 0, 0.05);
-    border-radius: 9;
-    padding: 2;
+    /* libadwaita's `viewswitcher` is a bare row of flat toggles: no frame, no fill. */
+    background-color: transparent;
+    padding: 0;
     margin: 6;
 }
 
@@ -1225,13 +1268,13 @@ Page.adw-window {
  * right margin. Active = raised white pill. */
 .adw-view-switcher-button {
     background-color: transparent;
-    border-radius: 7;
+    border-radius: 9;
     padding: 5 14 5 14;
     margin: 0;
 }
 
 .adw-view-switcher-button.active {
-    background-color: #ffffff;
+    background-color: rgba(0, 0, 0, 0.1);
 }
 
 .adw-view-switcher-button:highlighted {
@@ -1239,7 +1282,7 @@ Page.adw-window {
 }
 
 .adw-view-switcher-button-label {
-    color: rgba(0, 0, 0, 0.75);
+    color: rgba(0, 0, 0, 0.8);
     font-weight: 700;
     vertical-align: center;
 }
@@ -1532,13 +1575,89 @@ Page.adw-window {
     background-color: transparent;
 }
 
+/* ===== Check button, separator, frame, text view ===== */
+
+/* `check` (_checks.scss): a rounded square, neutral until `checked`/`inconsistent`, then the
+ * accent fill; the white checkmark is the indicator's own image. */
+.adw-check-button {
+    padding: 6 0 6 0;
+}
+
+.adw-check-indicator {
+    width: 20;
+    height: 20;
+    border-radius: 5;
+    background-color: rgba(0, 0, 0, 0.15);
+    margin: 0 8 0 0;
+}
+
+.adw-check-indicator.checked,
+.adw-check-indicator.inconsistent {
+    background-color: #3584e4;
+}
+
+.adw-check-label {
+    font-size: 15;
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.adw-check-button:highlighted {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* `separator` (_misc.scss): a 1px line in the border colour. */
+.adw-separator {
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.adw-separator.horizontal {
+    height: 1;
+    horizontal-align: stretch;
+}
+
+.adw-separator.vertical {
+    width: 1;
+    vertical-align: stretch;
+}
+
+/* `frame` (`.frame` / `frame > border`): one hairline around the child. */
+.adw-frame {
+    border-width: 1;
+    border-color: rgba(0, 0, 0, 0.15);
+}
+
+.adw-frame-label {
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+    margin: 0 0 4 0;
+}
+
+/* `textview` (_views.scss): the view surface, with the entry's padding. */
+.adw-text-view {
+    background-color: #ffffff;
+    border-radius: 9;
+    padding: 8 9 8 9;
+}
+
+.adw-text-view-input {
+    color: rgba(0, 0, 0, 0.8);
+    font-size: 15;
+}
+
+.adw-text-view.monospace .adw-text-view-input {
+    font-family: monospace;
+}
+
 /* ===== Toast (transient snackbar) ===== */
 
+/* `toast` (_misc.scss:38-60): $toast_bg_color #505053 / white in BOTH schemes — it is
+ * the one libadwaita surface that does not switch — a 150px (pill) radius, 6px padding
+ * with 12 on the leading side, 12px margin and 24 below. */
 .adw-toast {
-    background-color: #303034;
-    border-radius: 12;
-    padding: 10 12 10 16;
-    margin: 0 12 16 12;
+    background-color: #505053;
+    border-radius: 9999;
+    padding: 6 6 6 12;
+    margin: 12 12 24 12;
 }
 
 .adw-toast-title {
@@ -1548,12 +1667,12 @@ Page.adw-window {
 }
 
 .adw-toast-button {
-    background-color: rgba(255, 255, 255, 0.16);
+    background-color: transparent;
     color: #ffffff;
-    border-radius: 8;
+    border-radius: 9999;
     font-weight: 700;
     padding: 4 12 4 12;
-    margin: 0 0 0 8;
+    margin: 0 0 0 6;
 }
 
 /* ===== About / Preferences dialogs (in-page modal overlay) ===== */
@@ -1634,6 +1753,30 @@ Page.adw-window {
     margin: 0;
 }
 
+/* ===== Adw.Dialog =====
+ *
+ * The scrim dims the whole window; the card is Adwaita's dialog surface — the window
+ * fill, the 15-ish window radius, no padding of its own (the dialog's child brings its
+ * header bar and its content margins). `.adw-dialog-card` sits in the middle by default
+ * and at the bottom edge, full width, for `presentation-mode: bottom-sheet`. */
+.adw-dialog {
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.adw-dialog-card {
+    background-color: #fafafb;
+    border-radius: 16;
+    margin: 24;
+}
+
+/* ===== Gtk.ListBox selected row =====
+ *
+ * `row:selected` is the 10% currentColor fill (_lists.scss). The rows of a boxed list are
+ * transparent over the card, so a true rgba overlay applies directly. */
+.adw-list-row-selected {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
 /* ===== Shortcut label (keycaps) =====
  *
  * libadwaita: `_shortcuts-dialog.scss:33-58` — 6 spacing at BOTH levels, keycaps
@@ -1712,12 +1855,14 @@ Page.ns-dark.adw-window {
  * (see the light `.adw-row` note) so the card's rounded corners show. */
 .ns-dark .boxed-list,
 .ns-dark .adw-preferences-group-listbox {
+    border-color: transparent;
     background-color: #34343a;
     color: #ffffff;
 }
 
 .ns-dark .card,
 .ns-dark .adw-card {
+    border-color: transparent;
     background-color: #34343a;
     color: #ffffff;
 }
@@ -1745,6 +1890,10 @@ Page.ns-dark.adw-window {
     color: #78aeed;
 }
 
+.ns-dark .adw-switch.off {
+    color: #9a9996;
+}
+
 /* ===== Dark: preferences page ===== */
 
 .ns-dark .adw-preferences-page {
@@ -1891,6 +2040,10 @@ Page.ns-dark.adw-window {
     background-color: rgba(255, 255, 255, 0.22);
 }
 
+.ns-dark .adw-button.checked {
+    background-color: rgba(255, 255, 255, 0.22);
+}
+
 .ns-dark .adw-button.flat:highlighted {
     background-color: rgba(255, 255, 255, 0.22);
 }
@@ -1911,6 +2064,14 @@ Page.ns-dark.adw-window {
     background-color: rgba(192, 28, 40, 0.3);
 }
 
+.ns-dark .adw-button.suggested-action.checked {
+    background-color: #1c71d8;
+}
+
+.ns-dark .adw-button.destructive-action.checked {
+    background-color: rgba(192, 28, 40, 0.3);
+}
+
 /* Dark activatable boxed-list rows: 8% white press overlay over the dark card. */
 .ns-dark .adw-button-row:highlighted,
 .ns-dark .adw-combo-row:highlighted {
@@ -1977,12 +2138,17 @@ Page.ns-dark.adw-window {
 }
 
 .ns-dark .adw-toolbar-view-top {
-    background-color: #2e2e32;
+    background-color: #222226;
+}
+
+/* Outranks `.ns-dark .adw-header-bar` above: inside a toolbar view the bar paints. */
+.ns-dark .adw-toolbar-view-top .adw-header-bar {
+    background-color: transparent;
+    border-bottom-width: 0;
 }
 
 .ns-dark .adw-toolbar-view-bottom {
-    background-color: #2e2e32;
-    border-top-color: rgba(255, 255, 255, 0.12);
+    background-color: #222226;
 }
 
 .ns-dark .adw-toolbar-view-top.raised {
@@ -1996,6 +2162,7 @@ Page.ns-dark.adw-window {
 
 .ns-dark .adw-toolbar-view-bottom.raised {
     background-color: #2e2e32;
+    border-top-width: 1;
     border-top-color: rgba(255, 255, 255, 0.12);
 }
 
@@ -2006,8 +2173,11 @@ Page.ns-dark.adw-window {
 /* ===== Dark: view switcher bar ===== */
 
 .ns-dark .adw-viewswitcherbar {
-    background-color: #2e2e32;
-    border-top-color: rgba(255, 255, 255, 0.12);
+    background-color: transparent;
+}
+
+.ns-dark .adw-viewswitcherbar-button.active {
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .ns-dark .adw-viewswitcherbar-button:highlighted {
@@ -2015,11 +2185,7 @@ Page.ns-dark.adw-window {
 }
 
 .ns-dark .adw-viewswitcherbar-button-label {
-    color: rgba(255, 255, 255, 0.7);
-}
-
-.ns-dark .adw-viewswitcherbar-button.active .adw-viewswitcherbar-button-label {
-    color: #78aeed;
+    color: #ffffff;
 }
 
 /* ===== Dark: data grid ===== */
@@ -2134,17 +2300,26 @@ Page.ns-dark.adw-window {
 
 /* ===== Dark: view switcher ===== */
 
-.ns-dark .adw-view-switcher-bar,
+.ns-dark .adw-view-switcher-bar {
+    background-color: transparent;
+}
+
 .ns-dark .adw-inline-view-switcher-bar {
     background-color: rgba(255, 255, 255, 0.08);
 }
 
-.ns-dark .adw-view-switcher-button-label,
+.ns-dark .adw-view-switcher-button-label {
+    color: #ffffff;
+}
+
+.ns-dark .adw-view-switcher-button.active {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
 .ns-dark .adw-inline-view-switcher-button-label {
     color: rgba(255, 255, 255, 0.7);
 }
 
-.ns-dark .adw-view-switcher-button.active,
 .ns-dark .adw-inline-view-switcher-button.active {
     background-color: #45454c;
 }
@@ -2258,10 +2433,56 @@ Page.ns-dark.adw-window {
     background-color: transparent;
 }
 
-/* ===== Dark: toast (dark base already; tune for dark page) ===== */
+/* ===== Dark: check button, separator, frame, text view ===== */
+
+.ns-dark .adw-check-indicator {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.ns-dark .adw-check-indicator.checked,
+.ns-dark .adw-check-indicator.inconsistent {
+    background-color: #3584e4;
+}
+
+.ns-dark .adw-check-label,
+.ns-dark .adw-frame-label {
+    color: #ffffff;
+}
+
+.ns-dark .adw-check-button:highlighted {
+    background-color: rgba(255, 255, 255, 0.07);
+}
+
+.ns-dark .adw-separator,
+.ns-dark .adw-frame {
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.ns-dark .adw-separator {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.ns-dark .adw-text-view {
+    background-color: #2a2a2e;
+}
 
+.ns-dark .adw-text-view-input {
+    color: #ffffff;
+}
+
+/* ===== Dark: toast ===== */
+
+/* Restated rather than left to the base rule: the toast is the same #505053 in the dark
+ * scheme (it used to be #45454c here and #303034 in light, neither of which is
+ * libadwaita's), and a `.ns-dark` rule is what keeps it from picking up a later
+ * `.adw-toast` override written for the light page. */
 .ns-dark .adw-toast {
-    background-color: #45454c;
+    background-color: #505053;
+}
+
+.ns-dark .adw-toast-title,
+.ns-dark .adw-toast-button {
+    color: #ffffff;
 }
 
 /* ===== Dark: about / preferences dialogs ===== */
@@ -2271,6 +2492,18 @@ Page.ns-dark.adw-window {
     background-color: rgba(0, 0, 0, 0.55);
 }
 
+.ns-dark .adw-dialog {
+    background-color: rgba(0, 0, 0, 0.55);
+}
+
+.ns-dark .adw-dialog-card {
+    background-color: #2e2e32;
+}
+
+.ns-dark .adw-list-row-selected {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
 .ns-dark .adw-about-dialog-card,
 .ns-dark .adw-preferences-dialog-card {
     background-color: #2e2e32;