@rcarls/rc-app-bar 0.5.0 → 0.7.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +152 -0
  2. package/README.md +92 -22
  3. package/dist/custom-elements.json +140 -8
  4. package/dist/rc-app-bar-DMECo03s.js +247 -0
  5. package/dist/rc-app-bar-DMECo03s.js.map +1 -0
  6. package/dist/rc-app-bar-define.js +1 -1
  7. package/dist/rc-app-bar.js +1 -1
  8. package/dist/types/packages/rc-app-bar/src/index.d.ts +1 -1
  9. package/dist/types/packages/rc-app-bar/src/rc-app-bar.d.ts +68 -4
  10. package/package.json +2 -3
  11. package/dist/rc-app-bar-CPkULic-.js +0 -384
  12. package/dist/rc-app-bar-CPkULic-.js.map +0 -1
  13. package/dist/types/packages/rc-app-bar/src/rc-app-bar.test.d.ts +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,157 @@
1
1
  # @rcarls/rc-app-bar
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 8d6edf2: With `scroll-behavior="hide"`, `rc-app-bar` now publishes read-only geometry onto its scroll
8
+ target: `--rc-app-bar-block-size`, its measured block size, and
9
+ `--rc-app-bar-visible-block-size`, the same value or `0px` while hidden. Hiding only translates
10
+ the bar, so a layout can now give its space back: stack the bar over the scroll container,
11
+ reserve the block size as the container's block-start padding and scroll padding, and pin
12
+ sticky content at the visible size minus the block size, since sticky offsets are measured
13
+ inside that padding. The bar removes both values when it stops hiding, changes
14
+ target, or disconnects.
15
+
16
+ The Material design guide documents this recipe and the compact-height patterns for landscape
17
+ phones: app bars that hide on scroll, side sheets instead of modal bottom sheets, full-screen
18
+ task dialogs, media capped by the pane's height, and single-row sticky chips.
19
+
20
+ - 079e025: Standardize component styling contracts for the breaking 0.7 release.
21
+
22
+ BREAKING CHANGE: Rename the Markdown editor's `--rme-*` properties to
23
+ `--rc-markdown-editor-*`, `--rc-app-bar-background` to `--rc-app-bar-bg`,
24
+ `--rc-textarea-radius` to `--rc-textarea-border-radius`, the transfer-list
25
+ `--rc-transfer-list-panel-*` properties to `--rc-transfer-list-listbox-*`,
26
+ `--rc-chip-group-webkit-scrollbar-display` to
27
+ `--rc-chip-group-scrollbar-display`, and `--rc-text` to `--rc-field-text`.
28
+ Compatibility aliases are intentionally not provided.
29
+
30
+ BREAKING CHANGE: Replace `--rc-select-chip-padding-inline` and
31
+ `--rc-combobox-chip-padding-inline` with explicit `*-padding-inline-start` and
32
+ `*-padding-inline-end` tokens. Generated removable chips now reserve the full
33
+ remove target and its edge offset, so their indicator cannot overlap label text.
34
+
35
+ Add canonical app-bar elevation, transfer-list listbox radius, and textarea
36
+ line-action tokens. Add logical `rc-chip` inline-padding properties so themes
37
+ can implement Material's icon-aware spacing without overriding authored child
38
+ styles. Make `rc-field` consume the shared semantic token layer,
39
+ and place the `rc-chip` and `rc-search-bar` light-DOM structural styles in the
40
+ `rc-base` cascade layer so normal consumer rules override them.
41
+
42
+ Prevent decorative, `aria-hidden` trailing list content from intercepting a
43
+ whole-row action target, and keep segmented-list item geometry from leaking
44
+ into nested standard lists.
45
+
46
+ Remove unused Material navigation-rail toggle tokens and obsolete list-item
47
+ theme tokens. Register the segmented-button private theme seam and enforce
48
+ token ownership, documentation, removed-name, selector-budget, and cascade
49
+ layer contracts through the component architecture audit.
50
+
51
+ - 6e548d9: Several components handle `prefers-reduced-motion: reduce` in their own
52
+ shadow styles, outside a theme's reach, and refine it the same way the theme
53
+ layer already does: spatial motion (`translate`, `scale`, `transform`,
54
+ `inline-size`, `block-size`) goes fully to zero, while effects motion (color,
55
+ opacity) shortens instead of disappearing.
56
+
57
+ `rc-app-bar` zeros its host's hide/show `translate` but shortens the
58
+ expanded title's fade-in. `rc-disclosure` keeps its panel's expand/collapse
59
+ zeroed, but its summary/content backstop for a theme-added transition now
60
+ shortens instead of zeroing it outright. `rc-list-item`'s row and
61
+ state-layer transition only color and opacity, so the whole sweep shortens.
62
+ `rc-fab-menu`'s popup mixes `scale` with opacity/overlay/display under one
63
+ shared duration; reduced motion now zeros the scale and shortens the rest.
64
+ `rc-switch`'s thumb mixes background-color with inline-size/block-size/
65
+ transform the same way; the icons and track, which each transition only one
66
+ kind of property, needed only the zero-or-shorten call. `rc-fab`'s
67
+ scroll-reveal is opacity/visibility only with no time-based duration to
68
+ shorten in its scroll-linked path, so reduced motion narrows the scroll
69
+ window instead of collapsing it to zero; its JS-transition fallback path
70
+ shortens the same fade rather than removing it. `rc-progress`'s determinate
71
+ fill transition, previously unguarded under reduced motion, is now zeroed;
72
+ its indeterminate loop, a continuous sweep with no meaningful shortened
73
+ form, stays fully stopped rather than shortened.
74
+
75
+ ### Patch Changes
76
+
77
+ - 6f1df83: A bar with `scroll-behavior="hide"` now hides or reveals only after its scroll target travels
78
+ `hide-distance` (32px by default) in one direction. It used to reveal on any upward scroll, so a
79
+ 1px reversal while reading or as a fling settled brought it back. Near the top it still always
80
+ shows. A hidden bar reveals itself when focus moves into it and stays visible until focus leaves.
81
+ - b0a63ef: Calculate expanded app-bar collapse progress in the bar's CSS coordinate space
82
+ when its scroll target and the bar have different effective CSS zoom.
83
+ - 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
84
+ and light-DOM structural styles through Lightning CSS, removing comments and
85
+ whitespace while keeping source maps that resolve to each template. Rendered
86
+ styles are unchanged.
87
+
88
+ `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
89
+ string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
90
+ depend on `@rcarls/rc-common` for it.
91
+
92
+ - a6553ff: Batch layout sampling into a shared animation-frame read phase so mounting a
93
+ large component route no longer alternates forced layout reads with component
94
+ writes. Closed anchored popups now skip placement work until they open, while
95
+ scroller boundaries, carousel positioning, flow state, and opted-in initial
96
+ scroll observation settle before the next paint.
97
+
98
+ Add `RafScheduler.schedulePhased()`, live `AnchorController.disabled` getters,
99
+ and the `ScrollObserverController.initialEvaluation` timing option.
100
+
101
+ - Updated dependencies [e3dfa59]
102
+ - Updated dependencies [50d5610]
103
+ - Updated dependencies [9ee769c]
104
+ - Updated dependencies [1179f24]
105
+ - Updated dependencies [595fe37]
106
+ - Updated dependencies [38cd00c]
107
+ - Updated dependencies [5c006de]
108
+ - Updated dependencies [a6553ff]
109
+ - Updated dependencies [2205478]
110
+ - Updated dependencies [4341311]
111
+ - Updated dependencies [899bb5e]
112
+ - Updated dependencies [25fcfe0]
113
+ - Updated dependencies [51f6403]
114
+ - Updated dependencies [9caca6b]
115
+ - Updated dependencies [b764a3c]
116
+ - Updated dependencies [54d9ead]
117
+ - Updated dependencies [b9175e9]
118
+ - Updated dependencies [c8b762b]
119
+ - Updated dependencies [55e1e7f]
120
+ - Updated dependencies [f1ca82d]
121
+ - Updated dependencies [b87f27b]
122
+ - Updated dependencies [32ebead]
123
+ - Updated dependencies [bfefedd]
124
+ - Updated dependencies [c130173]
125
+ - Updated dependencies [11680b6]
126
+ - Updated dependencies [223d36c]
127
+ - Updated dependencies [7b91a44]
128
+ - Updated dependencies [aa04ead]
129
+ - Updated dependencies [ac65b5b]
130
+ - Updated dependencies [afcfef8]
131
+ - Updated dependencies [11ef1ad]
132
+ - @rcarls/rc-common@0.7.0
133
+
134
+ ## 0.6.0
135
+
136
+ ### Minor Changes
137
+
138
+ - b6f52a2: Change the default `slot="center"` layout: it now fills the flexible space
139
+ between leading and trailing, capped by the new
140
+ `--rc-app-bar-center-max-inline-size` before it centers within available
141
+ space instead of continuing to stretch, rather than always mirroring the
142
+ leading/trailing edges to stay exactly viewport-centered. Add the new
143
+ `center-symmetric` attribute to keep the previous behavior (exact
144
+ viewport-centering regardless of asymmetric leading/trailing widths).
145
+
146
+ ### Patch Changes
147
+
148
+ - b6f52a2: Defer app-bar layout measurements to animation frames, group geometry reads
149
+ before style writes, and remeasure when symmetric centering changes live.
150
+ - Updated dependencies [6683eb9]
151
+ - Updated dependencies [ee7ba6c]
152
+ - Updated dependencies [30eb232]
153
+ - @rcarls/rc-common@0.6.0
154
+
3
155
  ## 0.5.0
4
156
 
5
157
  ### Minor Changes
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # `@rcarls/rc-app-bar`
2
2
 
3
- App bar modeled after the [Material 3 Top app bar](https://m3.material.io/components/top-app-bar/overview), with leading, title, center, trailing regions and optional scroll behavior.
3
+ App bar modeled after the
4
+ [Material 3 Top app bar](https://m3.material.io/components/top-app-bar/overview),
5
+ with leading, title, center, trailing regions and optional scroll behavior.
4
6
 
5
7
  Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-app-bar](https://richardcarls.github.io/rc-webcomponents/components/rc-app-bar).
6
8
 
@@ -41,11 +43,7 @@ duplicated while the bar changes layout.
41
43
  comes from the title content rather than a Material-specific fixed size.
42
44
 
43
45
  ```html
44
- <rc-app-bar
45
- variant="expanded"
46
- scroll-behavior="collapse"
47
- scroll-target="#content"
48
- >
46
+ <rc-app-bar variant="expanded" scroll-behavior="collapse" scroll-target="#content">
49
47
  <button slot="leading" aria-label="Back">&larr;</button>
50
48
  <div>
51
49
  <strong>Slow-Roasted Tomato Pasta</strong>
@@ -61,18 +59,62 @@ Scroll behaviors are exclusive:
61
59
  - `collapse` continuously shrinks an expanded title row over its measured
62
60
  height, then keeps the compact row visible.
63
61
  - `hide` hides the complete bar while scrolling down past `scroll-threshold`
64
- and reveals it when scrolling up or returning near the top.
62
+ and reveals it when scrolling up, returning near the top, or when focus
63
+ moves into the bar, so keyboard focus never lands off screen. The bar stays
64
+ visible while it contains focus. It hides or reveals only after the target
65
+ scrolls `hide-distance` (32px by default) in
66
+ one direction, so small reversals while reading or as a fling settles leave
67
+ it as it is.
65
68
 
66
69
  The component never consumes, stops, or rewrites the document's scroll.
67
70
 
68
- ## Exact-center composition
71
+ `hide` only translates the bar, so on its own it frees no layout space. While
72
+ hiding, the bar publishes read-only geometry onto its scroll target:
73
+ `--rc-app-bar-block-size` (its measured block size) and
74
+ `--rc-app-bar-visible-block-size` (the same, or `0px` while hidden). Let the
75
+ scroll container run under the bar and reserve that size, so content scrolls
76
+ behind the bar and fills its space while it is hidden:
69
77
 
70
- The optional `center` slot remains at the host's geometric midpoint even when
71
- leading and trailing controls have different widths. This is useful for
72
- desktop controls or an [`rc-search-bar`](../rc-search-bar/):
78
+ ```css
79
+ .screen {
80
+ display: grid;
81
+ grid-template: 'stack' 1fr / 1fr;
82
+ }
83
+
84
+ .screen > header,
85
+ .screen > .content {
86
+ grid-area: stack;
87
+ }
88
+
89
+ .screen > header {
90
+ z-index: 1;
91
+ align-self: start;
92
+ }
93
+
94
+ .content {
95
+ overflow-y: auto;
96
+ padding-block-start: var(--rc-app-bar-block-size, 4rem);
97
+ scroll-padding-block-start: var(--rc-app-bar-block-size, 4rem);
98
+ }
99
+
100
+ .content .sticky-filters {
101
+ position: sticky;
102
+ /* Sticky offsets are measured inside the scroller's padding. */
103
+ inset-block-start: calc(
104
+ var(--rc-app-bar-visible-block-size, 4rem) - var(--rc-app-bar-block-size, 4rem)
105
+ );
106
+ transition: inset-block-start 200ms ease;
107
+ }
108
+ ```
109
+
110
+ ## Center-slot composition
111
+
112
+ The optional `center` slot, useful for desktop controls or an
113
+ [`rc-search-bar`](../rc-search-bar/), fills the flexible space between leading
114
+ and trailing by default:
73
115
 
74
116
  ```html
75
- <rc-app-bar>
117
+ <rc-app-bar style="--rc-app-bar-center-max-inline-size: 32rem;">
76
118
  <button slot="leading">Back</button>
77
119
  <span>Recipes</span>
78
120
  <rc-search-bar slot="center" placeholder="Search recipes">
@@ -82,6 +124,28 @@ desktop controls or an [`rc-search-bar`](../rc-search-bar/):
82
124
  </rc-app-bar>
83
125
  ```
84
126
 
127
+ Uncapped, it stretches edge-to-edge like any other content in that space. Set
128
+ `--rc-app-bar-center-max-inline-size` and it centers within the available
129
+ space once it hits that width instead of continuing to stretch (centered
130
+ between wherever leading ends and trailing begins, not on the bar's own
131
+ viewport midpoint).
132
+
133
+ For a control that must sit at the bar's exact geometric midpoint regardless
134
+ of asymmetric leading/trailing widths, add `center-symmetric`:
135
+
136
+ ```html
137
+ <rc-app-bar center-symmetric>
138
+ <button slot="leading">Long leading label</button>
139
+ <span>Recipes</span>
140
+ <rc-search-bar slot="center">...</rc-search-bar>
141
+ <button slot="trailing" aria-label="Account">Account</button>
142
+ </rc-app-bar>
143
+ ```
144
+
145
+ This mirrors the leading/trailing edge widths so the center slot stays
146
+ viewport-centered even when the two sides differ, at the cost of extra reserved
147
+ space on whichever side is narrower.
148
+
85
149
  Title and center content may coexist. The title is constrained before it can
86
150
  overlap the centered content. Without center content, the title uses all space
87
151
  between leading and trailing controls; consumers may apply
@@ -186,16 +250,22 @@ rc-app-bar.glass::part(root) {
186
250
 
187
251
  ### CSS custom properties
188
252
 
189
- | Property | Default | Description |
190
- | --- | --- | --- |
191
- | `--rc-app-bar-bg` | `Canvas` | Bar background |
192
- | `--rc-app-bar-color` | `CanvasText` | Bar text color |
193
- | `--rc-app-bar-compact-min-height` | `3rem` | Compact row minimum height |
194
- | `--rc-app-bar-expanded-padding-block` | `0.75em` | Expanded title block padding |
195
- | `--rc-app-bar-padding-inline` | `0.75em` | Horizontal padding |
196
- | `--rc-app-bar-gap` | `0.5em` | Gap between regions |
197
- | `--rc-app-bar-transition-duration` | `200ms` | Endpoint and hide transition duration |
198
- | `--rc-app-bar-scroll-divider` | `1px solid GrayText` | Scrolled separator border |
253
+ | Property | Default | Description |
254
+ | --------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
255
+ | `--rc-app-bar-bg` | `Canvas` | Bar background |
256
+ | `--rc-app-bar-color` | `CanvasText` | Bar text color |
257
+ | `--rc-app-bar-shadow` | `none` | Bar box shadow |
258
+ | `--rc-app-bar-compact-min-height` | `3rem` | Compact row minimum height |
259
+ | `--rc-app-bar-expanded-padding-block` | `0.75em` | Expanded title block padding |
260
+ | `--rc-app-bar-padding-inline` | `0.75em` | Horizontal padding |
261
+ | `--rc-app-bar-gap` | `0.5em` | Gap between regions |
262
+ | `--rc-app-bar-center-max-inline-size` | `100%` | Max width of `slot="center"` content before it centers within the available space instead of filling it. No effect when `center-symmetric` is set. |
263
+ | `--rc-app-bar-title-start-padding` | `0px` | Extra title inline-start padding when the leading slot is empty |
264
+ | `--rc-app-bar-transition-duration` | `200ms` | Endpoint and hide transition duration |
265
+ | `--rc-app-bar-scroll-divider` | `1px solid GrayText` | Scrolled separator border |
266
+ | `--rc-app-bar-collapse-progress` | `0` | Read-only collapse animation progress from 0 through 1 |
267
+ | `--rc-app-bar-title-font-size` | unset | Optional compact-row title font size; inherits when unset |
268
+ | `--rc-app-bar-expanded-title-font-size` | unset | Optional expanded-row title font size; inherits when unset |
199
269
 
200
270
  ### CSS parts
201
271
 
package/dist/custom-elements.json CHANGED
@@ -35,7 +35,7 @@
35
35
  "name": "*",
36
36
  "declaration": {
37
37
  "name": "*",
38
- "module": "src/rc-app-bar"
38
+ "module": "src/rc-app-bar.js"
39
39
  }
40
40
  }
41
41
  ]
@@ -46,7 +46,7 @@
46
46
  "declarations": [
47
47
  {
48
48
  "kind": "class",
49
- "description": "App bar modeled after the Material 3 Top app bar, with leading, title, center, trailing\nregions and optional scroll behavior.\n\nThe element carries no landmark role. Consumers provide all controls and\nicons, and wrap page-level instances in `<header>` when a banner landmark is\nappropriate.\n\nScrolled state is dual-mode. Uncontrolled: set `scrollTarget` (or the\n`scroll-target` selector attribute) and the bar observes the container.\nControlled: assign `scrolled`; assigning `undefined` releases observation.\nHost writes are silent.\n\nEnvironment-driven state (scrolled, collapsed, hidden) is exposed as\n`data-scrolled`, `data-collapsed`, and `data-hidden` attributes with\nequivalent `:state(scrolled)`, `:state(collapsed)`, and `:state(hidden)`\nElementInternals custom states. These are computed outputs, not settable\nattributes.",
49
+ "description": "App bar modeled after the Material 3 Top app bar, with leading, title, center, trailing\nregions and optional scroll behavior.\n\nThe element carries no landmark role. Consumers provide all controls and\nicons, and wrap page-level instances in `<header>` when a banner landmark is\nappropriate.\n\nScrolled state is dual-mode. Uncontrolled: set `scrollTarget` (or the\n`scroll-target` selector attribute) and the bar observes the container.\nControlled: assign `scrolled`; assigning `undefined` releases observation.\nHost writes are silent.\n\nEnvironment-driven state (scrolled, collapsed, hidden) is exposed as\n`data-scrolled`, `data-collapsed`, and `data-hidden` attributes with\nequivalent `:state(scrolled)`, `:state(collapsed)`, and `:state(hidden)`\nElementInternals custom states. These are computed outputs, not settable\nattributes.\n\nA hidden bar reveals itself when focus moves into it and stays visible\nwhile it contains focus.\n\nWith `scroll-behavior=\"hide\"`, the bar also publishes its geometry onto its\nscroll target, the element it observes (`document.documentElement` for\n`window`): `--rc-app-bar-block-size` is its measured block size and\n`--rc-app-bar-visible-block-size` is the same value, or `0px` while hidden.\nHiding only translates the bar, so a layout wins the space back by letting\nthe scroll container run under the bar, reserving\n`var(--rc-app-bar-block-size)` as its block-start padding and scroll\npadding. Sticky offsets are measured inside that padding, so a sticky\ndescendant pins at `calc(var(--rc-app-bar-visible-block-size) -\nvar(--rc-app-bar-block-size))`, while a fixed descendant of a wrapper\nwithout that padding pins at `var(--rc-app-bar-visible-block-size)`. These\nare read-only outputs: the\nbar overwrites them on every size or visibility change and removes them\nwhen it stops hiding, changes target, or disconnects.",
50
50
  "name": "RCAppBar",
51
51
  "cssProperties": [
52
52
  {
@@ -59,6 +59,11 @@
59
59
  "name": "--rc-app-bar-color",
60
60
  "default": "CanvasText"
61
61
  },
62
+ {
63
+ "description": "Bar box shadow",
64
+ "name": "--rc-app-bar-shadow",
65
+ "default": "none"
66
+ },
62
67
  {
63
68
  "description": "Compact row minimum height",
64
69
  "name": "--rc-app-bar-compact-min-height",
@@ -79,6 +84,11 @@
79
84
  "name": "--rc-app-bar-gap",
80
85
  "default": "0.5em"
81
86
  },
87
+ {
88
+ "description": "Max width of `slot=\"center\"` content before it centers within the available space instead of filling it. No effect when `center-symmetric` is set.",
89
+ "name": "--rc-app-bar-center-max-inline-size",
90
+ "default": "100%"
91
+ },
82
92
  {
83
93
  "description": "Extra title inline-start padding used only when the leading slot is empty (M3: align with content below when there's no navigation icon)",
84
94
  "name": "--rc-app-bar-title-start-padding",
@@ -99,6 +109,14 @@
99
109
  "name": "--rc-app-bar-collapse-progress",
100
110
  "default": "0"
101
111
  },
112
+ {
113
+ "description": "Read-only output on the scroll target in hide mode: the bar's measured block size.",
114
+ "name": "--rc-app-bar-block-size"
115
+ },
116
+ {
117
+ "description": "Read-only output on the scroll target in hide mode: the bar's block size while shown, `0px` while hidden.",
118
+ "name": "--rc-app-bar-visible-block-size"
119
+ },
102
120
  {
103
121
  "description": "Compact-row title font size (opt-in; inherits when unset)",
104
122
  "name": "--rc-app-bar-title-font-size"
@@ -144,7 +162,7 @@
144
162
  "name": ""
145
163
  },
146
164
  {
147
- "description": "Content kept at the exact horizontal center, such as search",
165
+ "description": "Content such as search, kept within the flexible middle column between leading and trailing. Fills that column by default, capped and self-centered within it via `--rc-app-bar-center-max-inline-size`; add `center-symmetric` for exact viewport centering regardless of asymmetric leading/trailing content instead.",
148
166
  "name": "center"
149
167
  },
150
168
  {
@@ -164,6 +182,17 @@
164
182
  "attribute": "variant",
165
183
  "reflects": true
166
184
  },
185
+ {
186
+ "kind": "field",
187
+ "name": "centerSymmetric",
188
+ "type": {
189
+ "text": "boolean"
190
+ },
191
+ "default": "false",
192
+ "description": "Opt-in: mirrors the leading/trailing edge widths so `slot=\"center\"`\ncontent stays exactly viewport-centered regardless of asymmetric side\ncontent. Default (absent): center content fills the flexible middle\ncolumn like a plain title, capped and self-centered within it via\n`--rc-app-bar-center-max-inline-size` -- centered within the available\nspace between leading and trailing, not mirrored to the viewport.",
193
+ "attribute": "center-symmetric",
194
+ "reflects": true
195
+ },
167
196
  {
168
197
  "kind": "field",
169
198
  "name": "scrollBehavior",
@@ -195,6 +224,16 @@
195
224
  "description": "Scroll offset in px past which the bar is scrolled (strict `>`).",
196
225
  "attribute": "scroll-threshold"
197
226
  },
227
+ {
228
+ "kind": "field",
229
+ "name": "hideDistance",
230
+ "type": {
231
+ "text": "number"
232
+ },
233
+ "default": "32",
234
+ "description": "With `scroll-behavior=\"hide\"`, how far in px the target must scroll in one\ndirection before the bar hides or reveals, so a small reversal while\nreading or a fling settling does not toggle it. Within `scrollThreshold`\nof the top the bar always shows.",
235
+ "attribute": "hide-distance"
236
+ },
198
237
  {
199
238
  "kind": "field",
200
239
  "name": "_scrolled",
@@ -204,6 +243,16 @@
204
243
  "privacy": "private",
205
244
  "default": "undefined"
206
245
  },
246
+ {
247
+ "kind": "field",
248
+ "name": "_hideTravel",
249
+ "type": {
250
+ "text": "number"
251
+ },
252
+ "privacy": "private",
253
+ "default": "0",
254
+ "description": "Signed scroll travel since the last change of direction, in hide mode."
255
+ },
207
256
  {
208
257
  "kind": "field",
209
258
  "name": "_observedScrolled",
@@ -260,7 +309,7 @@
260
309
  },
261
310
  {
262
311
  "kind": "field",
263
- "name": "_collapseDistance",
312
+ "name": "_collapseDistanceHostCssPx",
264
313
  "type": {
265
314
  "text": "number"
266
315
  },
@@ -269,7 +318,7 @@
269
318
  },
270
319
  {
271
320
  "kind": "field",
272
- "name": "_collapseOffsetDistance",
321
+ "name": "_collapseOffsetHostCssPx",
273
322
  "type": {
274
323
  "text": "number"
275
324
  },
@@ -305,6 +354,33 @@
305
354
  "privacy": "private",
306
355
  "default": "null"
307
356
  },
357
+ {
358
+ "kind": "field",
359
+ "name": "_hostResizeObserver",
360
+ "type": {
361
+ "text": "ResizeObserver | null"
362
+ },
363
+ "privacy": "private",
364
+ "default": "null"
365
+ },
366
+ {
367
+ "kind": "field",
368
+ "name": "_blockSize",
369
+ "type": {
370
+ "text": "number"
371
+ },
372
+ "privacy": "private",
373
+ "default": "0"
374
+ },
375
+ {
376
+ "kind": "field",
377
+ "name": "_$geometryTarget",
378
+ "type": {
379
+ "text": "HTMLElement | null"
380
+ },
381
+ "privacy": "private",
382
+ "default": "null"
383
+ },
308
384
  {
309
385
  "kind": "field",
310
386
  "name": "_layoutMeasure",
@@ -317,7 +393,7 @@
317
393
  "name": "_scroll",
318
394
  "privacy": "private",
319
395
  "readonly": true,
320
- "default": "new ScrollObserverController(this, { target: () => this._resolveScrollTarget(), threshold: this.scrollThreshold, disabled: true, onChange: (scrolled) => { this._observedScrolled = scrolled; this._syncVisualState(); this.dispatchEvent( new CustomEvent<RCAppBarScrollDetail>('rc-app-bar-scroll', { bubbles: true, composed: true, detail: { scrolled }, }), ); }, onScroll: (scrollTop, delta) => this._onObservedScroll(scrollTop, delta), })"
396
+ "default": "new ScrollObserverController(this, { target: () => this._resolveScrollTarget(), threshold: this.scrollThreshold, initialEvaluation: 'frame', disabled: true, onChange: (scrolled) => { this._observedScrolled = scrolled; this._syncVisualState(); this.dispatchEvent( new CustomEvent<RCAppBarScrollDetail>('rc-app-bar-scroll', { bubbles: true, composed: true, detail: { scrolled }, }), ); }, onScroll: (scrollTop, delta) => this._onObservedScroll(scrollTop, delta), })"
321
397
  },
322
398
  {
323
399
  "kind": "field",
@@ -417,13 +493,13 @@
417
493
  },
418
494
  "parameters": [
419
495
  {
420
- "name": "scrollTop",
496
+ "name": "scrollTopCssPx",
421
497
  "type": {
422
498
  "text": "number"
423
499
  }
424
500
  },
425
501
  {
426
- "name": "delta",
502
+ "name": "deltaCssPx",
427
503
  "type": {
428
504
  "text": "number"
429
505
  }
@@ -492,6 +568,13 @@
492
568
  }
493
569
  ]
494
570
  },
571
+ {
572
+ "kind": "field",
573
+ "name": "_onFocusIn",
574
+ "privacy": "private",
575
+ "readonly": true,
576
+ "description": "Reveal the bar and start fresh after focus enters it."
577
+ },
495
578
  {
496
579
  "kind": "method",
497
580
  "name": "_setHidden",
@@ -510,6 +593,37 @@
510
593
  }
511
594
  ]
512
595
  },
596
+ {
597
+ "kind": "method",
598
+ "name": "_syncGeometryOutputs",
599
+ "privacy": "private",
600
+ "return": {
601
+ "type": {
602
+ "text": "void"
603
+ }
604
+ },
605
+ "description": "Publishes geometry onto the scroll target while the bar can hide, and\nremoves it from a target the bar no longer publishes to."
606
+ },
607
+ {
608
+ "kind": "method",
609
+ "name": "_resolveGeometryTarget",
610
+ "privacy": "private",
611
+ "return": {
612
+ "type": {
613
+ "text": "HTMLElement | null"
614
+ }
615
+ }
616
+ },
617
+ {
618
+ "kind": "method",
619
+ "name": "_writeGeometryOutputs",
620
+ "privacy": "private",
621
+ "return": {
622
+ "type": {
623
+ "text": "void"
624
+ }
625
+ }
626
+ },
513
627
  {
514
628
  "kind": "method",
515
629
  "name": "_syncStateOutputs",
@@ -605,6 +719,24 @@
605
719
  },
606
720
  "default": "4",
607
721
  "fieldName": "scrollThreshold"
722
+ },
723
+ {
724
+ "description": "With `scroll-behavior=\"hide\"`, how far in px the target must scroll in one\ndirection before the bar hides or reveals, so a small reversal while\nreading or a fling settling does not toggle it. Within `scrollThreshold`\nof the top the bar always shows.",
725
+ "name": "hide-distance",
726
+ "type": {
727
+ "text": "number"
728
+ },
729
+ "default": "32",
730
+ "fieldName": "hideDistance"
731
+ },
732
+ {
733
+ "description": "Opt-in: mirrors the leading/trailing edge widths so `slot=\"center\"`\ncontent stays exactly viewport-centered regardless of asymmetric side\ncontent. Default (absent): center content fills the flexible middle\ncolumn like a plain title, capped and self-centered within it via\n`--rc-app-bar-center-max-inline-size` -- centered within the available\nspace between leading and trailing, not mirrored to the viewport.",
734
+ "name": "center-symmetric",
735
+ "type": {
736
+ "text": "boolean"
737
+ },
738
+ "default": "false",
739
+ "fieldName": "centerSymmetric"
608
740
  }
609
741
  ],
610
742
  "superclass": {