@gjsify/adwaita-nativescript 0.12.0 → 0.13.1

package/lib/types/widgets/adw-menu-button.d.ts

@@ -0,0 +1,32 @@
+import { type EventData } from '@nativescript/core';
+import { AdwImageButton } from './adw-image-button.js';
+/** Event name emitted when a menu item is chosen. */
+export declare const MENU_ITEM_ACTIVATED = "menuItemActivated";
+/** One entry in an {@link AdwMenuButton}'s menu. */
+export interface AdwMenuItem {
+    /** Stable identifier reported on activation (defaults to {@link label}). */
+    id?: string;
+    /** The menu item's display label. */
+    label: string;
+}
+/** Payload of the {@link MENU_ITEM_ACTIVATED} event. */
+export interface MenuItemActivatedEventData extends EventData {
+    /** The chosen item's id (or its label when no id was given). */
+    id: string;
+    /** The chosen item's label. */
+    label: string;
+    /** The chosen item's index in {@link AdwMenuButton.menuItems}. */
+    index: number;
+}
+export declare class AdwMenuButton extends AdwImageButton {
+    private _items;
+    private _menuTitle;
+    constructor();
+    /** The menu items (opened as a native `action()` sheet on tap). */
+    get menuItems(): AdwMenuItem[];
+    set menuItems(value: AdwMenuItem[]);
+    /** Optional title shown atop the native menu sheet. */
+    get menuTitle(): string;
+    set menuTitle(value: string);
+    private _openMenu;
+}

package/lib/types/widgets/adw-password-entry-row.d.ts

@@ -1,4 +1,12 @@
 import { AdwEntryRow } from './adw-entry-row.js';
+import { AdwImageButton } from './adw-image-button.js';
 export declare class AdwPasswordEntryRow extends AdwEntryRow {
+    /** The trailing peek (reveal/conceal) toggle button. */
+    protected readonly _peekButton: AdwImageButton;
     constructor();
+    /** Toggle the masked/revealed state + swap the eye icon. */
+    private _togglePeek;
+    /** Whether the password is currently revealed (the value is shown). */
+    get peeking(): boolean;
+    set peeking(value: boolean);
 }

package/lib/types/widgets/adw-preferences-group.d.ts

@@ -18,6 +18,16 @@ export declare class AdwPreferencesGroup extends StackLayout {
     addRow(view: View): void;
     /** Remove a previously-added row from the boxed list. */
     removeRow(view: View): void;
+    /**
+     * Mark the FIRST row so it draws no top separator. Adwaita draws hairline
+     * separators BETWEEN rows only; the `.boxed-list .adw-row` top-border rule
+     * would otherwise also stroke above the first row (NS does not clip it under
+     * the card's rounded corner), reading as a stray line. NS has no
+     * `:first-child`, so toggle an `adw-row-flush-top` class. Recomputes from the
+     * live children, so it stays correct after a `listbox.removeChildren()` +
+     * re-add (the controls panel's refresh path). */
+    private _refreshRowEdges;
+    private _setFlushTop;
     /** The boxed-list container (column of rows). */
     get listbox(): StackLayout;
 }

package/lib/types/widgets/adw-spin-row.d.ts

@@ -1,5 +1,6 @@
-import { Button, Label, type EventData } from '@nativescript/core';
+import { Label, type EventData } from '@nativescript/core';
 import { AdwActionRow } from './adw-action-row.js';
+import { AdwImageButton } from './adw-image-button.js';
 /** Event name emitted when {@link AdwSpinRow.value} changes. Mirrors GObject `notify::value`. */
 export declare const NOTIFY_VALUE = "notify::value";
 /** Payload of the `notify::value` event. */
