@gjsify/adwaita-web 0.39.0 → 0.41.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/adwaita-web.css +112 -40
- package/dist/adwaita-web.css.map +1 -1
- package/lib/types/adw-button.spec.d.ts +1 -0
- package/lib/types/adw-entry.spec.d.ts +1 -0
- package/lib/types/adw-menu-button.spec.d.ts +1 -0
- package/lib/types/elements/adw-carousel.d.ts +48 -0
- package/lib/types/elements/adw-entry.d.ts +6 -0
- package/lib/types/elements/adw-header-bar.d.ts +5 -4
- package/lib/types/elements/adw-menu-button.d.ts +18 -7
- package/lib/types/elements/adw-tab-view.d.ts +23 -0
- package/lib/types/elements/adw-toolbar-view.d.ts +8 -0
- package/lib/types/index.d.ts +2 -0
- package/lib/types/scroll-shading.d.ts +56 -0
- package/lib/types/styles.generated.d.ts +1 -1
- package/package.json +6 -6
- package/scss/_carousel.scss +15 -1
- package/scss/_headerbar.scss +35 -6
- package/scss/_icons.generated.scss +18 -0
- package/scss/_scrolling.scss +107 -0
- package/scss/_style_classes.scss +21 -8
- package/scss/_theme.scss +1 -0
- package/scss/_toolbar_view.scss +52 -22
- package/scss/_variables.scss +7 -0
- package/scss/_view_switcher.scss +80 -20
- package/scss/adwaita-skin.scss +1 -0
- package/src/adw-button.spec.ts +59 -0
- package/src/adw-carousel.spec.ts +141 -1
- package/src/adw-entry.spec.ts +73 -0
- package/src/adw-header-bar.spec.ts +127 -0
- package/src/adw-menu-button.spec.ts +52 -0
- package/src/adw-tab-view.spec.ts +151 -0
- package/src/bottom-sheet.spec.ts +87 -0
- package/src/chrome.spec.ts +233 -0
- package/src/elements/adw-button.ts +8 -10
- package/src/elements/adw-carousel.ts +121 -4
- package/src/elements/adw-entry.ts +53 -8
- package/src/elements/adw-header-bar.ts +32 -9
- package/src/elements/adw-menu-button.ts +20 -19
- package/src/elements/adw-status-page.ts +7 -2
- package/src/elements/adw-tab-view.ts +63 -3
- package/src/elements/adw-toolbar-view.ts +22 -0
- package/src/index.ts +6 -0
- package/src/scroll-shading.ts +255 -0
- package/src/styles.generated.ts +1 -1
- package/src/test.browser.mts +6 -0
- package/src/view-switcher.spec.ts +149 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const AdwButtonTest: () => Promise<void>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const AdwEntryTest: () => Promise<void>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const AdwMenuButtonTest: () => Promise<void>;
|
|
@@ -19,12 +19,21 @@ export declare class AdwCarousel extends HTMLElement implements CarouselHost {
|
|
|
19
19
|
/** A declared `position` waiting for the track to have a width. */
|
|
20
20
|
private _pendingPosition;
|
|
21
21
|
private _pendingLayout;
|
|
22
|
+
/** Watches the carousel's own width, which caps the page size. */
|
|
23
|
+
private _layoutObserver;
|
|
22
24
|
/**
|
|
23
25
|
* `interactive` for the scroll now in flight: the flag of the request that
|
|
24
26
|
* started it, or `null` for a scroll we did not start — which is a user drag,
|
|
25
27
|
* and therefore interactive.
|
|
26
28
|
*/
|
|
27
29
|
private _pendingInteractive;
|
|
30
|
+
/**
|
|
31
|
+
* The page an issued scroll is travelling TO, `null` once it has arrived:
|
|
32
|
+
* `self->animation_target_child`. Held as the page's ID and not its index, for the
|
|
33
|
+
* same reason C holds a widget, since an insert or a reorder in between moves the
|
|
34
|
+
* index while the target page stays the target.
|
|
35
|
+
*/
|
|
36
|
+
private _scrollTargetId;
|
|
28
37
|
static get observedAttributes(): string[];
|
|
29
38
|
constructor();
|
|
30
39
|
get nPages(): number;
|
|
@@ -50,8 +59,14 @@ export declare class AdwCarousel extends HTMLElement implements CarouselHost {
|
|
|
50
59
|
get spacing(): number;
|
|
51
60
|
set spacing(value: number);
|
|
52
61
|
connectedCallback(): void;
|
|
62
|
+
private _build;
|
|
53
63
|
attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
|
|
54
64
|
disconnectedCallback(): void;
|
|
65
|
+
/**
|
|
66
|
+
* Re-run the page allocation whenever the carousel's own width changes: the page
|
|
67
|
+
* size is capped by it, so a resize can turn a peek into a full-width page and back.
|
|
68
|
+
*/
|
|
69
|
+
private _observeLayout;
|
|
55
70
|
private _applyAttribute;
|
|
56
71
|
/**
|
|
57
72
|
* Scroll to `value`, waiting for the first layout when the track has no width yet:
|
|
@@ -95,6 +110,25 @@ export declare class AdwCarousel extends HTMLElement implements CarouselHost {
|
|
|
95
110
|
private _insert;
|
|
96
111
|
private _idOf;
|
|
97
112
|
private _syncTrack;
|
|
113
|
+
/**
|
|
114
|
+
* Size the pages as `adw_carousel_size_allocate` does, and centre the strip in the
|
|
115
|
+
* carousel.
|
|
116
|
+
*
|
|
117
|
+
* A page is NOT the carousel's width. Every page is allocated the same size, the
|
|
118
|
+
* largest natural one capped at the carousel (adw-carousel.c:748-765), and the strip
|
|
119
|
+
* is drawn at an offset of `-(width - child_width) / 2` (:801), so whatever is left
|
|
120
|
+
* over shows the previous and next page at the two edges. The `flex: 0 0 100%` this
|
|
121
|
+
* replaces reproduced only the case where nothing is left over: the 440px pages of
|
|
122
|
+
* the Carousel story sat in a 480px carousel with both neighbours entirely off
|
|
123
|
+
* screen, where GTK shows 20px of each.
|
|
124
|
+
*
|
|
125
|
+
* The inset is track PADDING paired with `scroll-snap-align: center`, which is what
|
|
126
|
+
* keeps `scrollLeft = position * distance` true either way: page i then snaps at
|
|
127
|
+
* `inset + i * distance + pageSize / 2 - available / 2`, and the two insets cancel.
|
|
128
|
+
*
|
|
129
|
+
* Returns whether the page size, and with it the scroll pitch, actually moved.
|
|
130
|
+
*/
|
|
131
|
+
private _allocatePages;
|
|
98
132
|
/**
|
|
99
133
|
* Put the scroll offset back where the model says it is, instantly. A page revealed
|
|
100
134
|
* at or before the current one moves the position with it (`shift_position`)
|
|
@@ -103,6 +137,20 @@ export declare class AdwCarousel extends HTMLElement implements CarouselHost {
|
|
|
103
137
|
* from the allocation that adds the child; here it takes one write.
|
|
104
138
|
*/
|
|
105
139
|
private _applyScrollFromModel;
|
|
140
|
+
/**
|
|
141
|
+
* Which position that write must aim at. Normally the model's, but a scroll still
|
|
142
|
+
* in flight has not reached the model yet: `scrollTo` only ASKS, and `position`
|
|
143
|
+
* catches up from the `scroll` event a frame later. Re-applying the stale position
|
|
144
|
+
* there parks the carousel back where it started and swallows the scroll, which is
|
|
145
|
+
* how `<adw-carousel position="2">` lost its page: the pending-position observer
|
|
146
|
+
* and the layout observer are delivered in ONE resize pass, so the very first
|
|
147
|
+
* allocation landed on a scroll it had just issued.
|
|
148
|
+
*
|
|
149
|
+
* `size_allocate` reaches the same moment and re-aims rather than rewinds: it
|
|
150
|
+
* pushes the recomputed snap point of `animation_target_child` into the running
|
|
151
|
+
* animation (adw-carousel.c:786-788).
|
|
152
|
+
*/
|
|
153
|
+
private _restorePosition;
|
|
106
154
|
/**
|
|
107
155
|
* `allow-long-swipes` in CSS: `scroll-snap-stop: always` forces the scroll to
|
|
108
156
|
* stop at every page, which is exactly what the property being FALSE means —
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
export declare class AdwEntry extends HTMLElement {
|
|
2
2
|
private _input;
|
|
3
3
|
private _initialized;
|
|
4
|
+
private _maxLength;
|
|
4
5
|
static get observedAttributes(): string[];
|
|
5
6
|
get value(): string;
|
|
6
7
|
set value(v: string);
|
|
8
|
+
/** `Gtk.Entry:max-length` — 0 means unlimited. Counted in CODE POINTS. */
|
|
9
|
+
get maxLength(): number;
|
|
10
|
+
set maxLength(value: number);
|
|
11
|
+
/** `Gtk.Entry:text-length` — code points, not UTF-16 units. */
|
|
12
|
+
get textLength(): number;
|
|
7
13
|
/** The inner native input (for focus/selection). */
|
|
8
14
|
get input(): HTMLInputElement;
|
|
9
15
|
connectedCallback(): void;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import './adw-window-title.js';
|
|
1
2
|
export declare class AdwHeaderBar extends HTMLElement {
|
|
2
3
|
private _initialized;
|
|
3
4
|
private _startEl;
|
|
4
5
|
private _centerEl;
|
|
5
6
|
private _endEl;
|
|
6
7
|
/**
|
|
7
|
-
* The
|
|
8
|
-
* took the centre. `Adw.HeaderBar` has the same either/or:
|
|
9
|
-
* `title-widget` replaces the derived `AdwWindowTitle` outright.
|
|
8
|
+
* The derived `<adw-window-title>`, or `null` when a `slot="center"`
|
|
9
|
+
* title-widget took the centre. `Adw.HeaderBar` has the same either/or:
|
|
10
|
+
* setting `title-widget` replaces the derived `AdwWindowTitle` outright.
|
|
10
11
|
*/
|
|
11
12
|
private _titleEl;
|
|
12
13
|
static get observedAttributes(): string[];
|
|
@@ -24,6 +25,6 @@ export declare class AdwHeaderBar extends HTMLElement {
|
|
|
24
25
|
* kept whatever it was created with. `Adw.HeaderBar`'s derived title widget
|
|
25
26
|
* is bound to the property and re-renders on every change.
|
|
26
27
|
*/
|
|
27
|
-
attributeChangedCallback(
|
|
28
|
+
attributeChangedCallback(): void;
|
|
28
29
|
private _renderTitle;
|
|
29
30
|
}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import type { SplitButtonDirection } from '@gjsify/adwaita-core';
|
|
1
|
+
import type { AdwMenuEntry, SplitButtonDirection } from '@gjsify/adwaita-core';
|
|
2
2
|
import './adw-popover.js';
|
|
3
|
-
/**
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
/**
|
|
4
|
+
* A menu entry — `@gjsify/adwaita-core`'s {@link AdwMenuEntry}, re-exported under the
|
|
5
|
+
* name this element has always used.
|
|
6
|
+
*
|
|
7
|
+
* It used to be a SECOND declaration of the same shape, and the NativeScript menu
|
|
8
|
+
* button declared a THIRD that was missing `icon` entirely. One type, so a consumer
|
|
9
|
+
* writing menu entries writes the same object for either renderer.
|
|
10
|
+
*/
|
|
11
|
+
export type AdwMenuItem = AdwMenuEntry;
|
|
9
12
|
export declare class AdwMenuButton extends HTMLElement {
|
|
10
13
|
private _buttonEl;
|
|
11
14
|
private _popoverEl;
|
|
@@ -27,6 +30,14 @@ export declare class AdwMenuButton extends HTMLElement {
|
|
|
27
30
|
set direction(value: SplitButtonDirection);
|
|
28
31
|
connectedCallback(): void;
|
|
29
32
|
attributeChangedCallback(name: string): void;
|
|
33
|
+
/**
|
|
34
|
+
* The `menu` attribute, through the core parser the split button already used.
|
|
35
|
+
*
|
|
36
|
+
* The copy this replaces was weaker in a way markup can reach: it kept `id` and
|
|
37
|
+
* `icon` WHATEVER their runtime type, so `{"label":"Open","id":7}` produced an
|
|
38
|
+
* entry whose `id` is a number in a field typed `string` — and `id` is what the
|
|
39
|
+
* activation event reports. The core parser keeps only string-typed extras.
|
|
40
|
+
*/
|
|
30
41
|
private _parseMenuAttr;
|
|
31
42
|
private _onPopoverToggled;
|
|
32
43
|
private _render;
|
|
@@ -108,6 +108,17 @@ export declare class AdwTabView extends HTMLElement {
|
|
|
108
108
|
private _insertTab;
|
|
109
109
|
private _moveTab;
|
|
110
110
|
private _refreshTab;
|
|
111
|
+
/**
|
|
112
|
+
* `get_tab_position` in the BAR's scroll space: how far the chip sits from the
|
|
113
|
+
* strip's scroll origin, the one coordinate both `scroll_to_tab_full` and
|
|
114
|
+
* `update_visible` compare against the adjustment.
|
|
115
|
+
*
|
|
116
|
+
* Never `offsetLeft`. Nothing in this widget is positioned, so a chip's offsetParent
|
|
117
|
+
* is whichever positioned ancestor the HOST page happens to have; a tab view that
|
|
118
|
+
* merely sits indented then measured every chip against the wrong origin and
|
|
119
|
+
* reported all of them clipped.
|
|
120
|
+
*/
|
|
121
|
+
private _tabPosition;
|
|
111
122
|
/**
|
|
112
123
|
* `tabCloseVisible`, with its pinned gate. `dragging` is constantly false — tab
|
|
113
124
|
* drag-and-drop is compositor work and is not modelled — and `fullyVisible` is
|
|
@@ -117,6 +128,18 @@ export declare class AdwTabView extends HTMLElement {
|
|
|
117
128
|
private _refreshCloseVisibility;
|
|
118
129
|
private _onSelectionChange;
|
|
119
130
|
private _applyActiveState;
|
|
131
|
+
/**
|
|
132
|
+
* `scroll_to_tab_full` (adw-tab-box.c:928-961), called on every selection the way
|
|
133
|
+
* `select_page` calls it (:1728): bring the selected chip inside the BAR's own
|
|
134
|
+
* scroll window, padded by half of whichever is smaller, the chip or the leftover.
|
|
135
|
+
*
|
|
136
|
+
* The bar is the only thing C ever scrolls for a tab: `scroll_to_tab_full` writes
|
|
137
|
+
* `self->adjustment`, the strip's own adjustment, and nothing else. The DOM has no
|
|
138
|
+
* such narrow API: `focus()` and `scrollIntoView()` both walk EVERY scrollable
|
|
139
|
+
* ancestor up to the window. So this moves `scrollLeft` by hand, and the focus call
|
|
140
|
+
* below passes `preventScroll`.
|
|
141
|
+
*/
|
|
142
|
+
private _scrollSelectedTabIntoBar;
|
|
120
143
|
private _applyBarVisibility;
|
|
121
144
|
private _reflectSelected;
|
|
122
145
|
private _applySelectedAttribute;
|
|
@@ -4,6 +4,14 @@ export declare class AdwToolbarView extends HTMLElement {
|
|
|
4
4
|
private _bottomEl;
|
|
5
5
|
private _initialized;
|
|
6
6
|
private _resize;
|
|
7
|
+
/**
|
|
8
|
+
* The scroll indicators for every scroller under this view.
|
|
9
|
+
*
|
|
10
|
+
* Owned HERE and not by a scroller widget, because upstream scopes them here:
|
|
11
|
+
* `toolbarview.undershoot-top scrolledwindow` shades whatever scrolls inside,
|
|
12
|
+
* however deeply nested — a split view's two panes included.
|
|
13
|
+
*/
|
|
14
|
+
private _shading;
|
|
7
15
|
static get observedAttributes(): string[];
|
|
8
16
|
/** The top-bar container — append header bars here imperatively. */
|
|
9
17
|
get topBar(): HTMLDivElement;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ import '@gjsify/adwaita-fonts';
|
|
|
2
2
|
export { addBreakpoints, bindBreakpointSetter } from './breakpoints.js';
|
|
3
3
|
export { ACCENT_BG_PROPERTY, ACCENT_PROPERTY, applyAdwaitaAccent, clearAdwaitaAccent, isAdwaitaDark, } from './accent.js';
|
|
4
4
|
export type { ApplyAccentOptions } from './accent.js';
|
|
5
|
+
export { AdwScrollShading } from './scroll-shading.js';
|
|
6
|
+
export type { AdwUndershootEdges } from './scroll-shading.js';
|
|
5
7
|
export { AdwAvatar } from './elements/adw-avatar.js';
|
|
6
8
|
export { AdwBanner } from './elements/adw-banner.js';
|
|
7
9
|
export { AdwCard } from './elements/adw-card.js';
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/** Which vertical edges may draw an undershoot — a toolbar view's own two flags. */
|
|
2
|
+
export interface AdwUndershootEdges {
|
|
3
|
+
/** `undershoot-top` on the view: the top bar is flat and was allocated a height. */
|
|
4
|
+
top: boolean;
|
|
5
|
+
/** `undershoot-bottom` on the view. */
|
|
6
|
+
bottom: boolean;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Keeps every scroller under a root marked with its live edge indicators.
|
|
10
|
+
*
|
|
11
|
+
* One instance per toolbar view. Scroll and wheel are listened for in the CAPTURE
|
|
12
|
+
* phase on the root: `scroll` does not bubble, but capture propagation runs down
|
|
13
|
+
* the whole path regardless, so one pair of listeners covers scrollers that appear
|
|
14
|
+
* later without re-binding per element.
|
|
15
|
+
*/
|
|
16
|
+
export declare class AdwScrollShading {
|
|
17
|
+
private _root;
|
|
18
|
+
private _mutations;
|
|
19
|
+
private _resize;
|
|
20
|
+
/** The unclamped position per scroller, i.e. `priv->unclamped_vadj_value`. */
|
|
21
|
+
private _unclamped;
|
|
22
|
+
private _settleTimers;
|
|
23
|
+
/** Every scroller currently marked, so teardown and rescans can clear them. */
|
|
24
|
+
private _shaded;
|
|
25
|
+
private _pendingScan;
|
|
26
|
+
private _undershootEdges;
|
|
27
|
+
constructor(root: HTMLElement);
|
|
28
|
+
/**
|
|
29
|
+
* Which edges may draw an UNDERSHOOT. The overshoot glow is not gated: upstream
|
|
30
|
+
* draws it on every `scrolledwindow`, while the undershoot is what a toolbar
|
|
31
|
+
* view turns on for a flat bar and off for a raised one, which has its own
|
|
32
|
+
* shadow (`update_undershoots`).
|
|
33
|
+
*/
|
|
34
|
+
setUndershootEdges(edges: AdwUndershootEdges): void;
|
|
35
|
+
/** Start observing. Idempotent. */
|
|
36
|
+
connect(): void;
|
|
37
|
+
/** Stop observing and clear every class this instance set. */
|
|
38
|
+
disconnect(): void;
|
|
39
|
+
private _scheduleRefresh;
|
|
40
|
+
/** Re-scan for scrollers and re-derive every indicator. */
|
|
41
|
+
refresh(): void;
|
|
42
|
+
private _clear;
|
|
43
|
+
/** Re-derive the undershoot classes of one scroller from its current position. */
|
|
44
|
+
private _update;
|
|
45
|
+
private _onScroll;
|
|
46
|
+
/**
|
|
47
|
+
* The overshoot half. A browser scroll container clamps at its edge and reports
|
|
48
|
+
* nothing further, so the push past it is read off the wheel deltas the
|
|
49
|
+
* container could not consume — which is exactly the value upstream keeps in
|
|
50
|
+
* `unclamped_vadj_value` and clamps one overshoot distance out.
|
|
51
|
+
*/
|
|
52
|
+
private _onWheel;
|
|
53
|
+
private _applyOvershoot;
|
|
54
|
+
/** The nearest shaded scroller at or above a wheel target, root included. */
|
|
55
|
+
private _scrollerFor;
|
|
56
|
+
}
|