@@ -8,11 +9,11 @@ export interface NotifyValueEventData extends EventData {
     value: number;
 }
 export declare class AdwSpinRow extends AdwActionRow {
-    /** The `−` decrement button. */
-    protected readonly _minusButton: Button;
-    /** The `+` increment button. */
-    protected readonly _plusButton: Button;
-    /** The value display between the buttons. */
+    /** The `−` decrement button (circular icon button, value-decrease symbolic). */
+    protected readonly _minusButton: AdwImageButton;
+    /** The `+` increment button (circular icon button, value-increase symbolic). */
+    protected readonly _plusButton: AdwImageButton;
+    /** The value display before the stepper buttons. */
     protected readonly _valueLabel: Label;
     private _value;
     private _min;

package/lib/types/widgets/adw-split-button.d.ts

@@ -1,4 +1,5 @@
-import { Button, GridLayout, type EventData } from '@nativescript/core';
+import { GridLayout, Label, StackLayout, type EventData } from '@nativescript/core';
+import { AdwIcon } from './adw-icon.js';
 /** Event name emitted when the main action part is tapped. Mirrors `Adw.SplitButton::clicked`. */
 export declare const CLICKED = "clicked";
 /** Event name emitted when a dropdown menu item is chosen. */
@@ -11,19 +12,33 @@ export interface MenuTappedEventData extends EventData {
     index: number;
 }
 export declare class AdwSplitButton extends GridLayout {
-    /** The main action button (column 0). */
-    protected readonly _actionButton: Button;
-    /** The dropdown-arrow button (column 1). */
-    protected readonly _dropdownButton: Button;
+    /** The main action part (column 0). */
+    protected readonly _actionPart: StackLayout;
+    /** The action label (shown when no `actionIcon` is set). */
+    protected readonly _actionLabel: Label;
+    /** The action symbolic icon (shown when an `actionIcon` is set). */
+    protected readonly _actionIcon: AdwIcon;
+    /** The dropdown-arrow part (column 1). */
+    protected readonly _dropdownPart: GridLayout;
+    /** The pan-down chevron. */
+    protected readonly _chevron: AdwIcon;
     private _menu;
+    private _hasActionIcon;
+    private _actionIconSvg;
     constructor();
     private _openMenu;
-    /** The main action button's label. */
+    /** The main action button's text label (used when no `actionIcon` is set). */
     get label(): string;
     set label(value: string);
+    /**
+     * A symbolic SVG for the action part (e.g. `documentSaveSymbolic`). When set,
+     * the icon replaces the text label — matching `Adw.SplitButton`'s icon mode.
+     */
+    get actionIcon(): string;
+    set actionIcon(svg: string);
     /** The dropdown menu items (opened as a native `action()` sheet on arrow tap). */
     get menu(): string[];
     set menu(value: string[]);
-    /** The main action button (for composing a custom content widget). */
-    get actionButton(): Button;
+    /** The main action part (for composing a custom content widget). */
+    get actionButton(): StackLayout;
 }

package/lib/types/widgets/adw-status-page.d.ts

@@ -1,25 +1,43 @@
 import { GridLayout, Label, StackLayout, View } from '@nativescript/core';
+import { AdwIcon } from './adw-icon.js';
 export declare class AdwStatusPage extends GridLayout {
     /** The centered vertical stack. */
     protected readonly _stack: StackLayout;
-    /** The large icon glyph label (lazily in the tree — only when set). */
+    /** The large symbolic icon (shown when an `icon` SVG is set). */
+    protected readonly _icon: AdwIcon;
+    private _iconSvg;
+    /** The large glyph label (shown when `iconText` is set — the legacy fallback). */
     protected readonly _iconLabel: Label;
+    private _iconGlyph;
+    /** The icon node currently in the stack (the AdwIcon or the glyph Label), or null. */
+    private _iconNode;
     /** The bold title label. */
     protected readonly _titleLabel: Label;
     /** The dim description label (lazily in the tree — only when set). */
     protected readonly _descriptionLabel: Label;
-    private _hasIcon;
     private _hasDescription;
     private _child;
     constructor();
     /**
-     * A large glyph shown above the title (emoji or font glyph). Setting a
-     * non-empty value inserts the icon label at the top of the stack; empty
-     * removes it. (`Adw.StatusPage` uses a themed icon; the NS subset has no
-     * icon-theme lookup, so a glyph label stands in.)
+     * A large Adwaita symbolic SVG string shown above the title (e.g.
+     * `folderSymbolic`). Setting a non-empty value shows the symbolic icon; empty
+     * removes it. Matches `Adw.StatusPage`'s themed icon. Mutually exclusive with
+     * {@link iconText} — whichever was set last wins.
+     */
+    get icon(): string;
+    set icon(value: string);
+    /**
+     * A large glyph shown above the title (emoji / font glyph — the legacy
+     * fallback for callers that have no symbolic SVG). Mutually exclusive with
+     * {@link icon}; prefer `icon` for real Adwaita symbolics.
      */
     get iconText(): string;
     set iconText(value: string);
+    /** Swap the icon node at the TOP of the stack (above the title), or clear it. */
+    private _setIconNode;
+    /** The icon fill colour (hex). Defaults to a dim grey; light/dark callers may override. */
+    get iconColor(): string;
+    set iconColor(value: string);
     /** The page title (bold, centered). */
     get title(): string;
     set title(value: string);

package/lib/types/widgets/adw-tab-view.d.ts

@@ -1,8 +1,19 @@
+import type { StackLayout } from '@nativescript/core';
 import { AdwViewSwitcherBase, type AdwViewPage } from './view-switcher-base.js';
 export declare class AdwTabView extends AdwViewSwitcherBase {
+    /** The per-tab close buttons, parallel to {@link AdwViewSwitcherBase._buttons}. */
+    private readonly _closeButtons;
     constructor();
     protected get barClass(): string;
     protected get buttonClass(): string;
+    /** Append a small ✕ close button to each tab (shown only when active). */
+    protected _buildButtonExtras(button: StackLayout, _page: AdwViewPage, index: number): void;
+    /** Reveal the close button only on the active tab (touch analogue of hover). */
+    protected _applyButtonState(_button: StackLayout, index: number, active: boolean): void;
+    /** Remove a tab + its page (no-op when only one tab remains). */
+    private _closeTab;
+    /** Rebuild from scratch — drop the stale per-tab close-button refs first. */
+    setViews(pages: AdwViewPage[]): void;
     /** The tab pages — an alias of the shared {@link AdwViewSwitcherBase.views}. */
     get tabs(): AdwViewPage[];
     set tabs(pages: AdwViewPage[]);

package/lib/types/widgets/adw-toggle-group.d.ts

@@ -1,4 +1,4 @@
-import { SegmentedBar, type EventData } from '@nativescript/core';
+import { StackLayout, type EventData } from '@nativescript/core';
 /** Event name emitted when {@link AdwToggleGroup.selected} changes. Mirrors GObject `notify::selected`. */
 export declare const NOTIFY_SELECTED = "notify::selected";
 /** Payload of the `notify::selected` event. */
@@ -8,13 +8,24 @@ export interface NotifyToggleSelectedEventData extends EventData {
     /** The newly-selected segment's label. */
     value: string;
 }
-export declare class AdwToggleGroup extends SegmentedBar {
-    private _options;
+/** One toggle: a label and an optional Adwaita symbolic SVG icon. */
+export interface AdwToggle {
+    label: string;
+    icon?: string;
+}
+export declare class AdwToggleGroup extends StackLayout {
+    private _toggles;
+    private readonly _segments;
+    private _selected;
     constructor();
-    /** The segment labels. Setting them rebuilds the segmented bar items. */
+    /** The segment labels (icon-less). Setting them rebuilds the toggle group. */
     get options(): string[];
     set options(value: string[]);
-    /** The selected segment index. Two-way bound to `SegmentedBar.selectedIndex`. */
+    /** Set the toggles (label + optional symbolic icon). Rebuilds the segments. */
+    setToggles(toggles: AdwToggle[]): void;
+    /** Mark only the selected segment `.active` (the raised white pill). */
+    private _applySelection;
+    /** The selected segment index. Swaps the active pill + emits `notify::selected`. */
     get selected(): number;
     set selected(value: number);
     /** The selected segment's label, or `''` when out of range. */

package/lib/types/widgets/adw-view-stack.d.ts

@@ -0,0 +1,46 @@
+import { GridLayout, View, type EventData } from '@nativescript/core';
+/** Event name emitted when the visible child changes. Mirrors GObject `notify::visible-child`. */
+export declare const NOTIFY_VISIBLE_CHILD = "notify::visible-child";
+/** Payload of the {@link NOTIFY_VISIBLE_CHILD} event. */
+export interface NotifyVisibleChildEventData extends EventData {
+    /** The newly-visible page's index. */
+    index: number;
+    /** The newly-visible page's name. */
+    name: string;
+    /** The newly-visible page's title. */
+    title: string;
+}
+/** One page registered with an {@link AdwViewStack}. */
+export interface AdwViewStackPage {
+    /** Stable identifier used by `visibleChildName` / switcher binding. */
+    name: string;
+    /** Human-facing title shown in a bound switcher button. */
+    title: string;
+    /** Optional Adwaita symbolic SVG shown in a bound switcher button. */
+    icon?: string;
+    /** The page content view, shown when this page is selected. */
+    content: View;
+}
+export declare class AdwViewStack extends GridLayout {
+    private readonly _pages;
+    private _visibleIndex;
+    constructor();
+    /**
+     * Register a page. The FIRST page added becomes visible automatically so the
+     * stack is never empty, matching `Adw.ViewStack`. Returns the page handle.
+     */
+    add(content: View, name: string, title?: string, icon?: string): AdwViewStackPage;
+    /** Convenience alias matching `Adw.ViewStack.add_titled`. */
+    addTitled(content: View, name: string, title: string): AdwViewStackPage;
+    /** All registered pages, in add order (a bound switcher reads this). */
+    get pages(): readonly AdwViewStackPage[];
+    /** The visible page index. Swaps the visible page + emits `notify::visible-child`. */
+    get visibleChildIndex(): number;
+    set visibleChildIndex(value: number);
+    /** The visible page name (`Adw.ViewStack.visible-child-name`). */
+    get visibleChildName(): string;
+    set visibleChildName(name: string);
+    /** The visible page content view, or `null`. */
+    get visibleChild(): View | null;
+    private _apply;
+}

package/lib/types/widgets/adw-view-switcher-bar.d.ts

@@ -0,0 +1,29 @@
+import { GridLayout } from '@nativescript/core';
+import { AdwViewStack } from './adw-view-stack.js';
+export declare class AdwViewSwitcherBar extends GridLayout {
+    /** The horizontal (homogeneous) row of buttons. */
+    private readonly _bar;
+    /** The tappable button containers, one per stack page, in page order. */
+    private readonly _buttons;
+    private _stack;
+    private _stackListener;
+    private _revealed;
+    constructor();
+    /** Bind to an {@link AdwViewStack}: build buttons from its pages + two-way sync. */
+    setStack(stack: AdwViewStack | null): void;
+    /** The bound stack (`Adw.ViewSwitcherBar.stack`). */
+    get stack(): AdwViewStack | null;
+    set stack(value: AdwViewStack | null);
+    /**
+     * Whether the bar is shown (`Adw.ViewSwitcherBar.reveal`). An adaptive layout
+     * sets this `true` on narrow screens and `false` on wide ones (where a header-bar
+     * `AdwViewSwitcher` takes over).
+     */
+    get revealed(): boolean;
+    set revealed(value: boolean);
+    /** Rebuild the button row from the bound stack's pages (call after late page adds). */
+    refresh(): void;
+    private _rebuild;
+    /** Mark the button for the stack's visible page active (accent label via CSS). */
+    private _syncActive;
+}

package/lib/types/widgets/breakpoint.d.ts

@@ -0,0 +1,69 @@
+import type { View } from '@nativescript/core';
+/** The two size axes a condition can test. */
+export type BreakpointDimension = 'width' | 'height';
+/** Whether a leaf is a lower (`min`) or upper (`max`) bound. */
+export type BreakpointBound = 'min' | 'max';
+/** A single `min-/max-width/height: <value>` comparison (value in DIPs). */
+export interface BreakpointConditionLeaf {
+    dimension: BreakpointDimension;
+    bound: BreakpointBound;
+    /** Threshold in DIPs (the parsed `px` / `sp` / `pt` value). */
+    value: number;
+}
+/** A boolean combination of two condition nodes. */
+export interface BreakpointConditionGroup {
+    op: 'and' | 'or';
+    left: BreakpointConditionNode;
+    right: BreakpointConditionNode;
+}
+/** A parsed breakpoint condition: a leaf comparison or an and/or group. */
+export type BreakpointConditionNode = BreakpointConditionLeaf | BreakpointConditionGroup;
+/** A measured size in DIPs. */
+export interface BreakpointSize {
+    width: number;
+    height: number;
+}
+/**
+ * Parse a Libadwaita breakpoint condition string into a {@link BreakpointConditionNode}.
+ * Accepts a single comparison (`'max-width: 720sp'`), and/or chains
+ * (`'max-width: 720sp and max-height: 480sp'`), and parenthesised groups. Units
+ * are read as DIPs. Returns null when the string can't be parsed.
+ */
+export declare function parseBreakpointCondition(spec: string): BreakpointConditionNode | null;
+/** Evaluate a parsed condition against a measured size (DIPs). */
+export declare function evaluateBreakpointCondition(node: BreakpointConditionNode, size: BreakpointSize): boolean;
+/** Callbacks run as a breakpoint's condition flips. */
+export interface AdwBreakpointHandlers {
+    /** Run when the condition becomes true (the narrow/large state is entered). */
+    onApply: () => void;
+    /** Run when the condition becomes false again. Optional. */
+    onUnapply?: () => void;
+}
+/**
+ * A single responsive breakpoint: a condition plus apply/unapply callbacks.
+ * Mirrors `Adw.Breakpoint`. Bind one or more to a view with {@link addBreakpoints}
+ * (or drive {@link evaluate} yourself from a custom size source).
+ */
+export declare class AdwBreakpoint {
+    /** The parsed condition (null when an invalid string was passed). */
+    readonly condition: BreakpointConditionNode | null;
+    private _handlers;
+    private _applied;
+    constructor(condition: string | BreakpointConditionNode | null, handlers: AdwBreakpointHandlers);
+    /** Whether the condition is currently satisfied (apply has fired, not unapply). */
+    get applied(): boolean;
+    /**
+     * Re-evaluate against `size`, firing apply / unapply ONLY on a state change
+     * (so a steady stream of layout passes doesn't re-run the callbacks). Returns
+     * the post-evaluation applied state. A null condition never applies.
+     */
+    evaluate(size: BreakpointSize): boolean;
+}
+/**
+ * Bind breakpoints to a view so they re-evaluate on every layout pass (the NS
+ * stand-in for Adwaita's window-size signal): the view's `layoutChanged` event
+ * drives {@link AdwBreakpoint.evaluate} with the post-layout DIP size, and a
+ * `loaded` seed evaluates once the first size is known. Each breakpoint is
+ * evaluated independently. Returns a dispose function that detaches the listeners.
+ */
+export declare function addBreakpoints(view: View, breakpoints: AdwBreakpoint[]): () => void;

package/lib/types/widgets/color-scheme.d.ts

@@ -0,0 +1,22 @@
+/** The two Adwaita color schemes. */
+export type AdwColorScheme = 'light' | 'dark';
+/** The active color scheme (default `'light'`). */
+export declare function adwaitaColorScheme(): AdwColorScheme;
+/**
+ * Set the active color scheme. A no-op when unchanged; otherwise notifies every
+ * subscriber (so theme-aware icons re-render). The host app should also toggle
+ * the `ns-dark` class on its root view for the CSS half.
+ */
+export declare function setAdwaitaColorScheme(scheme: AdwColorScheme): void;
+/** Flip light↔dark and return the new scheme. */
+export declare function toggleAdwaitaColorScheme(): AdwColorScheme;
+/** The default symbolic-icon fill for the active scheme (dark fg on light, near-white on dark). */
+export declare function themeIconColor(): string;
+/** Whether `color` is the current scheme-default fill (i.e. not a caller-set explicit colour). */
+export declare function isThemeIconColor(color: string): boolean;
+/**
+ * Subscribe to scheme changes. Returns an unsubscribe function. Icon widgets
+ * subscribe while `loaded` and unsubscribe on `unloaded`, so the registry only
+ * ever holds on-screen icons.
+ */
+export declare function onAdwaitaColorSchemeChanged(listener: () => void): () => void;

package/lib/types/widgets/icon-path.d.ts

@@ -34,3 +34,18 @@ export declare function extractIconPaths(svg: string): IconPath[];
  * `''` when the SVG carries no path data.
  */
 export declare function extractPathData(svg: string): string;
+/**
+ * Space-separate the two single-digit ARC FLAGS (large-arc, sweep) in every
+ * elliptical-arc command (`A`/`a`) of an SVG path-data string.
+ *
+ * Android's `androidx.core.graphics.PathParser` (and `VectorDrawable`) tokenise
+ * arc flags as standalone numbers and THROW ("Error in parsing …") when the SVG
+ * compact form glues a flag to the next flag or coordinate — e.g.
+ * `a3 3 0 00-1.6-.1` packs `large-arc=0`, `sweep=0`, `x=-1.6`. The SVG grammar
+ * permits this (each flag is a single `0`/`1` digit), and many Adwaita symbolic
+ * icons (notably the `legacy` set) use it, so they crash the renderer. This
+ * re-emits each arc argument group with explicit spaces; every other command
+ * passes through unchanged. (Assumes the standard `x-axis-rotation 0` Adwaita
+ * icons use — a multi-digit rotation glued directly to the flags is not split.)
+ */
+export declare function normalizeArcFlags(d: string): string;

package/lib/types/widgets/index.d.ts

@@ -17,6 +17,8 @@ export type { NotifyExpandedEventData } from './adw-expander-row.js';
 export { AdwButton } from './adw-button.js';
 export type { AdwButtonVariant } from './adw-button.js';
 export { AdwImageButton, DEFAULT_ICON_BUTTON_ICON_SIZE } from './adw-image-button.js';
+export { AdwMenuButton, MENU_ITEM_ACTIVATED } from './adw-menu-button.js';
+export type { AdwMenuItem, MenuItemActivatedEventData } from './adw-menu-button.js';
 export { AdwIcon, DEFAULT_ADW_ICON_SIZE } from './adw-icon.js';
 export { AdwBanner, BUTTON_CLICKED } from './adw-banner.js';
 export { AdwAvatar, DEFAULT_AVATAR_SIZE, avatarInitials } from './adw-avatar.js';
@@ -33,9 +35,12 @@ export { AdwSplitButton, CLICKED, MENU_TAPPED } from './adw-split-button.js';
 export type { MenuTappedEventData } from './adw-split-button.js';
 export { AdwToggleGroup, NOTIFY_SELECTED as NOTIFY_TOGGLE_SELECTED } from './adw-toggle-group.js';
 export type { NotifyToggleSelectedEventData } from './adw-toggle-group.js';
+export { AdwViewStack, NOTIFY_VISIBLE_CHILD } from './adw-view-stack.js';
+export type { AdwViewStackPage, NotifyVisibleChildEventData } from './adw-view-stack.js';
 export { AdwViewSwitcherBase, NOTIFY_SELECTED as NOTIFY_VIEW_SELECTED } from './view-switcher-base.js';
 export type { AdwViewPage, NotifyViewSelectedEventData } from './view-switcher-base.js';
 export { AdwViewSwitcher } from './adw-view-switcher.js';
+export { AdwViewSwitcherBar } from './adw-view-switcher-bar.js';
 export { AdwInlineViewSwitcher } from './adw-inline-view-switcher.js';
 export { AdwTabView } from './adw-tab-view.js';
 export { AdwCarousel, DEFAULT_CAROUSEL_PAGE_WIDTH, NOTIFY_POSITION } from './adw-carousel.js';
@@ -59,6 +64,10 @@ export { AdwPreferencesDialog, CLOSED as PREFERENCES_CLOSED } from './adw-prefer
 export { attachRowPressFeedback } from './row-press.js';
 export { ADWAITA_ICON_GRID, DEFAULT_ICON_COLOR, DEFAULT_ICON_COLOR_DARK, extractIconPaths, extractPathData, renderSymbolicIcon, } from './icons.js';
 export type { IconPath, SymbolicIconOptions } from './icons.js';
+export { adwaitaColorScheme, isThemeIconColor, onAdwaitaColorSchemeChanged, setAdwaitaColorScheme, themeIconColor, toggleAdwaitaColorScheme, } from './color-scheme.js';
+export type { AdwColorScheme } from './color-scheme.js';
+export { AdwBreakpoint, addBreakpoints, evaluateBreakpointCondition, parseBreakpointCondition, } from './breakpoint.js';
+export type { AdwBreakpointHandlers, BreakpointBound, BreakpointConditionGroup, BreakpointConditionLeaf, BreakpointConditionNode, BreakpointDimension, BreakpointSize, } from './breakpoint.js';
 /**
  * Register all Adwaita widgets as NativeScript XML elements (idempotent).
  *

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

@@ -18,6 +18,14 @@ export declare abstract class AdwSplitViewBase extends GridLayout {
     protected _sidebarWidth: number;
     protected _sidebarPosition: 'start' | 'end';
     constructor(rootClass: string);
+    /**
+     * (Re)declare the two columns so the sidebar's column is fixed-width ('auto')
+     * and the content's is expanding ('star'), ordered by {@link sidebarPosition}:
+     * `start` → [sidebar auto, content star]; `end` → [content star, sidebar auto].
+     * Without this an `end` sidebar would land in the expanding column and float
+     * away from the right edge (leaving a gap), with the content squeezed.
+     */
+    protected _syncColumns(): void;
     /** Subclass-specific layout application for the current collapsed/show state. */
     protected abstract _applyLayout(): void;
     /** Apply a user-initiated show/hide toggle. The default is an instant re-layout;

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

@@ -1,4 +1,4 @@
-import { Button, GridLayout, StackLayout, View, type EventData } from '@nativescript/core';
+import { GridLayout, StackLayout, View, type EventData } from '@nativescript/core';
 /** Event name emitted when the selected view changes. Mirrors GObject `notify::selected`. */
 export declare const NOTIFY_SELECTED = "notify::selected";
 /** Payload of the `notify::selected` event. */
@@ -14,6 +14,8 @@ export interface AdwViewPage {
     title: string;
     /** The page content view, shown when this page is selected. */
     content: View;
+    /** Optional Adwaita symbolic SVG shown left of the label in the switcher button. */
+    icon?: string;
 }
 /**
  * Shared base: a switcher bar (row 0) + a content area (row 1), one page visible.
@@ -25,7 +27,8 @@ export declare abstract class AdwViewSwitcherBase extends GridLayout {
     /** The content area where the selected page is shown. */
     protected readonly _contentArea: GridLayout;
     protected readonly _pages: AdwViewPage[];
-    protected readonly _buttons: Button[];
+    /** The tappable button containers (one per page), in bar order. */
+    protected readonly _buttons: StackLayout[];
     protected _selected: number;
     /** CSS class applied to the switcher bar — subclass-specific. */
     protected abstract get barClass(): string;
@@ -38,6 +41,18 @@ export declare abstract class AdwViewSwitcherBase extends GridLayout {
     setViews(pages: AdwViewPage[]): void;
     /** Show only the selected page; mark its button active. */
     protected _applySelection(): void;
+    /**
+     * Hook: append extra chrome to a freshly-built button (after icon + label).
+     * Default no-op. Subclasses (e.g. {@link AdwTabView}) override to add a close
+     * button. The button is the tappable `StackLayout` container.
+     */
+    protected _buildButtonExtras(_button: StackLayout, _page: AdwViewPage, _index: number): void;
+    /**
+     * Hook: react to a button's active/inactive state on every selection change.
+     * Default no-op. Subclasses override to e.g. show the close button only on the
+     * active tab.
+     */
+    protected _applyButtonState(_button: StackLayout, _index: number, _active: boolean): void;
     /** The registered view pages. */
     get views(): AdwViewPage[];
     set views(pages: AdwViewPage[]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-nativescript",
-    "version": "0.12.0",
+    "version": "0.13.1",
     "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",
@@ -47,9 +47,9 @@
         "design-system"
     ],
     "dependencies": {
-        "@gjsify/adwaita-fonts": "^0.12.0",
-        "@gjsify/adwaita-icons": "^0.12.0",
-        "@gjsify/native-platform": "^0.12.0"
+        "@gjsify/adwaita-fonts": "^0.13.1",
+        "@gjsify/adwaita-icons": "^0.13.1",
+        "@gjsify/native-platform": "^0.13.1"
     },
     "peerDependencies": {
         "@nativescript/core": "*"
@@ -60,8 +60,8 @@
         }
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.12.0",
-        "@gjsify/unit": "^0.12.0",
+        "@gjsify/cli": "^0.13.1",
+        "@gjsify/unit": "^0.13.1",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },